> ## 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>

## Environment Setup

Get your project ID from [cloud.reown.com](https://cloud.reown.com) and add it to `frontend/.env.local`:

```bash theme={null}
NEXT_PUBLIC_REOWN_PROJECT_ID=your_project_id_here
NEXT_PUBLIC_CONFLOTTERY_ADDRESS=<deployed_contract_address>
```

## Provider Setup

Reown (formerly WalletConnect AppKit) uses `WagmiAdapter` and `createAppKit` for wallet management. The setup requires lazy initialization to handle SSR correctly.

```tsx 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 { baseSepolia } from "wagmi/chains";

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: [baseSepolia],
    projectId,
    ssr: true,
  });

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

  isAppKitInitialized = true;
}

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

  useEffect(() => {
    initializeAppKit();
    setMounted(true);
  }, []);

  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 adapter) → `QueryClientProvider`

Key details:

* `WagmiAdapter` creates a wagmi config internally — you use `wagmiAdapter.wagmiConfig` instead of creating your own.
* `createAppKit` initializes the Reown modal lazily (only after mount) to avoid SSR issues.
* The connect button uses the `<appkit-button />` web component in the header.
* Module-level variables (`wagmiAdapter`, `isAppKitInitialized`) ensure initialization runs only once.

## Inco SDK Integration

The Inco SDK works with the `walletClient` provided by wagmi (which Reown's adapter manages). Here's the core pattern:

```tsx useConfLottery.ts theme={null}
import { Lightning } from "@inco/js/lite";
import { handleTypes } from "@inco/js";
import { useAccount, useWalletClient, useWriteContract } from "wagmi";
import { parseEther } from "viem";

// Initialize Inco once
const zap = await Lightning.latest("testnet", 84532);

// Encrypt a value before sending on-chain
const { address } = useAccount();
const { data: walletClient } = useWalletClient();

async function deposit(amount: string) {
  const ciphertext = await zap.encrypt(parseEther(amount), {
    accountAddress: address,
    dappAddress: LOTTERY_ADDRESS,
    handleType: handleTypes.euint256,
  });

  const fee = await publicClient.readContract({
    address: zap.executorAddress,
    abi: getFeeAbi,
    functionName: "getFee",
  });

  writeContract({
    address: LOTTERY_ADDRESS,
    abi: confLotteryAbi,
    functionName: "deposit",
    args: [ciphertext],
    value: fee,
  });
}

// Decrypt with attestation
async function checkWinner() {
  const encryptedHandle = await publicClient.readContract({
    address: LOTTERY_ADDRESS,
    abi: confLotteryAbi,
    functionName: "getMyWinnerCheck",
    args: [currentRound],
    account: address,
  });

  const result = await zap.attestedDecrypt(walletClient, [encryptedHandle]);
  const isWinner = result[0].plaintext.value; // true or false
}
```

Reown handles the wallet connection via WalletConnect protocol — once connected, wagmi's `useWalletClient()` provides the signer that Inco's `attestedDecrypt` uses for signing attestation requests.

## Dependencies

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