829 lines
36 KiB
TypeScript
829 lines
36 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState, useCallback } from "react";
|
|
import { motion, AnimatePresence } from "motion/react";
|
|
import {
|
|
Link2,
|
|
Shield,
|
|
Activity,
|
|
Hash,
|
|
Clock,
|
|
FileText,
|
|
CheckCircle2,
|
|
Search,
|
|
RefreshCw,
|
|
ExternalLink,
|
|
Blocks,
|
|
Copy,
|
|
Check,
|
|
AlertCircle,
|
|
Upload,
|
|
Zap,
|
|
Fingerprint,
|
|
Radio,
|
|
ChevronRight,
|
|
Terminal,
|
|
Lock,
|
|
Globe,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
getBlockchainTransactions,
|
|
getBlockchainStats,
|
|
verifyDocumentHashOnBlockchain,
|
|
registerContractOnBlockchain,
|
|
generateContractCertificate,
|
|
} from "@/features/blockchain/api/blockchain.action";
|
|
import { getContracts } from "@/features/contracts/api/contract.action";
|
|
import type {
|
|
BlockchainTransactionView,
|
|
BlockchainStats,
|
|
} from "@/lib/services/blockchain.types";
|
|
import { toast } from "sonner";
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// Blockchain Explorer — 2026 Edition
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
export default function BlockchainExplorerPage() {
|
|
const [transactions, setTransactions] = useState<BlockchainTransactionView[]>(
|
|
[],
|
|
);
|
|
const [stats, setStats] = useState<BlockchainStats | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [verifyHash, setVerifyHash] = useState("");
|
|
const [verifyResult, setVerifyResult] = useState<{
|
|
exists: boolean;
|
|
timestamp: number;
|
|
depositor: string;
|
|
} | null>(null);
|
|
const [verifying, setVerifying] = useState(false);
|
|
const [copiedTx, setCopiedTx] = useState<string | null>(null);
|
|
const [unregisteredContracts, setUnregisteredContracts] = useState<
|
|
Array<{ id: string; title: string | null; fileName: string }>
|
|
>([]);
|
|
const [registeringId, setRegisteringId] = useState<string | null>(null);
|
|
const [downloadingCertificateId, setDownloadingCertificateId] = useState<
|
|
string | null
|
|
>(null);
|
|
const [activeTab, setActiveTab] = useState<"all" | "verified" | "pending">(
|
|
"all",
|
|
);
|
|
|
|
const loadData = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [txResult, statsResult, contractsResult] = await Promise.all([
|
|
getBlockchainTransactions(),
|
|
getBlockchainStats(),
|
|
getContracts({ status: "COMPLETED" }),
|
|
]);
|
|
|
|
if (txResult.success && txResult.transactions) {
|
|
setTransactions(txResult.transactions);
|
|
}
|
|
if (statsResult.success && statsResult.stats) {
|
|
setStats(statsResult.stats);
|
|
}
|
|
|
|
if (contractsResult.success && contractsResult.contracts) {
|
|
const registered = new Set(
|
|
txResult.transactions?.map((tx) => tx.contractId) ?? [],
|
|
);
|
|
const unregistered = contractsResult.contracts
|
|
.filter(
|
|
(c: { id: string; txHash?: string | null; status: string }) =>
|
|
!c.txHash && !registered.has(c.id) && c.status === "COMPLETED",
|
|
)
|
|
.map((c: { id: string; title: string | null; fileName: string }) => ({
|
|
id: c.id,
|
|
title: c.title,
|
|
fileName: c.fileName,
|
|
}));
|
|
setUnregisteredContracts(unregistered);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to load blockchain data:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [loadData]);
|
|
|
|
const handleVerify = async () => {
|
|
if (!verifyHash.trim()) return;
|
|
setVerifying(true);
|
|
setVerifyResult(null);
|
|
try {
|
|
const result = await verifyDocumentHashOnBlockchain(verifyHash.trim());
|
|
if (result.success && result.verification) {
|
|
setVerifyResult(result.verification);
|
|
} else {
|
|
toast.error(result.error || "Verification failed");
|
|
}
|
|
} catch {
|
|
toast.error("Failed to verify hash");
|
|
} finally {
|
|
setVerifying(false);
|
|
}
|
|
};
|
|
|
|
const handleRegister = async (contractId: string) => {
|
|
setRegisteringId(contractId);
|
|
try {
|
|
const result = await registerContractOnBlockchain(contractId);
|
|
if (result.success) {
|
|
toast.success("Contract registered on blockchain!");
|
|
await loadData();
|
|
} else {
|
|
toast.error(result.error || "Registration failed");
|
|
}
|
|
} catch {
|
|
toast.error("Failed to register on blockchain");
|
|
} finally {
|
|
setRegisteringId(null);
|
|
}
|
|
};
|
|
|
|
const handleDownloadCertificate = async (
|
|
contractId: string,
|
|
contractTitle: string,
|
|
) => {
|
|
setDownloadingCertificateId(contractId);
|
|
try {
|
|
const result = await generateContractCertificate(contractId);
|
|
if (result.success && result.certificatePdfBase64) {
|
|
const base64 = result.certificatePdfBase64;
|
|
const binary = atob(base64);
|
|
const bytes = new Uint8Array(binary.length);
|
|
for (let i = 0; i < binary.length; i += 1) {
|
|
bytes[i] = binary.charCodeAt(i);
|
|
}
|
|
const blob = new Blob([bytes], { type: "application/pdf" });
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement("a");
|
|
link.href = url;
|
|
link.download =
|
|
result.certificateFileName ||
|
|
`certificate-${contractTitle || contractId}.pdf`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(url);
|
|
toast.success("Certificate downloaded successfully!");
|
|
} else {
|
|
toast.error(result.error || "Failed to generate certificate");
|
|
}
|
|
} catch {
|
|
toast.error("Failed to download certificate");
|
|
} finally {
|
|
setDownloadingCertificateId(null);
|
|
}
|
|
};
|
|
|
|
const copyToClipboard = (text: string) => {
|
|
navigator.clipboard.writeText(text);
|
|
setCopiedTx(text);
|
|
setTimeout(() => setCopiedTx(null), 2000);
|
|
};
|
|
|
|
const formatTimestamp = (iso: string) => {
|
|
return new Date(iso).toLocaleString();
|
|
};
|
|
|
|
const truncateHash = (hash: string, chars = 8) => {
|
|
if (!hash || hash.length <= chars * 2 + 3) return hash;
|
|
return `${hash.slice(0, chars + 2)}...${hash.slice(-chars)}`;
|
|
};
|
|
|
|
const filteredTransactions = transactions.filter((tx) => {
|
|
if (activeTab === "verified")
|
|
return tx.status === "CONFIRMED" || tx.status === "SUCCESS";
|
|
if (activeTab === "pending")
|
|
return tx.status === "PENDING" || tx.status === "PROCESSING";
|
|
return true;
|
|
});
|
|
|
|
return (
|
|
<div className="relative min-h-screen bg-background overflow-hidden">
|
|
{/* Ambient Background */}
|
|
<div className="fixed inset-0 pointer-events-none">
|
|
<div className="absolute top-[-10%] left-[-10%] w-[600px] h-[600px] rounded-full bg-primary/5 blur-[120px]" />
|
|
<div className="absolute bottom-[-10%] right-[-10%] w-[700px] h-[700px] rounded-full bg-emerald-500/5 blur-[120px]" />
|
|
<div className="absolute top-[40%] left-[60%] w-[400px] h-[400px] rounded-full bg-violet-500/5 blur-[100px]" />
|
|
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,#000_20%,transparent_100%)]" />
|
|
</div>
|
|
|
|
<div className="relative z-10 p-6 lg:p-8 space-y-8 max-w-[1440px] mx-auto">
|
|
{/* Page Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"
|
|
>
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<motion.div
|
|
whileHover={{ rotate: 180 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="relative p-2.5 rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 border border-primary/20 shadow-lg shadow-primary/10"
|
|
>
|
|
<Blocks className="w-7 h-7 text-primary" />
|
|
<div className="absolute inset-0 rounded-2xl bg-primary/20 blur-md -z-10" />
|
|
</motion.div>
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground to-muted-foreground bg-clip-text text-transparent">
|
|
Blockchain Explorer
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<p className="text-muted-foreground text-sm max-w-lg leading-relaxed">
|
|
Immutable proof-of-existence registry. Verify document integrity,
|
|
audit on-chain history, and register new contracts.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="hidden sm:flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 px-3 py-1.5 rounded-full border border-border/30">
|
|
<Radio className="w-3 h-3 text-emerald-500" />
|
|
<span className="relative flex h-1.5 w-1.5">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
|
|
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500" />
|
|
</span>
|
|
Live
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={loadData}
|
|
disabled={loading}
|
|
className="gap-2 rounded-xl border-border/60 bg-background/50 backdrop-blur-xl hover:bg-background/80 transition-all"
|
|
>
|
|
<RefreshCw
|
|
className={`w-4 h-4 ${loading ? "animate-spin" : ""}`}
|
|
/>
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Stats Bento Grid */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"
|
|
>
|
|
<BentoCard
|
|
icon={<Shield className="w-5 h-5" />}
|
|
label="Verified Documents"
|
|
value={stats?.totalVerified?.toString() ?? "0"}
|
|
subtitle="On-chain proofs"
|
|
gradient="from-emerald-500/20 to-emerald-500/5"
|
|
border="border-emerald-500/20"
|
|
iconColor="text-emerald-500"
|
|
delay={0}
|
|
/>
|
|
<BentoCard
|
|
icon={<Blocks className="w-5 h-5" />}
|
|
label="Latest Block"
|
|
value={
|
|
stats?.latestBlockNumber
|
|
? `#${stats.latestBlockNumber.toLocaleString()}`
|
|
: "—"
|
|
}
|
|
subtitle="Network height"
|
|
gradient="from-blue-500/20 to-blue-500/5"
|
|
border="border-blue-500/20"
|
|
iconColor="text-blue-500"
|
|
delay={0.05}
|
|
/>
|
|
<BentoCard
|
|
icon={<Globe className="w-5 h-5" />}
|
|
label="Network Status"
|
|
value={stats?.networkName || "Not Configured"}
|
|
subtitle={
|
|
stats?.chainId ? `Chain ID ${stats.chainId}` : "Disconnected"
|
|
}
|
|
gradient={
|
|
stats?.networkStatus === "connected"
|
|
? "from-emerald-500/20 to-emerald-500/5"
|
|
: "from-red-500/20 to-red-500/5"
|
|
}
|
|
border={
|
|
stats?.networkStatus === "connected"
|
|
? "border-emerald-500/20"
|
|
: "border-red-500/20"
|
|
}
|
|
iconColor={
|
|
stats?.networkStatus === "connected"
|
|
? "text-emerald-500"
|
|
: "text-red-500"
|
|
}
|
|
badge={
|
|
stats?.networkStatus === "connected" ? (
|
|
<span className="flex items-center gap-1.5 text-[10px] font-bold text-emerald-600 dark:text-emerald-400">
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
|
|
</span>
|
|
LIVE
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center gap-1.5 text-[10px] font-bold text-red-600 dark:text-red-400">
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-500" />
|
|
OFFLINE
|
|
</span>
|
|
)
|
|
}
|
|
delay={0.1}
|
|
/>
|
|
<BentoCard
|
|
icon={<Fingerprint className="w-5 h-5" />}
|
|
label="Wallet"
|
|
value={
|
|
stats?.walletAddress ? truncateHash(stats.walletAddress, 6) : "—"
|
|
}
|
|
subtitle="Connected address"
|
|
gradient="from-violet-500/20 to-violet-500/5"
|
|
border="border-violet-500/20"
|
|
iconColor="text-violet-500"
|
|
delay={0.15}
|
|
/>
|
|
</motion.div>
|
|
|
|
{/* Unregistered Contracts Alert */}
|
|
<AnimatePresence>
|
|
{unregisteredContracts.length > 0 && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: "auto" }}
|
|
exit={{ opacity: 0, height: 0 }}
|
|
className="overflow-hidden"
|
|
>
|
|
<div className="relative rounded-2xl border border-amber-500/20 bg-gradient-to-r from-amber-500/10 via-amber-500/5 to-transparent p-1">
|
|
<div className="absolute inset-0 rounded-2xl bg-amber-500/5 blur-xl" />
|
|
<div className="relative p-5">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<div className="p-1.5 rounded-lg bg-amber-500/20">
|
|
<Upload className="w-4 h-4 text-amber-500" />
|
|
</div>
|
|
<h3 className="text-sm font-bold text-amber-600 dark:text-amber-400 uppercase tracking-wider">
|
|
{unregisteredContracts.length} pending registration
|
|
</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
|
|
{unregisteredContracts.map((contract) => (
|
|
<motion.div
|
|
key={contract.id}
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
className="group flex items-center justify-between rounded-xl bg-background/60 backdrop-blur-md border border-border/40 px-4 py-3 hover:border-amber-500/30 hover:bg-background/80 transition-all"
|
|
>
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
<div className="p-1.5 rounded-md bg-muted">
|
|
<FileText className="w-3.5 h-3.5 text-muted-foreground" />
|
|
</div>
|
|
<span className="text-sm truncate font-medium">
|
|
{contract.title || contract.fileName}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
className="gap-1.5 text-xs rounded-lg bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20 hover:bg-amber-500/20 hover:text-amber-700 dark:hover:text-amber-300 shrink-0 ml-3"
|
|
disabled={registeringId === contract.id}
|
|
onClick={() => handleRegister(contract.id)}
|
|
>
|
|
{registeringId === contract.id ? (
|
|
<RefreshCw className="w-3 h-3 animate-spin" />
|
|
) : (
|
|
<Zap className="w-3 h-3" />
|
|
)}
|
|
Register
|
|
</Button>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Transactions List */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="lg:col-span-2 rounded-2xl border border-border/40 bg-background/40 backdrop-blur-2xl overflow-hidden shadow-2xl shadow-black/5"
|
|
>
|
|
<div className="p-5 border-b border-border/40 flex items-center justify-between">
|
|
<div>
|
|
<h2 className="font-bold text-foreground flex items-center gap-2 text-lg">
|
|
<Link2 className="w-5 h-5 text-primary" />
|
|
Transaction History
|
|
</h2>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Immutable audit trail of all registered documents
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-1 bg-muted/50 rounded-lg p-1 border border-border/30">
|
|
{(["all", "verified", "pending"] as const).map((tab) => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setActiveTab(tab)}
|
|
className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
|
|
activeTab === tab
|
|
? "bg-background shadow-sm text-foreground"
|
|
: "text-muted-foreground hover:text-foreground"
|
|
}`}
|
|
>
|
|
{tab.charAt(0).toUpperCase() + tab.slice(1)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="p-12">
|
|
<div className="space-y-4">
|
|
{[1, 2, 3].map((i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-center gap-4 p-4 rounded-xl bg-muted/30 animate-pulse"
|
|
>
|
|
<div className="w-10 h-10 rounded-full bg-muted" />
|
|
<div className="space-y-2 flex-1">
|
|
<div className="h-3 bg-muted rounded w-1/3" />
|
|
<div className="h-2 bg-muted rounded w-1/2" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : filteredTransactions.length === 0 ? (
|
|
<div className="p-16 text-center">
|
|
<div className="relative inline-flex mb-4">
|
|
<div className="absolute inset-0 bg-primary/20 blur-xl rounded-full" />
|
|
<Blocks className="w-12 h-12 text-muted-foreground relative z-10" />
|
|
</div>
|
|
<p className="text-sm font-medium text-foreground">
|
|
No transactions found
|
|
</p>
|
|
<p className="text-xs mt-2 text-muted-foreground max-w-xs mx-auto">
|
|
{activeTab !== "all"
|
|
? `No ${activeTab} transactions match your filter.`
|
|
: "Upload and analyze a contract to register it on-chain."}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="divide-y divide-border/30">
|
|
<AnimatePresence mode="popLayout">
|
|
{filteredTransactions.map((tx, idx) => (
|
|
<motion.div
|
|
key={tx.id}
|
|
layout
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, scale: 0.98 }}
|
|
transition={{ delay: idx * 0.03 }}
|
|
className="group p-5 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent transition-all duration-300"
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="min-w-0 flex-1 space-y-3">
|
|
{/* Title Row */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
|
|
<CheckCircle2 className="w-4 h-4 text-emerald-500" />
|
|
</div>
|
|
<span className="text-sm font-semibold truncate">
|
|
{tx.contractTitle || tx.contractFileName}
|
|
</span>
|
|
<span className="shrink-0 text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20 uppercase tracking-wider">
|
|
{tx.status}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Metadata Grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 pl-[2.25rem]">
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground group/hash">
|
|
<Fingerprint className="w-3.5 h-3.5 shrink-0 text-primary/60" />
|
|
<span className="font-mono text-[11px] tracking-tight">
|
|
{truncateHash(tx.documentHash, 14)}
|
|
</span>
|
|
<button
|
|
onClick={() => copyToClipboard(tx.documentHash)}
|
|
className="opacity-0 group-hover/hash:opacity-100 transition-all hover:scale-110"
|
|
>
|
|
{copiedTx === tx.documentHash ? (
|
|
<Check className="w-3 h-3 text-emerald-500" />
|
|
) : (
|
|
<Copy className="w-3 h-3" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground group/hash">
|
|
<Hash className="w-3.5 h-3.5 shrink-0 text-primary/60" />
|
|
<span className="font-mono text-[11px] tracking-tight">
|
|
{truncateHash(tx.txHash, 14)}
|
|
</span>
|
|
<button
|
|
onClick={() => copyToClipboard(tx.txHash)}
|
|
className="opacity-0 group-hover/hash:opacity-100 transition-all hover:scale-110"
|
|
>
|
|
{copiedTx === tx.txHash ? (
|
|
<Check className="w-3 h-3 text-emerald-500" />
|
|
) : (
|
|
<Copy className="w-3 h-3" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
<Blocks className="w-3.5 h-3.5 shrink-0 text-primary/60" />
|
|
<span className="font-mono">
|
|
Block #{tx.blockNumber.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
<Clock className="w-3.5 h-3.5 shrink-0 text-primary/60" />
|
|
<span>{formatTimestamp(tx.blockTimestamp)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Side Actions */}
|
|
<div className="flex flex-col items-end gap-2 shrink-0">
|
|
<span className="text-[10px] font-bold px-2.5 py-1 rounded-md bg-muted border border-border/40 uppercase tracking-wider">
|
|
{tx.network === "sepolia" ? "Sepolia" : "Hardhat"}
|
|
</span>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="text-xs h-8 gap-1.5"
|
|
disabled={
|
|
downloadingCertificateId === tx.contractId
|
|
}
|
|
onClick={() =>
|
|
handleDownloadCertificate(
|
|
tx.contractId,
|
|
tx.contractTitle || tx.contractFileName,
|
|
)
|
|
}
|
|
title="Download cryptographic certificate"
|
|
>
|
|
{downloadingCertificateId === tx.contractId ? (
|
|
<RefreshCw className="w-3 h-3 animate-spin" />
|
|
) : (
|
|
<Fingerprint className="w-3 h-3" />
|
|
)}
|
|
Certificate
|
|
</Button>
|
|
{tx.explorerUrl && (
|
|
<a
|
|
href={tx.explorerUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-xs text-primary hover:text-primary/80 flex items-center gap-1 font-medium group/link"
|
|
>
|
|
Etherscan
|
|
<ExternalLink className="w-3 h-3 group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5 transition-transform" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</AnimatePresence>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
|
|
{/* Verification Panel */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3 }}
|
|
className="space-y-6"
|
|
>
|
|
<div className="rounded-2xl border border-border/40 bg-background/40 backdrop-blur-2xl shadow-2xl shadow-black/5 overflow-hidden">
|
|
<div className="p-5 border-b border-border/40 bg-gradient-to-r from-primary/5 to-transparent">
|
|
<h2 className="font-bold text-foreground flex items-center gap-2 text-lg">
|
|
<Search className="w-5 h-5 text-primary" />
|
|
Verify Document
|
|
</h2>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Cryptographic on-chain verification
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-5 space-y-5">
|
|
<div className="relative">
|
|
<label className="text-xs font-bold text-muted-foreground mb-2 block uppercase tracking-wider">
|
|
Document Hash
|
|
</label>
|
|
<div className="relative">
|
|
<textarea
|
|
value={verifyHash}
|
|
onChange={(e) => setVerifyHash(e.target.value)}
|
|
placeholder="Paste SHA-256 hash (0x...)"
|
|
className="w-full rounded-xl border border-border/60 bg-muted/20 px-4 py-3.5 text-xs font-mono resize-none h-24 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/40 focus:bg-background/60 transition-all placeholder:text-muted-foreground/50"
|
|
/>
|
|
<div className="absolute bottom-2 right-2 text-[10px] text-muted-foreground font-mono bg-background/80 px-2 py-0.5 rounded border border-border/30">
|
|
SHA-256
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={handleVerify}
|
|
disabled={!verifyHash.trim() || verifying}
|
|
className="w-full gap-2 rounded-xl h-10 font-semibold shadow-lg shadow-primary/20 hover:shadow-primary/30 transition-all"
|
|
size="sm"
|
|
>
|
|
{verifying ? (
|
|
<RefreshCw className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<Shield className="w-4 h-4" />
|
|
)}
|
|
Verify On-Chain
|
|
</Button>
|
|
|
|
{/* Verification Result */}
|
|
<AnimatePresence mode="wait">
|
|
{verifyResult !== null && (
|
|
<motion.div
|
|
key={verifyResult.exists ? "found" : "notfound"}
|
|
initial={{ opacity: 0, y: 10, scale: 0.98 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.98 }}
|
|
className={`relative overflow-hidden rounded-xl border p-5 ${
|
|
verifyResult.exists
|
|
? "border-emerald-500/30 bg-gradient-to-br from-emerald-500/10 via-emerald-500/5 to-transparent"
|
|
: "border-red-500/30 bg-gradient-to-br from-red-500/10 via-red-500/5 to-transparent"
|
|
}`}
|
|
>
|
|
{verifyResult.exists && (
|
|
<div className="absolute top-0 right-0 p-3 opacity-10">
|
|
<Shield className="w-24 h-24 text-emerald-500" />
|
|
</div>
|
|
)}
|
|
|
|
<div className="relative z-10">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div
|
|
className={`p-2 rounded-full ${
|
|
verifyResult.exists
|
|
? "bg-emerald-500/20 text-emerald-500"
|
|
: "bg-red-500/20 text-red-500"
|
|
}`}
|
|
>
|
|
{verifyResult.exists ? (
|
|
<CheckCircle2 className="w-6 h-6" />
|
|
) : (
|
|
<AlertCircle className="w-6 h-6" />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<span
|
|
className={`text-sm font-bold block ${
|
|
verifyResult.exists
|
|
? "text-emerald-600 dark:text-emerald-400"
|
|
: "text-red-600 dark:text-red-400"
|
|
}`}
|
|
>
|
|
{verifyResult.exists
|
|
? "Document Verified"
|
|
: "Not Found On-Chain"}
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-wider font-bold">
|
|
{verifyResult.exists
|
|
? "Cryptographic proof valid"
|
|
: "No matching hash in registry"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{verifyResult.exists && (
|
|
<div className="space-y-3 text-xs">
|
|
<div className="flex items-center justify-between p-2.5 rounded-lg bg-background/40 border border-border/30">
|
|
<span className="text-muted-foreground flex items-center gap-2">
|
|
<Clock className="w-3 h-3" />
|
|
Timestamp
|
|
</span>
|
|
<span className="font-mono font-medium">
|
|
{new Date(
|
|
verifyResult.timestamp * 1000,
|
|
).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between p-2.5 rounded-lg bg-background/40 border border-border/30">
|
|
<span className="text-muted-foreground flex items-center gap-2">
|
|
<Fingerprint className="w-3 h-3" />
|
|
Depositor
|
|
</span>
|
|
<span className="font-mono font-medium">
|
|
{truncateHash(verifyResult.depositor, 8)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Info Card */}
|
|
<div className="rounded-2xl border border-border/40 bg-gradient-to-br from-primary/5 via-transparent to-violet-500/5 p-5 backdrop-blur-xl">
|
|
<h3 className="text-sm font-bold mb-2 flex items-center gap-2">
|
|
<Terminal className="w-4 h-4 text-primary" />
|
|
How it works
|
|
</h3>
|
|
<ul className="space-y-2 text-xs text-muted-foreground">
|
|
<li className="flex items-start gap-2">
|
|
<ChevronRight className="w-3 h-3 mt-0.5 text-primary shrink-0" />
|
|
Documents are hashed using SHA-256 before registration
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<ChevronRight className="w-3 h-3 mt-0.5 text-primary shrink-0" />
|
|
Proofs are permanently stored on the Ethereum blockchain
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<Lock className="w-3 h-3 mt-0.5 text-primary shrink-0" />
|
|
Anyone can verify integrity without revealing document content
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─────────────────────────────────────────────────
|
|
// Bento Card Sub-Component
|
|
// ─────────────────────────────────────────────────
|
|
|
|
function BentoCard({
|
|
icon,
|
|
label,
|
|
value,
|
|
subtitle,
|
|
gradient,
|
|
border,
|
|
iconColor,
|
|
badge,
|
|
delay,
|
|
}: {
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
value: string;
|
|
subtitle: string;
|
|
gradient: string;
|
|
border: string;
|
|
iconColor: string;
|
|
badge?: React.ReactNode;
|
|
delay: number;
|
|
}) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 + delay }}
|
|
className={`group relative rounded-2xl border ${border} bg-gradient-to-br ${gradient} p-5 backdrop-blur-xl overflow-hidden hover:scale-[1.02] transition-transform duration-300`}
|
|
>
|
|
<div className="absolute inset-0 bg-background/40" />
|
|
<div className="absolute -right-4 -top-4 w-24 h-24 bg-gradient-to-br from-white/10 to-transparent rounded-full blur-2xl group-hover:opacity-100 opacity-0 transition-opacity" />
|
|
|
|
<div className="relative z-10">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div
|
|
className={`p-2.5 rounded-xl bg-background/60 border border-border/40 shadow-sm ${iconColor}`}
|
|
>
|
|
{icon}
|
|
</div>
|
|
{badge && <div>{badge}</div>}
|
|
</div>
|
|
|
|
<p className="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em]">
|
|
{label}
|
|
</p>
|
|
<p className="text-2xl font-bold text-foreground mt-1 truncate tracking-tight">
|
|
{value}
|
|
</p>
|
|
<p className="text-[11px] text-muted-foreground mt-1">{subtitle}</p>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|