Para ver una demo completamente integrada, consulte Mining Quest. También puede ver su código fuente aquí.

​
🔑 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, regístrese o inicie sesión y cree un nuevo proyecto. Puede seguir la guía 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: 
pnpm install @0xsequence/connect@v6-beta
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 que solicita permiso para gastar hasta 100 tokens en nombre del usuario, lo que abre la puerta a automatizaciones y mejoras en la experiencia de usuario. 
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://v3.sequence.app',
  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.