Importar

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

Este hook reemplaza al hook useGetSwapPrices, que fue eliminado en la versión v5.2.3.

Uso

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

Tipo de retorno: UseQueryResult<LifiSwapRoute[]>

El hook retorna todas las propiedades de UseQueryResult de React Query con los datos de rutas de swap. Aquí está la estructura detallada del objeto LifiSwapRoute:

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>;
}

Propiedades

data

LifiSwapRoute[] | undefined

Arreglo de objetos de rutas de swap que contienen:

route
  • fromChainId: El chain ID del token a vender
  • toChainId: El chain ID del token a comprar
  • fromTokens: Arreglo de tokens que se pueden usar para pagar el swap
  • toTokens: Arreglo de tokens que se pueden recibir del swap

isLoading

boolean

Estado de carga para la obtención de datos.

isError

boolean

Estado de error que indica si la consulta falló.

error

Error | null

Cualquier error que ocurrió durante la obtención de datos.

Parámetros

El hook acepta dos parámetros:

args: UseGetSwapRoutesArgs

interface UseGetSwapRoutesArgs {
  walletAddress: string
  toTokenAddress: string
  chainId: number
  toTokenAmount: string
}
ParámetroTypeDescription
walletAddressstringLa dirección del wallet del usuario
toTokenAddressstringLa dirección del token a comprar
chainIdnumberEl chain ID donde se realizará el swap
toTokenAmountstringLa cantidad de token a comprar (en wei)

options: HooksOptions

interface HooksOptions {
  disabled?: boolean
  retry?: boolean
}
ParámetroTypeDescription
disabledboolean(Opcional) Deshabilitar la consulta para que no se ejecute automáticamente
retryboolean(Opcional) Indica si se deben reintentar las consultas fallidas (por defecto es true)

Notas adicionales

  • Este hook utiliza React Query para obtener y almacenar en caché las rutas de swap desde la API de Sequence.
  • El tiempo de expiración está configurado en una hora por defecto para evitar actualizar cotizaciones mientras el usuario completa transacciones.
  • Este hook no retornará “fromTokens” que el usuario no tenga en su wallet.