create-shield-unshield-dapp 1.0.1

package/template/src/hooks/useFhevmEncrypt.ts

@@ -0,0 +1,63 @@
+/**
+ * FHEVM Encryption Hook - encrypt amounts for confidential transactions
+ */
+
+import { useCallback, useState } from 'react';
+import { useAccount } from 'wagmi';
+import { toHex } from 'viem';
+import { useFhevm } from '../providers/useFhevmContext';
+
+export interface EncryptedAmount {
+  handles: `0x${string}`[];
+  inputProof: `0x${string}`;
+}
+
+function uint8ArrayToHex(arr: Uint8Array): `0x${string}` {
+  return toHex(arr);
+}
+
+export function useFhevmEncrypt() {
+  const { instance, isReady, error } = useFhevm();
+  const { address, isConnected } = useAccount();
+  const [isEncrypting, setIsEncrypting] = useState(false);
+  const [encryptError, setEncryptError] = useState<Error | null>(null);
+
+  const MAX_UINT64 = 18446744073709551615n;
+
+  const encryptAmount = useCallback(
+    async (amount: bigint, contractAddress: string): Promise<EncryptedAmount | null> => {
+      if (!instance || !address || !isReady || !isConnected) {
+        setEncryptError(new Error('FHEVM not ready or wallet not connected'));
+        return null;
+      }
+      if (amount < 0n || amount > MAX_UINT64) {
+        setEncryptError(new Error('Amount out of range for uint64 encryption'));
+        return null;
+      }
+      setIsEncrypting(true);
+      setEncryptError(null);
+      try {
+        const encryptedInput = instance.createEncryptedInput(contractAddress, address);
+        const result = await encryptedInput.add64(amount).encrypt();
+        const { handles, inputProof } = result;
+        const hexHandles = handles.map((h: unknown) => {
+          if (typeof h === 'string' && h.startsWith('0x')) return h as `0x${string}`;
+          return uint8ArrayToHex(h as Uint8Array);
+        });
+        const hexProof =
+          typeof inputProof === 'string' && inputProof.startsWith('0x')
+            ? (inputProof as `0x${string}`)
+            : uint8ArrayToHex(inputProof as unknown as Uint8Array);
+        return { handles: hexHandles, inputProof: hexProof };
+      } catch (err) {
+        setEncryptError(err instanceof Error ? err : new Error('Encryption failed'));
+        return null;
+      } finally {
+        setIsEncrypting(false);
+      }
+    },
+    [instance, address, isReady, isConnected]
+  );
+
+  return { encryptAmount, isEncrypting, error: error || encryptError, isReady };
+}

package/template/src/hooks/useUnwrapToken.ts

