Skip to main content

3. Chain Transactions

Tutorial

As described in the Introducton, the RenJS hierarchy looks like:

Starting at the bottom, we'll write a button component ChainTx for handling chain transactions. Chain transactions in RenJS implement either the TxWaiter or the TxSubmitter interface.

The interface for the ChainTx component will look like this:

src/ChainTx.tsx
loading...

Progress

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.

loading...

Chain Status

We now check the status of the transaction, and handle each status type accordingly, inside the return statement - return (<>...</>);.

Async Button

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:

loading...

1. "ready"

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.

loading...

2. "confirming"

loading...

3. "done"

loading...

4. "reverted"

loading...

After putting this all together, you'll now have a component that can handle chain transactions for any chain.

Click to see full code for ChainTx.tsx
ChainTx.tsx
loading...