Skip to main content

5. Gateways

Tutorial

At the top of the hierarchy is the Gateway, which allows users to initiate Gateway Transactions. A Gateway can be one of two types:

  1. Deposit gateway - where the user deposits funds to a gateway address
  2. Contract gateway - where the user will call a contract which will emit lock or burn events

The CreateGateway component will show a button to create a gateway, and then will show the gateway based on what type it is.

The interface of CreateGateway.tsx looks like:

CreateGateway.tsx
loading...

connectWeb3Wallet​

This helper function handles conecting a Web3 wallet, such as MetaMask. Put this at the top level of CreateGateway.tsx:

loading...

Component implementation​

At the top of the component, we'll define the asset and chains for the gateway. This allows us to use them throughout the rest of the component.

note

In this code snippet, we specify BTC, Bitcoin and Ethereum, but you can easily modify these to other chains, referring to each chain's documentation for how to update renJS.gateway({...}). You'll also need to initialize any other chain in App.tsx.

loading...

Next, we'll write the callback createDepositGateway, which will be called when the user clicks a button to create a gateway. After creating it, the gateway will passed to the onGateway callback prop.

loading...

The other required callback is createWithdrawGateway - this is included in the full CreateGateway.tsx below, to give you a chance to try implementing it yourself first, or return to later after completing CreateGateway.tsx and App.tsx.

Some things to note are that you'll need to set withRenParams to false, since withdraw doesn't expect the amount, nHash and signature parameters that deposit does.

The completed version below makes use of EVMParam.EVM_TO_ADDRESS which you can read more about in the Ethereum docs, but this isn't required.

const createWithdrawGateway = useCallback(async () => {
    // Implement `withdraw` gateway.
}, []);

For the return statement of the component, we'll want to branch on whether the gateway prop is defined or not.

If it's defined, then we want to show the gateway, either by showing a gateway address, or by showing a Chain Transaction component:

loading...

If a gateway hasn't been created yet, then we'll want to show the buttons to create one:

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