@@ -0,0 +1,139 @@
+/**
+ * ERC-7984 two-step unwrap: unwrap() then finalizeUnwrap() after tx is confirmed.
+ */
+
+import { useCallback, useState } from 'react';
+import { createPublicClient, http, decodeEventLog, type TransactionReceipt } from 'viem';
+import { useAccount, useWriteContract } from 'wagmi';
+import { CONF_TOKEN_ABI, TOKEN_CONFIGS, getConfTokenAddress, CHAIN, CHAIN_RPC_URL, type TokenKey } from '../lib/contracts';
+import { parseAmount } from '../lib/utils';
+import { useFhevm } from '../providers/useFhevmContext';
+import { useFhevmEncrypt } from './useFhevmEncrypt';
+
+const publicClient = createPublicClient({
+  chain: CHAIN,
+  transport: http(CHAIN_RPC_URL, { retryCount: 3, timeout: 10_000 }),
+});
+
+type PublicDecryptInstance = {
+  publicDecrypt: (handles: string[]) => Promise<{ decryptionProof?: string; clearValues?: Record<string, bigint | number> }>;
+};
+
+function parseBurntHandleFromReceipt(receipt: TransactionReceipt, tokenAddress: `0x${string}`): `0x${string}` | null {
+  const tokenLower = tokenAddress.toLowerCase();
+  for (const log of receipt.logs) {
+    if (log.address?.toLowerCase() !== tokenLower) continue;
+    try {
+      const decoded = decodeEventLog({ abi: CONF_TOKEN_ABI, data: log.data, topics: log.topics });
+      if (decoded.eventName === 'UnwrapRequested' && decoded.args && 'amount' in decoded.args) {
+        const amount = decoded.args.amount;
+        if (typeof amount === 'string' && amount.startsWith('0x') && amount.length === 66) return amount as `0x${string}`;
+      }
+    } catch {
+      continue;
+    }
+  }
+  return null;
+}
+
+async function getDecryptionProof(
+  instance: PublicDecryptInstance,
+  handle: string,
+  maxAttempts = 8,
+  delayMs = 2000
+): Promise<{ cleartext: bigint; decryptionProof: `0x${string}` } | null> {
+  for (let i = 0; i < maxAttempts; i++) {
+    try {
+      const result = await instance.publicDecrypt([handle]);
+      const proof = result?.decryptionProof ?? (result as { decryptionProof?: string })?.decryptionProof;
+      const clearValues = result?.clearValues ?? (result as { clearValues?: Record<string, bigint | number> })?.clearValues;
+      if (proof && clearValues != null && handle in clearValues) {
+        const val = clearValues[handle];
+        const cleartext = typeof val === 'bigint' ? val : BigInt(Number(val));
+        return {
+          cleartext,
+          decryptionProof: proof.startsWith('0x') ? (proof as `0x${string}`) : (`0x${proof}` as `0x${string}`),
+        };
+      }
+    } catch {
+      /* gateway not ready */
+    }
+    if (i < maxAttempts - 1) await new Promise((r) => setTimeout(r, delayMs));
+  }
+  return null;
+}
+
+export type UnwrapStep = 'idle' | 'encrypting' | 'confirming' | 'getting_proof' | 'finalizing';
+
+export function useUnwrapToken(tokenKey: TokenKey) {
+  const { address, isConnected } = useAccount();
+  const { instance, isReady: fheReady } = useFhevm();
+  const { encryptAmount } = useFhevmEncrypt();
+  const { writeContractAsync, isPending } = useWriteContract();
+  const confToken = getConfTokenAddress(tokenKey);
+  const config = TOKEN_CONFIGS[tokenKey];
+
+  const [isUnwrapping, setIsUnwrapping] = useState(false);
+  const [unwrapStep, setUnwrapStep] = useState<UnwrapStep>('idle');
+
+  const unwrapStepLabels: Record<UnwrapStep, string> = {
+    idle: 'Unwrap/Unshield',
+    encrypting: 'Preparing…',
+    confirming: 'Confirming unwrap…',
+    getting_proof: 'Getting decryption proof…',
+    finalizing: `Finalizing (receiving ${config.underlyingSymbol})…`,
+  };
+
+  const unwrap = useCallback(
+    async (amountHuman: string) => {
+      if (!address || !isConnected || !fheReady || !instance) return null;
+      const amount = parseAmount(amountHuman, config.decimals);
+      if (amount <= 0n) return null;
+      setIsUnwrapping(true);
+      setUnwrapStep('encrypting');
+      try {
+        const encrypted = await encryptAmount(amount, confToken);
+        if (!encrypted?.handles?.[0]) throw new Error('Encryption failed');
+        const handle = encrypted.handles[0];
+        setUnwrapStep('confirming');
+        const hash = await writeContractAsync({
+          address: confToken,
+          abi: CONF_TOKEN_ABI,
+          functionName: 'unwrap',
+          args: [address, address, handle, encrypted.inputProof as `0x${string}`],
+        });
+        if (!hash) throw new Error('Unwrap tx failed');
+        const receipt = await publicClient.waitForTransactionReceipt({ hash });
+        if (receipt.status !== 'success') throw new Error('Unwrap transaction reverted');
+        const burntHandle = parseBurntHandleFromReceipt(receipt, confToken) ?? handle;
+        setUnwrapStep('getting_proof');
+        const proofResult = await getDecryptionProof(instance as unknown as PublicDecryptInstance, burntHandle);
+        if (!proofResult) throw new Error('Decryption proof not ready. Try again in a few seconds.');
+        setUnwrapStep('finalizing');
+        const cleartextU64 = proofResult.cleartext <= 0xffff_ffff_ffff_ffffn ? proofResult.cleartext : 0n;
+        const finalizeHash = await writeContractAsync({
+          address: confToken,
+          abi: CONF_TOKEN_ABI,
+          functionName: 'finalizeUnwrap',
+          args: [burntHandle, cleartextU64, proofResult.decryptionProof],
+        });
+        if (finalizeHash) {
+          await publicClient.waitForTransactionReceipt({ hash: finalizeHash });
+        }
+        return finalizeHash ?? hash;
+      } finally {
+        setIsUnwrapping(false);
+        setUnwrapStep('idle');
+      }
+    },
+    [address, isConnected, fheReady, instance, encryptAmount, writeContractAsync, confToken, config.decimals, config.underlyingSymbol]
+  );
+
+  return {
+    unwrap,
+    isUnwrapping: isUnwrapping || isPending,
+    unwrapStep,
+    unwrapStepLabel: unwrapStepLabels[unwrapStep],
+    fheReady: !!instance && fheReady,
+  };
+}

