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

> Aprenda cómo empezar con Ecosystem Wallet Web SDK

# Getting started

Primero, asegúrese de haber creado una cuenta de Sequence Project. Si aún no tiene una, puede crearla [aquí](https://sequence.build/). Necesitará su `Project Access Key` para continuar.

<Note>
  Nuestros SDKs web están construidos sobre wagmi, así que para configuraciones avanzadas, envío de
  transacciones, llamadas a contratos, etc., consulte la [documentación de wagmi](https://wagmi.sh/react/WagmiConfig).
</Note>

<Tabs>
  <Tab title="Aplicación Vite">
    <Steps>
      <Step title="Instale las librerías requeridas">
        ```bash theme={null}
        npm install @0xsequence/connect wagmi viem
        # or
        pnpm install @0xsequence/connect wagmi viem
        # or
        yarn add @0xsequence/connect wagmi viem
        ```
      </Step>

      <Step title="Cree su configuración de Wallet">
        A continuación, cree la configuración de Ecosystem Wallet.

        **Requerido para Ecosystem Wallet**

        * `projectAccessKey`
        * `walletUrl`

        **Opcional**

        * `dappOrigin`
        * `signIn.projectName`, `appName`
        * `chainIds`, `defaultChainId`
        * `explicitSession` (opcional; solicita permisos y límites explícitos de sesión)
        * `includeFeeOptionPermissions`, `enableImplicitSession`
        * `nodesUrl`, `relayerUrl`
        * `walletConnect`

        ```typescript [config.ts] theme={null}
        import { createConfig, createExplicitSession } from "@0xsequence/connect";

        export const config: any = createConfig({
          projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
          walletUrl: 'https://acme-wallet.ecosystem-demo.xyz',
          // Optional
          dappOrigin: window.location.origin,
          signIn: {
            projectName: 'Sequence Web SDK Demo'
          },
          appName: 'Sequence Web SDK Demo',
          chainIds: [42161],
          defaultChainId: 42161,
          google: true,
          apple: true,
          email: true,
          explicitSession: createExplicitSession({ ... })
        });
        ```

        El `walletUrl` es la URL del Ecosystem Wallet que su dApp utilizará. Para nuestra demostración, estamos usando el [Acme Ecosystem Wallet](https://acme-wallet.ecosystem-demo.xyz).

        El `dappOrigin` es el origen de su dapp, usado para verificar de dónde proviene el usuario.

        El objeto `explicitSession` permite que su dapp solicite permisos específicos al usuario al conectarse.
        Estos permisos pueden autorizar a su dapp a realizar ciertas acciones en nombre del usuario durante un período definido, creando una experiencia más fluida sin avisos de transacción o permitiendo automatizaciones.

        Ver: [Análisis profundo de permisos](/sdk/web/wallet-sdk/ecosystem/permissions-deep-dive) y [Directorio de tokens](/sdk/web/wallet-sdk/ecosystem/token-directory).

        ### Comportamiento de las opciones de comisión (importante)

        Cuando su aplicación envía transacciones mediante el relayer de Sequence, este necesita determinar **cómo se pagan las comisiones**.

        * Si desea que el SDK solicite automáticamente los permisos necesarios relacionados con comisiones al crear una sesión explícita, active `includeFeeOptionPermissions`.
        * Si lo desactiva, usted es responsable de incluir los permisos relacionados con comisiones que requiera la opción de comisión que espera usar.

        Si no se puede cubrir el pago de la comisión, las transacciones pueden fallar al momento de enviarse, incluso si el permiso principal de llamada al contrato parece correcto.

        `nativeTokenSpending` es opcional. Si se omite, la sesión no tendrá asignado un límite de gasto de tokens nativos.

        Por ejemplo, creemos una sesión explícita que permita a su dapp `depositar 100 USDC en el pool de AAVE V3 en Arbitrum, en nombre del usuario durante las próximas 24 horas`

        ```typescript [config.ts] theme={null}
        import { createConfig, createContractPermission } from "@0xsequence/connect";
        import { parseEther, parseUnits } from "viem";

        export const USDC_ADDRESS_ARBITRUM = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831'
        export const AAVE_V3_POOL_ADDRESS_ARBITRUM = '0x794a61358D6845594F94dc1DB02A252b5b4814aD'

        export const config: any = createConfig({
          projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
          walletUrl: 'https://acme-wallet.ecosystem-demo.xyz',
          // Optional
          dappOrigin: window.location.origin,
          signIn: {
            projectName: 'Sequence Web SDK Demo',
          },
          appName: 'Sequence Web SDK Demo',
          chainIds: [42161],
          defaultChainId: 42161,
          google: true,
          apple: true,
          email: true,
          explicitSession: createExplicitSession({
            chainId: 42161,
            nativeTokenSpending: {
              valueLimit: parseEther('0.01'), // Allow spending up to 0.01 ETH for gas fees
            },
            expiresIn: {
              hours: 24, // Session lasts for 24 hours
            },
            permissions: [
              createContractPermission({
                address: AAVE_V3_POOL_ADDRESS_ARBITRUM,
                functionSignature: 'function supply(address asset, uint256 amount, address onBehalfOf, uint16 referralCode)',
                rules: [
                  {
                    param: 'asset',
                    type: 'address',
                    condition: 'EQUAL',
                    value: USDC_ADDRESS_ARBITRUM
                  },
                  {
                    param: 'amount',
                    type: 'uint256',
                    condition: 'LESS_THAN_OR_EQUAL',
                    value: parseUnits('100', 6), // Max cumulative amount of 100 USDC
                    cumulative: true
                  }
                ]
              })
            ]
          })
        });
        ```

        Cuando un usuario conecta su wallet, se le pedirá que otorgue permisos a la dApp. Una vez aprobados,
        acciones como suministrar USDC a AAVE pueden ejecutarse sin requerir ventanas emergentes adicionales, e incluso pueden automatizarse mientras el usuario está desconectado.
      </Step>

      <Step title="Envolver su aplicación con el Provider">
        Envuelva su aplicación con el Provider `SequenceConnect` para habilitar el uso de los hooks y componentes del paquete en toda su aplicación.

        La configuración que creamos en [el paso 2](/sdk/web/wallet-sdk/ecosystem/getting-started#create-a-config) debe pasarse en el `config` del provider.

        ```typescript [main.tsx] theme={null}
        import React from "react";
        import ReactDOM from "react-dom/client";
        import "./index.css";

        import App from "./App";
        import { config } from "./config";
        import { SequenceConnect } from "@0xsequence/connect";

        function Dapp() {
          return (
            <SequenceConnect config={config}>
              <App />
            </SequenceConnect>
          );
        }

        ReactDOM.createRoot(document.getElementById("root")!).render(
          <React.StrictMode>
            <Dapp />
          </React.StrictMode>
        );

        export default Dapp
        ```
      </Step>

      <Step title="Disparar el modal de conexión">
        ```typescript [App.tsx] theme={null}
        import './App.css'
        import { useOpenConnectModal } from '@0xsequence/connect'

        function App() {
          const {setOpenConnectModal} = useOpenConnectModal()
          
          return (
            <>
              <button onClick={() => setOpenConnectModal(true)}>Connect</button>
            </>
          )
        }

        export default App
        ```

        Se le pedirá al usuario que apruebe los permisos al conectar.

        <img src="https://mintcdn.com/sequence-0fb8d9e6/yt_Z0jOG3cMhspj0/images/wallet_permissions.png?fit=max&auto=format&n=yt_Z0jOG3cMhspj0&q=85&s=06ac34b70e9284f97240692b1b9d50f4" alt="Interfaz principal del dashboard" height="200" className="rounded-lg" data-path="images/wallet_permissions.png" />
      </Step>
    </Steps>
  </Tab>

  <Tab title="Aplicación NextJS">
    <Steps>
      <Step title="Instale las dependencias de Web SDK">
        ```bash theme={null}
        npm install @0xsequence/connect wagmi viem 
        # or
        pnpm install @0xsequence/connect wagmi viem 
        # or
        yarn add @0xsequence/connect wagmi viem 
        ```
      </Step>

      <Step title="Cree su configuración de Wallet">
        A continuación, cree la configuración de Ecosystem Wallet.

        **Requerido para Ecosystem Wallet**

        * `projectAccessKey`
        * `walletUrl`

        **Opcional**

        * `dappOrigin`
        * `signIn.projectName`, `appName`
        * `chainIds`, `defaultChainId`
        * `explicitSession` (opcional; solicita permisos y límites explícitos de sesión)
        * `includeFeeOptionPermissions`, `enableImplicitSession`
        * `nodesUrl`, `relayerUrl`
        * `walletConnect`

        ```typescript [config.ts] theme={null}
        import { createConfig, createExplicitSession } from "@0xsequence/connect";

        export const config: any = createConfig({
          projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
          signIn: {
            projectName: 'Sequence Web SDK Demo',
          },
          walletUrl: 'https://acme-wallet.ecosystem-demo.xyz',
          dappOrigin: window.location.origin,
          appName: 'Sequence Web SDK Demo',
          chainIds: [42161],
          defaultChainId: 42161,
          google: true,
          apple: true,
          email: true,
          explicitSession: createExplicitSession({ ... })
        });
        ```

        El `walletUrl` es la URL del Ecosystem Wallet que su dApp utilizará. Para nuestra demostración, estamos usando el [Acme Ecosystem Wallet](https://acme-wallet.ecosystem-demo.xyz).

        El `dappOrigin` es el origen de su dapp, usado para verificar de dónde proviene el usuario.

        El objeto `explicitSession` permite que su dapp solicite permisos específicos al usuario al conectarse.
        Estos permisos pueden autorizar a su dapp a realizar ciertas acciones en nombre del usuario por un periodo definido, creando una experiencia más fluida sin ventanas emergentes de transacción.

        `nativeTokenSpending` es opcional. Si se omite, la sesión no tendrá asignado un límite de gasto de tokens nativos.

        Por ejemplo, creemos una sesión explícita que permita a su dapp `depositar 100 USDC en el pool de AAVE V3 en Arbitrum, en nombre del usuario durante las próximas 24 horas`

        ```typescript [config.ts] theme={null}
        import { createConfig, createContractPermission } from "@0xsequence/connect";
        import { parseEther, parseUnits } from "viem";

        export const USDC_ADDRESS_ARBITRUM = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831'
        export const AAVE_V3_POOL_ADDRESS_ARBITRUM = '0x794a61358D6845594F94dc1DB02A252b5b4814aD'

        export const config: any = createConfig({
          projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
          signIn: {
            projectName: 'Sequence Web SDK Demo',
          },
          walletUrl: 'https://acme-wallet.ecosystem-demo.xyz',
          dappOrigin: window.location.origin,
          appName: 'Sequence Web SDK Demo',
          chainIds: [42161],
          defaultChainId: 42161,
          google: true,
          apple: true,
          email: true,
          explicitSession: createExplicitSession({
            chainId: 42161,
            nativeTokenSpending: {
              valueLimit: parseEther('0.01'), // Allow spending up to 0.01 ETH for gas fees
            },
            expiresIn: {
              hours: 24, // Session lasts for 24 hours
            },
            permissions: [
              createContractPermission({
                address: AAVE_V3_POOL_ADDRESS_ARBITRUM,
                functionSignature: 'function supply(address asset, uint256 amount, address onBehalfOf, uint16 referralCode)',
                rules: [
                  {
                    param: 'asset',
                    type: 'address',
                    condition: 'EQUAL',
                    value: USDC_ADDRESS_ARBITRUM
                  },
                  {
                    param: 'amount',
                    type: 'uint256',
                    condition: 'LESS_THAN_OR_EQUAL',
                    value: parseUnits('100', 6), // Max cumulative amount of 100 USDC
                    cumulative: true
                  }
                ]
              })
            ]
          })
        });
        ```

        Cuando un usuario conecta su wallet, se le pedirá que otorgue permisos a la dApp. Una vez aprobados,
        acciones como suministrar USDC a AAVE pueden ejecutarse sin requerir ventanas emergentes adicionales, e incluso pueden automatizarse mientras el usuario está desconectado.
      </Step>

      <Step title="Envolver su aplicación con el Provider">
        Envuelva su aplicación con el Provider `SequenceConnect` para habilitar el uso de los hooks y componentes del paquete en toda su aplicación.

        La configuración que creamos en [el paso 2](/sdk/web/wallet-sdk/ecosystem/getting-started#create-a-config) debe pasarse en el `config` del provider.

        ```typescript [src/app/providers.tsx] theme={null}
        "use client";

        import React from "react"
        import { config } from "./config"
        import { SequenceConnect } from "@0xsequence/connect"

        const Providers = ({ children }: { children: React.ReactNode }) => {
            return (
                <SequenceConnect config={config}>
                    {children}
                </SequenceConnect>
            )
        }

        export default Providers;
        ```
      </Step>

      <Step title="Envuelva su app en Providers">
        Envuelva su app en el componente Providers.

        ```typescript [src/app/layout.tsx] theme={null}
        import type { Metadata } from "next";
        import { Geist, Geist_Mono } from "next/font/google";
        import "./globals.css";
        import Providers from "./providers";

        const geistSans = Geist({
          variable: "--font-geist-sans",
          subsets: ["latin"],
        });

        const geistMono = Geist_Mono({
          variable: "--font-geist-mono",
          subsets: ["latin"],
        });

        export const metadata: Metadata = {
          title: "Create Next App",
          description: "Generated by create next app",
        };

        export default function RootLayout({
          children,
        }: Readonly<{
          children: React.ReactNode;
        }>) {
          return (
            <html lang="en">
              <body
                className={`${geistSans.variable} ${geistMono.variable} antialiased`}
              >
                <Providers>
                  {children}
                </Providers>
              </body>
            </html>
          );
        }
        ```
      </Step>

      <Step title="Disparar el modal de conexión">
        ```typescript [App.tsx] theme={null}
        "use client"

        import { useOpenConnectModal } from '@0xsequence/connect'

        function Home() {
          const { setOpenConnectModal } = useOpenConnectModal()

          return (
            <>
              <button onClick={() => setOpenConnectModal(true)}>Connect</button>
            </>
          )
        }

        export default Home
        ```

        Se le pedirá al usuario que apruebe los permisos al conectar.

        <img src="https://mintcdn.com/sequence-0fb8d9e6/yt_Z0jOG3cMhspj0/images/wallet_permissions.png?fit=max&auto=format&n=yt_Z0jOG3cMhspj0&q=85&s=06ac34b70e9284f97240692b1b9d50f4" alt="Interfaz principal del dashboard" height="200" className="rounded-lg" data-path="images/wallet_permissions.png" />
      </Step>
    </Steps>
  </Tab>
</Tabs>