Skip to main content
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.
1

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
2

Create your Wallet Configuration

Next, create the Ecosystem Wallet configuration.Required for Ecosystem Wallet
  • projectAccessKey
  • walletUrl
Optional
  • dappOrigin
  • signIn.projectName, appName
  • chainIds, defaultChainId
  • explicitSession (optional; request explicit session permissions + limits)
  • includeFeeOptionPermissions, enableImplicitSession
  • nodesUrl, relayerUrl
  • walletConnect
[config.ts]
import { createConfig, createExplicitSession } from "@0xsequence/connect";

export const config: any = createConfig({
  projectAccessKey: "AQAAAAAAAABtDHG1It7lxRF_9bbxw4diip8",
  walletUrl: 'https://acme-wallet.ecosystem-demo.xyz',
  // Optional
  dappOrigin: window.location.origin,
  signIn: {
    projectName: 'Sequence Web SDK Demo'
  },
  appName: 'Sequence Web SDK Demo',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
  explicitSession: createExplicitSession({ ... })
});
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 explicitSession 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.See: Permissions Deep Dive and Token Directory.

​
Fee options behavior (important)

When your app sends transactions via Sequence relaying, the relayer needs to determine how fees are paid.
  • If you want the SDK to automatically request the necessary fee-related permissions when creating an explicit session, enable includeFeeOptionPermissions.
  • If you disable it, you are responsible for including whatever fee-related permissions are required for the fee option you expect to use.
If fee payment cannot be satisfied, transactions may fail at dispatch time even if the core contract-call permission looks correct.nativeTokenSpending is optional. If omitted, the session will default to no native-token spending allowance.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",
  walletUrl: 'https://acme-wallet.ecosystem-demo.xyz',
  // Optional
  dappOrigin: window.location.origin,
  signIn: {
    projectName: 'Sequence Web SDK Demo',
  },
  appName: 'Sequence Web SDK Demo',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
  explicitSession: createExplicitSession({
    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.
3

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
4

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.Main dashboard interface