Documentation Index
Fetch the complete documentation index at: https://docs.sequence.xyz/llms.txt
Use this file to discover all available pages before exploring further.
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 and Waas Config 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. 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, create the configuration.import { createConfig } from "@0xsequence/connect";
// Waas config
export const waasConfig: any = createConfig('waas', {
projectAccessKey: "<your-project-access-key>",
defaultTheme: 'dark',
signIn: {
projectName: 'Sequence Web SDK Demo',
},
appName: 'Sequence Web SDK Demo',
chainIds: [1],
defaultChainId: 1,
waasConfigKey: 'waas-config-key',
guest: true,
email: true,
google: {
clientId 'your-google-client-id'
},
apple: {
clientId: 'your-apple-client-id',
redirectURI: window.location.origin + window.location.pathname
},
X: {
clientId: 'MVZ6aHMyNmMtSF9mNHVldFR6TV86MTpjaQ',
redirectURI: window.location.origin + '/auth-callback-X'
},
walletConnect: {
projectId: walletConnectProjectId
},
});
// Universal config
export const universalConfig: any = createConfig('universal', {
projectAccessKey: "<your-project-access-key>",
defaultTheme: 'dark',
signIn: {
projectName: 'Sequence Web SDK Demo',
},
appName: 'Sequence Web SDK Demo',
chainIds: [1],
defaultChainId: 1,
walletConnect: {
projectId: walletConnectProjectId
}
})
Setup Provider Component
The configuration we created in step 3 needs to be passed into the providers below in the 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
import './App.css'
import { useOpenConnectModal } from '@0xsequence/connect'
function App() {
const {setOpenConnectModal} = useOpenConnectModal()
return (
<>
<button onClick={() => setOpenConnectModal(true)}>Connect</button>
</>
)
}
export default 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;
},
};
pino-pretty. Create a Config
Next, create the configuration.import { createConfig } from "@0xsequence/connect";
// Waas config
export const waasConfig: any = createConfig('waas', {
projectAccessKey: "<your-project-access-key>",
defaultTheme: 'dark',
signIn: {
projectName: 'Sequence Web SDK Demo',
},
appName: 'Sequence Web SDK Demo',
chainIds: [1],
defaultChainId: 1,
waasConfigKey: 'waas-config-key',
guest: true,
email: true,
google: {
clientId 'your-google-client-id'
},
apple: {
clientId: 'your-apple-client-id',
redirectURI: window.location.origin + window.location.pathname
},
X: {
clientId: 'MVZ6aHMyNmMtSF9mNHVldFR6TV86MTpjaQ',
redirectURI: window.location.origin + '/auth-callback-X'
},
walletConnect: {
projectId: walletConnectProjectId
},
});
// Universal config
export const universalConfig: any = createConfig('universal', {
projectAccessKey: "<your-project-access-key>",
defaultTheme: 'dark',
signIn: {
projectName: 'Sequence Web SDK Demo',
},
appName: 'Sequence Web SDK Demo',
chainIds: [1],
defaultChainId: 1,
walletConnect: {
projectId: walletConnectProjectId
}
})
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."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.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
"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.
