Configurando su Dapp

Para utilizar el wrapper SequenceConnect y conectar wallets web3 a su aplicación, siga estos pasos:

Web SDK está construido sobre wagmi, así que para configuraciones avanzadas, envío de transacciones, llamadas a contratos, etc., consulte la documentación de wagmi.

Cree un proyecto React con Vite

Comenzaremos creando un proyecto de React con vite:

npm create vite

# or

pnpm create vite

# or

yarn create vite

Instale las dependencias de Web SDK

npm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query

# or

pnpm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query

# or

yarn add @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query

Crear una configuración

A continuación, deberá crear una variable de configuración para SequenceConnect como waas (es decir, un Embedded Wallet).

Primero obtenga una WaaS Config Key desde Sequence Builder y una clave de acceso al proyecto, luego asegúrese de que el origen de su proyecto esté en la lista blanca en la Configuración de Embedded Wallet en Builder. Si desea permitir WalletConnect también necesitará un Wallet Connect ID. Para configurar el inicio de sesión con Google, siga la Configuración de Google para Embedded Wallet.

[config.ts]
import { createConfig } from "@0xsequence/connect";

export const config: any = createConfig("waas", {

  projectAccessKey: "<your-project-access-key>",

  chainIds: [1, 137],

  defaultChainId: 1,

  appName: "Demo Dapp",

  waasConfigKey: "<your-waas-config-key>", // for waas

  google: {

    clientId: "<your-google-client-id>",

  },

  walletConnect: {

    projectId: "<your-wallet-connect-project-id>",

  },

});

Para personalizar aún más, puede ver parámetros de configuración adicionales.

Configurar el componente Provider

La configuración que creamos en el paso 3 debe pasarse a los providers a continuación en el main.tsx.

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

);

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

Para interacciones web3, wagmi expone un conjunto de hooks de React que facilitan funciones comunes como el envío de transacciones.

Cree un proyecto React con Vite

Comenzaremos creando un proyecto de React con vite:

npm create vite

# or

pnpm create vite

# or

yarn create vite

Instale las dependencias de Web SDK

npm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query

# or

pnpm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query

# or

yarn add @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query

Crear una configuración

A continuación, deberá crear una variable de configuración para SequenceConnect como waas (es decir, un Embedded Wallet).

[config.ts]
import { createConfig } from "@0xsequence/connect";

export const config: any = createConfig("waas", {

  projectAccessKey: "<your-project-access-key>",

  chainIds: [1, 137],

  defaultChainId: 1,

  appName: "Demo Dapp",

  waasConfigKey: "<your-waas-config-key>", // for waas

  google: {

    clientId: "<your-google-client-id>",

  },

  walletConnect: {

    projectId: "<your-wallet-connect-project-id>",

  },

});

Para personalizar aún más, puede ver parámetros de configuración adicionales.

Configurar el componente Provider

La configuración que creamos en el paso 3 debe pasarse a los providers a continuación en el main.tsx.

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

);

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

Para interacciones web3, wagmi expone un conjunto de hooks de React que facilitan funciones comunes como el envío de transacciones.

Cree un proyecto NextJS

Comenzaremos creando un proyecto de NextJS con create-next-app:

npx create-next-app@latest

# or

pnpm create next-app

# or

yarn create next-app

Instale las dependencias de Web SDK

npm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query

# or

pnpm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query

# or

yarn add @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query

Configurar la configuración de NextJS

Por razones de compatibilidad con wagmi y los paquetes de @walletconnect, necesitamos agregar lo siguiente a nuestro archivo next.config.js:

// Path: next.config.js

const nextConfig = {

  webpack: (config) => {

    config.externals.push("pino-pretty", "lokijs", "encoding");

    return config;

  },

};

Esto eliminará las advertencias relacionadas con pino-pretty.

Crear una configuración

A continuación, deberá crear una variable de configuración para SequenceConnect como waas (es decir, un Embedded Wallet).

[src/app/config.ts]
import { createConfig } from "@0xsequence/connect";

export const config = createConfig("waas" /*or, 'universal'*/, {

  projectAccessKey: "<your-project-access-key>",

  chainIds: [1, 137],

  defaultChainId: 1,

  appName: "Demo Dapp",

  waasConfigKey: "<your-waas-config-key>", // for waas

  google: {

    clientId: "<your-google-client-id>",

  },

  walletConnect: {

    projectId: "<your-wallet-connect-project-id>",

  },

});

Para personalizar aún más, puede ver parámetros de configuración adicionales.

Configurar el componente Provider

La configuración que creamos en el paso 3 debe pasarse al provider de SequenceConnect.

Cree un archivo separado “providers.tsx” para envolver su aplicación en el componente Providers.

[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

Para interacciones web3, wagmi expone un conjunto de hooks de React que facilitan funciones comunes como el envío de transacciones.

SDK Web

SDKs para Motores de Juego

Otros SDKs

Primeros pasos con Web SDK

Configurando su Dapp

SDK Web

SDKs para Motores de Juego

Otros SDKs

​Configurando su Dapp

Configurando su Dapp