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 reown --framework hardhat --chain evm --yes
Environment Setup
Get your project ID from cloud.reown.com and add it to frontend/.env.local:
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.
"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 };
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:
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
}
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 |
