Getting Started with Web SDK

Learn how to get started with Web SDK by installing the necessary packages and using the wagmi connectors to utilize an Embedded Wallet or Native EOA Wallet for authentication.

Setting Up your Dapp

To utilize the SequenceConnect wrapper for connecting web3 wallets to your application, follow these steps:

Web SDK is built on top of wagmi, so for advanced configurations, sending transactions, calling contracts, etc., please refer to the wagmi documentation.

1. Create a React Project with Vite

   We will start by creating a React project with vite:

   npm create vite
   # or
   pnpm create vite
   # or
   yarn create vite
   
2. Install the Web SDK dependencies

   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. Create a Config

   Next, a configuration variable for SequenceConnect will need to be created as either a waas (meaning an Embedded Wallet) or universal (meaning a Universal Wallet) wallet type.

   For waas, first obtain a WaaS Config Key from the Sequence Builder, Wallet Connect ID, and setup other Login Provider configuration. For both wallet type options, obtain and use a project access key.

   [config.ts]

   import { createConfig } from "@0xsequence/connect";
   
   export const config: any = 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>",
     },
   });
   

   In order to customize further, you can view additional configuration parameters.

4. Setup Provider Component

   The configuration we created in step 2 needs to be passed into the providers below in the main.tsx, as well as the inclusion of the Sequence Design System styles.css stylesheet:

   [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. Trigger the Connection Modal

   [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
   

   For web3 interactions, wagmi exposes a set of React hooks that make it convenient for common functions like sending transactions.