El poder de los smart swaps está en detectar de manera inteligente las monedas disponibles para el usuario, así como agrupar varias transacciones si el usuario utiliza una wallet de Sequence para simplificar la experiencia. ¡Puede olvidarse de las transacciones separadas de approve y transfer!

Si piensa usar smart swaps con su token personalizado, asegúrese de proporcionar suficiente liquidez para su token (preferiblemente USDC, USDT o ETH) en un DEX compatible como Uniswap.

Smart Swaps solo son compatibles con mainnets, como:

  • Ethereum
  • Arbitrum
  • Avalanche
  • Base
  • Blast
  • BSC
  • Optimism
  • Polygon
  • …

Estos son algunos de los proveedores de pools de liquidez que soportamos:

UniSwap SushiSwap Pancake Swap Curve Balancer Bancor Synapse Solidly

​
Instalación y configuración

Para integrar la función de Swap con Web SDK, siga estos pasos:

1

Instale la librería @0xsequence/checkout

npm install @0xsequence/checkout
# or
pnpm install @0xsequence/checkout
# or
yarn add @0xsequence/checkout
2

Coloque el `SequenceCheckoutProvider` debajo del proveedor `SequenceConnect` en su App:

import { SequenceCheckoutProvider } from '@0xsequence/checkout'
import { SequenceConnect } from '@0xsequence/connect'
import { config } from './config'

const App = () => {
  return (
    <SequenceConnect config={config}>
      <SequenceCheckoutProvider>
        <Page />
      </SequenceCheckoutProvider>
    </SequenceConnect>
  )
}
3

Importe las dependencias y lógica de Swap

  • toTokenAddress: La dirección de la moneda de destino; este es el token que el usuario recibirá después del swap.
  • toTokenAmount: El monto de la moneda de destino; esta es la cantidad que el usuario recibirá después del swap.
  • postSwapTransactions: Un arreglo opcional de transacciones que se ejecutarán después del swap, usando los tokens intercambiados.
  • title: El título del modal.
  • description: Una descripción del proceso de swap y pago.
  • chainId: El chain id de la moneda objetivo.
  • onSuccess: Una función callback que se ejecuta cuando el swap es exitoso.
import { useSwapModal, type SwapModalSettings } from '@0xsequence/checkout'

const MyComponent = () => {
  const { openSwapModal } = useSwapModal()

  const onClick = () => {
    const chainId = 137
    const toTokenAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'
    const toTokenAmount = '20000'

    const contractAbiInterface = new ethers.Interface(['function demo()']) // Optionally, replace with your contract's abi interface

    const data = contractAbiInterface.encodeFunctionData('demo', []) as `0x${string}` // Optionally, replace 'demo' with the function you want to call,

    const swapModalSettings: SwapModalSettings = {
      onSuccess: () => {
        console.log('swap successful!')
      },
      chainId,
      toTokenAddress,
      toTokenAmount,
      postSwapTransactions: [ // Optionally, replace with the transaction you would like to execute after the swap has taken place.
        {
          to: '0x37470dac8a0255141745906c972e414b1409b470',
          data
        }
      ],
      title: 'Swap and Pay',
      description: 'Select a token in your wallet to swap to 0.2 USDC.'
    }

    openSwapModal(swapModalSettings)
  }

  return <button onClick={onClick}>Swap and Pay</button>
}

¡Felicidades! Ahora aprendió cómo usar smart swaps (intercambios) con Web SDK.