import { useState } from "react"; import { Wallet, ArrowUpRight, ArrowDownLeft, Clock, Menu, X } from "lucide-react"; import { Container } from "@/components/ui/container"; import { Card } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Separator } from "@/components/ui/separator"; interface Transaction { id: string; type: "sent" | "received"; asset: string; amount: number; address: string; timestamp: string; status: "confirmed" | "pending"; } const MOCK_TRANSACTIONS: Transaction[] = [ { id: "1", type: "received", asset: "BTC", amount: 0.45, address: "0x4a3...f2c1", timestamp: "2m ago", status: "confirmed" }, { id: "2", type: "sent", asset: "ETH", amount: 1.2, address: "0x7b2...e8d4", timestamp: "15m ago", status: "confirmed" }, { id: "3", type: "received", asset: "SOL", amount: 12.5, address: "0x1f9...a3b2", timestamp: "1h ago", status: "confirmed" }, { id: "4", type: "sent", asset: "USDC", amount: 500, address: "0x8c4...d7e1", timestamp: "2h ago", status: "pending" }, { id: "5", type: "received", asset: "BTC", amount: 0.08, address: "0x2a1...c9f3", timestamp: "5h ago", status: "confirmed" }, ]; const BALANCE_CARDS = [ { asset: "BTC", balance: 1.245, price: 67842.12, change: 2.34, color: "orange" }, { asset: "ETH", balance: 4.782, price: 3421.56, change: -1.2, color: "blue" }, { asset: "SOL", balance: 156.3, price: 142.89, change: 5.67, color: "purple" }, { asset: "USDC", balance: 2500.00, price: 1.0, change: 0.01, color: "green" }, ]; export default function Dashboard() { const [sidebarOpen, setSidebarOpen] = useState(false); const TransactionIcon = ({ type }: { type: "sent" | "received" }) => (

{type === "received" ? : }

); return (

{/* Sidebar */} {/* Mobile Header */}

CryptoVault

{/* Overlay for mobile sidebar */} {sidebarOpen && (

setSidebarOpen(false)} /> )} {/* Main Content */}

{/* Header Section */}

Portfolio Overview

Real-time balances and activity

Live Data

{/* Balance Cards Grid */}

{BALANCE_CARDS.map(({ asset, balance, price, change, color }) => ( {/* Geometric accent */}

{asset[0]}

{asset}

= 0 ? "default" : "destructive"} className={`text-xs ${change >= 0 ? 'bg-green-500/10 text-green-400 border-green-500/20' : 'bg-red-500/10 text-red-400 border-red-500/20'}`} > {change >= 0 ? '+' : ''}{change}%

{balance.toLocaleString(undefined, { maximumFractionDigits: 4 })}

${price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

))}

{/* Transaction History */}

Recent Transactions

Latest activity across all chains

{MOCK_TRANSACTIONS.map((tx) => (

{tx.type === "received" ? "Received" : "Sent"} {tx.amount} {tx.asset}

{tx.address} • {tx.timestamp}

{tx.status === "pending" ? ( Pending ) : ( Confirmed )}

))}

{/* Quick Actions */}

); }

Crypto Wallet Dashboard