create-shield-unshield-dapp 1.0.1

package/template/src/pages/ShieldUnshieldPage.tsx

@@ -0,0 +1,355 @@
+import React, { useState } from 'react';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import { useAccount } from 'wagmi';
+import toast from 'react-hot-toast';
+import { Shield, ShieldOff, Send, Wallet, Lock, Coins } from 'lucide-react';
+import { Card } from '../components/ui/Card';
+import { Button } from '../components/ui/Button';
+import { Input } from '../components/ui/Input';
+import { TOKEN_CONFIGS, getConfTokenAddress, type TokenKey } from '../lib/contracts';
+import { formatAmount, getUserFriendlyErrorMessage } from '../lib/utils';
+import { useWrapToken } from '../hooks/useWrapToken';
+import { useUnwrapToken } from '../hooks/useUnwrapToken';
+import { useConfidentialBalance } from '../hooks/useConfidentialBalance';
+import { useConfidentialTransfer } from '../hooks/useConfidentialTransfer';
+
+function TokenSection({
+  tokenKey,
+  title,
+  description,
+}: {
+  tokenKey: TokenKey;
+  title: string;
+  description: string;
+}) {
+  const config = TOKEN_CONFIGS[tokenKey];
+  const { balance, balanceFormatted, wrap, isWriting: isWrapping, needsApproval, refetch: refetchUnderlying } = useWrapToken(tokenKey);
+  const { unwrap: doUnwrap, isUnwrapping, unwrapStepLabel, fheReady: fheReadyUnwrap } = useUnwrapToken(tokenKey);
+  const confBalance = useConfidentialBalance(getConfTokenAddress(tokenKey));
+  const [wrapAmount, setWrapAmount] = useState('');
+  const [unwrapAmount, setUnwrapAmount] = useState('');
+
+  return (
+    <div className="relative overflow-hidden rounded-3xl bg-white border border-[var(--color-border-light)] shadow-[var(--shadow-md)] hover:shadow-[var(--shadow-lg)] transition-shadow duration-200">
+      {/* Orange gradient header strip */}
+      <div className="gradient-card-header relative overflow-hidden px-6 py-4">
+        <div className="absolute -top-1/2 -right-1/4 w-64 h-64 bg-white/10 rounded-full" />
+        <div className="absolute -bottom-1/2 -left-1/4 w-48 h-48 bg-white/10 rounded-full" />
+        <div className="relative flex items-center gap-3">
+          <img src={tokenKey === 'usdc' ? '/usdc.svg' : '/usdt.svg'} alt="" className="w-14 h-14 object-contain shrink-0" />
+          <div>
+            <h2 className="text-lg font-bold text-white">{title}</h2>
+            <p className="text-white/80 text-xs mt-0.5">{description}</p>
+          </div>
+        </div>
+      </div>
+      {/* Content with orange left accent */}
+      <div className="border-l-4 border-l-[var(--color-primary)] p-6 flex flex-col gap-6">
+        <div className="grid grid-cols-2 gap-3">
+          <div className="p-4 rounded-2xl bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-100/80">
+            <div className="text-[10px] font-semibold text-amber-700 uppercase tracking-wide">{config.underlyingSymbol}</div>
+            <div className="text-xl font-bold text-amber-800 mt-0.5">{balanceFormatted}</div>
+          </div>
+          <div className="p-4 rounded-2xl bg-[var(--color-bg-light)] border border-[var(--color-border-light)]">
+            <div className="text-[10px] font-semibold text-[var(--color-text-secondary)] uppercase tracking-wide">{config.symbol}</div>
+            <div className="text-xl font-bold text-[var(--color-text-primary)] mt-0.5">
+              {confBalance.decryptedBalance !== null
+                ? formatAmount(confBalance.decryptedBalance, config.decimals)
+                : confBalance.hasBalance
+                  ? 'Encrypted'
+                  : '0.00'}
+            </div>
+            {confBalance.hasBalance && !confBalance.isDecrypted && confBalance.fheReady && (
+              <Button size="sm" variant="ghost" className="mt-2 shadow-md border border-[var(--color-border-light)] bg-white hover:bg-gray-50" onClick={() => confBalance.decrypt()} loading={confBalance.isDecrypting}>
+                Decrypt
+              </Button>
+            )}
+          </div>
+        </div>
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-emerald-50 text-emerald-700 text-xs font-semibold border border-emerald-100">
+              Wrap {config.underlyingSymbol} → {config.symbol}
+            </span>
+          </div>
+          <div className="flex gap-2 flex-wrap items-center">
+            <div className="relative flex-1 min-w-[120px]">
+              <Input
+                type="text"
+                inputMode="decimal"
+                placeholder="0.00"
+                value={wrapAmount}
+                onChange={(e) => setWrapAmount(e.target.value)}
+              />
+              <button
+                type="button"
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-xs font-bold text-[var(--color-primary)] hover:underline"
+                onClick={() => setWrapAmount(balanceFormatted)}
+              >
+                MAX
+              </button>
+            </div>
+            <Button
+              size="sm"
+              onClick={async () => {
+                if (!wrapAmount || Number(wrapAmount) <= 0) return;
+                try {
+                  const hash = await wrap(wrapAmount);
+                  if (hash) {
+                    setWrapAmount('');
+                    await Promise.all([refetchUnderlying(), confBalance.refetch()]);
+                    toast.success(`Wrapped! ${config.symbol} received.`);
+                  }
+                } catch (err) {
+                  toast.error(getUserFriendlyErrorMessage(err, 'Wrap failed'));
+                }
+              }}
+              disabled={isWrapping || !wrapAmount || Number(wrapAmount) <= 0 || balance === 0n}
+              loading={isWrapping}
+            >
+              <Shield className="h-4 w-4" /> {wrapAmount && needsApproval(wrapAmount) ? 'Approve & Wrap/Shield' : 'Wrap/Shield'}
+            </Button>
+          </div>
+        </div>
+        <div className="pt-2 border-t border-[var(--color-border-light)]">
+          <div className="flex items-center gap-2 mb-2">
+            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-lg bg-orange-50 text-orange-700 text-xs font-semibold border border-orange-100">
+              Unwrap {config.symbol} → {config.underlyingSymbol}
+            </span>
+          </div>
+          <div className="flex gap-2 flex-wrap items-center">
+            <div className="relative flex-1 min-w-[120px]">
+              <Input
+                type="text"
+                inputMode="decimal"
+                placeholder="0.00"
+                value={unwrapAmount}
+                onChange={(e) => setUnwrapAmount(e.target.value)}
+              />
+              {confBalance.decryptedBalance !== null && confBalance.decryptedBalance > 0n && (
+                <button
+                  type="button"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 text-xs font-bold text-[var(--color-primary)] hover:underline"
+                  onClick={() => setUnwrapAmount(formatAmount(confBalance.decryptedBalance!, config.decimals))}
+                >
+                  MAX
+                </button>
+              )}
+            </div>
+            <Button
+              size="sm"
+              variant="secondary"
+              onClick={async () => {
+                if (!unwrapAmount || Number(unwrapAmount) <= 0) return;
+                try {
+                  const hash = await doUnwrap(unwrapAmount);
+                  if (hash) {
+                    setUnwrapAmount('');
+                    await Promise.all([refetchUnderlying(), confBalance.refetch()]);
+                    toast.success(`Unwrapped! ${config.underlyingSymbol} received.`);
+                  }
+                } catch (err) {
+                  toast.error(getUserFriendlyErrorMessage(err, 'Unwrap failed'));
+                }
+              }}
+              disabled={!fheReadyUnwrap || isUnwrapping || !unwrapAmount || Number(unwrapAmount) <= 0}
+              loading={isUnwrapping}
+            >
+              <ShieldOff className="h-4 w-4" /> {unwrapStepLabel}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TransferSection({ tokenKey }: { tokenKey: TokenKey }) {
+  const config = TOKEN_CONFIGS[tokenKey];
+  const { transfer, isTransferring, fheReady } = useConfidentialTransfer(tokenKey);
+  const confBalance = useConfidentialBalance(getConfTokenAddress(tokenKey));
+  const [toAddress, setToAddress] = useState('');
+  const [amount, setAmount] = useState('');
+
+  return (
+    <div className="relative overflow-hidden rounded-3xl bg-white border border-[var(--color-border-light)] shadow-[var(--shadow-md)] hover:shadow-[var(--shadow-lg)] transition-shadow duration-200">
+      <div className="gradient-card-header relative overflow-hidden px-6 py-4">
+        <div className="absolute -top-1/2 -right-1/4 w-64 h-64 bg-white/10 rounded-full" />
+        <div className="absolute -bottom-1/2 -left-1/4 w-48 h-48 bg-white/10 rounded-full" />
+        <div className="relative flex items-center gap-3">
+          <div className="w-11 h-11 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
+            <Send className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h2 className="text-lg font-bold text-white">Send {config.symbol}</h2>
+            <p className="text-white/80 text-xs mt-0.5">
+              Transfer confidential {config.symbol}. Amount is encrypted on-chain.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="border-l-4 border-l-[var(--color-primary)] p-6 flex flex-col gap-4">
+        <Input
+          label="Recipient address"
+          placeholder="0x..."
+          value={toAddress}
+          onChange={(e) => setToAddress(e.target.value)}
+        />
+        <div className="flex gap-2 items-center flex-wrap">
+          <div className="relative flex-1 min-w-[100px]">
+            <Input
+              type="text"
+              inputMode="decimal"
+              placeholder="0.00"
+              value={amount}
+              onChange={(e) => setAmount(e.target.value)}
+            />
+            {confBalance.decryptedBalance !== null && confBalance.decryptedBalance > 0n && (
+              <button
+                type="button"
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-xs font-bold text-[var(--color-primary)] hover:underline"
+                onClick={() => setAmount(formatAmount(confBalance.decryptedBalance!, config.decimals))}
+              >
+                MAX
+              </button>
+            )}
+          </div>
+          <Button
+            size="sm"
+            onClick={async () => {
+              if (!toAddress.trim() || !amount || Number(amount) <= 0) return;
+              const addr = toAddress.trim() as `0x${string}`;
+              if (!addr.startsWith('0x') || addr.length !== 42) {
+                toast.error('Invalid recipient address');
+                return;
+              }
+              try {
+                const hash = await transfer(addr, amount);
+                if (hash) {
+                  toast.success('Transfer sent.');
+                  setAmount('');
+                  setToAddress('');
+                  confBalance.refetch();
+                }
+              } catch (err) {
+                toast.error(getUserFriendlyErrorMessage(err, 'Transfer failed'));
+              }
+            }}
+            disabled={!fheReady || isTransferring || !toAddress.trim() || !amount || Number(amount) <= 0}
+            loading={isTransferring}
+          >
+            <Send className="h-4 w-4" /> Transfer
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ShieldUnshieldPage() {
+  const { isConnected } = useAccount();
+
+  return (
+    <div className="min-h-screen bg-[var(--color-bg-light)]">
+      <header className="border-b border-[var(--color-border-light)] bg-white/80 backdrop-blur sticky top-0 z-10">
+        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
+          <h1 className="text-xl font-bold text-[var(--color-text-primary)]">Shield / Unshield dApp</h1>
+          <ConnectButton />
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-4 py-8">
+        {!isConnected ? (
+          <div className="flex flex-col items-center">
+            {/* Hero card */}
+            <Card variant="elevated" padding="lg" className="w-full max-w-xl text-center overflow-hidden relative">
+              <div className="absolute inset-0 bg-gradient-to-br from-[var(--color-primary)]/5 via-transparent to-[var(--color-primary)]/10 pointer-events-none rounded-xl" />
+              <div className="relative">
+                <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-[var(--color-primary)]/15 text-[var(--color-primary)] mb-6">
+                  <Shield className="w-8 h-8" strokeWidth={2} />
+                </div>
+                <h2 className="text-2xl md:text-3xl font-bold text-[var(--color-text-primary)] tracking-tight mb-2">
+                  Shield your tokens. Send privately.
+                </h2>
+                <p className="text-[var(--color-text-secondary)] text-base mb-8 max-w-md mx-auto">
+                  Wrap USDC or USDT into confidential tokens, unwrap back anytime, and transfer without revealing amounts. Connect your wallet on Sepolia to get started.
+                </p>
+                <div className="flex flex-wrap justify-center gap-3 mb-8">
+                  <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-emerald-50 text-emerald-800 text-xs font-medium border border-emerald-100">
+                    <Coins className="w-3.5 h-3.5" /> Wrap & unwrap
+                  </span>
+                  <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[var(--color-info-bg)] text-[var(--color-info)] text-xs font-medium border border-blue-100">
+                    <Lock className="w-3.5 h-3.5" /> Private transfers
+                  </span>
+                  <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-amber-50 text-amber-800 text-xs font-medium border border-amber-100">
+                    Sepolia
+                  </span>
+                </div>
+                <div className="flex flex-col items-center gap-3">
+                  <ConnectButton />
+                  <p className="text-xs text-[var(--color-text-tertiary)]">
+                    You’ll need a Sepolia wallet and some test USDC/USDT.
+                  </p>
+                </div>
+              </div>
+            </Card>
+            {/* Steps */}
+            <div className="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-4 w-full max-w-2xl">
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-white/80 border border-[var(--color-border-light)]">
+                <div className="flex-shrink-0 w-10 h-10 rounded-xl bg-[var(--color-primary)]/10 flex items-center justify-center">
+                  <Wallet className="w-5 h-5 text-[var(--color-primary)]" />
+                </div>
+                <div>
+                  <div className="font-semibold text-sm text-[var(--color-text-primary)]">1. Connect</div>
+                  <div className="text-xs text-[var(--color-text-secondary)] mt-0.5">Connect your wallet on Sepolia.</div>
+                </div>
+              </div>
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-white/80 border border-[var(--color-border-light)]">
+                <div className="flex-shrink-0 w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center">
+                  <Shield className="w-5 h-5 text-emerald-700" />
+                </div>
+                <div>
+                  <div className="font-semibold text-sm text-[var(--color-text-primary)]">2. Wrap or unwrap</div>
+                  <div className="text-xs text-[var(--color-text-secondary)] mt-0.5">Convert between public and confidential tokens.</div>
+                </div>
+              </div>
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-white/80 border border-[var(--color-border-light)]">
+                <div className="flex-shrink-0 w-10 h-10 rounded-xl bg-[var(--color-info-bg)] flex items-center justify-center">
+                  <Send className="w-5 h-5 text-[var(--color-info)]" />
+                </div>
+                <div>
+                  <div className="font-semibold text-sm text-[var(--color-text-primary)]">3. Transfer</div>
+                  <div className="text-xs text-[var(--color-text-secondary)] mt-0.5">Send confidential tokens to any address.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-8">
+            <div className="rounded-2xl bg-gradient-to-r from-amber-50/80 via-orange-50/50 to-amber-50/80 border border-amber-100/60 px-5 py-3">
+              <p className="text-sm text-[var(--color-text-secondary)]">
+                Wrap USDC or USDT into confidential tokens (cUSDC, cUSDT), unwrap back to plain tokens, or send confidential tokens to another address.
+              </p>
+            </div>
+            <div className="grid gap-6 md:grid-cols-2">
+              <TokenSection
+                tokenKey="usdc"
+                title="USDC / cUSDC"
+                description="Wrap USDC to cUSDC or unwrap cUSDC back to USDC. Unwrap uses Zama gateway (two-step)."
+              />
+              <TokenSection
+                tokenKey="usdt"
+                title="USDT / cUSDT"
+                description="Wrap USDT to cUSDT or unwrap cUSDT back to USDT. Unwrap uses Zama gateway (two-step)."
+              />
+            </div>
+            <div className="grid gap-6 md:grid-cols-2">
+              <TransferSection tokenKey="usdc" />
+              <TransferSection tokenKey="usdt" />
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}

package/template/src/providers/FhevmContext.ts

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+import type { FhevmInstance } from './FhevmProvider';
+
+export interface FhevmContextType {
+  instance: FhevmInstance | null;
+  isReady: boolean;
+  isLoading: boolean;
+  error: Error | null;
+  initialize: () => Promise<void>;
+}
+
+export const FhevmContext = createContext<FhevmContextType>({
+  instance: null,
+  isReady: false,
+  isLoading: false,
+  error: null,
+  initialize: async () => {},
+});

package/template/src/providers/FhevmProvider.tsx

@@ -0,0 +1,140 @@
+/**
+ * FHEVM Provider - Zama RelayerSDK v0.3.0-8
+ */
+
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { useAccount, useChainId } from 'wagmi';
+import { isMainnet } from '../lib/contracts';
+import { FhevmContext } from './FhevmContext';
+
+declare global {
+  interface Window {
+    RelayerSDK?: RelayerSDKType;
+    relayerSDK?: RelayerSDKType;
+    ethereum?: any;
+  }
+}
+
+interface RelayerSDKType {
+  initSDK: () => Promise<void>;
+  createInstance: (config: FhevmInstanceConfig) => Promise<FhevmInstance>;
+  generateKeypair: () => { publicKey: string; privateKey: string };
+  SepoliaConfig: FhevmConfig;
+}
+
+interface FhevmConfig {
+  aclContractAddress: string;
+  kmsContractAddress: string;
+  inputVerifierContractAddress: string;
+  verifyingContractAddressDecryption: string;
+  verifyingContractAddressInputVerification: string;
+  chainId: number;
+  gatewayChainId: number;
+  network: string | unknown;
+  relayerUrl: string;
+}
+
+type FhevmInstanceConfig = Pick<
+  FhevmConfig,
+  | 'verifyingContractAddressDecryption'
+  | 'verifyingContractAddressInputVerification'
+  | 'kmsContractAddress'
+  | 'aclContractAddress'
+  | 'gatewayChainId'
+> & { network: unknown; publicKey?: Uint8Array; auth?: unknown };
+
+export interface FhevmInstance {
+  createEncryptedInput: (contractAddress: string, userAddress: string) => { add64: (n: bigint) => { encrypt: () => Promise<{ handles: unknown[]; inputProof: unknown }> } };
+  generateKeypair: () => { publicKey: string; privateKey: string };
+  createEIP712: (publicKey: string, contractAddresses: string[], startTimestamp: string, durationDays: string) => unknown;
+  userDecrypt: (...args: unknown[]) => Promise<Record<string, bigint | string>>;
+  publicDecrypt?: (handles: string[]) => Promise<{ decryptionProof?: string; clearValues?: Record<string, bigint | number> }>;
+}
+
+const RELAYER_SDK_CDN = 'https://cdn.zama.org/relayer-sdk-js/0.3.0-8/relayer-sdk-js.umd.cjs';
+const MAINNET_CHAIN_ID = 1;
+const SEPOLIA_CHAIN_ID = 11155111;
+
+const EXPECTED_CHAIN_ID = isMainnet ? MAINNET_CHAIN_ID : SEPOLIA_CHAIN_ID;
+const EXPECTED_NETWORK_NAME = isMainnet ? 'Mainnet' : 'Sepolia';
+
+interface FhevmProviderProps {
+  children: React.ReactNode;
+}
+
+export function FhevmProvider({ children }: FhevmProviderProps) {
+  const { address, isConnected } = useAccount();
+  const chainId = useChainId();
+  const [instance, setInstance] = useState<FhevmInstance | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const getSDK = useCallback((): RelayerSDKType | null => {
+    return window.relayerSDK || window.RelayerSDK || null;
+  }, []);
+
+  const loadSDK = useCallback(async (): Promise<void> => {
+    if (getSDK()) return;
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = RELAYER_SDK_CDN;
+      script.async = true;
+      script.type = 'text/javascript';
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error('Failed to load FHEVM SDK from CDN.'));
+      document.head.appendChild(script);
+    });
+  }, [getSDK]);
+
+  const initialize = useCallback(async () => {
+    if (!isConnected || !address || !window.ethereum) return;
+    if (chainId !== EXPECTED_CHAIN_ID) {
+      setError(new Error(`Please connect to ${EXPECTED_NETWORK_NAME}`));
+      return;
+    }
+    if (instance) return;
+    if (isMainnet) {
+      setError(new Error('Mainnet relayer requires an API key. Contact the team for access.'));
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      await loadSDK();
+      const sdk = getSDK();
+      if (!sdk) throw new Error('FHEVM SDK not available after loading.');
+      await sdk.initSDK();
+      const fhevmInstance = await sdk.createInstance({ ...sdk.SepoliaConfig, network: window.ethereum });
+      setInstance(fhevmInstance as FhevmInstance);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to initialize FHEVM'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [isConnected, address, chainId, instance, loadSDK, getSDK]);
+
+  useEffect(() => {
+    if (isConnected && address && chainId === EXPECTED_CHAIN_ID && !isMainnet && !instance && !isLoading) {
+      void initialize();
+    }
+  }, [isConnected, address, chainId, instance, isLoading, initialize]);
+
+  useEffect(() => {
+    if (!isConnected || chainId !== EXPECTED_CHAIN_ID) {
+      setInstance(null);
+      setError(new Error(`Please connect to ${EXPECTED_NETWORK_NAME}`));
+      return;
+    }
+    if (isMainnet) {
+      setInstance(null);
+      setError(new Error('Mainnet relayer requires an API key. Contact the team for access.'));
+    }
+  }, [isConnected, chainId]);
+
+  const value = useMemo(
+    () => ({ instance, isReady: !!instance && isConnected, isLoading, error, initialize }),
+    [instance, isConnected, isLoading, error, initialize]
+  );
+
+  return <FhevmContext.Provider value={value}>{children}</FhevmContext.Provider>;
+}

package/template/src/providers/WalletProvider.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import React from 'react';
+import { getDefaultConfig, RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit';
+import { WagmiProvider, http } from 'wagmi';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { CHAIN, CHAIN_RPC_URL } from '../lib/contracts';
+import '@rainbow-me/rainbowkit/styles.css';
+
+const queryClient = new QueryClient();
+
+const WALLETCONNECT_PROJECT_ID =
+  import.meta.env.VITE_WALLETCONNECT_PROJECT_ID ?? 'cf5d11022a642e528f427d4210e992db';
+
+const config = getDefaultConfig({
+  appName: 'Shield / Unshield dApp',
+  projectId: WALLETCONNECT_PROJECT_ID,
+  chains: [CHAIN],
+  ssr: false,
+  transports: {
+    [CHAIN.id]: http(CHAIN_RPC_URL, { batch: true, retryCount: 3, retryDelay: 1000 }),
+  },
+});
+
+interface WalletProviderProps {
+  children: React.ReactNode;
+}
+
+export function WalletProvider({ children }: WalletProviderProps) {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider
+          modalSize="compact"
+          theme={lightTheme({
+            accentColor: '#FF8C00',
+            accentColorForeground: 'white',
+          })}
+          appInfo={{
+            appName: 'Shield / Unshield dApp',
+            learnMoreUrl: 'https://zama.ai',
+          }}
+        >
+          {children}
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}

package/template/src/providers/useFhevmContext.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { FhevmContext } from './FhevmContext';
+
+export function useFhevm() {
+  const ctx = useContext(FhevmContext);
+  if (!ctx) throw new Error('useFhevm must be used within a FhevmProvider');
+  return ctx;
+}

package/template/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["src"]
+}

package/template/tsconfig.json

@@ -0,0 +1 @@
+{"files":[],"references":[{"path":"./tsconfig.app.json"},{"path":"./tsconfig.node.json"}]}

package/template/tsconfig.node.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  optimizeDeps: {
+    include: ['es-errors', 'call-bound', 'is-typed-array'],
+    exclude: ['lucide-react'],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    },
+  },
+  preview: {
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    },
+  },
+})