{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "crypto-wallet-portfolio", "title": "Crypto Wallet Portfolio", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/crypto-wallet-portfolio/CryptoWalletPortfolio.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n ArrowDownLeft,\n ArrowDownUp,\n ArrowLeftRight,\n ArrowUpRight,\n Check,\n Copy,\n Fuel,\n RefreshCw,\n ShieldCheck,\n TrendingDown,\n TrendingUp,\n Wallet,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\ninterface Asset {\n id: string\n name: string\n symbol: string\n price: string\n rawPrice: number\n change24h: string\n isPositive: boolean\n balance: string\n rawBalance: number\n fiatValue: string\n allocation: string\n color: string\n}\n\nconst assets: Asset[] = [\n {\n id: 'eth',\n name: 'Ethereum',\n symbol: 'ETH',\n price: '$3,450.00',\n rawPrice: 3450.0,\n change24h: '+3.2%',\n isPositive: true,\n balance: '24.5 ETH',\n rawBalance: 24.5,\n fiatValue: '$84,525.00',\n allocation: '56.8%',\n color: '#627EEA',\n },\n {\n id: 'btc',\n name: 'Bitcoin',\n symbol: 'BTC',\n price: '$64,200.00',\n rawPrice: 64200.0,\n change24h: '+1.8%',\n isPositive: true,\n balance: '0.58 BTC',\n rawBalance: 0.58,\n fiatValue: '$37,236.00',\n allocation: '25.0%',\n color: '#F7931A',\n },\n {\n id: 'sol',\n name: 'Solana',\n symbol: 'SOL',\n price: '$148.50',\n rawPrice: 148.5,\n change24h: '-1.1%',\n isPositive: false,\n balance: '120.4 SOL',\n rawBalance: 120.4,\n fiatValue: '$17,879.40',\n allocation: '12.0%',\n color: '#14F195',\n },\n {\n id: 'usdc',\n name: 'USD Coin',\n symbol: 'USDC',\n price: '$1.00',\n rawPrice: 1.0,\n change24h: '+0.01%',\n isPositive: true,\n balance: '7,450.00 USDC',\n rawBalance: 7450.0,\n fiatValue: '$7,450.00',\n allocation: '5.0%',\n color: '#2775CA',\n },\n {\n id: 'link',\n name: 'Chainlink',\n symbol: 'LINK',\n price: '$18.30',\n rawPrice: 18.3,\n change24h: '+5.4%',\n isPositive: true,\n balance: '100.0 LINK',\n rawBalance: 100.0,\n fiatValue: '$1,830.10',\n allocation: '1.2%',\n color: '#375BD2',\n },\n]\n\nexport function CryptoWalletPortfolio({ className }: { className?: string }) {\n const [copied, setCopied] = React.useState(false)\n const fullAddress = '0x71C856402244243b92834b9d09c2534575823a9F'\n const shortAddress = '0x71C...3a9F'\n\n const copyAddress = React.useCallback(() => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(fullAddress)\n setCopied(true)\n setTimeout(() => {\n setCopied(false)\n }, 2000)\n }\n }, [fullAddress])\n\n // Quick Swap State\n const [fromTokenSymbol, setFromTokenSymbol] = React.useState('ETH')\n const [toTokenSymbol, setToTokenSymbol] = React.useState('USDC')\n const [payAmount, setPayAmount] = React.useState('1.5')\n const [slippage, setSlippage] = React.useState('0.5')\n const [isSwapping, setIsSwapping] = React.useState(false)\n const [swapSuccess, setSwapSuccess] = React.useState(false)\n\n const tokenMap = React.useMemo(() => {\n const map: Record = {}\n for (const asset of assets) {\n map[asset.symbol] = asset\n }\n return map\n }, [])\n\n const fromAsset = tokenMap[fromTokenSymbol] || assets[0]\n const toAsset = tokenMap[toTokenSymbol] || assets[3]\n\n const selectTradePair = (symbol: string) => {\n setFromTokenSymbol(symbol)\n }\n\n const calculatedReceive = React.useMemo(() => {\n const amount = parseFloat(payAmount) || 0\n if (amount <= 0) return '0.00'\n const fromFiat = amount * fromAsset.rawPrice\n const receiveUnits = fromFiat / toAsset.rawPrice\n if (toAsset.rawPrice >= 100) {\n return receiveUnits.toFixed(4)\n }\n return receiveUnits.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\n }, [payAmount, fromAsset, toAsset])\n\n const fiatPayFormatted = React.useMemo(() => {\n const amount = parseFloat(payAmount) || 0\n return (amount * fromAsset.rawPrice).toLocaleString('en-US', {\n style: 'currency',\n currency: 'USD',\n })\n }, [payAmount, fromAsset])\n\n const fiatReceiveFormatted = React.useMemo(() => {\n const amount = parseFloat(payAmount) || 0\n return (amount * fromAsset.rawPrice).toLocaleString('en-US', {\n style: 'currency',\n currency: 'USD',\n })\n }, [payAmount, fromAsset])\n\n const exchangeRateFormatted = React.useMemo(() => {\n const rate = fromAsset.rawPrice / toAsset.rawPrice\n const formattedRate =\n rate > 100\n ? rate.toLocaleString('en-US', { maximumFractionDigits: 2 })\n : rate.toLocaleString('en-US', { maximumFractionDigits: 6 })\n return `1 ${fromAsset.symbol} ≈ ${formattedRate} ${toAsset.symbol}`\n }, [fromAsset, toAsset])\n\n const flipTokens = React.useCallback(() => {\n setFromTokenSymbol(toTokenSymbol)\n setToTokenSymbol(fromTokenSymbol)\n }, [fromTokenSymbol, toTokenSymbol])\n\n const setMaxPay = React.useCallback(() => {\n setPayAmount(String(fromAsset.rawBalance))\n }, [fromAsset])\n\n const handleExecuteSwap = React.useCallback(() => {\n setIsSwapping(true)\n setTimeout(() => {\n setIsSwapping(false)\n setSwapSuccess(true)\n setTimeout(() => {\n setSwapSuccess(false)\n }, 3000)\n }, 1200)\n }, [])\n\n return (\n
\n {/* Header Section */}\n
\n
\n
\n \n \n
\n

