Skip to main content
This guide walks through the minimum integration to add an embedded wallet to a React application. Users sign in with their socials or email; a smart contract wallet is created automatically on first login. To see a fully integrated demo, check out Mining Quest and its source code.

​
Step 1: Get your project access key

Go to the Polygon project dashboard, create an account, and set up a new project. From the project dashboard, copy your projectAccessKey.

​
Step 2: Install the SDK

pnpm install @0xsequence/connect@6 wagmi viem
@0xsequence/connect@6 requires wagmi >= 3.2.0 and viem >= 2.45.0.
This package includes all necessary hooks, components, and the pre-built wallet modal.

​
Step 3: Integrate with your React app

Wrap your application with the SequenceConnect provider. The example below also configures an explicit session: a scoped permission that allows your app to transact on behalf of the user without prompting on every action. 
import {
  SequenceConnect,
  createConfig,
  createContractPermission,
  createExplicitSession,
  useOpenConnectModal,
  type SequenceConnectConfig,
} from "@0xsequence/connect";
import { parseUnits } from "viem";
import { useAccount, useDisconnect } from "wagmi";

const config: SequenceConnectConfig = createConfig({
  projectAccessKey: "<your-project-access-key>",
  signIn: {
    projectName: "Your App Name",
  },
  walletUrl: "https://wallet.polygon.technology",
  dappOrigin: window.location.origin,
  appName: "Your App Name",
  chainIds: [137],         // Polygon mainnet
  defaultChainId: 137,
  explicitSession: createExplicitSession({
    chainId: 137,
    nativeTokenSpending: {
      valueLimit: 0n,
    },
    expiresIn: {
      hours: 24,
    },
    permissions: [
      createContractPermission({
        address: "0x...",   // Token contract address
        functionSignature: "function transfer(address to, uint256 amount)",
        rules: [
          {
            param: "to",
            type: "address",
            condition: "EQUAL",
            value: "0x...", // Recipient address your app is permitted to send to
          },
          {
            param: "amount",
            type: "uint256",
            condition: "LESS_THAN_OR_EQUAL",
            value: parseUnits("100", 6), // Max cumulative spend of 100 tokens
            cumulative: true,
          },
        ],
      }),
    ],
  }),
});

export const App = () => {
  return (
    <SequenceConnect config={config}>
      <Homepage />
    </SequenceConnect>
  );
};

const Homepage = () => {
  const { address, isConnected } = useAccount();
  const { disconnect } = useDisconnect();
  const { setOpenConnectModal } = useOpenConnectModal();

  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  }

  return (
    <button onClick={() => setOpenConnectModal(true)}>Connect Wallet</button>
  );
};
The explicitSession block is optional for basic wallet integration. It enables Smart Sessions: users approve permissions once and your app handles subsequent transactions automatically. Remove it if you only need sign-in and wallet address access.
Once wrapped, wagmi hooks like useAccount() and useConnect() are available throughout your app.

​
Next steps

Authentication

Configure all available auth methods including passkeys and guest wallets.

Smart Sessions

Enable multi-step flows without repeated approval prompts.

Smart Sessions deep dive

Full reference for explicit and implicit session permissions and spending rules.

Wallet configuration

Merkle-based wallet configuration, passkeys, and cross-chain coherency.