Para - Inco Docs

Scaffold

npx create-inco-app@latest my-app --wallet para --framework hardhat --chain evm --yes

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 and set it in frontend/.env:

frontend/.env

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

components/Providers.tsx

"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:

hooks/useConfLottery.ts

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

​Scaffold

​Environment Setup

​Provider Setup

​Inco SDK Integration

​Dependencies

Scaffold

Environment Setup

Provider Setup

Inco SDK Integration

Dependencies