Skip to main content

​
Prerequisites

Create a project at the Polygon project dashboard and obtain a Project Access Key before proceeding.

​
Installation

Install the required packages: 
npm install @0xsequence/connect@6 wagmi viem
# or
pnpm install @0xsequence/connect@6 wagmi viem
# or
yarn add @0xsequence/connect@6 wagmi viem
@0xsequence/connect@6 requires wagmi >= 3.2.0 and viem >= 2.45.0.

​
Configuration

Create a config.ts file with your wallet settings. The two required fields are projectAccessKey and walletUrl. Optional parameters include dappOrigin, sign-in details, chain specifications, session settings, and authentication methods. 
import { createConfig, createExplicitSession } from "@0xsequence/connect";

export const config: any = createConfig({
  projectAccessKey: "<your-project-access-key>",
  walletUrl: 'https://wallet.polygon.technology',
  dappOrigin: window.location.origin,
  signIn: {
    projectName: 'My App'
  },
  appName: 'My App',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
});

​
Explicit Sessions

Explicit sessions allow your dApp to request specific user permissions upon connection, enabling it to perform certain actions on the user’s behalf for a defined period without requiring repeated transaction approvals. The following example configures a session that permits supplying up to 100 USDC into Aave V3 on Arbitrum for 24 hours, with a 0.01 ETH gas allowance: 
import { createConfig, createContractPermission, createExplicitSession } 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: "<your-project-access-key>",
  walletUrl: 'https://wallet.polygon.technology',
  dappOrigin: window.location.origin,
  signIn: {
    projectName: 'My App',
  },
  appName: 'My App',
  chainIds: [42161],
  defaultChainId: 42161,
  google: true,
  apple: true,
  email: true,
  explicitSession: createExplicitSession({
    chainId: 42161,
    nativeTokenSpending: {
      valueLimit: parseEther('0.01'),
    },
    expiresIn: {
      hours: 24,
    },
    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),
            cumulative: true
          }
        ]
      })
    ]
  })
});
When using relaying, ensure the session includes appropriate fee-related permissions, otherwise transactions may fail even if all contract permissions are correct.

​
Vite Setup

Wrap your application with the SequenceConnect provider in 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 connect modal from any component using useOpenConnectModal: 
import './App.css'
import { useOpenConnectModal } from '@0xsequence/connect'

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

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

export default App

​
Next.js Setup

Create a providers.tsx file: 
"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 the layout in 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: "My App",
  description: "My 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 connect modal from a page component: 
"use client"

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

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

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

export default Home

​
Next steps

For advanced features like transaction sending and contract interaction, refer to the wagmi documentation.