As described in the Introducton, the RenJS hierarchy looks like:
The interface for the ChainTx component will look like this:
Chain Transactions have an
eventListener member which emits
"progress" events whenever the state of the transaction changes - this includes confirmations, transaction hashes, error messages, et. cetera.
In order to listen to these events, we store the latest event in a React state hook, and use an effect hook to set up the event listener.
We now check the status of the transaction, and handle each status type accordingly, inside the return statement -
To help keep this tutorial from getting too long, we've made a simple component
AsyncButton in the package
async-button which deals with calling an asynchronous function after a button click.
AsyncButton extends the standard HTML button with the following props:
If the chain transaction hasn't been submitted yet, its status will be
"ready", and the component should show a button to the user for submitting the transaction.
After putting this all together, you'll now have a component that can handle chain transactions for any chain.