Skip to main content

​
Scaffold

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

​
Environment Setup

Get your API key from developer.getpara.com and add it to frontend/.env.local: 
NEXT_PUBLIC_PARA_API_KEY=your_api_key_here
NEXT_PUBLIC_PARA_ENVIRONMENT=BETA
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.
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 { baseSepolia } from "wagmi/chains";

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 }) => {
  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
      <QueryClientProvider client={queryClient}>
        <ParaProvider
          paraClientConfig={{
            apiKey,
            env: environment,
          }}
          externalWalletConfig={{
            wallets: ["METAMASK", "COINBASE", "WALLETCONNECT", "RAINBOW"],
            evmConnector: {
              config: {
                chains: [baseSepolia],
                transports: {
                  [baseSepolia.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). Here’s how encryption and decryption work:
useConfLottery.ts
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,
  });

  // Get Inco executor fee
  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 (e.g., check if user won)
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
}
The key pattern: Para provides the walletClient via wagmi, which the Inco SDK uses for signing attestation requests during attestedDecrypt.

​
Dependencies

PackagePurpose
@getpara/react-sdkPara wallet SDK
@inco/jsInco encryption/decryption
wagmiEVM wallet hooks
viemEthereum utilities