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ámetro | Type | Description |
---|
walletAddress | string | La dirección del wallet del usuario |
toTokenAddress | string | La dirección del token a comprar |
chainId | number | El chain ID donde se realizará el swap |
toTokenAmount | string | La cantidad de token a comprar (en wei) |
options: HooksOptions
interface HooksOptions {
disabled?: boolean
retry?: boolean
}
Parámetro | Type | Description |
---|
disabled | boolean | (Opcional) Deshabilitar la consulta para que no se ejecute automáticamente |
retry | boolean | (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.