​
Importar

import { useSwapModal } from '@0xsequence/checkout'

​
Uso

import { useSwapModal } from '@0xsequence/checkout'
import { encodeFunctionData, parseAbi } from 'viem'

function App() {
  const { openSwapModal } = useSwapModal()
  
  const handleSwap = () => {
    // Target token information
    const chainId = 137 // Polygon
    const toTokenAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359' // USDC on Polygon
    const toTokenAmount = '20000' // 0.02 USDC (in smallest units)
    
    // Optional: Transaction to execute after swap is completed
    const data = encodeFunctionData({ 
      abi: parseAbi(['function demo()']), 
      functionName: 'demo', 
      args: [] 
    })
    
    // Open the swap modal
    openSwapModal({
      onSuccess: () => {
        console.log('swap successful!')
      },
      chainId,
      toTokenAddress,
      toTokenAmount,
      postSwapTransactions: [
        {
          to: '0x37470dac8a0255141745906c972e414b1409b470',
          data
        }
      ],
      title: 'Swap and Pay',
      description: 'Select a token in your wallet to swap to 0.2 USDC.'
    })
  }
  
  return (
    <button onClick={handleSwap}>
      Swap with Sequence Pay
    </button>
  )
}

​
Tipo de retorno: UseSwapModalReturnType

El hook retorna un objeto con las siguientes propiedades:

type UseSwapModalReturnType = {
  openSwapModal: (settings: SwapModalSettings) => void
  closeSwapModal: () => void
  swapModalSettings: SwapModalSettings | undefined
}

​
Propiedades

​
openSwapModal

(settings: SwapModalSettings) => void

Función para abrir el modal de Swap con la configuración especificada.

Parámetros:

El objeto settings puede incluir las siguientes propiedades:

ParámetroTypeDescription
chainIdnumberID de la red blockchain donde se realizará el swap
toTokenAddressstringDirección del contrato del token objetivo
toTokenAmountstringCantidad del token objetivo en unidades mínimas
postSwapTransactionsArray<{to: string, data: string}>(Opcional) Transacciones a ejecutar después de completar el swap
disableMainCurrencyboolean(Opcional) Si es true, deshabilita el intercambio usando la moneda principal de la red
titlestring(Opcional) Título personalizado para el modal de swap
descriptionstring(Opcional) Descripción personalizada para el modal de swap
onSuccess() => void(Opcional) Callback cuando el swap es exitoso
onError(error: Error) => void(Opcional) Callback cuando ocurre un error
onClose() => void(Opcional) Callback cuando se cierra el modal
blockConfirmationsnumber(Opcional) Número de confirmaciones de bloque a esperar para completar el swap

​
closeSwapModal

() => void

Función para cerrar el modal de Swap.

​
swapModalSettings

SwapModalSettings | undefined

La configuración actual para el modal de Swap.

export interface SwapModalSettings {
  chainId: number
  toTokenAddress: string
  toTokenAmount: string
  title?: string
  description?: string
  disableMainCurrency?: boolean
  postSwapTransactions?: Transaction[]
  blockConfirmations?: number
  onSuccess?: (txHash: string) => void
}

​
Notas

Este hook proporciona métodos para controlar el modal de Swap, que permite a los usuarios swapear tokens en su wallet por una moneda objetivo. El modal de Swap permite a los usuarios seleccionar tokens de su wallet para swapearlos por un token objetivo, con la opción de ejecutar transacciones adicionales después de completar el swap.