useQuote

Fetch a quote and then execute it with this convenient hook

Parameters

Parameter	Description	Required
client	A RelayClient instance. You can create one using the SDK or retrieve one using the useRelayClient hook from the UI kit.	✅
wallet	A valid WalletClient from Viem or an AdaptedWallet generated from an adapter. This parameter can be left empty if just retrieving a quote, but is required for executing a quote.	❌
options	Options that map directly to the quote API.	✅
onRequest	A callback function that triggers when a request is made to fetch the quote.	❌
onResponse	A callback function that triggers when a response is returned.	❌
queryOptions	Tanstack query options. Refer to the Tanstack docs.	❌

Return Data

The hook returns an object with the base Tanstack Query response, it also returns an executeQuote function which allows you to conveniently execute the quote. The function takes one parameter, an onProgress callback that mirrors the underlying execute action. from the SDK.

Usage

Fetching a Quote

import { useQuote } from '@relayprotocol/relay-kit-hooks'
import { useWalletClient } from 'wagmi'
import { getClient } from '@relayprotocol/relay-sdk'

const queryOptions = {...} //Query options from tanstack
const walletClient = useWalletClient()
const relayClient = getClient() //Either use getClient, createClient or useRelayClient from the ui kit

const {
data: quote,
isLoading: isFetchingQuote,
executeQuote,
error
} = useQuote(
relayClient ? relayClient : undefined,
walletClient.data,
{
user: address,
originChainId: 1,
destinationChainId: 10,
originCurrency: "0x0000000000000000000000000000000000000000",
destinationCurrency: "0x0000000000000000000000000000000000000000",
tradeType: "EXACT_INPUT",
amount: "10000000"
},
() => {
console.log("Request Triggered!")
},
() => {
console.log("Response Returned!")
},
queryOptions
)

import { useQuote } from '@relayprotocol/relay-kit-hooks'
import { useWalletClient } from 'wagmi'
import { getClient } from '@relayprotocol/relay-sdk'

const queryOptions = {...} //Query options from tanstack
const walletClient = useWalletClient()
const relayClient = getClient() //Either use getClient, createClient or useRelayClient from the ui kit

const {
    data: quote,
    isLoading: isFetchingQuote,
    executeQuote,
    error
  } = useQuote( ... ) //Refer to the previous example

...

//Then use the executeQuote function on a button for example
<button onClick={() => {
  executeQuote(({ steps, currentStep, currentStepItem, txHashes, details }) => {
    //Handle the callback function
  })
}}>Execute Quote</button>

Query Function

import { queryQuote } from "@relayprotocol/relay-kit-hooks";

const response = queryQuote("https://api.relay.link", {
  user: address,
  originChainId: 1,
  destinationChainId: 10,
  originCurrency: "0x0000000000000000000000000000000000000000",
  destinationCurrency: "0x0000000000000000000000000000000000000000",
  tradeType: "EXACT_INPUT",
  amount: "10000000",
});