To spin up a quick boilerplate that leverages Sequence Kit, you can run the following command from your terminal to install the Sequence-CLI and create a react app:

npx sequence-cli boilerplates create-embedded-wallet-react-starter

Otherwise, we will walk you through the process of installing Sequence Kit, instantiating the connection modal, and displaying the Inventory in your application.

​
Installing Sequence Kit Packages

Sequence Kit is modular, allowing you to install only the necessary packages. To get started, install the @0xsequence/kit core package, as well as install other dependencies such as wagmi, viem, and 0xsequence.

npm install @0xsequence/kit @0xsequence/waas wagmi ethers@6.13.0 viem 0xsequence @0xsequence/design-system framer-motion @tanstack/react-query

# or

pnpm install @0xsequence/kit @0xsequence/waas wagmi ethers@6.13.0 viem 0xsequence @0xsequence/design-system framer-motion @tanstack/react-query

# or

yarn add @0xsequence/kit @0xsequence/waas wagmi ethers@6.13.0 viem 0xsequence @0xsequence/design-system framer-motion @tanstack/react-query

​
Setting Up your Dapp

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

Sequence Kit 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

Create a Config

Next, a configuration variable for Sequence Kit 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/kit";



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.

3

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 App from "./App";

import "@0xsequence/design-system/styles.css";

import { config } from "./config";



function Dapp() {

  return (

    <SequenceKit config={config}>

      <App />

    </SequenceKit>

  );

}



ReactDOM.createRoot(document.getElementById("root")!).render(

  <React.StrictMode>

    <Dapp />

  </React.StrictMode>

);

For web3 interactions, wagmi exposes a set of React hooks that make it convenient for common functions like sending transactions. Please check out our Embedded Wallet boilerplate with Sequence Kit for more examples of interactions.

Was this page helpful?

Suggest edits
OverviewCustom Configuration