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.
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.
"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 };
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:
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
}
walletClient via wagmi, which the Inco SDK uses for signing attestation requests during attestedDecrypt.
Dependencies
| Package | Purpose |
|---|
@getpara/react-sdk | Para wallet SDK |
@inco/js | Inco encryption/decryption |
wagmi | EVM wallet hooks |
viem | Ethereum utilities |
