The next level up in the hierarchy is Gateway Transactions. Each of these will have three associated Chain Transactions, so we'll want to show a ChainTx component for each, as well as showing some details about the Gateway Transaction.
Note that some Gateway Transactions may have additional setup transactions required to be submitted before the output transaction. For example, minting to Solana requies creating a token account before the mint can be completed. These transactions will be found in
gatewayTx.outSetup - to update the example below to support Solana, loop through the
gatewayTx.outSetup object and show an additional ChainTx component for each.
The interface of the GatewayTransaction component is as follows:
Firstly, we'll want to only show one active Chain Transaction at a time. In order to know when to enable the next Chain Transaction component, we need to know the progress status of the first two transactions:
We can now write the return statement, starting with showing some information about the Gateway Transaction. Inside a
return (<div>...</div>) statement, add:
We then show the three chain transactions:
We pass in the
setInProgress function as the onProgress callback.
Again we pass in the onProgress callback. We also disable the button if
gatewayTx.in isn't done yet, and tell it to auto-submit the transaction when it's ready.