Main Treasury Vault

\n \n \n Ethereum Mainnet\n \n
\n\n
\n \n {shortAddress}\n \n \n {copied ? (\n \n ) : (\n \n )}\n \n \n \n Multi-Sig (3 of 5)\n \n
\n
\n\n
\n \n \n \n
\n \n\n {/* Main Grid: Portfolio Overview + Holdings Table & Quick Swap Calculator */}\n
\n {/* Left Column: Hero Portfolio Card & Holdings Table (8 cols) */}\n
\n {/* Hero Portfolio Balance Card */}\n \n \n
\n \n Total Portfolio Value\n \n
\n \n Live Oracle Feed\n
\n
\n
\n \n $148,920.50\n \n
\n \n +$6,420.10 (+4.51%)\n 24h\n
\n
\n \n \n {/* Stacked Allocation Bar */}\n
\n
\n Asset Allocation\n 5 Assets\n
\n
\n {assets.map((asset) => (\n \n ))}\n
\n\n {/* Allocation Legend */}\n
\n {assets.map((asset) => (\n
\n \n {asset.symbol}\n {asset.allocation}\n
\n ))}\n
\n
\n \n \n\n {/* Asset Holdings Table Card */}\n \n \n
\n
\n Asset Holdings\n \n Real-time token prices, balances, and portfolio share.\n \n
\n \n 5 Assets\n \n
\n \n \n
\n \n \n \n Asset\n Price (24h)\n Holdings\n Portfolio Share\n Actions\n \n \n \n {assets.map((asset) => (\n \n {/* Token Icon, Name, Symbol */}\n \n
\n {/* Ethereum SVG */}\n {asset.id === 'eth' && (\n \n \n \n \n \n \n \n \n \n )}\n {/* Bitcoin SVG */}\n {asset.id === 'btc' && (\n \n \n \n \n )}\n {/* Solana SVG */}\n {asset.id === 'sol' && (\n \n \n \n \n \n \n )}\n {/* USDC SVG */}\n {asset.id === 'usdc' && (\n \n \n \n \n )}\n {/* Chainlink SVG */}\n {asset.id === 'link' && (\n \n \n \n \n )}\n
\n
\n {asset.name}\n
\n
{asset.symbol}
\n
\n
\n \n\n {/* Current Price & 24h Change */}\n \n
{asset.price}
\n \n {asset.isPositive ? (\n \n ) : (\n \n )}\n {asset.change24h}\n \n \n\n {/* Holdings Amount & Fiat Value */}\n \n
{asset.balance}
\n
{asset.fiatValue}
\n \n\n {/* Portfolio Share */}\n \n \n {asset.allocation}\n \n \n\n {/* Actions */}\n \n
\n selectTradePair(asset.symbol)}\n >\n Trade\n \n \n Transfer\n \n
\n \n \n ))}\n \n
\n
\n \n \n
\n\n {/* Right Column: Quick Swap Widget & Security Info (4 cols) */}\n
\n {/* Quick Swap Card */}\n \n \n
\n \n \n Quick Swap\n \n {/* Slippage Settings */}\n
\n {['0.1', '0.5', '1.0'].map((opt) => (\n setSlippage(opt)}\n >\n {opt}%\n \n ))}\n
\n
\n \n Swap instant liquidity across decentralized pools.\n \n \n\n \n {/* From Token Box */}\n
\n
\n \n
\n Balance: {fromAsset.balance}\n \n MAX\n \n
\n
\n\n
\n setPayAmount(e.target.value)}\n type=\"number\"\n step=\"any\"\n min=\"0\"\n className=\"h-8 border-none px-0 text-lg font-semibold tabular-nums shadow-none focus-within:ring-0\"\n placeholder=\"0.0\"\n />\n\n {/* From Token Selector Pill */}\n
\n \n {fromAsset.symbol}\n
\n
\n\n
≈ {fiatPayFormatted}
\n
\n\n {/* Invert Flip Button */}\n
\n \n \n \n
\n\n {/* To Token Box */}\n
\n
\n You Receive\n Balance: {toAsset.balance}\n
\n\n
\n
\n {calculatedReceive}\n
\n\n {/* To Token Selector Pill */}\n
\n \n {toAsset.symbol}\n
\n
\n\n
≈ {fiatReceiveFormatted}
\n
\n\n {/* Trade Details Summary */}\n
\n
\n Exchange Rate\n {exchangeRateFormatted}\n
\n
\n \n \n Est. Network Gas\n \n ~$3.40 (Fast)\n
\n
\n Slippage Tolerance\n {slippage}%\n
\n
\n Price Impact\n < 0.01%\n
\n
\n\n {/* Execute Swap Button */}\n \n {isSwapping ? (\n \n ) : swapSuccess ? (\n \n ) : null}\n {isSwapping ? (\n Routing Transaction...\n ) : swapSuccess ? (\n Swap Confirmed!\n ) : (\n \n Swap {fromAsset.symbol} for {toAsset.symbol}\n \n )}\n \n\n

\n Direct routing via Uniswap v3 & Curve liquidity pools.\n

\n \n \n\n {/* Security & Vault Status Summary */}\n \n \n \n \n Vault Security & Policies\n \n \n \n
\n Threshold Policy\n 3 / 5 Approvals\n
\n \n
\n Daily Spend Limit\n $500,000.00\n
\n \n
\n Hardware Key Modules\n \n 5 Ledger HSMs Active\n \n
\n \n \n
\n
\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/CryptoWalletPortfolio.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/table.json" ], "description": "Coinbase and Phantom-style multi-asset crypto holdings dashboard: treasury header with address copy and network badge, portfolio balance hero with 24h PnL and multi-asset allocation bar, asset holdings table with real-time token metrics, and an interactive quick swap calculator.", "categories": [ "finance", "app", "dashboard" ] }