> ## Documentation Index
> Fetch the complete documentation index at: https://sequence-0fb8d9e6-shop-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Smart Swaps

> Sequence Smart Swaps detecta automáticamente las monedas elegibles en la wallet del usuario y las intercambia por la moneda objetivo. Los desarrolladores pueden definir la moneda objetivo y Sequence se encarga de todo, incluyendo la interfaz y el flujo a través de Web SDK.

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`!

<Frame>
  ![](https://mintlify.s3.us-west-1.amazonaws.com/sequence-0fb8d9e6-shop-docs/images/kit/swap-modal.png)
</Frame>

<Note>
  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.
</Note>

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:

<Steps>
  <Step title="Instale la librería @0xsequence/checkout">
    ```bash
    npm install @0xsequence/checkout
    # or
    pnpm install @0xsequence/checkout
    # or
    yarn add @0xsequence/checkout
    ```
  </Step>

  <Step title="Coloque el `SequenceCheckoutProvider` debajo del proveedor `SequenceConnect` en su App:">
    ```jsx
    import { SequenceCheckoutProvider } from '@0xsequence/checkout'
    import { SequenceConnect } from '@0xsequence/connect'
    import { config } from './config'

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

  <Step title="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.

    ```jsx
    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>
    }
    ```
  </Step>
</Steps>

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