Bridging

​

Summary

​

Fetch the Quote

Once you determine where to bridge from and to, the amount and the currency then you can pass everything into the getQuote action or useQuote hook.

import { getClient } from '@reservoir0x/relay-sdk'
import { useWalletClient } from 'wagmi'

const { data: wallet } = useWalletClient()

const quote = await getClient()?.actions.getQuote({
  wallet,
  chainId: 1, // The chain id to bridge from
  toChainId: 7777777, // The chain id to bridge to
  amount: '100000000000000000', // Amount in wei to bridge
  currency: '0x0000000000000000000000000000', // ERC20 Address
  toCurrency: '0x0000000000000000000000000000', // ERC20 Address
  tradeType: 'EXACT_INPUT'
})

In the above example, we fetch the quote to bridge 0.1 ETH from Ethereum Mainnet to Zora. In the quote object we’ll get data on the fees required to do this bridge. You can learn more about fees here.

Note - Quotes can go stale after 30 seconds. Clients should regularly fetch fresh quotes so that users are always submitting valid transactions. Learn more about Relay quotes.

​

Execute the Quote

After getting the quote all that’s left is to execute the quote and render the progress to the user. Follow the code snippets below to execute the quote:

import { getClient } from '@reservoir0x/relay-sdk'
import { useWalletClient } from 'wagmi'

const { data: wallet } = useWalletClient()

const quote = await getClient()?.actions.getQuote({
  ...options
})

await getClient()?.actions.execute({
  quote,
  wallet,
  onProgress: (steps, currentStep, currentStepItem, fees, details, txHashes) => {
    console.log(steps, currentStep, currentStepItem, fees, details, txHashes)
  }
})

While the quote is being executed if you’re rendering the quote in an interface you may want to display progress to the user. There’s a provided progress callback to get the updated state of execution. Learn more about the progress state here.

​

Preflight Checklist

☐ Verify that the user has enough balance on the origin chain to cover the full bridge amount + fees. Check out our fees doc for more details on calculating the fees.
☐ Have the Relay SDK set up and the Relay hooks package installed if applicable
☐ Ensure the user is on the correct chain (it should match the chainId you get the quote from)
☐ Handle any errors that may come about
☐ Render the progress of the bridge to provide a best in class user experience