Getting Started

First make sure you have created a Sequence Project account, if you don’t have one, you can create one here, you will need your Project Access Key in order to continue.

Our Web SDKs are built on top of wagmi, so for advanced configurations, sending transactions, calling contracts, etc., please refer to the wagmi documentation.

Vite App
NextJS App

Install the required libraries

npm install @0xsequence/connect@v6-beta wagmi viem 
# or
pnpm install @0xsequence/connect@v6-beta wagmi viem 
# or
yarn add @0xsequence/connect@v6-beta wagmi viem 

Create your Wallet Configuration

Next, create the Ecosystem Wallet configuration.

[config.ts]

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

export const config: any = createConfig({
  projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
  signIn: {
    projectName: 'Sequence Web SDK Demo',
  },
  walletUrl: 'https://next-acme-wallet.sequence-dev.app',
  dappOrigin: window.location.origin,
  appName: 'Sequence Web SDK Demo',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
  explicitSessionParams: {...}
});

The walletUrl is the URL of the Ecosystem Wallet your dApp will use, for our demo, we are using the Acme Ecosystem Wallet.The dappOrigin is the origin of your dapp, used to verify where the user is coming from.The explicitSessionParams object allows your dapp to request specific permissions from the user upon connection. These permissions can authorize your dapp to perform certain actions on the user’s behalf for a defined period, creating a more seamless user experience with no transaction prompts or allowing automations.For example, let’s create an explicit session that allows your dapp to deposit 100 USDC into the AAVE V3 pool on Arbitrum, on behalf of the user for the next 24 hours

[config.ts]

import { createConfig, createContractPermission } from "@0xsequence/connect";
import { parseEther, parseUnits } from "viem";

export const USDC_ADDRESS_ARBITRUM = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831'
export const AAVE_V3_POOL_ADDRESS_ARBITRUM = '0x794a61358D6845594F94dc1DB02A252b5b4814aD'

export const config: any = createConfig({
  projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
  signIn: {
    projectName: 'Sequence Web SDK Demo',
  },
  walletUrl: 'https://next-acme-wallet.sequence-dev.app',
  dappOrigin: window.location.origin,
  appName: 'Sequence Web SDK Demo',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
  explicitSessionParams: {
    chainId: 42161,
    nativeTokenSpending: {
      valueLimit: parseEther('0.01'), // Allow spending up to 0.01 ETH for gas fees
    },
    expiresIn: {
      hours: 24, // Session lasts for 24 hours
    },
    permissions: [
      createContractPermission({
        address: AAVE_V3_POOL_ADDRESS_ARBITRUM,
        functionSignature: 'function supply(address asset, uint256 amount, address onBehalfOf, uint16 referralCode)',
        rules: [
          {
            param: 'asset',
            type: 'address',
            condition: 'EQUAL',
            value: USDC_ADDRESS_ARBITRUM
          },
          {
            param: 'amount',
            type: 'uint256',
            condition: 'LESS_THAN_OR_EQUAL',
            value: parseUnits('100', 6), // Max cumulative amount of 100 USDC
            cumulative: true
          }
        ]
      })
    ]
  }
});

When a user connects their wallet, they will be prompted to grant permissions to the dApp. Once approved, actions like supplying USDC to AAVE can be executed without requiring additional pop-ups, and can even be automated while the user is offline.

Wrap your App with the Provider

Wrap your application with the SequenceConnect Provider to enable the use of the package’s hooks and components throughout your application.The configuration we created in step 2 needs to be passed into the config of the provider.

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

export default Dapp

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

The user will be prompted to approve the permissions when connecting.

Install the Web SDK dependencies

npm install @0xsequence/connect@v6-beta wagmi viem 
# or
pnpm install @0xsequence/connect@v6-beta wagmi viem 
# or
yarn add @0xsequence/connect@v6-beta wagmi viem 

Create your Wallet Configuration

Next, create the Ecosystem Wallet configuration.

[config.ts]

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

export const config: any = createConfig({
  projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
  signIn: {
    projectName: 'Sequence Web SDK Demo',
  },
  walletUrl: 'https://next-acme-wallet.sequence-dev.app',
  dappOrigin: window.location.origin,
  appName: 'Sequence Web SDK Demo',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
  explicitSessionParams: { ... }
});

The walletUrl is the URL of the Ecosystem Wallet you dApp will use, for our demo, we are using the Acme Ecosystem Wallet.The dappOrigin is the origin of your dapp, used to verify where the user is coming from.The explicitSessionParams object allows your dapp to request specific permissions from the user upon connection. These permissions can authorize your dapp to perform certain actions on the user’s behalf for a defined period, creating a more seamless user experience with no transaction prompts.For example, let’s create an explicit session that allows your dapp to deposit 100 USDC into the AAVE V3 pool on Arbitrum, on behalf of the user for the next 24 hours

[config.ts]

import { createConfig, createContractPermission } from "@0xsequence/connect";
import { parseEther, parseUnits } from "viem";

export const USDC_ADDRESS_ARBITRUM = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831'
export const AAVE_V3_POOL_ADDRESS_ARBITRUM = '0x794a61358D6845594F94dc1DB02A252b5b4814aD'

export const config: any = createConfig({
  projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
  signIn: {
    projectName: 'Sequence Web SDK Demo',
  },
  walletUrl: 'https://next-acme-wallet.sequence-dev.app',
  dappOrigin: window.location.origin,
  appName: 'Sequence Web SDK Demo',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
  explicitSessionParams: {
    chainId: 42161,
    nativeTokenSpending: {
      valueLimit: parseEther('0.01'), // Allow spending up to 0.01 ETH for gas fees
    },
    expiresIn: {
      hours: 24, // Session lasts for 24 hours
    },
    permissions: [
      createContractPermission({
        address: AAVE_V3_POOL_ADDRESS_ARBITRUM,
        functionSignature: 'function supply(address asset, uint256 amount, address onBehalfOf, uint16 referralCode)',
        rules: [
          {
            param: 'asset',
            type: 'address',
            condition: 'EQUAL',
            value: USDC_ADDRESS_ARBITRUM
          },
          {
            param: 'amount',
            type: 'uint256',
            condition: 'LESS_THAN_OR_EQUAL',
            value: parseUnits('100', 6), // Max cumulative amount of 100 USDC
            cumulative: true
          }
        ]
      })
    ]
  }
});

Wrap your App with the Provider

[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

The user will be prompted to approve the permissions when connecting.

Web SDKs

Game Engine SDKs

Mobile

Other SDKs