Bringing everything together, we'll now write the App component in
Firstly, we'll want to initialize RenJS and the chains that we'll be using.
We'll initialize the Ethereum class with a public JSON-RPC endpoint, but we won't pass it a signer yet, since we do that in CreateGateway.tsx.
Replace the existing code in the App component with the following (
useStates are used for compactness - replace with
useRefs if required):
and update the imports:
Next, we want to store the list of all Gateway Transactions we've seen so far:
When a new gateway is created, we want to store it and listen for new Gateway Transactions:
The return statement of
App will now link the gateway and gatewayTxs states with the components we made in the previous sections.
And finally, we loop through
gatewayTxs and show a
GatewayTx for each transaction:
Click to see full code for App.tsx
That's the last component - you can now run the site in your browser to test it out.
Make sure you have a Web3 wallet installed (such as MetaMask), and connect it to the right network (Kovan for Ethereum testnet).
You will need testnet BTC and Kovan ETH, which can be found here:
Note that the block times for testnet Bitcoin transactions vary a lot - for faster development, switch to a faster chain like Terra and LUNA - replace all references to
LUNA. You can send LUNA to the gateway address using https://faucet.terra.money/.
The Kovan RPC endpoint is occasionally unavailable - you can replace all references to
Goerli to use the Görli Ethereum testnet instead.
This tutorial does not cover all the required information to write a production RenJS integration.
Continue reading through the docs to learn about:
- Setup transactions
- Persistent storage and resuming gateways
- Gateway expiry
Creating a gateway: