Skip to main content

​
Import

import { useGetSwapRoutes } from '@0xsequence/hooks'
This hook replaces the useGetSwapPrices hook which was removed in v5.2.3.

​
Usage

import { useGetSwapRoutes } from '@0xsequence/hooks'
import { useState } from 'react'

function SwapList() {
    const [selectedCurrency, setSelectedCurrency] = useState('')

    const toTokenAddress = '0x...'
    const toTokenAmount = '1000000000'
    const walletAddress = '0x...'
    const chainId = 137

    const {
        data: swapRoutes = [],
        isLoading,
        isError
    } = useGetSwapRoutes({
        walletAddress,
        toTokenAddress,
        toTokenAmount,
        chainId
    })

    if (isLoading) return <div>Loading swap options...</div>

    if (isError) return <div>Error loading swap options</div>

    const noOptionsFound = swapRoutes.flatMap(route => route.fromTokens).length === 0

    if (noOptionsFound) return <div>No swap options found</div>

    return (
        <div>
            {swapRoutes.flatMap(route => route.fromTokens).map(token => (
                <div
                    key={token.address}
                    onClick={() => setSelectedCurrency(token.address)}
                    style={{
                        border: selectedCurrency === token.address ? '2px solid blue' : '1px solid gray',
                        padding: '10px',
                        margin: '5px',
                        cursor: 'pointer'
                    }}
                >
                    <img src={token.logoUri} alt={token.symbol} width="24" height="24" />
                    <span>{token.symbol}: {token.name}</span>
                    <div>Required: {token.price}</div>
                </div>
            ))}
        </div>
    )
}

export default SwapList

​
Return Type: UseQueryResult<LifiSwapRoute[]>

The hook returns all properties from React Query’s UseQueryResult with swap routes data. Here’s the detailed structure of the LifiSwapRoute object: 
interface LifiToken {
    chainId: number;
    address: string;
    symbol: string;
    name: string;
    decimals: number;
    priceUsd: number;
    price?: string;
    coinKey: string;
    logoUri: string;
}

interface LifiSwapRoute {
    fromChainId: number;
    toChainId: number;
    fromTokens: Array<LifiToken>;
    toTokens: Array<LifiToken>;
}

​
Properties

​
data

LifiSwapRoute[] | undefined Array of swap route objects containing:
route
  • fromChainId: The chain ID of the token to sell
  • toChainId: The chain ID of the token to buy
  • fromTokens: Array of tokens that can be used to pay for the swap
  • toTokens: Array of tokens that can be received from the swap

​
isLoading

boolean Loading state for the data fetch.

​
isError

boolean Error state indicating if the query failed.

​
error

Error | null Any error that occurred during data fetching.

​
Parameters

The hook accepts two parameters:

​
args: UseGetSwapRoutesArgs

interface UseGetSwapRoutesArgs {
  walletAddress: string
  toTokenAddress: string
  chainId: number
  toTokenAmount: string
}
ParameterTypeDescription
walletAddressstringThe address of the user’s wallet
toTokenAddressstringThe address of the token to buy
chainIdnumberThe chain ID where the swap will occur
toTokenAmountstringThe amount of token to buy (in wei)

​
options: HooksOptions

interface HooksOptions {
  disabled?: boolean
  retry?: boolean
}
ParameterTypeDescription
disabledboolean(Optional) Disable the query from automatically running
retryboolean(Optional) Whether to retry failed queries (defaults to true)

​
Additional Notes

  • This hook uses React Query to fetch and cache swap routes from the Sequence API.
  • Stale time is set to one hour by default to avoid refreshing quotes while the user is completing transactions.
  • This hook will not return “fromTokens” that the user does not have in their wallet.
⌘I