package/template/src/hooks/useWrapToken.ts

@@ -0,0 +1,93 @@
+import { useCallback, useEffect, useState } from 'react';
+import { createPublicClient, http, formatUnits, maxUint256 } from 'viem';
+import { useAccount, useWriteContract } from 'wagmi';
+import { ERC20_ABI, CONF_TOKEN_ABI, TOKEN_CONFIGS, getUnderlyingAddress, getConfTokenAddress, CHAIN, CHAIN_RPC_URL, type TokenKey } from '../lib/contracts';
+import { parseAmount } from '../lib/utils';
+
+const client = createPublicClient({
+  chain: CHAIN,
+  transport: http(CHAIN_RPC_URL, { retryCount: 3, timeout: 10_000 }),
+});
+
+export function useWrapToken(tokenKey: TokenKey) {
+  const { address, isConnected } = useAccount();
+  const { writeContractAsync, isPending } = useWriteContract();
+  const underlying = getUnderlyingAddress(tokenKey);
+  const confToken = getConfTokenAddress(tokenKey);
+  const config = TOKEN_CONFIGS[tokenKey];
+
+  const [balance, setBalance] = useState<bigint>(0n);
+  const [allowance, setAllowance] = useState<bigint>(0n);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isWrappingFlow, setIsWrappingFlow] = useState(false);
+
+  const fetchBalances = useCallback(async () => {
+    if (!address) return;
+    setIsLoading(true);
+    try {
+      const [bal, allow] = await Promise.all([
+        client.readContract({ address: underlying, abi: ERC20_ABI, functionName: 'balanceOf', args: [address] }),
+        client.readContract({ address: underlying, abi: ERC20_ABI, functionName: 'allowance', args: [address, confToken] }),
+      ]);
+      setBalance(bal);
+      setAllowance(allow);
+    } catch {
+      setBalance(0n);
+      setAllowance(0n);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [address, underlying, confToken]);
+
+  useEffect(() => {
+    if (isConnected && address) void fetchBalances();
+  }, [isConnected, address, fetchBalances]);
+
+  const approve = useCallback(async (amountHuman?: string) => {
+    if (!address || !isConnected) return null;
+    const spendAmount = amountHuman ? parseAmount(amountHuman, config.decimals) : maxUint256;
+    const hash = await writeContractAsync({
+      address: underlying,
+      abi: ERC20_ABI,
+      functionName: 'approve',
+      args: [confToken, spendAmount],
+    });
+    await client.waitForTransactionReceipt({ hash });
+    await fetchBalances();
+    return hash;
+  }, [address, isConnected, underlying, confToken, config.decimals, writeContractAsync, fetchBalances]);
+
+  const wrap = useCallback(async (amountHuman: string) => {
+    if (!address || !isConnected) return null;
+    const amount = parseAmount(amountHuman, config.decimals);
+    setIsWrappingFlow(true);
+    try {
+      if (allowance < amount) await approve();
+      const hash = await writeContractAsync({
+        address: confToken,
+        abi: CONF_TOKEN_ABI,
+        functionName: 'wrap',
+        args: [address, amount],
+      });
+      await client.waitForTransactionReceipt({ hash });
+      await fetchBalances();
+      return hash;
+    } finally {
+      setIsWrappingFlow(false);
+    }
+  }, [address, isConnected, allowance, approve, confToken, config.decimals, writeContractAsync, fetchBalances]);
+
+  return {
+    balance,
+    balanceFormatted: formatUnits(balance, config.decimals),
+    allowance,
+    needsApproval: (amount: string) => {
+      try { return allowance < parseAmount(amount, config.decimals); } catch { return true; }
+    },
+    isLoading,
+    isWriting: isPending || isWrappingFlow,
+    approve,
+    wrap,
+    refetch: fetchBalances,
+  };
+}

package/template/src/index.css

@@ -0,0 +1,51 @@
+@import "tailwindcss";
+
+:root {
+  --color-primary: #FF8C00;
+  --color-primary-light: #FFB347;
+  --color-primary-dark: #CC7000;
+  --color-bg-white: #FFFFFF;
+  --color-bg-light: #f8f7f5;
+  --color-text-primary: #1d150c;
+  --color-text-secondary: #a17745;
+  --color-text-tertiary: #c4a882;
+  --color-text-on-primary: #FFFFFF;
+  --color-success: #10B981;
+  --color-warning: #F59E0B;
+  --color-error: #EF4444;
+  --color-info: #3B82F6;
+  --color-border-light: #eaddcd;
+  --color-border-input: #d4c4a8;
+  --color-border-focus: #FF8C00;
+  --color-success-bg: #ECFDF5;
+  --color-warning-bg: #FFFBEB;
+  --color-error-bg: #FEF2F2;
+  --color-info-bg: #EFF6FF;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);
+  --shadow-glow: 0 0 40px rgb(255 140 0 / 0.12);
+}
+
+/* Payroll-style gradient card header */
+.gradient-card-header {
+  background: linear-gradient(135deg, var(--color-primary) 0%, #f97316 50%, #d97706 100%);
+}
+
+html { scroll-behavior: smooth; }
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-light);
+  -webkit-font-smoothing: antialiased;
+}
+button:disabled { cursor: not-allowed; }
+:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+
+@theme {
+  --color-payroll-orange: #FF8C00;
+  --color-success: #10B981;
+  --color-warning: #F59E0B;
+  --color-error: #EF4444;
+}

