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

Create a Config

Next, a configuration variable for SequenceConnect will need to be created as waas (meaning an Embedded Wallet).

First obtain a WaaS Config Key from the Sequence Builder and a project access key, then make sure your project origin is whitelisted in the Builder Embedded Wallet Configuration. If you want to allow WalletConnect you will also need a Wallet Connect ID. To setup Google Login follow the Google Configuration for 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>",
  },
});

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

4

Setup Provider Component

The configuration we created in step 3 needs to be passed into the providers below in the 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

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.