> ## 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.

# Guía rápida de Ecosystem Wallet — Soluciones Sequence

> Agregar un smart wallet potenciado por Sequence a su aplicación React es un proceso sencillo. Esta guía describe los tres pasos principales para pasar de un proyecto nuevo a un wallet totalmente integrado.

Para ver una demo completamente integrada, consulte [Mining Quest](https://mining-quest-v3.pages.dev/). También puede ver su [código fuente aquí](https://github.com/0xsequence-demos/mining-quest/tree/v3).

## 🔑 Paso 1: Obtenga la clave de acceso de su proyecto

Primero, necesita una clave para conectar su aplicación con la infraestructura de Sequence. Esta clave identifica su proyecto y habilita nuestros servicios.

Vaya a [sequence.build](https://sequence.build), regístrese o inicie sesión y cree un nuevo proyecto. Puede seguir la guía [Builder Getting Started](/solutions/builder/getting-started) para ver el flujo paso a paso.

Ahora podrá obtener su `projectAccessKey` único.

## 📦 Paso 2: Instale el paquete principal del SDK `@0xsequence/connect`

Luego, agregue el paquete principal del Web SDK de Sequence a las dependencias de su proyecto. Este paquete contiene todos los hooks, componentes y el modal de wallet preconstruido necesarios.

En la terminal de su proyecto, ejecute el comando de instalación:

```bash theme={null}
pnpm install @0xsequence/connect
```

El Sequence SDK ahora es una dependencia en su proyecto, listo para usarse.

## 🔗 Paso 3: Integre con su app React

Finalmente, envuelva su aplicación con nuestro proveedor de wallet. Esto hace que todas las funciones de conexión estén disponibles para cualquier componente dentro de su dApp.

También estamos creando una sesión explícita que solicita permiso para gastar hasta 100 tokens en nombre del usuario, abriendo la puerta a automatizaciones y mejoras de experiencia de usuario.

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).

```tsx theme={null}
import { SequenceConnect, createConfig, createContractPermission, createExplicitSession, useOpenConnectModal, type SequenceConnectConfig } from "@0xsequence/connect";
import { parseUnits } from "viem";
import { useAccount, useDisconnect } from "wagmi";

const config: SequenceConnectConfig = createConfig({
  projectAccessKey: "<your-project-access-key>",
  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,
  explicitSession: createExplicitSession({
    chainId: 42161,
    nativeTokenSpending: {
      valueLimit: 0n
    },
    expiresIn: {
      hours: 24, // Session lasts for 24 hours
    },
    permissions: [
      // Request a permission to spend up to 100 tokens on behalf of the user
      createContractPermission({
        address: '0x...',
        functionSignature: 'function transfer(address to, uint256 amount)',
        rules: [
          {
            param: 'to',
            type: 'address',
            condition: 'EQUAL',
            value: '0x...' // The address where dApp can spend the tokens
                },
          {
            param: 'amount',
            type: 'uint256',
            condition: 'LESS_THAN_OR_EQUAL',
            value: parseUnits('100', 6), // Max cumulative amount of 100 tokens
            cumulative: true
          }
        ]
      })
    ]
  })
});

export const App = () => {
  return (
    <SequenceConnect config={config}>
      <Homepage />
    </SequenceConnect>
  );
};

const Homepage = () => {

  const { address } = useAccount()
  const { disconnect } = useDisconnect()
  const { setOpenConnectModal } = useOpenConnectModal()
  
  return (
    <div>
      {address ? (
        <button onClick={() => disconnect()}>Disconnect</button>
      ) : (
        <>
          Connected address: {address}
          <button onClick={() => setOpenConnectModal(true)}>Connect</button>
        </>
      )}
    </div>
  );
};
```

El wallet de Sequence ya está disponible en su aplicación. Puede usar inmediatamente hooks de wagmi como `useConnect()` para permitir que los usuarios inicien sesión con sus redes sociales o correo electrónico e interactúen con la blockchain.