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

# Para

> Set up Para wallet integration with Inco

## Scaffold

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

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

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

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

This scaffolds the full monorepo with Para as the wallet provider. For just the frontend, add `--template frontend`.

## Environment Setup

Get your API key from [developer.getpara.com](https://developer.getpara.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_PARA_API_KEY=your_api_key_here
NEXT_PUBLIC_PARA_ENVIRONMENT=BETA

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

## Provider Setup

Para wraps your app with `ParaProvider`, which handles wallet connections, embedded wallets, and external wallet support (MetaMask, Coinbase, WalletConnect, Rainbow) out of the box. The chain 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 } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ParaProvider } from "@getpara/react-sdk";
import { Environment } from "@getpara/react-sdk";
import { http } from "wagmi";
import { ThemeProvider } from "next-themes";
import { activeChain } from "@/lib/network";

const queryClient = new QueryClient();

const apiKey = process.env.NEXT_PUBLIC_PARA_API_KEY || "";
const environment =
  (process.env.NEXT_PUBLIC_PARA_ENVIRONMENT as Environment) ||
  Environment.BETA;

const Providers = ({ children }: { children: ReactNode }) => {
  if (!apiKey) {
    console.warn(
      "Missing NEXT_PUBLIC_PARA_API_KEY. Get one at https://developer.getpara.com/"
    );
  }

  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
      <QueryClientProvider client={queryClient}>
        <ParaProvider
          paraClientConfig={{
            apiKey,
            env: environment,
          }}
          externalWalletConfig={{
            wallets: ["METAMASK", "COINBASE", "WALLETCONNECT", "RAINBOW"],
            evmConnector: {
              config: {
                chains: [activeChain],
                transports: {
                  [activeChain.id]: http(),
                },
              },
            },
          }}
          config={{ appName: "inco confidential lottery" }}
          paraModalConfig={{
            authLayout: ["AUTH:FULL", "EXTERNAL:FULL"],
          }}
        >
          {children}
        </ParaProvider>
      </QueryClientProvider>
    </ThemeProvider>
  );
};

export { Providers };
```

**Provider hierarchy:** `ThemeProvider` → `QueryClientProvider` → `ParaProvider`

Para's `ParaProvider` internally manages wagmi configuration, so you don't need a separate `WagmiProvider`. The `externalWalletConfig` lets you specify which external wallets to support alongside Para's embedded wallets.

## Inco SDK Integration

The Inco SDK works with the `walletClient` provided by wagmi (which Para supplies under the hood). 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
```

The key pattern: Para provides the `walletClient` via wagmi, which the Inco SDK uses for signing attestation requests during `attestedDecrypt`.

## Dependencies

| Package              | Purpose                    |
| -------------------- | -------------------------- |
| `@getpara/react-sdk` | Para wallet SDK            |
| `@inco/lightning-js` | Inco encryption/decryption |
| `wagmi`              | EVM wallet hooks           |
| `viem`               | Ethereum utilities         |