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