package/template/src/lib/contracts.ts

@@ -0,0 +1,71 @@
+/// <reference types="vite/client" />
+import { parseAbi } from 'viem';
+import { mainnet, sepolia } from 'viem/chains';
+
+const env = import.meta.env;
+
+/** Set to "true" for mainnet, anything else (or unset) = testnet (Sepolia) */
+export const isMainnet = env.VITE_MAINNET === 'true';
+
+export const CHAIN = isMainnet ? mainnet : sepolia;
+
+/** Mainnet: Valid Token–Wrapper pairs (Ethereum mainnet) */
+const MAINNET_CONTRACTS = {
+  USDC: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48' as `0x${string}`,
+  CONF_USDC: '0xe978F22157048E5DB8E5d0797136e86671672B2' as `0x${string}`,
+  USDT: '0xdAC17F958D2ee523a2206206994597C130831ec7' as `0x${string}`,
+  CONF_USDT: '0xAe0207C757Aa2B4019Ad96edD0092ddc63EF0c50' as `0x${string}`,
+} as const;
+
+/** Testnet: from env (Sepolia) */
+const SEPOLIA_CONTRACTS = {
+  USDC: (env.VITE_USDC_ADDRESS || '0x0000000000000000000000000000000000000000') as `0x${string}`,
+  CONF_USDC: (env.VITE_CONF_USDC_ADDRESS || '0x0000000000000000000000000000000000000000') as `0x${string}`,
+  USDT: (env.VITE_USDT_ADDRESS || '0x0000000000000000000000000000000000000000') as `0x${string}`,
+  CONF_USDT: (env.VITE_CONF_USDT_ADDRESS || '0x0000000000000000000000000000000000000000') as `0x${string}`,
+} as const;
+
+export const CONTRACTS = isMainnet ? MAINNET_CONTRACTS : SEPOLIA_CONTRACTS;
+
+/** RPC URL for the active chain (used by hooks and WalletProvider) */
+export const CHAIN_RPC_URL = isMainnet
+  ? (env.VITE_MAINNET_RPC_URL || 'https://eth.llamarpc.com')
+  : (env.VITE_SEPOLIA_RPC_URL || 'https://ethereum-sepolia-rpc.publicnode.com');
+
+export type TokenKey = 'usdc' | 'usdt';
+
+export const TOKEN_CONFIGS: Record<TokenKey, { symbol: string; underlyingSymbol: string; decimals: number }> = {
+  usdc: { symbol: 'cUSDC', underlyingSymbol: 'USDC', decimals: 6 },
+  usdt: { symbol: 'cUSDT', underlyingSymbol: 'USDT', decimals: 6 },
+};
+
+export function getUnderlyingAddress(key: TokenKey): `0x${string}` {
+  return key === 'usdc' ? CONTRACTS.USDC : CONTRACTS.USDT;
+}
+
+export function getConfTokenAddress(key: TokenKey): `0x${string}` {
+  return key === 'usdc' ? CONTRACTS.CONF_USDC : CONTRACTS.CONF_USDT;
+}
+
+export const ERC20_ABI = parseAbi([
+  'function balanceOf(address account) view returns (uint256)',
+  'function allowance(address owner, address spender) view returns (uint256)',
+  'function approve(address spender, uint256 amount) returns (bool)',
+  'function decimals() view returns (uint8)',
+  'function symbol() view returns (string)',
+]);
+
+/** ERC-7984 confidential token (wrap, unwrap, finalizeUnwrap, confidentialTransfer) */
+export const CONF_TOKEN_ABI = parseAbi([
+  'function wrap(address to, uint256 amount)',
+  'function unwrap(address from, address to, bytes32 encryptedAmount, bytes inputProof)',
+  'function finalizeUnwrap(bytes32 burntAmount, uint64 burntAmountCleartext, bytes decryptionProof)',
+  'function confidentialBalanceOf(address account) view returns (bytes32)',
+  'function confidentialTransfer(address to, bytes32 encryptedAmount, bytes inputProof)',
+  'function setOperator(address operator, uint48 until)',
+  'function isOperator(address account, address operator) view returns (bool)',
+  'function underlying() view returns (address)',
+  'function rate() view returns (uint256)',
+  'event UnwrapRequested(address indexed receiver, bytes32 amount)',
+  'event UnwrapFinalized(address indexed receiver, bytes32 encryptedAmount, uint64 cleartextAmount)',
+]);

