> ## Documentation Index
> Fetch the complete documentation index at: https://docs.polygon.technology/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Integrate a Polygon embedded wallet into your React app in three steps.

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](https://mining-quest-v3.pages.dev/) and its [source code](https://github.com/0xsequence-demos/mining-quest/tree/v3).

## Step 1: Get your project access key

Go to the [Polygon project dashboard](https://sequence.build), create an account, and set up a new project. From the project dashboard, copy your `projectAccessKey`.

## Step 2: Install the SDK

```bash theme={null}
pnpm install @0xsequence/connect@6 wagmi viem
```

<Note>
  `@0xsequence/connect@6` requires wagmi `>= 3.2.0` and viem `>= 2.45.0`.
</Note>

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.

```tsx theme={null}
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>
  );
};
```

<Note>
  The `explicitSession` block is optional for basic wallet integration. It enables [Smart Sessions](/wallets/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.
</Note>

Once wrapped, wagmi hooks like `useAccount()` and `useConnect()` are available throughout your app.

## Next steps

<CardGroup cols={2}>
  <Card title="Authentication" icon="key" href="/wallets/authentication">
    Configure all available auth methods including passkeys and guest wallets.
  </Card>

  <Card title="Smart Sessions" icon="shield-check" href="/wallets/smart-sessions">
    Enable multi-step flows without repeated approval prompts.
  </Card>

  <Card title="Smart Sessions deep dive" icon="book" href="/wallets/smart-sessions-deep-dive">
    Full reference for explicit and implicit session permissions and spending rules.
  </Card>

  <Card title="Wallet configuration" icon="sliders" href="/wallets/wallet-configuration">
    Merkle-based wallet configuration, passkeys, and cross-chain coherency.
  </Card>
</CardGroup>