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.

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

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

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.

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>
);

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.

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

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

Create a Config

Next, a configuration variable for SequenceConnect will need to be created as waas (meaning an 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.

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>
);

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.

Create a NextJS Project

We will start by creating a NextJS project with create-next-app:

npx create-next-app@latest
# or
pnpm create next-app
# or
yarn create next-app

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

Setup NextJS Config

For compatibility reasons with wagmi and @walletconnect packages, we need to add the following to our next.config.js file:

// Path: next.config.js
const nextConfig = {
  webpack: (config) => {
    config.externals.push("pino-pretty", "lokijs", "encoding");
    return config;
  },
};

This will get rid of the warnings related to pino-pretty.

Create a Config

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

[src/app/config.ts]

import { createConfig } from "@0xsequence/connect";

export const config = 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.

Setup Provider Component

The configuration we created in step 3 needs to be passed to the SequenceConnect provider.

Create a separate “providers.tsx” file to wrap your app in the Providers component.

[src/app/providers.tsx]

"use client";

import React from "react"
import { config } from "./config"
import { SequenceConnect } from "@0xsequence/connect"

const Providers = ({ children }: { children: React.ReactNode }) => {
    return (
        <SequenceConnect config={config}>
            {children}
        </SequenceConnect>
    )
}

export default Providers;

Wrap your App in the Providers

Wrap your app in the Providers component.

[src/app/layout.tsx]

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Providers from "./providers";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

Trigger the Connection Modal

[App.tsx]

"use client"

import { useOpenConnectModal } from '@0xsequence/connect'

function Home() {
  const { setOpenConnectModal } = useOpenConnectModal()

  return (
    <>
      <button onClick={() => setOpenConnectModal(true)}>Connect</button>
    </>
  )
}

export default Home

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

On this page

Setting Up your Dapp

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.

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

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

Create a Config

Next, a configuration variable for SequenceConnect will need to be created as waas (meaning an 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.

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>
);

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.

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

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

Create a Config

Next, a configuration variable for SequenceConnect will need to be created as waas (meaning an 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.

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>
);

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.

Create a NextJS Project

We will start by creating a NextJS project with create-next-app:

npx create-next-app@latest
# or
pnpm create next-app
# or
yarn create next-app

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

Setup NextJS Config

For compatibility reasons with wagmi and @walletconnect packages, we need to add the following to our next.config.js file:

// Path: next.config.js
const nextConfig = {
  webpack: (config) => {
    config.externals.push("pino-pretty", "lokijs", "encoding");
    return config;
  },
};

This will get rid of the warnings related to pino-pretty.

Create a Config

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

[src/app/config.ts]

import { createConfig } from "@0xsequence/connect";

export const config = 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.

Setup Provider Component

The configuration we created in step 3 needs to be passed to the SequenceConnect provider.

Create a separate “providers.tsx” file to wrap your app in the Providers component.

[src/app/providers.tsx]

"use client";

import React from "react"
import { config } from "./config"
import { SequenceConnect } from "@0xsequence/connect"

const Providers = ({ children }: { children: React.ReactNode }) => {
    return (
        <SequenceConnect config={config}>
            {children}
        </SequenceConnect>
    )
}

export default Providers;

Wrap your App in the Providers

Wrap your app in the Providers component.

[src/app/layout.tsx]

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Providers from "./providers";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

Trigger the Connection Modal

[App.tsx]

"use client"

import { useOpenConnectModal } from '@0xsequence/connect'

function Home() {
  const { setOpenConnectModal } = useOpenConnectModal()

  return (
    <>
      <button onClick={() => setOpenConnectModal(true)}>Connect</button>
    </>
  )
}

export default Home

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

On this page

Setting Up your Dapp

Getting Started with Web SDK

Setting Up your Dapp

Support

Sequence Builder Admin

Getting Started with Web SDK

Setting Up your Dapp

​Setting Up your Dapp

Support

Sequence Builder Admin

​Setting Up your Dapp

Setting Up your Dapp

Setting Up your Dapp