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

# Reown

> Set up Reown (AppKit) wallet integration with Inco

## Scaffold

<CodeGroup>
  ```bash npm theme={null}
  npx create-inco-app@latest my-app --wallet reown --framework hardhat --chain evm --yes
  ```

  ```bash pnpm theme={null}
  pnpm create inco-app@latest my-app --wallet reown --framework hardhat --chain evm --yes
  ```

  ```bash yarn theme={null}
  yarn create inco-app my-app --wallet reown --framework hardhat --chain evm --yes
  ```

  ```bash bun theme={null}
  bunx create-inco-app@latest my-app --wallet reown --framework hardhat --chain evm --yes
  ```
</CodeGroup>

This scaffolds the full monorepo with Reown (AppKit, formerly Web3Modal) as the wallet provider. For just the frontend, add `--template frontend`.

## Environment Setup

Get a Project ID from [cloud.reown.com](https://cloud.reown.com) and set it in `frontend/.env`:

```bash frontend/.env theme={null}
# Base network: "testnet" (Base Sepolia, default) or "mainnet" (Base Mainnet)
NEXT_PUBLIC_NETWORK=testnet

NEXT_PUBLIC_REOWN_PROJECT_ID=your_project_id_here

# Your deployed contract address
NEXT_PUBLIC_CONFLOTTERY_ADDRESS=<deployed_contract_address>
```

<Note>
  A Project ID is required for Reown — without it, the app renders a "Missing configuration" screen instead of connecting.
</Note>

## Provider Setup

Reown initializes AppKit with a `WagmiAdapter` and wraps your app in `WagmiProvider`. The network comes from `activeChain` in `lib/network.ts`, which follows `NEXT_PUBLIC_NETWORK` — no per-provider chain edits needed.

```tsx components/Providers.tsx theme={null}
"use client";

import { ReactNode, useState, useEffect } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider, type Config } from "wagmi";
import { createAppKit } from "@reown/appkit/react";
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { ThemeProvider } from "next-themes";
import { activeChain } from "@/lib/network";

const queryClient = new QueryClient();

const projectId = process.env.NEXT_PUBLIC_REOWN_PROJECT_ID || "";

let wagmiAdapter: WagmiAdapter | null = null;
let isAppKitInitialized = false;

function initializeAppKit() {
  if (isAppKitInitialized || !projectId) return;

  wagmiAdapter = new WagmiAdapter({
    networks: [activeChain],
    projectId,
    ssr: true,
  });

  createAppKit({
    adapters: [wagmiAdapter],
    networks: [activeChain],
    projectId,
    features: {
      analytics: true,
    },
    themeMode: "dark",
  });

  isAppKitInitialized = true;
}

const Providers = ({ children }: { children: ReactNode }) => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    if (!projectId) {
      console.warn(
        "Missing NEXT_PUBLIC_REOWN_PROJECT_ID. Get one at https://cloud.reown.com/"
      );
    } else {
      initializeAppKit();
    }
    setMounted(true);
  }, []);

  if (!projectId) {
    return (
      <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
        <div className="min-h-screen flex items-center justify-center">
          <div className="text-center p-6 border border-border">
            <p className="text-muted-foreground mb-2">Missing configuration</p>
            <p className="text-sm text-muted-foreground">
              Add NEXT_PUBLIC_REOWN_PROJECT_ID to your .env file
            </p>
          </div>
        </div>
      </ThemeProvider>
    );
  }

  if (!mounted || !wagmiAdapter) {
    return (
      <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
        <div className="min-h-screen" />
      </ThemeProvider>
    );
  }

  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
      <WagmiProvider config={wagmiAdapter.wagmiConfig as Config}>
        <QueryClientProvider client={queryClient}>
          {children}
        </QueryClientProvider>
      </WagmiProvider>
    </ThemeProvider>
  );
};

export { Providers };
```

**Provider hierarchy:** `ThemeProvider` → `WagmiProvider` (from the AppKit adapter) → `QueryClientProvider`

## Inco SDK Integration

The Inco SDK works with the `walletClient` provided by wagmi (which Reown/AppKit supplies). The network-aware client comes from `lib/network.ts`:

```tsx hooks/useConfLottery.ts theme={null}
import { getIncoLightning } from "@/lib/network";
import { handleTypes } from "@inco/lightning-js";
import { useAccount, useWalletClient } from "wagmi";
import { parseEther } from "viem";

const { address } = useAccount();
const { data: walletClient } = useWalletClient();

// Network (Base Sepolia / Mainnet) is selected centrally in lib/network.ts via NEXT_PUBLIC_NETWORK.
const zap = await getIncoLightning();

// Encrypt a value before sending on-chain
const ciphertext = await zap.encrypt(parseEther(amount), {
  accountAddress: address,
  dappAddress: LOTTERY_ADDRESS,
  handleType: handleTypes.euint256,
});

// Decrypt a handle with attestation (e.g. check if the user won)
const [result] = await zap.attestedDecrypt(walletClient, [encryptedHandle]);
const isWinner = result.plaintext.value; // boolean for an ebool handle
```

## Dependencies

| Package                       | Purpose                      |
| ----------------------------- | ---------------------------- |
| `@reown/appkit`               | Reown AppKit (WalletConnect) |
| `@reown/appkit-adapter-wagmi` | AppKit ↔ wagmi adapter       |
| `@inco/lightning-js`          | Inco encryption/decryption   |
| `wagmi`                       | EVM wallet hooks             |
| `viem`                        | Ethereum utilities           |