Primeros pasos - Sequence Docs

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

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

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

[config.ts]

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.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 y Directorio de tokens.

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

[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",
  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.

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

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.

Instale las dependencias de Web SDK

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 

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

[config.ts]

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

[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://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
          }
        ]
      })
    ]
  })
});

Envolver su aplicación con el Provider

[src/app/providers.tsx]

"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;

Envuelva su app en Providers

Envuelva su app en el componente Providers.

[src/app/layout.tsx]

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>
  );
}

Disparar el modal de conexión

[App.tsx]

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

SDKs Web

SDKs de Motor de Juego

Móvil

Otros SDKs

Getting started

Comportamiento de las opciones de comisión (importante)

SDKs Web

SDKs de Motor de Juego

Móvil

Otros SDKs

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

Comportamiento de las opciones de comisión (importante)