​
Configurando su Dapp

Primero, asegúrese de haber creado una cuenta en Sequence. Si aún no tiene una, puede crearla aquí. Necesitará su Project Access Key para utilizar el Web SDK. 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 @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
3

Crear una configuración

A continuación, cree la configuración.Si desea permitir WalletConnect, también necesitará un walletConnectProjectId. Para configurar el inicio de sesión con Google, siga la guía Configuración de Google para Embedded Wallet.
[config.ts]
import { createConfig } from "@0xsequence/connect";

export const config: any = 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: [1],
  defaultChainId: 1,
  google: true,
  apple: true,
  email: true,
  walletConnect: {
    projectId: walletConnectProjectId
  },
  permissions: ...
});
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.