4. Gateway Transactions
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.
gatewayTransaction.outSetup
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:
loading...
Implementation​
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:
loading...
We can now write the return statement, starting with showing some information about the Gateway Transaction. Inside a return (<div>...</div>) statement, add:
loading...
We then show the three chain transactions:
gatewayTx.in
We pass in the setInProgress function as the onProgress callback.
loading...
gatewayTx.renVM
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.
loading...
gatewayTx.out
loading...
Click to see full code for GatewayTx.tsx
loading...