Summary

1

Fetch the Quote

In this step, we’ll fetch a full quote that expires after 30 seconds. It will be a complete quote with all the details required to execute it.

2

Execute the Quote

Once we have the quote all that’s left to do is execute the quote and display a progress state to the user.

Contract Compatibility

Before we begin it’s important to ensure that a contract is compatible with Relay. Please review our Contract Compatibility overview to make any necessary changes.

Fetch the Quote

First, you’ll need to determine where the user wants to call the contract from, where the contract has been deployed to, and their preferred payment currency.

You can pass that data into the getQuote SDK action or useQuote UI hook. Note that for calling a contract across chains you’ll need to provide three key pieces of information in addition to the usual data required to call:

  • tradeType must be EXACT_OUTPUT.
  • txs can either be an array of to, data and value or it can be the response from viem’s simulateContract method. You can see an example below of how this is done.
  • amount must be the sum of all the txs values.
import { getClient } from '@reservoir0x/relay-sdk'
import { useWalletClient } from 'wagmi'

const { data: wallet } = useWalletClient()

const CONTRACT_ADDRESS = "0xabc" //Replace with your contract address
const CALL_DATA = "0x" // Replace with your calldata

const quote = await getClient()?.actions.getQuote({
  wallet,
  chainId: 1, // The chain id to call from
  toChainId: 7777777, // The chain id to call to
  amount: '100000000000000000', // Total value of txs
  currency: '0x0000000000000000000000000000', // ERC20 Address
  toCurrency: '0x0000000000000000000000000000', // ERC20 Address
  tradeType: 'EXACT_OUTPUT',
  txs: [{
    to: CONTRACT_ADDRESS,
    value: "100000000000000000", //Must match the amount property
    data: CALL_DATA
  }]
})

In the above example, we fetch the quote to call a Zora contract from Mainnet Ethereum. In the quote object, we’ll get data on the fees required to do this call. You can learn more about fees here. You’ll see that we provided an amount that matches the sum of the txs, that the tradeType is EXACT_OUTPUT and that we passed in a valid txs array.

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 txs 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 execution to provide a best in class user experience