​
Setting Up your Dapp

First make sure you have created a Sequence account, if you don’t have one, you can create one here, you will need your Project Access Key in order to use the Web SDK. 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, create the configuration.If you want to allow WalletConnect you will also need a walletConnectProjectId. To setup Google Login follow the Google Configuration for 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: ...
});
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.