> ## Documentation Index
> Fetch the complete documentation index at: https://frenglish.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>
  <img src="https://mintcdn.com/frenglish/Df-b5TKDXEhr7BsH/images/kit/swap-modal.png?fit=max&auto=format&n=Df-b5TKDXEhr7BsH&q=85&s=d6751af86d1cb45dc36b489d304546bf" alt="" width="454" height="576" data-path="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>

Admitimos los siguientes chains para swaps:

* Ethereum (Mainnet)
* Ethereum (Sepolia)
* 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 theme={null}
    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 theme={null}
    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">
    * `currencyAddress`: La dirección de la moneda objetivo; este es el token que el usuario recibirá después del swap.
    * `currencyAmount`: El monto de la moneda objetivo; 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 theme={null}
    import { useSwapModal, type SwapModalSettings } from '@0xsequence/checkout'

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

      const onClick = () => {
        const chainId = 137
        const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'
        const currencyAmount = '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,
          currencyAddress,
          currencyAmount,
          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.