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.