Saltar al contenido principal
Primero, asegúrese de haber creado una cuenta de Sequence Project. Si aún no tiene una, puede crearla aquí. Necesitará su Project Access Key para continuar.
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.
  • Aplicación Vite
  • Aplicación NextJS
1

Instale las librerías requeridas

npm install @0xsequence/connect@v6-beta wagmi viem 
# or
pnpm install @0xsequence/connect@v6-beta wagmi viem 
# or
yarn add @0xsequence/connect@v6-beta wagmi viem
2

Cree su configuración de Wallet

A continuación, cree la configuración de Ecosystem Wallet.
[config.ts]
import { createConfig } from "@0xsequence/connect";

export const config: any = createConfig({
  projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
  signIn: {
    projectName: 'Sequence Web SDK Demo',
  },
  walletUrl: 'https://next-acme-wallet.sequence-dev.app',
  dappOrigin: window.location.origin,
  appName: 'Sequence Web SDK Demo',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
  explicitSessionParams: {...}
});
El walletUrl es la URL del Ecosystem Wallet que su dApp usará. Para nuestra demo, estamos usando el Acme Ecosystem Wallet.El dappOrigin es el origen de su dapp, usado para verificar de dónde proviene el usuario.El objeto explicitSessionParams 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 solicitudes de transacción o permitiendo automatizaciones.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
[config.ts]
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://next-acme-wallet.sequence-dev.app',
  dappOrigin: window.location.origin,
  appName: 'Sequence Web SDK Demo',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
  explicitSessionParams: {
    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.
3

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 debe pasarse en el config del provider.
[main.tsx]
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
4

Disparar el modal de conexión

[App.tsx]
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.Interfaz principal del dashboard