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.

1

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
2

Instale las dependencias de Web SDK

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

# or

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

# or

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

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.

4

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>

);
5

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.