package/template/src/lib/utils.ts

@@ -0,0 +1,44 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatAddress(address: string, chars = 4): string {
+  if (!address) return '';
+  return `${address.slice(0, chars + 2)}...${address.slice(-chars)}`;
+}
+
+export function formatAmount(amount: bigint, decimals = 6): string {
+  const divisor = BigInt(10 ** decimals);
+  const integerPart = amount / divisor;
+  const fractionalPart = amount % divisor;
+  const fractionalStr = fractionalPart.toString().padStart(decimals, '0');
+  const trimmedFractional = fractionalStr.slice(0, 2);
+  return `${integerPart.toLocaleString()}.${trimmedFractional}`;
+}
+
+export function parseAmount(amount: string, decimals = 6): bigint {
+  const [integer, fraction = ''] = amount.split('.');
+  const paddedFraction = fraction.padEnd(decimals, '0').slice(0, decimals);
+  return BigInt(integer + paddedFraction);
+}
+
+export function getUserFriendlyErrorMessage(err: unknown, fallback = 'Something went wrong. Please try again.'): string {
+  const msg = err instanceof Error ? err.message : String(err ?? '');
+  const lower = msg.toLowerCase();
+  if (
+    lower.includes('user rejected') ||
+    lower.includes('user denied') ||
+    lower.includes('rejected the request') ||
+    lower.includes('denied transaction') ||
+    lower.includes('tx signature: user denied') ||
+    lower.includes('request rejected')
+  ) {
+    return "You cancelled the transaction. You can try again when you're ready.";
+  }
+  if (msg && msg.length < 120) return msg;
+  if (msg) return msg.slice(0, 100) + '…';
+  return fallback;
+}

package/template/src/main.tsx

@@ -0,0 +1,24 @@
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Toaster } from 'react-hot-toast';
+import { WalletProvider } from './providers/WalletProvider';
+import { FhevmProvider } from './providers/FhevmProvider';
+import './index.css';
+import App from './App';
+
+createRoot(document.getElementById('root') as HTMLElement).render(
+  <StrictMode>
+    <WalletProvider>
+      <FhevmProvider>
+        <App />
+        <Toaster
+          position="top-right"
+          toastOptions={{
+            duration: 4000,
+            style: { background: '#FF8C00', color: '#fff' },
+          }}
+        />
+      </FhevmProvider>
+    </WalletProvider>
+  </StrictMode>
+);