+ {/* ── Header ── */}
+
+ {error}
+
+ )}
+
+ {/* ── Stat Cards ── */}
+
+ );
+}
diff --git a/src/app/developers/page.tsx b/src/app/app/developers/page.tsx
similarity index 99%
rename from src/app/developers/page.tsx
rename to src/app/app/developers/page.tsx
index d9beac9..c1328e4 100644
--- a/src/app/developers/page.tsx
+++ b/src/app/app/developers/page.tsx
@@ -1,6 +1,8 @@
'use client';
import React, { useState, useMemo } from 'react';
+
+const APP_URL = process.env.NEXT_PUBLIC_APP_URL?.replace(/\/$/, '') ?? 'https://YOUR_DEPLOYMENT_URL';
import Card from '@/components/ui/Card';
import Badge from '@/components/ui/Badge';
import Button from '@/components/ui/Button';
@@ -477,7 +479,7 @@ function restApiSnippet(chain: string): string {
// Returns all registered wrapper pairs with metadata.
const response = await fetch(
- 'https://zamavault.xyz/api/registry?chain=${chain}'
+ '${APP_URL}/api/registry?chain=${chain}'
);
const data = await response.json();
@@ -563,7 +565,7 @@ export default function DevelopersPage() {
style={{
fontSize: 'var(--text-lg)',
maxWidth: 640,
- marginTop: 'var(--sp-3)',
+ margin: 'var(--sp-3) auto 0',
lineHeight: 'var(--lh-relaxed)',
}}
>
diff --git a/src/app/docs/page.tsx b/src/app/app/docs/page.tsx
similarity index 98%
rename from src/app/docs/page.tsx
rename to src/app/app/docs/page.tsx
index 1d059eb..b5fd9f5 100644
--- a/src/app/docs/page.tsx
+++ b/src/app/app/docs/page.tsx
@@ -1,6 +1,9 @@
'use client';
import React, { useState, useEffect, useRef, useCallback } from 'react';
+
+// Base URL for API examples in docs — set NEXT_PUBLIC_APP_URL in your deployment.
+const APP_URL = process.env.NEXT_PUBLIC_APP_URL?.replace(/\/$/, '') ?? 'https://YOUR_DEPLOYMENT_URL';
import Link from 'next/link';
import Badge from '@/components/ui/Badge';
import CopyButton from '@/components/ui/CopyButton';
@@ -218,8 +221,8 @@ function AddressTable({
pairs: { symbol: string; erc20: string; wrapper: string; decimals: number }[];
}) {
const explorerBase = network === 'Sepolia'
- ? 'https://sepolia.etherscan.io/address'
- : 'https://etherscan.io/address';
+ ? 'https://eth-sepolia.blockscout.com/address'
+ : 'https://eth.blockscout.com/address';
return (
+
+
+
+
+
+
+ {/* ── Controls ── */}
+
+
+ + On-chain metrics for all registered ERC-7984 confidential wrappers. + Sourced directly from Transfer events — no indexer required. +
+
+
+
+ {error && (
+
+
+
+
+
+
+ {/* ── Extra insight row ── */}
+ {!isLoading && tvlData.length > 0 && (
+
+ {/* Wrap/Unshield ratio */}
+
+
+
+
+
+ {/* Most active token */}
+
+
+
+ {mostActive ? (
+
+
+ )}
+
+ {/* ── Main grid: TVL + Activity ── */}
+
+
+
+
+ {mostActive ? (
+
+
+ #{tvlData.indexOf(mostActive) + 1} TVS rank
+
+
+ ) : (
+ No data
+ )}
+
+
+ {mostActive.symbol}
+
+ {(mostActive.shieldCount + mostActive.unshieldCount).toLocaleString()} txs ·{' '}
+ TVS {mostActive.tvlCompact}
+
+
+ {/* TVL by token */}
+
+
+
+
+ {isLoading && tvlData.length === 0 ? (
+
+
+ {/* Recent Activity */}
+
+
+
+
+
+
+
+
+ {isLoading && tvlData.length === 0 ? (
+
+ {[1, 2, 3, 4].map((i) =>
+ ) : tvlData.length === 0 ? (
+ + No data yet — connect wallet or wait for registry to load. +
+ ) : ( +
+ {tvlData.map((t) => (
+
+ )}
+
+ + TVS (Total Value Shielded) = underlying ERC-20 held by wrapper. Bar = relative share. + ↑ shield count ·{' '} + ↓ unshield count · vol = period volume +
+
+
+ {activity.length} events
+
+ )}
+
+ + Latest shield & unshield events across all tokens · since 00:00 UTC · up to 25 shown +
+ + {isLoading && activity.length === 0 ? ( +
+ {[1, 2, 3, 4].map((i) =>
+ ) : activity.length === 0 ? (
+ + No shield/unshield events since 00:00 UTC today. +
+ ) : ( +
+ {activity.map((event, i) => (
+
+ )}
+
@@ -591,15 +594,15 @@ function ShieldButton() {
lang="bash"
filename="curl"
code={`# Fetch all Sepolia pairs
-curl "https://zamavault.xyz/api/registry?chain=sepolia"
+curl "${APP_URL}/api/registry?chain=sepolia"
# Fetch Mainnet pairs
-curl "https://zamavault.xyz/api/registry?chain=mainnet"`}
+curl "${APP_URL}/api/registry?chain=mainnet"`}
/>
diff --git a/src/app/faucet/page.tsx b/src/app/app/faucet/page.tsx
similarity index 99%
rename from src/app/faucet/page.tsx
rename to src/app/app/faucet/page.tsx
index 7034f33..46823b6 100644
--- a/src/app/faucet/page.tsx
+++ b/src/app/app/faucet/page.tsx
@@ -302,7 +302,7 @@ export default function FaucetPage() {
Transaction pending...
{children};
+}
diff --git a/src/app/learn/page.tsx b/src/app/app/learn/page.tsx
similarity index 90%
rename from src/app/learn/page.tsx
rename to src/app/app/learn/page.tsx
index 513dbbb..75e0dd0 100644
--- a/src/app/learn/page.tsx
+++ b/src/app/app/learn/page.tsx
@@ -1,12 +1,13 @@
'use client';
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
import Link from 'next/link';
import Card from '@/components/ui/Card';
import Badge from '@/components/ui/Badge';
import Button from '@/components/ui/Button';
import Tooltip from '@/components/ui/Tooltip';
import BlurIn from '@/components/ui/BlurIn';
+import confetti from 'canvas-confetti';
import {
BookOpen,
Shield,
@@ -21,6 +22,7 @@ import {
Cpu,
ArrowRight,
Sparkles,
+ PartyPopper,
} from 'lucide-react';
/* ─── Step definitions ──────────────────────────────────────────────────────── */
@@ -209,10 +211,10 @@ function StepFaucet() {
-
-
@@ -224,7 +226,8 @@ function StepShield() {
return (
- Shielding (also called "wrapping") converts your public + Shielding{' '} + (also called "wrapping") converts your public ERC-20 tokens into confidential ERC-7984 tokens. Your balance becomes encrypted on-chain — invisible to everyone except you.
@@ -282,10 +285,10 @@ function StepShield() {
-
-
@@ -297,8 +300,8 @@ function StepDecrypt() {
return (
- Your confidential balance is encrypted on-chain. To view it, you need to - sign an EIP-712 permit — a typed off-chain signature + Your confidential balance is encrypted on-chain. To view it, you need to{' '} + sign an EIP-712 permit — a typed off-chain signature that authorizes the Zama Gateway to decrypt your balance and return the plaintext to your browser.
@@ -314,8 +317,8 @@ function StepDecrypt() { title="Sign the EIP-712 permit in your wallet" description={ <> - Your wallet will show a typed data signature request. This creates a - temporary session key that the Zama Gateway uses to + Your wallet will show a typed data signature request. This creates a{' '} + temporary session key that the Zama Gateway uses to decrypt. Your private key never leaves your wallet. } @@ -359,7 +362,8 @@ function StepUnshield() { return (- Unshielding (also called "unwrapping") converts your + Unshielding{' '} + (also called "unwrapping") converts your confidential ERC-7984 tokens back into public ERC-20 tokens. This is a two-step process: an on-chain request followed by finalization.
@@ -417,16 +421,16 @@ function StepUnshield() {
-
-
@@ -493,7 +497,7 @@ function InstructionStep({
return (
{number}
-
+
>(new Set());
+ const hasConfettiFired = useRef(false);
const currentStep = STEPS.find((s) => s.id === activeStep)!;
const goTo = (id: number) => {
- // Mark current step as completed when navigating forward
- if (id > activeStep) {
- setCompletedSteps((prev) => new Set([...prev, activeStep]));
- }
setActiveStep(id);
};
const goNext = () => {
- if (activeStep < STEPS.length) goTo(activeStep + 1);
+ if (activeStep < STEPS.length) {
+ setCompletedSteps((prev) => new Set([...prev, activeStep]));
+ setActiveStep(activeStep + 1);
+ }
};
const goPrev = () => {
if (activeStep > 1) setActiveStep(activeStep - 1);
};
- const markComplete = () => {
- setCompletedSteps((prev) => new Set([...prev, activeStep]));
- if (activeStep < STEPS.length) goTo(activeStep + 1);
+ const allComplete = completedSteps.size >= STEPS.length;
+
+ const fireConfetti = useCallback(() => {
+ if (hasConfettiFired.current) return;
+ hasConfettiFired.current = true;
+ const end = Date.now() + 1500;
+ const colors = ['#ffd208', '#e6b800', '#10b981', '#a78bfa', '#f59e0b'];
+ (function frame() {
+ confetti({
+ particleCount: 4,
+ angle: 60,
+ spread: 55,
+ origin: { x: 0 },
+ colors,
+ });
+ confetti({
+ particleCount: 4,
+ angle: 120,
+ spread: 55,
+ origin: { x: 1 },
+ colors,
+ });
+ if (Date.now() < end) requestAnimationFrame(frame);
+ })();
+ }, []);
+
+ const markAllComplete = () => {
+ setCompletedSteps(new Set(STEPS.map((s) => s.id)));
};
- const allComplete = completedSteps.size >= STEPS.length;
+ useEffect(() => {
+ if (allComplete) fireConfetti();
+ }, [allComplete, fireConfetti]);
return (
{title}
@@ -510,31 +514,58 @@ function InstructionStep({
export default function LearnPage() {
const [activeStep, setActiveStep] = useState(1);
const [completedSteps, setCompletedSteps] = useState
@@ -551,7 +582,7 @@ export default function LearnPage() {
style={{
fontSize: 'var(--text-lg)',
maxWidth: 600,
- marginTop: 'var(--sp-3)',
+ margin: 'var(--sp-3) auto 0',
lineHeight: 'var(--lh-relaxed)',
}}
>
@@ -602,7 +633,7 @@ export default function LearnPage() {
}}
>
-
Tutorial Complete! @@ -613,17 +644,17 @@ export default function LearnPage() {
-
+
-
+
-
+
@@ -672,15 +703,6 @@ export default function LearnPage() {
+
+ {/* ── Token ─────────────────────────────────────────────────────────── */}
+
+
+
+ {/* ── ERC-20 Address ────────────────────────────────────────────────── */}
+
+
+
+
+ {/* ── ERC-7984 Wrapper ──────────────────────────────────────────────── */}
+
+
+
+ {/* ── Public Balance ────────────────────────────────────────────────── */}
+
+ {!isConnected ? (
+ —
+ ) : publicBalance !== undefined ? (
+
+ {formatAmount(publicBalance, wrapper.decimals)}{' '}
+ {wrapper.symbol}
+
+ ) : (
+
+
+ {/* ── Confidential Balance ──────────────────────────────────────────── */}
+
+ {!isConnected ? (
+ —
+ ) : confidentialBalance !== undefined && confidentialBalance !== null ? (
+
+ {formatAmount(confidentialBalance, wrapper.wrapperDecimals)}{' '}
+ {confidentialSymbol}
+
+
+ {/* ── Actions ───────────────────────────────────────────────────────── */}
+
+ {isRevoked ? (
+
+ Unavailable
+
+ ) : (
+
+
+ );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function HomePage() {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [showRevoked, setShowRevoked] = useState(false);
+ const { isTestnet, activeChainId } = useActiveNetwork();
+
+ const { pairs, isLoading, isFromCache, total }: RegistryPairsResult =
+ useRegistryPairs(activeChainId);
+
+ const visibleWrappers = useMemo(
+ () => (showRevoked ? pairs : pairs.filter(p => p.isValid !== false)),
+ [pairs, showRevoked],
+ );
+ const revokedCount = useMemo(() => pairs.filter(p => p.isValid === false).length, [pairs]);
+
+ const filteredWrappers = useMemo(() => {
+ if (!searchQuery) return visibleWrappers;
+ const q = searchQuery.toLowerCase();
+ return visibleWrappers.filter(
+ w =>
+ w.name.toLowerCase().includes(q) ||
+ w.symbol.toLowerCase().includes(q) ||
+ w.erc20Address.toLowerCase().includes(q) ||
+ w.erc7984Address.toLowerCase().includes(q),
+ );
+ }, [visibleWrappers, searchQuery]);
+
+ const explorerBase = isTestnet ? 'https://eth-sepolia.blockscout.com' : 'https://eth.blockscout.com';
+
+ return (
+ ([]);
+ const [loading, setLoading] = useState(false);
+ const explorerBase = CHAIN_CONFIG[chainId as keyof typeof CHAIN_CONFIG]?.explorerUrl ?? 'https://eth.blockscout.com';
+
+ const fetchActivity = useCallback(async () => {
+ if (!client || wrappers.length === 0 || !address) return;
+ setLoading(true);
+ try {
+ const latestBlock = await client.getBlockNumber();
+ // Use fromBlock: 0n (genesis) so the feed shows the wallet's complete
+ // history. Most RPC providers handle address-filtered getLogs from block 0
+ // efficiently because the address index keeps the result set small.
+ // If the provider rejects with a "block range too large" error we fall
+ // back to the last 500,000 blocks (~69 days on 12s chains) in the catch.
+ const fromBlock = 0n;
+
+ const allEvents: WalletEvent[] = [];
+ await Promise.all(
+ wrappers.filter((p) => p.isValid !== false).map(async (pair) => {
+ try {
+ // Shield: ERC-20 Transfer from user to wrapper
+ const shields = await client.getLogs({
+ address: pair.erc20Address,
+ event: TRANSFER_ABI,
+ args: { from: address, to: pair.erc7984Address },
+ fromBlock,
+ toBlock: latestBlock,
+ });
+ // Unshield: ERC-20 Transfer from wrapper to user
+ const unshields = await client.getLogs({
+ address: pair.erc20Address,
+ event: TRANSFER_ABI,
+ args: { from: pair.erc7984Address, to: address },
+ fromBlock,
+ toBlock: latestBlock,
+ });
+ for (const log of shields) {
+ allEvents.push({
+ type: 'shield',
+ symbol: pair.symbol,
+ amount: (log.args?.value as bigint) ?? 0n,
+ decimals: pair.decimals,
+ counterpart: pair.erc7984Address,
+ txHash: log.transactionHash ?? '',
+ blockNumber: log.blockNumber ?? 0n,
+ });
+ }
+ for (const log of unshields) {
+ allEvents.push({
+ type: 'unshield',
+ symbol: pair.symbol,
+ amount: (log.args?.value as bigint) ?? 0n,
+ decimals: pair.decimals,
+ counterpart: pair.erc7984Address,
+ txHash: log.transactionHash ?? '',
+ blockNumber: log.blockNumber ?? 0n,
+ });
+ }
+ } catch { /* skip failed token */ }
+ }),
+ );
+ allEvents.sort((a, b) => Number(b.blockNumber - a.blockNumber));
+ setEvents(allEvents.slice(0, 100));
+ } catch (err: unknown) {
+ // Some public RPC nodes reject unlimited block ranges even with an
+ // address filter. Fall back to last 500 000 blocks (~69 days).
+ const msg = err instanceof Error ? err.message : String(err);
+ const isRangeError = /block range|range too large|too many results/i.test(msg);
+ if (isRangeError) {
+ try {
+ const latestBlock = await client!.getBlockNumber();
+ const fallbackFrom = latestBlock > 500_000n ? latestBlock - 500_000n : 0n;
+ const fallbackEvents: WalletEvent[] = [];
+ await Promise.all(
+ wrappers.filter((p) => p.isValid !== false).map(async (pair) => {
+ try {
+ const [shields, unshields] = await Promise.all([
+ client!.getLogs({ address: pair.erc20Address, event: TRANSFER_ABI, args: { from: address, to: pair.erc7984Address }, fromBlock: fallbackFrom, toBlock: latestBlock }),
+ client!.getLogs({ address: pair.erc20Address, event: TRANSFER_ABI, args: { from: pair.erc7984Address, to: address }, fromBlock: fallbackFrom, toBlock: latestBlock }),
+ ]);
+ for (const log of shields) fallbackEvents.push({ type: 'shield', symbol: pair.symbol, amount: (log.args?.value as bigint) ?? 0n, decimals: pair.decimals, counterpart: pair.erc7984Address, txHash: log.transactionHash ?? '', blockNumber: log.blockNumber ?? 0n });
+ for (const log of unshields) fallbackEvents.push({ type: 'unshield', symbol: pair.symbol, amount: (log.args?.value as bigint) ?? 0n, decimals: pair.decimals, counterpart: pair.erc7984Address, txHash: log.transactionHash ?? '', blockNumber: log.blockNumber ?? 0n });
+ } catch { /* skip */ }
+ }),
+ );
+ fallbackEvents.sort((a, b) => Number(b.blockNumber - a.blockNumber));
+ setEvents(fallbackEvents);
+ } catch { /* ignore */ }
+ }
+ }
+ finally { setLoading(false); }
+ }, [client, wrappers, address]);
+
+ useEffect(() => { fetchActivity(); }, [fetchActivity]);
+
+ return (
+
+
+ );
+}
+
export default function PortfolioPage() {
const { activeChainId } = useActiveNetwork();
const { address, isConnected } = useAccount();
@@ -404,6 +595,15 @@ export default function PortfolioPage() {
)}
+ {/* Wallet Activity Feed */}
+ {isConnected && address && wrappers.length > 0 && (
+
- {!completedSteps.has(activeStep) && (
-
- )}
{activeStep < STEPS.length ? (
) : null}
diff --git a/src/app/app/page.tsx b/src/app/app/page.tsx
new file mode 100644
index 0000000..643b7f7
--- /dev/null
+++ b/src/app/app/page.tsx
@@ -0,0 +1,455 @@
+'use client';
+
+import React, { useState, useMemo } from 'react';
+import Link from 'next/link';
+import Card from '@/components/ui/Card';
+import Badge from '@/components/ui/Badge';
+import Button from '@/components/ui/Button';
+import CopyButton from '@/components/ui/CopyButton';
+import TokenIcon from '@/components/ui/TokenIcon';
+import Skeleton from '@/components/ui/Skeleton';
+import Tooltip from '@/components/ui/Tooltip';
+import { formatAddress, formatAmount } from '@/lib/utils';
+import { useActiveNetwork } from '@/app/ClientLayout';
+import { useRegistryPairs, isMintablePair, type RegistryPairsResult } from '@/lib/registry';
+import { type WrapperPair } from '@/config/contracts';
+import { ERC20_ABI } from '@/lib/wrapper-abi';
+import BlurIn from '@/components/ui/BlurIn';
+import { useAccount, useReadContract } from 'wagmi';
+import { useConfidentialBalance } from '@zama-fhe/react-sdk';
+import {
+ Search,
+ Lock,
+ Unlock,
+ Shield,
+ ExternalLink,
+ Info,
+ AlertTriangle,
+ AlertCircle,
+ Database,
+ Settings2,
+} from 'lucide-react';
+
+// ─── Tooltip content constants ────────────────────────────────────────────────
+// Centralised here so copy can be revised without hunting through JSX.
+
+const TIP = {
+ erc7984: 'ERC-7984 wrapper stores your balance as on-chain ciphertext via FHE — unreadable by anyone without your cryptographic permit.',
+ confidentialBadge: 'Balances are encrypted on-chain via FHE. Only you can decrypt them by signing an EIP-712 permit.',
+ publicBalance: 'Your unencrypted ERC-20 balance, visible to anyone on-chain. Shield it to make it private.',
+ confidentialBalance: 'Encrypted balance. Click Decrypt to sign a read-only EIP-712 permit — no tokens are spent, your private key stays in your wallet.',
+ mockBadge: 'Testnet mock token deployed by Zama. Has a public mint() — get free tokens from the Faucet page.',
+ shield: (sym: string) => `Convert public ${sym} into encrypted c${sym}. Requires ERC-20 approval then the shield transaction.`,
+ unshield: (sym: string) => `Burn encrypted c${sym} and retrieve public ${sym}. Two-step: on-chain unwrap + Gateway proof finalization.`,
+ permit: 'Read-only off-chain signature (EIP-712). Authorises Zama Gateway to decrypt your balance for this session. Does not spend tokens or approve contracts.',
+};
+
+// ─── Per-row component ────────────────────────────────────────────────────────
+
+function RegistryTokenRow({
+ wrapper,
+ explorerBase,
+ isTestnet,
+}: {
+ wrapper: WrapperPair;
+ explorerBase: string;
+ isTestnet: boolean;
+}) {
+ const { address, isConnected } = useAccount();
+ const [decryptRequested, setDecryptRequested] = useState(false);
+
+ // Public ERC-20 balance
+ const { data: rawPublicBalance } = useReadContract({
+ abi: ERC20_ABI,
+ address: wrapper.erc20Address,
+ functionName: 'balanceOf',
+ args: address ? [address] : undefined,
+ query: { enabled: isConnected && !!address },
+ });
+ const publicBalance = rawPublicBalance as bigint | undefined;
+
+ // Confidential balance — only fires after explicit user click
+ const {
+ data: confidentialBalance,
+ isLoading: isDecrypting,
+ error: decryptError,
+ refetch: refetchConfidential,
+ } = useConfidentialBalance(
+ { tokenAddress: wrapper.erc7984Address },
+ { enabled: decryptRequested && isConnected && !!address },
+ );
+
+ const isRevoked = wrapper.isValid === false;
+ const cleanName = wrapper.name.replace(/\s*\(Mock\)\s*/gi, '').trim();
+ const isMock = isMintablePair(wrapper) && isTestnet;
+ const confidentialSymbol = `c${wrapper.symbol}`;
+
+ const handleDecrypt = () => {
+ setDecryptRequested(true);
+ refetchConfidential();
+ };
+
+ return (
+
+
+
+ {/* Name + badges on one line */}
+
+
+ {cleanName}
+ {isMock && (
+
+
+ )}
+
+
+ Mock
+
+ )}
+ {isRevoked && (
+ {wrapper.symbol}
+
+
+
+
+
+
+
+ {confidentialSymbol}
+
+
+
+
+
+ )}
+
+ {/* Header */}
+
+
+ )}
+
+ {/* Stats */}
+
+
+
+ );
+}
diff --git a/src/app/portfolio/page.tsx b/src/app/app/portfolio/page.tsx
similarity index 63%
rename from src/app/portfolio/page.tsx
rename to src/app/app/portfolio/page.tsx
index 157816a..5162028 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/app/portfolio/page.tsx
@@ -1,21 +1,25 @@
'use client';
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import Link from 'next/link';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Badge from '@/components/ui/Badge';
import Modal from '@/components/ui/Modal';
import TokenIcon from '@/components/ui/TokenIcon';
+import Skeleton from '@/components/ui/Skeleton';
import { type WrapperPair } from '@/config/contracts';
import { formatAmount, formatAddress } from '@/lib/utils';
import { classifyError } from '@/lib/errors';
import PendingUnshieldBanner from '@/components/PendingUnshieldBanner';
import { useActiveNetwork } from '@/app/ClientLayout';
import { useRegistryPairs } from '@/lib/registry';
-import { useAccount, useConnect } from 'wagmi';
+import { useAccount, useConnect, usePublicClient } from 'wagmi';
import { useConfidentialBalances, useRevokeSession } from '@zama-fhe/react-sdk';
import { useToast } from '@/components/ui/Toast';
import BlurIn from '@/components/ui/BlurIn';
+import { parseAbiItem, formatUnits } from 'viem';
+import { CHAIN_CONFIG } from '@/config/chains';
import {
Lock,
Unlock,
@@ -23,8 +27,17 @@ import {
Shield,
Wallet,
RefreshCw,
+ Clock,
+ ArrowUpRight,
+ ArrowDownLeft,
+ BarChart2,
+ ExternalLink,
} from 'lucide-react';
+const TRANSFER_ABI = parseAbiItem(
+ 'event Transfer(address indexed from, address indexed to, uint256 value)',
+);
+
interface TokenPositionProps {
wrapper: WrapperPair;
isConnected: boolean;
@@ -135,7 +148,7 @@ function TokenPositionCard({
variant="secondary"
fullWidth
size="sm"
- onClick={() => (window.location.href = `/wrap?token=${wrapper.symbol}&action=unwrap`)}
+ onClick={() => (window.location.href = `/app/wrap?token=${wrapper.symbol}&action=unwrap`)}
>
Unshield
@@ -149,6 +162,184 @@ function TokenPositionCard({
);
}
+/* ─── Wallet Activity Feed ─────────────────────────────────────────────────── */
+
+interface WalletEvent {
+ type: 'shield' | 'unshield';
+ symbol: string;
+ amount: bigint;
+ decimals: number;
+ counterpart: string;
+ txHash: string;
+ blockNumber: bigint;
+}
+
+function WalletActivityFeed({
+ address,
+ wrappers,
+ chainId,
+}: {
+ address: `0x${string}`;
+ wrappers: WrapperPair[];
+ chainId: number;
+}) {
+ const client = usePublicClient({ chainId });
+ const [events, setEvents] = useState
+
+
+
+ {/* Cached-snapshot banner */}
+ {isFromCache && (
+
+
+
+
+
+
+
+
+
+ {isTestnet ? 'Sepolia Testnet' : 'Ethereum Mainnet'}
+
+
+
+
+
+
+ {/* Search */}
+ Registered Pairs
+
+ {isLoading && pairs.length === 0 ?
+ {revokedCount > 0 && {revokedCount} revoked
}
+ Active Network
+ FHE Security
+
+ ERC-7984 Standard
+
+
+
+
+ {/* Table */}
+
+
+
+ {revokedCount > 0 && (
+
+ )}
+
+
+
+
+
+
+ {/* Info Banner */}
+ | Token | +ERC-20 Address | +
+
+ ERC-7984 Wrapper
+ |
+
+
+ Public Balance
+ |
+
+
+ Confidential Balance
+ |
+ Actions | +
|---|---|---|---|---|---|
|
+
+
+
+
+
+ {searchQuery ? 'No tokens match your search query' : 'No registered wrappers found on this network'}
+
+ |
+
+
+
+
+
+
+
+ Underlying Mechanism
+
+
+ Confidential wrappers convert standard public tokens into ERC-7984 tokens
+ utilizing Fully Homomorphic Encryption (FHE) on the fhEVM. On-chain values
+ (like account balances and transfer amounts) are encrypted into cryptographic
+ handles — protecting transaction details from public ledger scraping.
+
+
+
+
+
+
+ {loading && events.length === 0 ? (
+
+
+
+
+
+
+
+
+
+ {[1, 2, 3].map((i) =>
+ ) : events.length === 0 ? (
+ + No shield or unshield events found for this wallet. +
+ ) : ( +
+ {events.map((ev, i) => {
+ const isShield = ev.type === 'shield';
+ const color = isShield ? 'var(--success)' : 'var(--warning)';
+ const Icon = isShield ? ArrowUpRight : ArrowDownLeft;
+ return (
+
+ )}
+
+
+ );
+ })}
+
+
+
+
+
+ Tx
+ {isShield ? 'Shield' : 'Unshield'}
+
+ {formatUnits(ev.amount, ev.decimals)} {ev.symbol}
+
+
+
+ Wrapper:
+ {formatAddress(ev.counterpart)}
+
diff --git a/src/app/wrap/page.tsx b/src/app/app/wrap/page.tsx
similarity index 88%
rename from src/app/wrap/page.tsx
rename to src/app/app/wrap/page.tsx
index 54e3818..3cd12b5 100644
--- a/src/app/wrap/page.tsx
+++ b/src/app/app/wrap/page.tsx
@@ -253,9 +253,12 @@ function WrapPageContent() {
if (!selectedWrapper || !address) return;
try {
if (action === 'wrap') {
- setTxStep(1); // Approval confirmation pending
+ // If allowance is already sufficient, SDK skips approval —
+ // jump straight to step 3 (Shield pending) for consistent UI.
+ setTxStep(needsApproval ? 1 : 3);
const res = await shield({
amount: parsedInputAmount,
+ approvalStrategy: needsApproval ? 'exact' : 'skip',
onApprovalSubmitted: (txHash) => {
setTxStep(2); // Approve mining
setActiveTxHash(txHash);
@@ -285,20 +288,40 @@ function WrapPageContent() {
});
setTxStep(5); // Completed
setIsSuccessModalOpen(true);
+ // Reset decrypt gate — the confidential balance has changed after
+ // shielding, so any cached value is stale. The user must click
+ // "Decrypt" again. Also prevents TanStack Query's refetchOnWindowFocus
+ // from auto-firing a new permit while decryptRequested is still true.
+ setDecryptRequested(false);
refetchPublicBalance();
- refetchWrapperBalance();
refetchAllowance();
} else {
setTxStep(3); // Unshield pending
const res = await unshield({
amount: parsedInputAmount,
onUnwrapSubmitted: (txHash) => {
- setTxStep(4); // Unshield mining
+ setTxStep(4); // Unwrap on-chain, waiting for proof
setActiveTxHash(txHash);
addToast({
variant: 'info',
- title: 'Unshielding Submitted',
- message: 'Unshield transaction sent. Waiting for confirmation...',
+ title: 'Unwrap Submitted',
+ message: 'On-chain unwrap request sent. Waiting for Gateway proof...',
+ });
+ },
+ onFinalizing: () => {
+ // Gateway is generating the decryption proof
+ addToast({
+ variant: 'info',
+ title: 'Finalizing',
+ message: 'Zama Gateway is generating the decryption proof. This may take 15–40 seconds.',
+ });
+ },
+ onFinalizeSubmitted: (txHash) => {
+ setActiveTxHash(txHash);
+ addToast({
+ variant: 'info',
+ title: 'Finalize Submitted',
+ message: 'Finalization transaction sent. Almost done...',
});
},
});
@@ -312,8 +335,9 @@ function WrapPageContent() {
});
setTxStep(5); // Completed
setIsSuccessModalOpen(true);
+ // Reset decrypt gate — same reason as wrap path above.
+ setDecryptRequested(false);
refetchPublicBalance();
- refetchWrapperBalance();
}
} catch (err: unknown) {
console.error(err);
@@ -352,19 +376,26 @@ function WrapPageContent() {
- {/* Pending unshield banner for the currently selected token */}
- {selectedWrapper && (
-
-
+ {wrappers.map((w) => (
+
)}
{/* Swap Card */}
-
-
+
+ 0 && txStep < 5 ? 'swap-card-pending' : ''}`}
+ >
{/* From Panel */}
@@ -430,7 +461,7 @@ function WrapPageContent() {
{wrappers.map(w => (
))}
@@ -559,7 +590,7 @@ function WrapPageContent() {
{txStep > 0 && (
{children}
-
+ {children}
);
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b801154..aa9a7d0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,525 +1,58 @@
-'use client';
-
-import React, { useState, useMemo } from 'react';
-import Link from 'next/link';
-import Card from '@/components/ui/Card';
-import Badge from '@/components/ui/Badge';
-import Button from '@/components/ui/Button';
-import CopyButton from '@/components/ui/CopyButton';
-import TokenIcon from '@/components/ui/TokenIcon';
-import Skeleton from '@/components/ui/Skeleton';
-import Tooltip from '@/components/ui/Tooltip';
-import { formatAddress, formatAmount } from '@/lib/utils';
-import { useActiveNetwork } from '@/app/ClientLayout';
-import { useRegistryPairs, isMintablePair, type RegistryPairsResult } from '@/lib/registry';
-import { type WrapperPair } from '@/config/contracts';
-import { ERC20_ABI } from '@/lib/wrapper-abi';
-import BlurIn from '@/components/ui/BlurIn';
-import { useAccount, useReadContract } from 'wagmi';
-import { useConfidentialBalance } from '@zama-fhe/react-sdk';
-import {
- Search,
- Lock,
- Unlock,
- Shield,
- ExternalLink,
- Info,
- AlertTriangle,
- AlertCircle,
- Database,
- Settings2,
-} from 'lucide-react';
-
-// ─── Tooltip content constants ────────────────────────────────────────────────
-// Centralised here so copy can be revised without hunting through JSX.
-
-const TIP = {
- erc7984: (
- <>
- ERC-7984 Confidential Wrapper
-
- A smart contract that wraps a public ERC-20 token and stores balances as - on-chain ciphertext using Zama's Fully Homomorphic Encryption (FHE). - Nobody — including the node operators — can read your balance without - your cryptographic permit. - - ), - confidentialBadge: ( - <> - Confidential token (ERC-7984) -
- Balances and transfer amounts are encrypted on-chain via FHE. Only the - owner can decrypt them by signing an EIP-712 permit with their wallet. - - ), - publicBalance: ( - <> - Public ERC-20 balance -
- Your current unencrypted balance of the underlying token. Visible to - anyone on-chain — shield it to make it private. - - ), - confidentialBalance: ( - <> - Confidential (encrypted) balance -
- Your balance is stored as an encrypted ciphertext on-chain. Click{' '} - Decrypt to sign an EIP-712 permit in your - wallet — this creates a short-lived session key that lets the Zama - Gateway decrypt the value for you locally. Your private key never - leaves your wallet and the plaintext is never stored on-chain. - - ), - mockBadge: ( - <> - Mock token (testnet only) -
- This underlying ERC-20 was deployed by Zama for developer testing. It - has a public
- Approve and deposit your public {sym} tokens into the - ERC-7984 wrapper. The wrapper mints an encrypted confidential balance - — your on-chain amount becomes private. - - ), - unshield: (sym: string) => ( - <> - Unshield (Unwrap) -
- Burn your encrypted c{sym} tokens and retrieve the - equivalent public {sym}. The Zama Gateway processes - the decryption proof before releasing the underlying tokens. - - ), - permit: ( - <> - EIP-712 Permit -
- A typed off-chain signature that authorises the Zama Gateway to decrypt - your encrypted balance for this session. It does not spend any - tokens or approve any contract — it is a read-only authorisation that - expires automatically. - - ), -}; - -// ─── Per-row component ──────────────────────────────────────────────────────── - -function RegistryTokenRow({ - wrapper, - explorerBase, - isTestnet, -}: { - wrapper: WrapperPair; - explorerBase: string; - isTestnet: boolean; -}) { - const { address, isConnected } = useAccount(); - const [decryptRequested, setDecryptRequested] = useState(false); - - // Public ERC-20 balance - const { data: rawPublicBalance } = useReadContract({ - abi: ERC20_ABI, - address: wrapper.erc20Address, - functionName: 'balanceOf', - args: address ? [address] : undefined, - query: { enabled: isConnected && !!address }, - }); - const publicBalance = rawPublicBalance as bigint | undefined; - - // Confidential balance — only fires after explicit user click - const { - data: confidentialBalance, - isLoading: isDecrypting, - error: decryptError, - refetch: refetchConfidential, - } = useConfidentialBalance( - { tokenAddress: wrapper.erc7984Address }, - { enabled: decryptRequested && isConnected && !!address }, - ); - - const isRevoked = wrapper.isValid === false; - const cleanName = wrapper.name.replace(/\s*\(Mock\)\s*/gi, '').trim(); - const isMock = isMintablePair(wrapper) && isTestnet; - const confidentialSymbol = `c${wrapper.symbol}`; - - const handleDecrypt = () => { - setDecryptRequested(true); - refetchConfidential(); - }; - - return ( -
-
- {/* ── Token ─────────────────────────────────────────────────────────── */}
-
-
-
- {/* ── ERC-20 Address ────────────────────────────────────────────────── */}
-
-
-
-
- {/* ── ERC-7984 Wrapper ──────────────────────────────────────────────── */}
-
-
-
- {/* ── Public Balance ────────────────────────────────────────────────── */}
-
- {!isConnected ? (
- —
- ) : publicBalance !== undefined ? (
-
- {formatAmount(publicBalance, wrapper.decimals)}{' '}
- {wrapper.symbol}
-
- ) : (
-
-
- {/* ── Confidential Balance ──────────────────────────────────────────── */}
-
- {!isConnected ? (
- —
- ) : confidentialBalance !== undefined && confidentialBalance !== null ? (
-
- {formatAmount(confidentialBalance, wrapper.wrapperDecimals)}{' '}
- {confidentialSymbol}
-
-
- {/* ── Actions ───────────────────────────────────────────────────────── */}
-
- {isRevoked ? (
-
- Unavailable
-
- ) : (
-
-
- );
-}
-
-// ─── Page ─────────────────────────────────────────────────────────────────────
-
-export default function HomePage() {
- const [searchQuery, setSearchQuery] = useState('');
- const [showRevoked, setShowRevoked] = useState(false);
- const { isTestnet, activeChainId } = useActiveNetwork();
-
- const { pairs, isLoading, isFromCache, total }: RegistryPairsResult =
- useRegistryPairs(activeChainId);
-
- const visibleWrappers = useMemo(
- () => (showRevoked ? pairs : pairs.filter(p => p.isValid !== false)),
- [pairs, showRevoked],
- );
- const revokedCount = useMemo(() => pairs.filter(p => p.isValid === false).length, [pairs]);
-
- const filteredWrappers = useMemo(() => {
- if (!searchQuery) return visibleWrappers;
- const q = searchQuery.toLowerCase();
- return visibleWrappers.filter(
- w =>
- w.name.toLowerCase().includes(q) ||
- w.symbol.toLowerCase().includes(q) ||
- w.erc20Address.toLowerCase().includes(q) ||
- w.erc7984Address.toLowerCase().includes(q),
- );
- }, [visibleWrappers, searchQuery]);
-
- const explorerBase = isTestnet ? 'https://sepolia.etherscan.io' : 'https://etherscan.io';
-
+/**
+ * Landing page v2 (route: /).
+ *
+ * Editorial scroll narrative — cream base, gold accent, aubergine for the
+ * single dark beat. Imports landing-v2.css ONLY; v1 (landing.css and
+ * src/components/landing/*) is retained on disk so previous design is
+ * one-branch-switch away.
+ *
+ * Structure: nav → 10 sections → footer, with a Lenis smooth-scroll
+ * provider, a scroll-progress rail, and a noise-driven background.
+ */
+import './landing-v2.css';
+
+import { LenisProvider } from '@/components/landing-v2/lib/lenis-provider';
+import { ScrollProgress } from '@/components/landing-v2/lib/scroll-progress';
+import { NoiseBackground } from '@/components/landing-v2/lib/noise-background';
+import { BFCacheRecovery } from '@/components/landing/bfcache-recovery';
+
+import { NavV2 } from '@/components/landing-v2/nav';
+import { Aperture } from '@/components/landing-v2/aperture';
+import { Manifesto } from '@/components/landing-v2/manifesto';
+import { ProblemLedger } from '@/components/landing-v2/problem-ledger';
+import { SolutionEncrypt } from '@/components/landing-v2/solution-encrypt';
+import { TokenConstellation } from '@/components/landing-v2/token-constellation';
+import { Capabilities } from '@/components/landing-v2/capabilities';
+import { Numbers } from '@/components/landing-v2/numbers';
+import { Flow } from '@/components/landing-v2/flow';
+import { ForDevs } from '@/components/landing-v2/for-devs';
+import { FinalBeat } from '@/components/landing-v2/final-beat';
+import { FooterV2 } from '@/components/landing-v2/footer';
+
+export default function LandingPage() {
return (
-
- {action === 'wrap' && (
+ {action === 'wrap' && needsApproval && (
<>
)}
- {/* Transaction Link */}
- {(activeTxHash || finalTxHash) && (
- = 2 ? 'completed' : txStep === 1 ? 'active' : ''}`}>
{txStep >= 2 ?
@@ -569,89 +600,32 @@ function WrapPageContent() {
)}
= 4 ? 'completed' : txStep === 3 ? 'active' : ''}`}>
-
+ {action === 'unwrap' && (
+ <>
+ {txStep >= 4 ?
- {action === 'wrap' ? 'Shield' : 'Unshield'}
+
+ {txStep >= 4 ?
+ {action === 'wrap' ? 'Shield' : 'Unwrap'}
= 4 ? 'active' : ''}`}>
+
+
+
+ )}
{txStep === 5 ?
+ Finalize
+
-
{txStep === 5 ?
+
+ {txStep === 5 ?
Done
-
- )}
-
- {/* Submit Button */}
+ {/* Primary Action Button — ALWAYS in this slot */}
-
-
- {/* Coprocessor / Gateway Delay Explanation */}
- {txStep > 0 && txStep < 5 && (
-
-
- {txStep === 5
- ? `${action === 'wrap' ? 'Shield' : 'Unshield'} Successful`
- : txStep === 2
- ? 'Approval Pending...'
- : txStep === 4
- ? `${action === 'wrap' ? 'Shielding' : 'Unshielding'} Pending...`
- : 'Transaction Submitted'}
-
-
- {formatAddress(finalTxHash || activeTxHash || '')}
-
-
-
- View Explorer
- ⚠️
-
- FHE transactions require Zama Gateway & Coprocessor proof generation, which takes 15–40 seconds to confirm on-chain. Please keep this window open.
-
-
- )}
-
{!isConnected ? (
)}
+
+ {/* Transaction Info — appears BELOW the primary button, never replaces it */}
+ {(activeTxHash || finalTxHash) && (
+
+
+ )}
{/* Info */}
diff --git a/src/app/error.tsx b/src/app/error.tsx
index c3be582..55e0297 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -66,7 +66,7 @@ export default function ErrorBoundary({
Try again
*/
+ --font-display: var(--font-fraunces, 'Fraunces'), Georgia, serif;
+ --font-sans: var(--font-jakarta, 'Plus Jakarta Sans'), system-ui, sans-serif;
+ --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+ /* shadcn/MagicCard compat — defaults to light; overridden by .section-dark */
+ --color-background: #f8f5f0;
+ --color-border: rgba(15, 14, 12, 0.10);
+
+ /* Motion */
+ --animate-aurora: aurora 20s ease-in-out infinite alternate;
+ --animate-marquee: marquee var(--duration, 30s) linear infinite;
+ --animate-marquee-vertical: marquee-vertical var(--duration, 30s) linear infinite;
+ --animate-shimmer-slide: shimmer-slide var(--speed, 2s) ease-in-out infinite alternate;
+ --animate-spin-around: spin-around calc(var(--speed, 2s) * 2) infinite linear;
+ --animate-shine: shine var(--duration, 8s) ease-in-out infinite;
+ --animate-grid: grid 15s linear infinite;
+ --animate-border-beam: border-beam calc(var(--duration, 8s) * 1s) infinite linear;
+ --animate-blink-cursor: blink-cursor 1.2s step-end infinite;
+}
+
+/* ---------------------------------------------------------------------------
+ * Keyframes
+ * -------------------------------------------------------------------------- */
+@keyframes aurora {
+ 0% { background-position: 0% 50%; transform: rotate(-5deg) scale(0.9); }
+ 25% { background-position: 50% 100%; transform: rotate(5deg) scale(1.1); }
+ 50% { background-position: 100% 50%; transform: rotate(-3deg) scale(0.95); }
+ 75% { background-position: 50% 0%; transform: rotate(3deg) scale(1.05); }
+ 100% { background-position: 0% 50%; transform: rotate(-5deg) scale(0.9); }
+}
+@keyframes marquee {
+ from { transform: translateX(0); }
+ to { transform: translateX(calc(-100% - var(--gap, 1rem))); }
+}
+@keyframes marquee-vertical {
+ from { transform: translateY(0); }
+ to { transform: translateY(calc(-100% - var(--gap, 1rem))); }
+}
+@keyframes shimmer-slide {
+ to { transform: translate(calc(100cqw - 100%), 0); }
+}
+@keyframes spin-around {
+ 0% { transform: translateZ(0) rotate(0); }
+ 15%, 35% { transform: translateZ(0) rotate(90deg); }
+ 65%, 85% { transform: translateZ(0) rotate(270deg); }
+ 100% { transform: translateZ(0) rotate(360deg); }
+}
+@keyframes shine {
+ 0% { background-position: 0% 0%; }
+ 50% { background-position: 100% 100%; }
+ 100% { background-position: 0% 0%; }
+}
+@keyframes grid {
+ 0% { transform: translateY(-50%); }
+ 100% { transform: translateY(0); }
+}
+@keyframes border-beam {
+ 100% { offset-distance: 100%; }
+}
+@keyframes blink-cursor {
+ 0%, 49% { opacity: 1; }
+ 50%, 100% { opacity: 0; }
+}
+
+/* ---------------------------------------------------------------------------
+ * Landing root — light cream default. Never bleeds outside .landing-root.
+ * -------------------------------------------------------------------------- */
+.landing-root {
+ font-family: var(--font-sans);
+ background: var(--color-cream-100);
+ color: var(--color-ink-900);
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ min-height: 100vh;
+}
+
+.landing-root ::selection {
+ background: var(--color-gold-500);
+ color: var(--color-ink-950);
+}
+
+.landing-root h1,
+.landing-root h2,
+.landing-root h3 {
+ font-family: var(--font-display);
+ letter-spacing: -0.02em;
+}
+
+/* Dark variant — used on FHE explainer, final CTA, footer */
+.section-dark {
+ --color-background: #050504;
+ --color-border: rgba(255, 255, 255, 0.08);
+}
+
+/* Grain overlay for hero only */
+.landing-grain::before {
+ content: '';
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ z-index: 1;
+ opacity: 0.03;
+ mix-blend-mode: multiply;
+ background-image: url("data:image/svg+xml;utf8,");
+}
+
+/* Gold rule divider */
+.landing-rule {
+ height: 1px;
+ background: linear-gradient(
+ to right,
+ transparent 0%,
+ var(--color-gold-500) 50%,
+ transparent 100%
+ );
+ opacity: 0.4;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7694c1a..b993e2b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,36 +1,41 @@
-import type { Metadata } from "next";
-import "./globals.css";
-import ClientLayout from "./ClientLayout";
+import type { Metadata } from 'next';
+import { Fraunces, Plus_Jakarta_Sans } from 'next/font/google';
+
+/* Fraunces — optical-size variable serif. Distinctive editorial feel,
+ completely unlike Zama's clean tech sans. Used for hero + section h2. */
+const fraunces = Fraunces({
+ subsets: ['latin'],
+ variable: '--font-fraunces',
+ display: 'swap',
+});
+
+/* Plus Jakarta Sans — humanist rounded sans. Modern, not overused in crypto.
+ Used for body text, nav, UI labels. */
+const jakarta = Plus_Jakarta_Sans({
+ subsets: ['latin'],
+ variable: '--font-jakarta',
+ display: 'swap',
+});
export const metadata: Metadata = {
- title: "ZamaVault — Confidential Wrapper Registry",
+ title: 'ZamaVault — Confidential Tokens, Made Simple',
description:
- "Discover, wrap, and manage confidential ERC-7984 tokens on the Zama Protocol. The canonical interface for converting ERC-20 tokens to their encrypted counterparts using Fully Homomorphic Encryption.",
+ "Discover, shield, and manage confidential ERC-7984 tokens on Zama's fully-homomorphic encryption protocol. The canonical interface for the Confidential Wrappers Registry.",
keywords: [
- "Zama",
- "FHE",
- "ERC-7984",
- "confidential tokens",
- "wrapper registry",
- "privacy",
- "Ethereum",
- "DeFi",
+ 'Zama', 'FHE', 'fully homomorphic encryption', 'ERC-7984',
+ 'confidential tokens', 'wrapper registry', 'privacy', 'Ethereum', 'DeFi',
],
openGraph: {
- title: "ZamaVault — Confidential Wrapper Registry",
+ title: 'ZamaVault — Confidential Tokens, Made Simple',
description:
- "The definitive interface for managing confidential ERC-7984 tokens powered by Fully Homomorphic Encryption.",
- type: "website",
+ "The definitive interface for managing confidential ERC-7984 tokens powered by Zama's Fully Homomorphic Encryption.",
+ type: 'website',
},
};
-export default function RootLayout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
-
+
-
-
+
+
+ {txStep > 0 && txStep < 5 && (
+
+
+ {txStep === 5
+ ? `${action === 'wrap' ? 'Shield' : 'Unshield'} Successful`
+ : txStep === 2
+ ? 'Approval Pending...'
+ : txStep === 4
+ ? `${action === 'wrap' ? 'Shielding' : 'Unshielding'} Pending...`
+ : 'Transaction Submitted'}
+
+
+ {formatAddress(finalTxHash || activeTxHash || '')}
+
+
+
+ View Explorer
+ ⚠️
+
+ FHE transactions require Zama Gateway & Coprocessor proof generation, which takes 15–40 seconds to confirm on-chain. Please keep this window open.
+
+
+ )}
+ - A smart contract that wraps a public ERC-20 token and stores balances as - on-chain ciphertext using Zama's Fully Homomorphic Encryption (FHE). - Nobody — including the node operators — can read your balance without - your cryptographic permit. - - ), - confidentialBadge: ( - <> - Confidential token (ERC-7984) -
- Balances and transfer amounts are encrypted on-chain via FHE. Only the - owner can decrypt them by signing an EIP-712 permit with their wallet. - - ), - publicBalance: ( - <> - Public ERC-20 balance -
- Your current unencrypted balance of the underlying token. Visible to - anyone on-chain — shield it to make it private. - - ), - confidentialBalance: ( - <> - Confidential (encrypted) balance -
- Your balance is stored as an encrypted ciphertext on-chain. Click{' '} - Decrypt to sign an EIP-712 permit in your - wallet — this creates a short-lived session key that lets the Zama - Gateway decrypt the value for you locally. Your private key never - leaves your wallet and the plaintext is never stored on-chain. - - ), - mockBadge: ( - <> - Mock token (testnet only) -
- This underlying ERC-20 was deployed by Zama for developer testing. It - has a public
mint() function (up to 1 000 000 tokens per
- call) so you can request free test tokens from the Faucet page.
-
- ),
- shield: (sym: string) => (
- <>
- Shield (Wrap)
- - Approve and deposit your public {sym} tokens into the - ERC-7984 wrapper. The wrapper mints an encrypted confidential balance - — your on-chain amount becomes private. - - ), - unshield: (sym: string) => ( - <> - Unshield (Unwrap) -
- Burn your encrypted c{sym} tokens and retrieve the - equivalent public {sym}. The Zama Gateway processes - the decryption proof before releasing the underlying tokens. - - ), - permit: ( - <> - EIP-712 Permit -
- A typed off-chain signature that authorises the Zama Gateway to decrypt - your encrypted balance for this session. It does not spend any - tokens or approve any contract — it is a read-only authorisation that - expires automatically. - - ), -}; - -// ─── Per-row component ──────────────────────────────────────────────────────── - -function RegistryTokenRow({ - wrapper, - explorerBase, - isTestnet, -}: { - wrapper: WrapperPair; - explorerBase: string; - isTestnet: boolean; -}) { - const { address, isConnected } = useAccount(); - const [decryptRequested, setDecryptRequested] = useState(false); - - // Public ERC-20 balance - const { data: rawPublicBalance } = useReadContract({ - abi: ERC20_ABI, - address: wrapper.erc20Address, - functionName: 'balanceOf', - args: address ? [address] : undefined, - query: { enabled: isConnected && !!address }, - }); - const publicBalance = rawPublicBalance as bigint | undefined; - - // Confidential balance — only fires after explicit user click - const { - data: confidentialBalance, - isLoading: isDecrypting, - error: decryptError, - refetch: refetchConfidential, - } = useConfidentialBalance( - { tokenAddress: wrapper.erc7984Address }, - { enabled: decryptRequested && isConnected && !!address }, - ); - - const isRevoked = wrapper.isValid === false; - const cleanName = wrapper.name.replace(/\s*\(Mock\)\s*/gi, '').trim(); - const isMock = isMintablePair(wrapper) && isTestnet; - const confidentialSymbol = `c${wrapper.symbol}`; - - const handleDecrypt = () => { - setDecryptRequested(true); - refetchConfidential(); - }; - - return ( -
-
-
- {/* Name + badges on one line */}
-
-
- {cleanName}
- {isMock && (
-
-
- Mock
-
-
- )}
- {isRevoked && (
-
-
- )}
-
- {wrapper.symbol}
-
-
-
-
-
-
-
- {confidentialSymbol}
-
-
-
-
-
- )}
-
- {/* Header */}
-
+
+ );
+}
diff --git a/src/components/landing-v2/capabilities.tsx b/src/components/landing-v2/capabilities.tsx
new file mode 100644
index 0000000..33f006c
--- /dev/null
+++ b/src/components/landing-v2/capabilities.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import Link from 'next/link';
+import { motion } from 'motion/react';
+import { Shield, Eye, Unlock, Droplets, BarChart3, Code2, ArrowUpRight } from 'lucide-react';
+
+/**
+ * Capabilities — six tiles, three columns, two rows.
+ *
+ * No bento sprawl, no orb glows, no row-spans. Each card is a small
+ * editorial unit: number, icon, label, body, link. Hover lifts only
+ * the gold underline; the card itself stays still.
+ */
+interface Cap {
+ n: string;
+ icon: React.ElementType;
+ title: string;
+ body: string;
+ href: string;
+}
+const CAPS: Cap[] = [
+ { n: '01', icon: Shield, title: 'Shield', body: 'Wrap any registered ERC-20 into its ERC-7984 form in one or two transactions.', href: '/app/wrap' },
+ { n: '02', icon: Eye, title: 'Decrypt', body: 'View any balance with one EIP-712 signature. Off-chain, gas-free, scoped to your wallet.', href: '/app/portfolio' },
+ { n: '03', icon: Unlock, title: 'Unshield', body: 'Burn the wrapper, wait for the Zama Gateway proof, receive the underlying back.', href: '/app/wrap' },
+ { n: '04', icon: BarChart3, title: 'Analytics', body: 'TVS by token, 24-hour shield/unshield activity — straight from on-chain events.', href: '/app/analytics' },
+ { n: '05', icon: Droplets, title: 'Faucet', body: 'Mint mock USDC, USDT, WETH, ZAMA and more on Sepolia — wired to the official mocks.', href: '/app/faucet' },
+ { n: '06', icon: Code2, title: 'REST + snippets', body: 'Public /api/registry endpoint plus copy-paste React, viem, and ethers snippets.', href: '/app/developers' },
+];
+
+export function Capabilities() {
+ return (
+
+
+ );
+}
diff --git a/src/components/landing-v2/final-beat.tsx b/src/components/landing-v2/final-beat.tsx
new file mode 100644
index 0000000..d3097d2
--- /dev/null
+++ b/src/components/landing-v2/final-beat.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import Link from 'next/link';
+import { ArrowUpRight } from 'lucide-react';
+import { SiGithub } from 'react-icons/si';
+import { motion } from 'motion/react';
+
+/**
+ * Final beat — the only dark section in the whole landing.
+ * Aubergine background (warm dark, not black). Big serif sentence,
+ * gold CTA, secondary GitHub link.
+ */
+export function FinalBeat() {
+ return (
+
+ {/* Faint gold halo top-right */}
+
+
+
+ );
+}
diff --git a/src/components/landing-v2/flow.tsx b/src/components/landing-v2/flow.tsx
new file mode 100644
index 0000000..8ba9fad
--- /dev/null
+++ b/src/components/landing-v2/flow.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+/**
+ * Flow — vertical timeline.
+ *
+ * A gold rail down the left edge fills as the section enters and is scrolled
+ * through. Four steps with descriptive copy on the right.
+ *
+ * Uses native IntersectionObserver to compute the scrubbed fill — keeps GSAP
+ * usage focused on the actual pin/morph sections.
+ */
+const STEPS = [
+ { n: '01', title: 'Discover', body: 'Browse every registered ERC-20 ↔ ERC-7984 pair pulled live from the on-chain WrappersRegistry. Sepolia and Mainnet, real time.' },
+ { n: '02', title: 'Shield', body: 'Approve once (or skip if allowance is already sufficient), then wrap your tokens into encrypted ERC-7984 form.' },
+ { n: '03', title: 'Decrypt', body: 'Sign a single EIP-712 permit and your balance decrypts client-side. Off-chain, gas-free, scoped to your wallet only.' },
+ { n: '04', title: 'Unshield', body: 'Burn the encrypted balance, wait for the Zama Gateway proof, receive the underlying ERC-20 back in your wallet.' },
+];
+
+export function Flow() {
+ const railRef = useRef(null);
+ const fillRef = useRef(null);
+ const sectionRef = useRef(null);
+
+ useEffect(() => {
+ function onScroll() {
+ const section = sectionRef.current;
+ const fill = fillRef.current;
+ const rail = railRef.current;
+ if (!section || !fill || !rail) return;
+
+ const rect = section.getBoundingClientRect();
+ const viewH = window.innerHeight;
+ // Begin filling when section top hits 70% of viewport, complete when bottom hits 40%.
+ const start = viewH * 0.7;
+ const end = -rect.height + viewH * 0.4;
+ const raw = (start - rect.top) / (start - end);
+ const p = Math.max(0, Math.min(1, raw));
+ fill.style.transform = `scaleY(${p})`;
+ }
+ onScroll();
+ window.addEventListener('scroll', onScroll, { passive: true });
+ window.addEventListener('resize', onScroll);
+ return () => {
+ window.removeEventListener('scroll', onScroll);
+ window.removeEventListener('resize', onScroll);
+ };
+ }, []);
+
+ return (
+
+
+ );
+}
diff --git a/src/components/landing-v2/footer.tsx b/src/components/landing-v2/footer.tsx
new file mode 100644
index 0000000..ec22691
--- /dev/null
+++ b/src/components/landing-v2/footer.tsx
@@ -0,0 +1,109 @@
+import Link from 'next/link';
+import { ExternalLink } from 'lucide-react';
+import { SiGithub } from 'react-icons/si';
+
+/**
+ * Footer v2 — editorial: wide gutter, fine type, lots of negative space.
+ * Aubergine background continues from the final beat for visual continuity.
+ */
+const COLS: { title: string; links: { label: string; href: string; external?: boolean }[] }[] = [
+ {
+ title: 'App',
+ links: [
+ { label: 'Registry', href: '/app' },
+ { label: 'Wrap', href: '/app/wrap' },
+ { label: 'Portfolio', href: '/app/portfolio' },
+ { label: 'Analytics', href: '/app/analytics' },
+ { label: 'Faucet', href: '/app/faucet' },
+ ],
+ },
+ {
+ title: 'Build',
+ links: [
+ { label: 'Documentation', href: '/app/docs' },
+ { label: 'Snippets', href: '/app/developers' },
+ { label: 'REST API', href: '/api/registry?chain=sepolia' },
+ { label: 'GitHub', href: 'https://github.com/hosein-ul/zamavault', external: true },
+ ],
+ },
+ {
+ title: 'Learn',
+ links: [
+ { label: 'Tutorial', href: '/app/learn' },
+ { label: 'Zama Protocol docs', href: 'https://docs.zama.org/protocol', external: true },
+ { label: 'ERC-7984 spec', href: 'https://eips.ethereum.org/', external: true },
+ ],
+ },
+];
+
+export function FooterV2() {
+ return (
+
+ );
+}
diff --git a/src/components/landing-v2/for-devs.tsx b/src/components/landing-v2/for-devs.tsx
new file mode 100644
index 0000000..47e736a
--- /dev/null
+++ b/src/components/landing-v2/for-devs.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import Link from 'next/link';
+import { ArrowUpRight } from 'lucide-react';
+import { motion } from 'motion/react';
+
+/**
+ * For Devs — three code blocks side by side, monospace, no syntax tinsel.
+ * Tabs above let visitors pick React / curl / viem. Underneath: links to
+ * /app/developers and /api/registry.
+ */
+const SAMPLES = {
+ react: `import { useShield } from "@zama-fhe/react-sdk";
+
+const { mutateAsync: shield } = useShield({
+ address: "0xWrapper",
+});
+
+await shield({
+ amount: 1000n,
+ approvalStrategy: "skip",
+});`,
+ curl: `curl https://your-deployment.vercel.app/api/registry?chain=sepolia
+
+# →
+# {
+# "pairs": [
+# { "symbol": "USDC", "tokenAddress": "0x...",
+# "confidentialTokenAddress": "0x...",
+# "decimals": 6, "wrapperDecimals": 6 },
+# ...
+# ],
+# "total": 8,
+# "source": "on-chain"
+# }`,
+ viem: `import { createPublicClient, http } from "viem";
+import { sepolia } from "viem/chains";
+import { REGISTRY_ABI } from "./abi";
+
+const client = createPublicClient({
+ chain: sepolia,
+ transport: http(),
+});
+
+const [tokens, wrappers] = await client.readContract({
+ address: "0xRegistry",
+ abi: REGISTRY_ABI,
+ functionName: "listPairs",
+ args: [0n, 100n],
+});`,
+};
+
+export function ForDevs() {
+ return (
+
+
+ );
+}
+
+function CodeBlock({ title, code, delay }: { title: string; code: string; delay: number }) {
+ return (
+
+
+ );
+}
diff --git a/src/components/landing-v2/lib/lenis-provider.tsx b/src/components/landing-v2/lib/lenis-provider.tsx
new file mode 100644
index 0000000..38a9bf8
--- /dev/null
+++ b/src/components/landing-v2/lib/lenis-provider.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { ReactNode, useEffect, useRef } from 'react';
+import Lenis from 'lenis';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+if (typeof window !== 'undefined') {
+ gsap.registerPlugin(ScrollTrigger);
+}
+
+/**
+ * Single Lenis instance for the entire landing.
+ * Drives GSAP's ScrollTrigger so pin/scrub timelines stay in sync with the
+ * smooth-scroll engine (otherwise the two fight each other).
+ *
+ * Respects prefers-reduced-motion — Lenis becomes a no-op and native scroll
+ * is used, while GSAP still works for non-scroll-driven animations.
+ */
+export function LenisProvider({ children }: { children: ReactNode }) {
+ const lenisRef = useRef(null);
+
+ useEffect(() => {
+ const prefersReduced = window.matchMedia(
+ '(prefers-reduced-motion: reduce)',
+ ).matches;
+
+ if (prefersReduced) return;
+
+ const lenis = new Lenis({
+ lerp: 0.1,
+ smoothWheel: true,
+ wheelMultiplier: 1,
+ touchMultiplier: 1.2,
+ });
+ lenisRef.current = lenis;
+
+ function raf(time: number) {
+ lenis.raf(time);
+ requestAnimationFrame(raf);
+ }
+ const rafId = requestAnimationFrame(raf);
+
+ // Bridge Lenis → ScrollTrigger so pinned sections stay aligned.
+ lenis.on('scroll', ScrollTrigger.update);
+ gsap.ticker.lagSmoothing(0);
+
+ // Tell ScrollTrigger to refresh on resize.
+ ScrollTrigger.refresh();
+
+ return () => {
+ cancelAnimationFrame(rafId);
+ lenis.destroy();
+ lenisRef.current = null;
+ };
+ }, []);
+
+ return <>{children};
+}
diff --git a/src/components/landing-v2/lib/noise-background.tsx b/src/components/landing-v2/lib/noise-background.tsx
new file mode 100644
index 0000000..edb9a0c
--- /dev/null
+++ b/src/components/landing-v2/lib/noise-background.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { createNoise2D } from 'simplex-noise';
+
+/**
+ * Scroll-driven generative background — simplex noise rendered to a 2D canvas.
+ *
+ * Hue and density shift based on document scroll progress so that the
+ * background visually evolves through the page narrative:
+ * 0–25% : warm cream + faint gold haze
+ * 25–50% : cream with denser gold particles
+ * 50–75% : bone + deep-gold pulses (encryption beat)
+ * 75–100%: drifts to aubergine before the dark final beat
+ *
+ * Pure Canvas2D — no R3F required, lower runtime cost than a shader.
+ * Respects prefers-reduced-motion (renders one static frame, no animation).
+ */
+export function NoiseBackground() {
+ const canvasRef = useRef(null);
+ const rafRef = useRef(null);
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+
+ const dpr = Math.min(window.devicePixelRatio || 1, 2);
+ const noise = createNoise2D();
+ const prefersReduced = window.matchMedia(
+ '(prefers-reduced-motion: reduce)',
+ ).matches;
+
+ function resize() {
+ const w = window.innerWidth;
+ const h = window.innerHeight;
+ canvas!.width = Math.floor(w * dpr);
+ canvas!.height = Math.floor(h * dpr);
+ canvas!.style.width = w + 'px';
+ canvas!.style.height = h + 'px';
+ ctx!.scale(dpr, dpr);
+ }
+ resize();
+ window.addEventListener('resize', resize);
+
+ // Palette stops, sampled per-progress
+ function lerp(a: number, b: number, t: number) {
+ return a + (b - a) * t;
+ }
+ function rgbAt(progress: number) {
+ // Cream → cream + warmer gold → bone with deep gold → aubergine drift
+ if (progress < 0.33) {
+ const t = progress / 0.33;
+ return {
+ r: lerp(250, 248, t),
+ g: lerp(247, 240, t),
+ b: lerp(241, 210, t),
+ };
+ } else if (progress < 0.66) {
+ const t = (progress - 0.33) / 0.33;
+ return {
+ r: lerp(248, 242, t),
+ g: lerp(240, 230, t),
+ b: lerp(210, 190, t),
+ };
+ } else {
+ const t = (progress - 0.66) / 0.34;
+ return {
+ r: lerp(242, 230, t),
+ g: lerp(230, 215, t),
+ b: lerp(190, 175, t),
+ };
+ }
+ }
+
+ let scrollProgress = 0;
+ function updateScroll() {
+ const h = document.documentElement;
+ scrollProgress = h.scrollTop / Math.max(1, h.scrollHeight - h.clientHeight);
+ }
+ updateScroll();
+ window.addEventListener('scroll', updateScroll, { passive: true });
+
+ let time = 0;
+ function render() {
+ const w = canvas!.clientWidth;
+ const h = canvas!.clientHeight;
+ const base = rgbAt(scrollProgress);
+
+ // Base wash
+ ctx!.fillStyle = `rgb(${base.r}, ${base.g}, ${base.b})`;
+ ctx!.fillRect(0, 0, w, h);
+
+ // Gold dots driven by noise — density grows with scroll progress
+ const density = 12 + scrollProgress * 32; // 12 → 44
+ const step = Math.max(40, 120 - scrollProgress * 60); // larger step at top = fewer dots
+ const goldIntensity = 0.04 + scrollProgress * 0.18; // 0.04 → 0.22
+
+ for (let x = 0; x < w; x += step) {
+ for (let y = 0; y < h; y += step) {
+ const n = noise((x + time) / 320, (y + time * 0.7) / 320);
+ const r = (n + 1) * density;
+ const alpha = goldIntensity * (0.5 + (n + 1) * 0.25);
+ ctx!.fillStyle = `rgba(255, 210, 8, ${alpha.toFixed(3)})`;
+ ctx!.beginPath();
+ ctx!.arc(x + n * 30, y + n * 20, r * 0.04 + 0.6, 0, Math.PI * 2);
+ ctx!.fill();
+ }
+ }
+
+ time += prefersReduced ? 0 : 0.15;
+ rafRef.current = requestAnimationFrame(render);
+ }
+ render();
+
+ return () => {
+ if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+ window.removeEventListener('resize', resize);
+ window.removeEventListener('scroll', updateScroll);
+ };
+ }, []);
+
+ return (
+
+ );
+}
diff --git a/src/components/landing-v2/lib/scroll-progress.tsx b/src/components/landing-v2/lib/scroll-progress.tsx
new file mode 100644
index 0000000..a5b5849
--- /dev/null
+++ b/src/components/landing-v2/lib/scroll-progress.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Right-edge scroll rail.
+ *
+ * A 2px-wide gold line pinned to the right viewport edge with a circular
+ * indicator that scrubs vertically with scroll progress. Plus a short label
+ * showing the current section's title (driven by intersection of [data-section]
+ * elements).
+ */
+const SECTIONS: { id: string; label: string }[] = [
+ { id: 'aperture', label: 'Aperture' },
+ { id: 'manifesto', label: 'Manifesto' },
+ { id: 'problem', label: 'Problem' },
+ { id: 'solution', label: 'Solution' },
+ { id: 'tokens', label: 'Tokens' },
+ { id: 'capabilities', label: 'Capabilities' },
+ { id: 'numbers', label: 'Numbers' },
+ { id: 'flow', label: 'How it works' },
+ { id: 'devs', label: 'Developers' },
+ { id: 'final', label: 'Begin' },
+];
+
+export function ScrollProgress() {
+ const [progress, setProgress] = useState(0);
+ const [active, setActive] = useState('aperture');
+
+ useEffect(() => {
+ function onScroll() {
+ const h = document.documentElement;
+ const ratio = h.scrollTop / Math.max(1, h.scrollHeight - h.clientHeight);
+ setProgress(Math.min(1, Math.max(0, ratio)));
+ }
+ onScroll();
+ window.addEventListener('scroll', onScroll, { passive: true });
+ return () => window.removeEventListener('scroll', onScroll);
+ }, []);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ // Pick the section with the largest visible area
+ let best: { id: string; area: number } | null = null;
+ for (const entry of entries) {
+ if (entry.isIntersecting) {
+ const area = entry.intersectionRect.height;
+ if (!best || area > best.area) {
+ best = { id: entry.target.id, area };
+ }
+ }
+ }
+ if (best) setActive(best.id);
+ },
+ { threshold: [0.15, 0.5, 0.85] },
+ );
+ const els = SECTIONS.map((s) => document.getElementById(s.id)).filter(Boolean);
+ els.forEach((el) => observer.observe(el!));
+ return () => observer.disconnect();
+ }, []);
+
+ const activeLabel = SECTIONS.find((s) => s.id === active)?.label ?? '';
+
+ return (
+ ,
+ buildTimeline: (timeline: gsap.core.Timeline) => void,
+ options: UseGsapPinOptions = {},
+) {
+ useEffect(() => {
+ const el = sectionRef.current;
+ if (!el) return;
+ if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+ const ctx = gsap.context(() => {
+ const tl = gsap.timeline({
+ scrollTrigger: {
+ trigger: el,
+ start: options.start ?? 'top top',
+ end: options.end ?? '+=100%',
+ scrub: options.scrub ?? true,
+ pin: true,
+ pinSpacing: options.pinSpacing ?? true,
+ anticipatePin: 1,
+ },
+ });
+ buildTimeline(tl);
+ }, sectionRef);
+
+ return () => ctx.revert();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+}
diff --git a/src/components/landing-v2/manifesto.tsx b/src/components/landing-v2/manifesto.tsx
new file mode 100644
index 0000000..414fd1d
--- /dev/null
+++ b/src/components/landing-v2/manifesto.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { useRef } from 'react';
+import { gsap } from 'gsap';
+import { useGsapPin } from './lib/use-gsap-pin';
+
+/**
+ * Manifesto — pinned for one viewport height.
+ *
+ * The paragraph reveals word-by-word as the user scrolls (no triggering by
+ * IntersectionObserver — the timeline is scrubbed). When all words land,
+ * a gold underline draws beneath the closing phrase.
+ *
+ * Lots of negative space, no buttons. Editorial.
+ */
+const SENTENCE =
+ 'Public blockchains broadcast every move you make. Zama’s fully homomorphic encryption keeps the same ledger — public, verifiable, on-chain — but renders your balance unreadable to everyone except you.';
+
+const WORDS = SENTENCE.split(/(\s+)/);
+
+export function Manifesto() {
+ const ref = useRef(null);
+
+ useGsapPin(
+ ref,
+ (tl) => {
+ // Word reveal — opacity 0.15 → 1, staggered across the scroll
+ const words = ref.current?.querySelectorAll('[data-word]') ?? [];
+ gsap.set(words, { opacity: 0.18, color: '#5A5850' });
+ tl.to(words, {
+ opacity: 1,
+ color: '#1A1814',
+ stagger: { each: 0.04, ease: 'none' },
+ ease: 'none',
+ duration: 1,
+ }, 0);
+
+ // Underline draw at the end
+ const rule = ref.current?.querySelector('[data-underline]');
+ if (rule) {
+ tl.fromTo(rule, { scaleX: 0 }, { scaleX: 1, duration: 0.4, ease: 'power2.out' }, '>-0.1');
+ }
+ },
+ { start: 'top top', end: '+=130%', scrub: 0.4 },
+ );
+
+ return (
+
+
+ );
+}
diff --git a/src/components/landing-v2/nav.tsx b/src/components/landing-v2/nav.tsx
new file mode 100644
index 0000000..14fcbe1
--- /dev/null
+++ b/src/components/landing-v2/nav.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import Link from 'next/link';
+import { ArrowUpRight } from 'lucide-react';
+import { SiGithub } from 'react-icons/si';
+
+/**
+ * Editorial nav — fine-weight type, lots of space.
+ * Wordmark left, three anchor links centre, Launch right.
+ */
+export function NavV2() {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/landing-v2/numbers.tsx b/src/components/landing-v2/numbers.tsx
new file mode 100644
index 0000000..441dc83
--- /dev/null
+++ b/src/components/landing-v2/numbers.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { motion, useInView } from 'motion/react';
+
+/**
+ * Numbers — large editorial figures.
+ *
+ * Four counts tick from 0 → target when the section enters the viewport.
+ * Display-sized typography — these are the page's loudest moment.
+ */
+const STATS = [
+ { label: 'Confidential pairs', value: 15, suffix: '+' },
+ { label: 'Networks', value: 2, suffix: '' },
+ { label: 'Decimals · for FHE', value: 6, suffix: '' },
+ { label: 'Decrypts off-chain', value: 100, suffix: '%' },
+];
+
+function Counter({ target }: { target: number }) {
+ const ref = useRef(null);
+ const inView = useInView(ref, { once: true, margin: '-60px' });
+ const [val, setVal] = useState(0);
+
+ useEffect(() => {
+ if (!inView) return;
+ const startAt = performance.now();
+ const duration = 1100;
+ let frame = 0;
+ function step(now: number) {
+ const p = Math.min(1, (now - startAt) / duration);
+ const eased = 1 - Math.pow(1 - p, 4); // easeOutQuart
+ setVal(Math.round(eased * target));
+ if (p < 1) frame = requestAnimationFrame(step);
+ }
+ frame = requestAnimationFrame(step);
+ return () => cancelAnimationFrame(frame);
+ }, [inView, target]);
+
+ return {val};
+}
+
+export function Numbers() {
+ return (
+
+
+ );
+}
diff --git a/src/components/landing-v2/problem-ledger.tsx b/src/components/landing-v2/problem-ledger.tsx
new file mode 100644
index 0000000..a3e0cbe
--- /dev/null
+++ b/src/components/landing-v2/problem-ledger.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import { motion } from 'motion/react';
+
+/**
+ * Problem — a mock public ledger.
+ *
+ * Two-column split: left shows transparent transfers (addresses + amounts),
+ * right shows what an observer can derive (cluster, total, behaviour).
+ * Plain text, monospace, deliberately ugly to make the point.
+ *
+ * Not scroll-pinned — that's reserved for the Solution beat which scrambles
+ * these very rows letter-by-letter.
+ */
+const ROWS: { hash: string; from: string; to: string; value: string; token: string }[] = [
+ { hash: '0xa3d2…', from: '0x9b…fff', to: '0x7c…639', value: '1,240.00', token: 'USDC' },
+ { hash: '0xd11e…', from: '0x9b…fff', to: '0xfa…412', value: '300.00', token: 'USDC' },
+ { hash: '0x55a0…', from: '0xfa…412', to: '0x71…a12', value: '290.00', token: 'USDC' },
+ { hash: '0x9f3c…', from: '0x9b…fff', to: '0x7c…639', value: '11.500', token: 'WETH' },
+ { hash: '0x4b81…', from: '0x71…a12', to: '0x9b…fff', value: '850.00', token: 'USDC' },
+];
+
+export function ProblemLedger() {
+ return (
+
+
+ );
+}
+
+function Derived({ label, value, hint }: { label: string; value: string; hint: string }) {
+ return (
+ (null);
+
+ // Pre-compute the scrambled values for each row so we can interpolate.
+ const scrambledValues = useRef(ROWS.map(() => ''));
+ useEffect(() => {
+ scrambledValues.current = ROWS.map(() => ciphertext(14));
+ }, []);
+
+ useGsapPin(
+ ref,
+ (tl) => {
+ const rows = ref.current?.querySelectorAll('[data-row]') ?? [];
+
+ rows.forEach((row, idx) => {
+ const valueEl = row.querySelector('[data-cell-value]');
+ const fromEl = row.querySelector('[data-cell-from]');
+ const toEl = row.querySelector('[data-cell-to]');
+
+ const start = idx * 0.04;
+
+ if (valueEl) {
+ const target = scrambledValues.current[idx] || ciphertext(14);
+ tl.to(valueEl, {
+ duration: 0.6,
+ ease: 'none',
+ onUpdate: function () {
+ const p = this.progress();
+ // animate character by character — left to right
+ const chars = Math.round(p * target.length);
+ valueEl.textContent =
+ target.substring(0, chars) +
+ (valueEl.dataset.original ?? '').substring(chars);
+ },
+ onComplete: () => {
+ valueEl.textContent = target;
+ valueEl.classList.add('text-gold-700');
+ valueEl.classList.remove('text-ink-900');
+ },
+ }, start);
+ }
+ if (fromEl) {
+ tl.to(fromEl, {
+ opacity: 0.4,
+ duration: 0.3,
+ ease: 'none',
+ }, start);
+ }
+ if (toEl) {
+ tl.to(toEl, {
+ opacity: 0.4,
+ duration: 0.3,
+ ease: 'none',
+ }, start);
+ }
+ });
+
+ // Reveal the "decrypt" pill at the end
+ const pill = ref.current?.querySelector('[data-decrypt-pill]');
+ const resolved = ref.current?.querySelector('[data-resolved-text]');
+ if (pill) tl.to(pill, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' }, 0.7);
+ if (resolved) tl.to(resolved, { opacity: 1, y: 0, duration: 0.5, ease: 'power2.out' }, 0.8);
+ },
+ { start: 'top top', end: '+=150%', scrub: 0.5 },
+ );
+
+ // Initialise dataset.original on mount so the scrub can interpolate.
+ useEffect(() => {
+ const valueEls = ref.current?.querySelectorAll('[data-cell-value]') ?? [];
+ valueEls.forEach((el) => {
+ el.dataset.original = el.textContent ?? '';
+ });
+ }, []);
+
+ return (
+
+
+ );
+}
+
+function Bullet({ label, value }: { label: string; value: string }) {
+ return (
+
+
+ );
+}
diff --git a/src/components/landing/aurora-bg.tsx b/src/components/landing/aurora-bg.tsx
new file mode 100644
index 0000000..7ed772f
--- /dev/null
+++ b/src/components/landing/aurora-bg.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+/**
+ * AuroraBg — light-mode gold aurora on cream background.
+ * Two very soft gold radial glows that slowly drift, giving the hero
+ * an atmospheric warmth without overpowering the dark text.
+ */
+export function AuroraBg({ className }: { className?: string }) {
+ return (
+ which mounts with
+ * initial="hidden" (opacity:0 + blur). Visibility is triggered by an
+ * IntersectionObserver inside `useInView({ once: true })`. When the browser
+ * restores the page from the back-forward cache the DOM is hot but JS does
+ * NOT re-execute, so the observer never re-fires and every wrapped node
+ * stays at opacity:0.
+ *
+ * Fix: listen for `pageshow` with `event.persisted === true` (the canonical
+ * BFCache signal) and force a clean reload. Trade-off is one extra request
+ * on back-navigation, which is acceptable for a static page.
+ */
+export function BFCacheRecovery() {
+ useEffect(() => {
+ const handler = (event: PageTransitionEvent) => {
+ if (event.persisted) window.location.reload();
+ };
+ window.addEventListener('pageshow', handler);
+ return () => window.removeEventListener('pageshow', handler);
+ }, []);
+ return null;
+}
diff --git a/src/components/landing/features.tsx b/src/components/landing/features.tsx
new file mode 100644
index 0000000..efc739a
--- /dev/null
+++ b/src/components/landing/features.tsx
@@ -0,0 +1,166 @@
+'use client';
+
+import Link from 'next/link';
+import {
+ Search,
+ Shield,
+ Wallet,
+ Droplets,
+ Code2,
+ BarChart3,
+ ArrowUpRight,
+} from 'lucide-react';
+import { BlurFade } from '@/components/magic/blur-fade';
+import { BorderBeam } from '@/components/magic/border-beam';
+import { MagicCard } from '@/components/magic/magic-card';
+import { TypingAnimation } from '@/components/magic/typing-animation';
+import { cn } from '@/lib/utils';
+
+interface CardDef {
+ title: string;
+ desc: string;
+ icon: React.ElementType;
+ href: string;
+ span: string;
+ accent?: boolean;
+}
+
+const CARDS: CardDef[] = [
+ {
+ title: 'Live registry, every pair',
+ desc: 'Every confidential wrapper as the on-chain WrappersRegistry sees it — Sepolia and Mainnet, in real time.',
+ icon: Search,
+ href: '/app',
+ span: 'md:col-span-1',
+ accent: true,
+ },
+ {
+ title: 'Shield in two clicks',
+ desc: 'Approve and wrap any ERC-20 into its ERC-7984 form. Decimal scaling handled automatically.',
+ icon: Shield,
+ href: '/app/wrap',
+ span: 'md:col-span-1',
+ },
+ {
+ title: 'Confidential portfolio',
+ desc: 'Decrypt all your balances in one EIP-712 permit. Re-shield, unshield, withdraw.',
+ icon: Wallet,
+ href: '/app/portfolio',
+ span: 'md:col-span-1',
+ },
+ {
+ title: 'Testnet faucet',
+ desc: 'Mint mock USDC, WETH, ZAMA & more on Sepolia — wired to the official Zama mocks.',
+ icon: Droplets,
+ href: '/app/faucet',
+ span: 'md:col-span-1',
+ },
+ {
+ title: 'REST + code snippets',
+ desc: 'Public /api/registry endpoint and copy-paste React / viem / ethers snippets.',
+ icon: Code2,
+ href: '/app/developers',
+ span: 'md:col-span-1',
+ },
+ {
+ title: 'Protocol analytics',
+ desc: 'TVL by token, 24-hour shield/unshield volume, ranking — pulled straight from on-chain events.',
+ icon: BarChart3,
+ href: '/app/analytics',
+ span: 'md:col-span-1',
+ },
+];
+
+function FeatureCard({ card, idx }: { card: CardDef; idx: number }) {
+ const Icon = card.icon;
+ return (
+
+
+
+
+
+
+ );
+}
+
+export function Features() {
+ return (
+
+
+ );
+}
diff --git a/src/components/landing/fhe-explainer.tsx b/src/components/landing/fhe-explainer.tsx
new file mode 100644
index 0000000..54cbf9d
--- /dev/null
+++ b/src/components/landing/fhe-explainer.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { BlurFade } from '@/components/magic/blur-fade';
+import { DotPattern } from '@/components/magic/dot-pattern';
+import { TextAnimate } from '@/components/magic/text-animate';
+import { Lock, Eye, KeyRound, Cpu } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const POINTS = [
+ {
+ icon: Lock,
+ title: 'Encrypted on-chain',
+ body: 'Balances stored as euint64 ciphertext. Public block explorers cannot read them.',
+ },
+ {
+ icon: KeyRound,
+ title: 'You hold the key',
+ body: 'Decryption requires a wallet-signed EIP-712 permit. No custody, no central decryptor.',
+ },
+ {
+ icon: Cpu,
+ title: 'Computed homomorphically',
+ body: 'Transfers, allowances, comparisons — all execute on ciphertext via fhEVM.',
+ },
+ {
+ icon: Eye,
+ title: 'Auditable when needed',
+ body: 'Selectively reveal balances per session, per contract, or grant scoped read access.',
+ },
+];
+
+export function FheExplainer() {
+ return (
+
+
+ );
+}
diff --git a/src/components/landing/final-cta.tsx b/src/components/landing/final-cta.tsx
new file mode 100644
index 0000000..e466063
--- /dev/null
+++ b/src/components/landing/final-cta.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import Link from 'next/link';
+import { ArrowUpRight } from 'lucide-react';
+import { SiGithub } from 'react-icons/si';
+import { BlurFade } from '@/components/magic/blur-fade';
+import { ShimmerButton } from '@/components/magic/shimmer-button';
+
+/**
+ * Final CTA — short, declarative, one primary action.
+ * Sits inside a contained "card" with a faint gold edge to draw the eye
+ * without making the whole page feel like an ad.
+ */
+export function FinalCta() {
+ return (
+
+
+ );
+}
diff --git a/src/components/landing/footer.tsx b/src/components/landing/footer.tsx
new file mode 100644
index 0000000..da5a11a
--- /dev/null
+++ b/src/components/landing/footer.tsx
@@ -0,0 +1,107 @@
+import Link from 'next/link';
+import { ExternalLink } from 'lucide-react';
+import { SiGithub } from 'react-icons/si';
+
+const COLS: { title: string; links: { label: string; href: string; external?: boolean }[] }[] = [
+ {
+ title: 'App',
+ links: [
+ { label: 'Registry', href: '/app' },
+ { label: 'Wrap', href: '/app/wrap' },
+ { label: 'Portfolio', href: '/app/portfolio' },
+ { label: 'Analytics', href: '/app/analytics' },
+ { label: 'Faucet', href: '/app/faucet' },
+ ],
+ },
+ {
+ title: 'Developers',
+ links: [
+ { label: 'Documentation', href: '/app/docs' },
+ { label: 'Code snippets', href: '/app/developers' },
+ { label: 'REST API', href: '/api/registry?chain=sepolia' },
+ { label: 'GitHub', href: 'https://github.com/hosein-ul/zamavault', external: true },
+ ],
+ },
+ {
+ title: 'Resources',
+ links: [
+ { label: 'Tutorial — 5-min', href: '/app/learn' },
+ { label: 'Zama Protocol docs', href: 'https://docs.zama.org/protocol', external: true },
+ { label: 'ERC-7984 spec', href: 'https://eips.ethereum.org/', external: true },
+ ],
+ },
+];
+
+export function LandingFooter() {
+ return (
+
+ );
+}
diff --git a/src/components/landing/hero.tsx b/src/components/landing/hero.tsx
new file mode 100644
index 0000000..41d5dca
--- /dev/null
+++ b/src/components/landing/hero.tsx
@@ -0,0 +1,121 @@
+'use client';
+
+import Link from 'next/link';
+import { motion } from 'motion/react';
+import { ArrowUpRight, BookOpen } from 'lucide-react';
+import { BlurFade } from '@/components/magic/blur-fade';
+import { TextAnimate } from '@/components/magic/text-animate';
+import { AuroraBg } from './aurora-bg';
+
+/**
+ * Hero — cream background, gold aurora, smooth word-by-word reveal.
+ *
+ * Each headline line uses a single at default Magic UI timing
+ * (animation="blurInUp" by="word" once). No custom duration overrides — the
+ * library's defaults are tuned and the spacing-out is done purely with `delay`.
+ * Whole headline finishes in ~1.2s; CTAs/subhead follow with BlurFade.
+ *
+ * The entire hero is wrapped in a motion.div that fades from 0.95 → 1 so even
+ * on a slow device with delayed JS the content is readable instantly.
+ */
+export function Hero() {
+ return (
+
+
+
+
+ );
+}
diff --git a/src/components/landing/how-it-works.tsx b/src/components/landing/how-it-works.tsx
new file mode 100644
index 0000000..e092cde
--- /dev/null
+++ b/src/components/landing/how-it-works.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import { BlurFade } from '@/components/magic/blur-fade';
+import { TextAnimate } from '@/components/magic/text-animate';
+
+const STEPS = [
+ {
+ n: '01',
+ title: 'Discover',
+ body: 'Browse every registered ERC-20 ↔ ERC-7984 pair pulled live from the on-chain WrappersRegistry.',
+ },
+ {
+ n: '02',
+ title: 'Shield',
+ body: 'Approve once, wrap your tokens. The SDK auto-handles allowance, scaling, and the shield transaction.',
+ },
+ {
+ n: '03',
+ title: 'Decrypt',
+ body: 'Sign a single EIP-712 permit — your balance decrypts client-side. Nothing is stored on-chain in cleartext.',
+ },
+ {
+ n: '04',
+ title: 'Unshield',
+ body: 'Burn the encrypted balance, wait for the gateway proof, receive the underlying ERC-20 back in your wallet.',
+ },
+];
+
+export function HowItWorks() {
+ return (
+
+
+ );
+}
diff --git a/src/components/landing/nav.tsx b/src/components/landing/nav.tsx
new file mode 100644
index 0000000..e6138d1
--- /dev/null
+++ b/src/components/landing/nav.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import Link from 'next/link';
+import { ArrowUpRight } from 'lucide-react';
+import { SiGithub } from 'react-icons/si';
+
+/**
+ * Landing nav — sticky glass bar on cream background.
+ * Logo left, anchor links center, GitHub + Launch CTA right.
+ */
+export function LandingNav() {
+ return (
+
+
+ );
+}
diff --git a/src/components/landing/stats.tsx b/src/components/landing/stats.tsx
new file mode 100644
index 0000000..9fa2d92
--- /dev/null
+++ b/src/components/landing/stats.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { NumberTicker } from '@/components/magic/number-ticker';
+import { BlurFade } from '@/components/magic/blur-fade';
+
+const STATS = [
+ { value: 15, label: 'Confidential pairs registered', suffix: '' },
+ { value: 2, label: 'Networks supported', suffix: '' },
+ { value: 6, label: 'Decimals · always · for FHE', suffix: '' },
+ { value: 100, label: 'On-chain, on-the-fly decrypt', suffix: '%' },
+];
+
+export function Stats() {
+ return (
+
+
+ );
+}
diff --git a/src/components/landing/trust-rail.tsx b/src/components/landing/trust-rail.tsx
new file mode 100644
index 0000000..39c9701
--- /dev/null
+++ b/src/components/landing/trust-rail.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { Marquee } from '@/components/magic/marquee';
+import { cn } from '@/lib/utils';
+
+const TOKENS = [
+ { sym: 'cUSDC', name: 'USD Coin', logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/3408.png' },
+ { sym: 'cUSDT', name: 'Tether USD', logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/825.png' },
+ { sym: 'cWETH', name: 'Wrapped Ether', logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/2396.png' },
+ { sym: 'cZAMA', name: 'Zama', logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/39332.png' },
+ { sym: 'cBRON', name: 'Bron', logo: null },
+ { sym: 'ctGBP', name: 'Tokenised GBP', logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/38935.png' },
+ { sym: 'cXAUt', name: 'Tether Gold', logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5176.png' },
+];
+
+function Pill({ sym, name, logo }: typeof TOKENS[0]) {
+ return (
+
+
+ );
+}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index afea17f..9c56ee2 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -22,13 +22,14 @@ import {
} from 'lucide-react';
const NAV_ITEMS = [
- { href: '/', label: 'Registry' },
- { href: '/wrap', label: 'Wrap' },
- { href: '/portfolio', label: 'Portfolio' },
- { href: '/faucet', label: 'Faucet' },
- { href: '/learn', label: 'Learn' },
- { href: '/developers', label: 'Dev Tools' },
- { href: '/docs', label: 'Docs' },
+ { href: '/app', label: 'Registry' },
+ { href: '/app/wrap', label: 'Wrap' },
+ { href: '/app/portfolio', label: 'Portfolio' },
+ { href: '/app/faucet', label: 'Faucet' },
+ { href: '/app/learn', label: 'Learn' },
+ { href: '/app/developers', label: 'Dev Tools' },
+ { href: '/app/analytics', label: 'Analytics' },
+ { href: '/app/docs', label: 'Docs' },
];
const THEME_OPTIONS: { value: DesignTheme; label: string }[] = [
@@ -82,7 +83,7 @@ export default function Header() {
-
-
+
-
- )}
-
- {/* Stats */}
-
-
-
+
);
}
diff --git a/src/components/landing-v2/aperture.tsx b/src/components/landing-v2/aperture.tsx
new file mode 100644
index 0000000..b3459e3
--- /dev/null
+++ b/src/components/landing-v2/aperture.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import Link from 'next/link';
+import { motion } from 'motion/react';
+import { ArrowUpRight } from 'lucide-react';
+
+/**
+ * Aperture — the first viewport.
+ *
+ * A single gold dot fades in, blooms into a soft halo, then the headline
+ * resolves around it. Two lines, serif display: "Visible to the world."
+ * crossfades to "Encrypted for you." Quiet, deliberate, no CTAs.
+ *
+ * A tiny "Scroll" hint sits at the bottom.
+ */
+export function Aperture() {
+ return (
+
-
+
+
+
+
-
- {/* Cached-snapshot banner */}
- {isFromCache && (
-
-
-
-
-
-
-
-
- {isTestnet ? 'Sepolia Testnet' : 'Ethereum Mainnet'}
-
-
-
-
-
-
- {/* Search */}
- Registered Pairs
-
- {isLoading && pairs.length === 0 ?
- {revokedCount > 0 && {revokedCount} revoked
}
- Active Network
- FHE Security
-
- ERC-7984 Standard
-
-
-
-
- {/* Table */}
-
-
-
- {revokedCount > 0 && (
-
- )}
-
-
-
-
-
-
- {/* Info Banner */}
- | Token | -ERC-20 Address | -
-
- ERC-7984 Wrapper
- |
-
-
- Public Balance
- |
-
-
- Confidential Balance
- |
- Actions | -
|---|---|---|---|---|---|
|
-
-
-
-
-
- {searchQuery ? 'No tokens match your search query' : 'No registered wrappers found on this network'}
-
- |
-
-
-
-
-
-
-
- Underlying Mechanism
-
-
- Confidential wrappers convert standard public tokens into ERC-7984 tokens
- utilizing Fully Homomorphic Encryption (FHE) on the fhEVM. On-chain values
- (like account balances and transfer amounts) are encrypted into cryptographic
- handles — protecting transaction details from public ledger scraping.
-
-
+
+ {/* Gold dot → halo */}
+
+
+
+
+
+ {/* Eyebrow */}
+
+ Fully Homomorphic Encryption · ERC-7984
+
+
+ {/* Headline — two lines, the second swaps in */}
+
+
+
+ {/* Caption */}
+
+ The canonical interface for the Zama Confidential Wrappers Registry.
+
+
+ {/* Lone link */}
+
+
+ Enter the vault
+
+
+ {/* Scroll hint */}
+
+ Scroll
+
+
+
+
+
+ Your balance was always public.
+
+
+ Now it isn’t.
+
+
+
+ {/* Caption */}
+
+
+
+
+
+
+ Six tools, one design
++ Everything around{' '} + ERC-7984, one tab away. +
+
+ {CAPS.map((c, i) => (
+ = 3 ? 'md:border-t md:border-ink-900/[0.08]' : ''}`}
+ >
+
+
+ ))}
+
+
+ {c.n}
+
+ + {c.title} +
++ {c.body} +
+
+
+ Open
+
+
+
+
+
+ Your tokens.
+
+ Your privacy.{' '} + On-chain. +
+
+
+
+ Launch ZamaVault
+
+
+ + Your privacy.{' '} + On-chain. +
+
+
+
+
+
+ From public to private — and back
++ Four steps. Under a minute. +
+
+
+ {/* Left rail */}
+
+
+
+
+ {/* Steps */}
+
+
+
+ -
+ {STEPS.map((s) => (
+
-
+ + + Step {s.n} + ++++
+ {s.title} +
++ {s.body} +
+
+ ))}
+
+
+
+
+
+
+
+
+
+ Build on it
++ An SDK, a REST endpoint, a copy-paste hook. +
++ ZamaVault’s registry is exposed verbatim through a public + JSON endpoint. The shield/decrypt/unshield flows are one + hook each. Snippets for React, viem, and ethers are kept + in sync with the live app. +
+
+
+ Snippet generator
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+ {code}
+
+
+
+ );
+}
diff --git a/src/components/landing-v2/lib/use-gsap-pin.ts b/src/components/landing-v2/lib/use-gsap-pin.ts
new file mode 100644
index 0000000..2104569
--- /dev/null
+++ b/src/components/landing-v2/lib/use-gsap-pin.ts
@@ -0,0 +1,58 @@
+'use client';
+
+import { useEffect, RefObject } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+if (typeof window !== 'undefined') {
+ gsap.registerPlugin(ScrollTrigger);
+}
+
+interface UseGsapPinOptions {
+ /** Scrub the timeline to scroll position. true = 1-frame smoothing. */
+ scrub?: boolean | number;
+ /** Where the pin starts in ScrollTrigger format, e.g. "top top" */
+ start?: string;
+ /** Where the pin ends, e.g. "+=100%" or "bottom top" */
+ end?: string;
+ /** Anchor the pin to a different element than the trigger */
+ pinSpacing?: boolean;
+}
+
+/**
+ * Tiny typed wrapper around gsap.context + ScrollTrigger.
+ *
+ * - Cleans up automatically on unmount (revert + kill triggers).
+ * - Respects prefers-reduced-motion: skips the timeline entirely.
+ * - Returns nothing; the caller passes a `buildTimeline` callback that
+ * receives the bound gsap instance and a ScrollTrigger config object.
+ */
+export function useGsapPin(
+ sectionRef: RefObject
+
+
+
+
+ {activeLabel}
+
+
+
+ + {WORDS.map((w, i) => + /\s+/.test(w) ? ( + {w} + ) : ( + + {w} + + ), + )} +
+ +
+
+
+
+
+
+ By the count
++ Real numbers, on-chain. +
+
+ {STATS.map((s, i) => (
+
+
+ ))}
+
+
+
+
+ {s.label}
+
+
+
+
+
+
+ {/* Left — the ledger */}
+
+
+
+
+ {/* Right — derived intelligence */}
+ A typical block
++ What the chain shows the world. +
+ +
+ {ROWS.map((r, i) => (
+
+ {r.hash}
+ {r.from}
+ →
+ {r.to}
+ {r.value}
+ {r.token}
+
+ ))}
+
+
+
+
+
+ An observer can derive
+ ++ Every wallet, balance, and counterparty is one block-explorer + query away — for anyone. Always. +
+
+
+ );
+}
diff --git a/src/components/landing-v2/solution-encrypt.tsx b/src/components/landing-v2/solution-encrypt.tsx
new file mode 100644
index 0000000..3ad5dac
--- /dev/null
+++ b/src/components/landing-v2/solution-encrypt.tsx
@@ -0,0 +1,183 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+import { useGsapPin } from './lib/use-gsap-pin';
+
+/**
+ * Solution — pinned for ~150% viewport.
+ *
+ * The same ledger from the Problem section visually scrambles letter-by-letter
+ * into hex ciphertext as the user scrolls. At the end of the pin, all values
+ * are encrypted blobs; a gold "Decrypt" pill appears at the top-right and a
+ * sentence resolves below explaining what just happened.
+ */
+const ROWS: { hash: string; from: string; to: string; value: string; token: string }[] = [
+ { hash: '0xa3d2…', from: '0x9b…fff', to: '0x7c…639', value: '1,240.00', token: 'USDC' },
+ { hash: '0xd11e…', from: '0x9b…fff', to: '0xfa…412', value: '300.00', token: 'USDC' },
+ { hash: '0x55a0…', from: '0xfa…412', to: '0x71…a12', value: '290.00', token: 'USDC' },
+ { hash: '0x9f3c…', from: '0x9b…fff', to: '0x7c…639', value: '11.500', token: 'WETH' },
+ { hash: '0x4b81…', from: '0x71…a12', to: '0x9b…fff', value: '850.00', token: 'USDC' },
+];
+
+const HEX = '0123456789abcdef';
+function ciphertext(len: number) {
+ let s = '';
+ for (let i = 0; i < len; i++) s += HEX[Math.floor(Math.random() * HEX.length)];
+ return s;
+}
+
+export function SolutionEncrypt() {
+ const ref = useRef
+ {label}
+
+ {value}
+ {hint}
+
+
+
+
+
+
+
+
+
+ After ZamaVault
++ The same block,{' '} + illegible. +
+ +
+ {ROWS.map((r) => (
+
+
+ {r.hash}
+ {r.from}
+ →
+ {r.to}
+
+ {r.value}
+
+ enc
+
+ ))}
+
+
+
+
+
+
+ euint64 · on-chain
+
+
+ + Same block, same gas, same finality — only you can read your + balance. Signed once with an EIP-712 permit. +
+ +
+
+
+
+
+ );
+}
diff --git a/src/components/landing-v2/token-constellation.tsx b/src/components/landing-v2/token-constellation.tsx
new file mode 100644
index 0000000..11863be
--- /dev/null
+++ b/src/components/landing-v2/token-constellation.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { motion } from 'motion/react';
+
+/**
+ * Token Constellation — editorial token grid (not R3F).
+ *
+ * After Phase A's lesson with 3D libs and runtime cost, this is a 2D
+ * orbital layout: tokens float on a soft circle with subtle independent
+ * drift animations. Cheaper, still distinctive.
+ *
+ * Each token uses its real CMC logo (same source as v1).
+ */
+const TOKENS = [
+ { sym: 'cUSDC', name: 'USD Coin', logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/3408.png' },
+ { sym: 'cUSDT', name: 'Tether USD', logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/825.png' },
+ { sym: 'cWETH', name: 'Wrapped Ether', logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/2396.png' },
+ { sym: 'cZAMA', name: 'Zama', logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/39332.png' },
+ { sym: 'cBRON', name: 'Bron', logo: null },
+ { sym: 'ctGBP', name: 'Tokenised GBP', logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/38935.png' },
+ { sym: 'cXAUt', name: 'Tether Gold', logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5176.png' },
+];
+
+export function TokenConstellation() {
+ // Layout: 4 across top, 3 across bottom, alternating offsets
+ return (
+
+
+ {label}
+ {value}
+
+
+
+
+
+
+ Every wrapper, live from the registry
++ One interface. Every pair. +
++ ZamaVault reads the on-chain WrappersRegistry directly. Every + confidential ERC-7984 token shows up the moment it’s registered. +
+
+ {TOKENS.map((t, i) => (
+
+
+ ))}
+
+
+
+ {t.logo ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+ {t.sym[1]}
+ )}
+
+
+
+ {t.sym}
+ {t.name}
+ + 7 confidential pairs on Sepolia, 7 on Ethereum mainnet — and counting. + Pulled live from WrappersRegistry. +
+
+ {/* Soft gold halo — top-left */}
+
+
+ {/* Very subtle dot grid — dark lines at low opacity on cream */}
+
+
+ );
+}
diff --git a/src/components/landing/bfcache-recovery.tsx b/src/components/landing/bfcache-recovery.tsx
new file mode 100644
index 0000000..78a120d
--- /dev/null
+++ b/src/components/landing/bfcache-recovery.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { useEffect } from 'react';
+
+/**
+ * BFCache recovery.
+ *
+ * Symptom: returning to the landing via the browser back-button (after
+ * visiting an external link with target="_blank" + then navigating, or a
+ * normal back from an internal link) leaves the page nearly blank.
+ *
+ * Cause: every section is wrapped in
+ {card.accent && (
+
+
+
+
+
+
+
+ + {card.title} +
++ {card.desc} +
+
+ Open
+
+
+
+
+
+
+
+
+ Everything you need to{' '}
+
+
+ + ─ Built for the registry +
+
+ Everything you need to{' '}
+
+ + Six tools, one consistent design. Whether you're shielding a balance, + auditing a wrapper, or shipping a confidential dApp — start here. +
+
+ {CARDS.map((c, i) => (
+
+
+
+
+ Real on-chain confidentiality.
+
+
+
+
+ + ─ Privacy, not pseudonymity +
++ Public chains expose every balance and transfer to anyone watching. Zama's + Fully Homomorphic Encryption (FHE) protocol changes that — balances live + on-chain, but only you can read them. +
++ ZamaVault wraps every official ERC-7984 token into a clean UX: + shield, transfer, decrypt, unshield. No node operator, no validator, + no block-explorer crawler sees your balance. +
+
+ {POINTS.map((p, i) => {
+ const Icon = p.icon;
+ return (
+
+
+ );
+ })}
+
+
+
+
+
+ + {p.title} +
++ {p.body} +
+
+
+
+
+
+ {/* Subtle gold halo */}
+
+
+
+
+
+ Your tokens.
+
+
+
+ Your tokens.
+
+
+ Your privacy.
+
+
+ + Stop leaking your portfolio to every block-explorer indexer. + Shield, transact, decrypt — all from one clean interface. +
+ +
+
+
+
+ Launch ZamaVault
+
+
+
+
+
+ {/* Eyebrow */}
+
+
+
+ {/* Headline — three lines, each a single TextAnimate at default timing */}
+
+
+
+ {/* Subhead */}
+
+
+
+ {/* CTAs */}
+
+
+
+ {/* Trust strip */}
+
+
+
+
+
+ Fully Homomorphic Encryption · ERC-7984 · Live on Mainnet
+
+
+
+ Your balance, invisible
+
+
+ to the world.
+
+
+ Visible only to you.
+
+
+
+ {/* Subhead */}
+ + ZamaVault is the canonical interface for the Zama Confidential Wrappers Registry. + Browse every ERC-20 ↔ ERC-7984 token pair across Ethereum and Sepolia, shield your + balance, and decrypt with a single EIP-712 signature — only you can read it. +
+
+
+ Launch ZamaVault
+
+
+
+
+
+ Live on Sepolia & Ethereum mainnet
+
+ ·
+ Open source · MIT licensed
+ ·
+ No custody · No tracking
+
+
+
+
+
+
+
+ From public balance to private, and back, in under a minute.
+
+
+ + ─ Four steps. That's it. +
+-
+
+
+ {STEPS.map((s, i) => (
+
-
+ + + ● + + + {s.n} + ++++
+ {s.title} +
++ {s.body} +
+
+
+ {/* Logo */}
+
+
+
+ Z
+
+
+ ZamaVault
+
+
+
+ {/* Center anchor links */}
+
+
+ {/* Right side */}
+
+
+
+
+
+
+ {STATS.map((s, i) => (
+
+
+ ))}
+
+
+
+
+
+ + {s.label} +
+
+ {logo ? (
+ 
+ ) : (
+
+ );
+}
+
+export function TrustRail() {
+ return (
+
+ B
+
+ )}
+ {sym}
+ {name}
+
+
+ + Confidential token pairs supported +
+ +
{/* Logo */}
-
+