{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "crypto-wallet-portfolio", "title": "Crypto Wallet Portfolio", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/crypto-wallet-portfolio/crypto-wallet-portfolio.component.ts", "content": "// Coinbase / Phantom-style multi-asset crypto holdings dashboard: treasury header\n// with address copy and network badge, portfolio balance hero with 24h PnL and a\n// multi-asset allocation bar, an asset holdings table, and an interactive quick\n// swap calculator. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n ArrowDownLeft,\n ArrowDownUp,\n ArrowLeftRight,\n ArrowUpRight,\n Check,\n Copy,\n Fuel,\n LucideAngularModule,\n RefreshCw,\n ShieldCheck,\n TrendingDown,\n TrendingUp,\n Wallet,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport interface CryptoAsset {\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\nexport const cryptoAssets: CryptoAsset[] = [\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 const walletFullAddress = '0x71C856402244243b92834b9d09c2534575823a9F'\nexport const walletShortAddress = '0x71C...3a9F'\n\nconst slippageOptions = ['0.1', '0.5', '1.0']\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-crypto-wallet-portfolio, [ui-crypto-wallet-portfolio]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \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 @if (copied()) {\n \n } @else {\n \n }\n \n \n \n Multi-Sig (3 of 5)\n \n
\n
\n\n
\n \n \n \n
\n \n\n \n
\n \n
\n \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 \n
\n
\n Asset Allocation\n 5 Assets\n
\n \n @for (asset of assets; track asset.id) {\n
\n }\n
\n\n \n
\n @for (asset of assets; track asset.id) {\n
\n \n {{ asset.symbol }}\n {{ asset.allocation }}\n
\n }\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n

Asset Holdings

\n

\n Real-time token prices, balances, and portfolio share.\n

\n
\n 5 Assets \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n @for (asset of assets; track asset.id) {\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n }\n \n
AssetPrice (24h)HoldingsPortfolio ShareActions
\n
\n @if (asset.id === 'eth') {\n \n \n \n \n \n \n \n \n \n } @else if (asset.id === 'btc') {\n \n \n \n \n } @else if (asset.id === 'sol') {\n \n \n \n \n \n \n } @else if (asset.id === 'usdc') {\n \n \n \n \n } @else {\n \n \n \n \n }\n
\n
\n {{ asset.name }}\n
\n
{{ asset.symbol }}
\n
\n
\n 		\n
{{ asset.price }}
\n
\n @if (asset.isPositive) {\n \n } @else {\n \n }\n {{ asset.change24h }}\n
\n 		\n
{{ asset.balance }}
\n
{{ asset.fiatValue }}
\n 		\n \n {{ asset.allocation }}\n \n \n
\n \n Trade\n \n \n Transfer\n \n
\n
\n
\n
\n
\n \n\n \n
\n \n
\n
\n
\n

\n \n Quick Swap\n

\n \n
\n @for (opt of slippageOptions; track opt) {\n \n }\n
\n
\n

\n Swap instant liquidity across decentralized pools.\n

\n
\n\n
\n \n
\n
\n \n
\n Balance: {{ fromAsset().balance }}\n \n MAX\n \n
\n
\n\n
\n \n\n \n \n \n {{ fromAsset().symbol }}\n
\n
\n\n
≈ {{ fiatPayFormatted() }}
\n
\n\n \n
\n \n \n \n
\n\n \n
\n
\n You Receive\n Balance: {{ toAsset().balance }}\n
\n\n
\n
\n {{ calculatedReceive() }}\n
\n\n \n \n \n {{ toAsset().symbol }}\n
\n
\n\n
≈ {{ fiatReceiveFormatted() }}
\n
\n\n \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 \n \n @if (isSwapping()) {\n \n } @else if (swapSuccess()) {\n \n }\n @if (isSwapping()) {\n Routing Transaction...\n } @else if (swapSuccess()) {\n Swap Confirmed!\n } @else {\n Swap {{ fromAsset().symbol }} for {{ toAsset().symbol }}\n }\n \n\n

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

\n \n \n\n \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})\nexport class UiCryptoWalletPortfolioComponent {\n protected readonly ArrowDownLeft = ArrowDownLeft\n protected readonly ArrowDownUp = ArrowDownUp\n protected readonly ArrowLeftRight = ArrowLeftRight\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly Fuel = Fuel\n protected readonly RefreshCw = RefreshCw\n protected readonly ShieldCheck = ShieldCheck\n protected readonly TrendingDown = TrendingDown\n protected readonly TrendingUp = TrendingUp\n protected readonly Wallet = Wallet\n\n protected readonly assets = cryptoAssets\n protected readonly shortAddress = walletShortAddress\n protected readonly slippageOptions = slippageOptions\n\n @Input('class') className?: string\n\n readonly copied = signal(false)\n readonly fromTokenSymbol = signal('ETH')\n readonly toTokenSymbol = signal('USDC')\n readonly payAmount = signal('1.5')\n readonly slippage = signal('0.5')\n readonly isSwapping = signal(false)\n readonly swapSuccess = signal(false)\n\n private copyTimer: ReturnType | undefined\n private swapTimers: ReturnType[] = []\n\n constructor() {\n inject(DestroyRef).onDestroy(() => {\n clearTimeout(this.copyTimer)\n for (const t of this.swapTimers) clearTimeout(t)\n })\n }\n\n // Quick Swap State\n readonly tokenMap = computed(() => {\n const map: Record = {}\n for (const asset of cryptoAssets) map[asset.symbol] = asset\n return map\n })\n\n readonly fromAsset = computed(() => this.tokenMap()[this.fromTokenSymbol()] ?? cryptoAssets[0]!)\n readonly toAsset = computed(() => this.tokenMap()[this.toTokenSymbol()] ?? cryptoAssets[3]!)\n\n readonly calculatedReceive = computed(() => {\n const amount = parseFloat(this.payAmount()) || 0\n if (amount <= 0) return '0.00'\n const fromFiat = amount * this.fromAsset().rawPrice\n const receiveUnits = fromFiat / this.toAsset().rawPrice\n if (this.toAsset().rawPrice >= 100) return receiveUnits.toFixed(4)\n return receiveUnits.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\n })\n\n readonly fiatPayFormatted = computed(() =>\n ((parseFloat(this.payAmount()) || 0) * this.fromAsset().rawPrice).toLocaleString('en-US', {\n style: 'currency',\n currency: 'USD',\n }),\n )\n\n readonly fiatReceiveFormatted = computed(() =>\n ((parseFloat(this.payAmount()) || 0) * this.fromAsset().rawPrice).toLocaleString('en-US', {\n style: 'currency',\n currency: 'USD',\n }),\n )\n\n readonly exchangeRateFormatted = computed(() => {\n const rate = this.fromAsset().rawPrice / this.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 ${this.fromAsset().symbol} ≈ ${formattedRate} ${this.toAsset().symbol}`\n })\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n\n get swapDisabled(): boolean {\n return this.isSwapping() || (parseFloat(this.payAmount()) || 0) <= 0\n }\n\n trendClass(asset: CryptoAsset): string {\n return cn(\n 'flex items-center justify-end gap-0.5 text-xs font-medium tabular-nums',\n asset.isPositive ? 'text-success' : 'text-destructive',\n )\n }\n\n slippageClass(opt: string): string {\n return cn(\n 'focus-visible:ring-ring min-h-6 rounded px-1.5 py-0.5 font-mono text-xs transition-colors focus-visible:ring-1 focus-visible:outline-none',\n this.slippage() === opt\n ? 'bg-primary text-primary-foreground font-semibold'\n : 'text-muted-foreground hover:text-foreground bg-muted/60',\n )\n }\n\n async copyAddress(): Promise {\n try {\n await navigator.clipboard.writeText(walletFullAddress)\n this.copied.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copied.set(false), 2000)\n } catch {\n // Clipboard fallback\n }\n }\n\n selectTradePair(symbol: string): void {\n this.fromTokenSymbol.set(symbol)\n this.toTokenSymbol.set(symbol === 'USDC' ? 'ETH' : 'USDC')\n }\n\n flipTokens(): void {\n const from = this.fromTokenSymbol()\n this.fromTokenSymbol.set(this.toTokenSymbol())\n this.toTokenSymbol.set(from)\n }\n\n setMaxPay(): void {\n this.payAmount.set(String(this.fromAsset().rawBalance))\n }\n\n handleExecuteSwap(): void {\n this.isSwapping.set(true)\n this.swapTimers.push(\n setTimeout(() => {\n this.isSwapping.set(false)\n this.swapSuccess.set(true)\n this.swapTimers.push(setTimeout(() => this.swapSuccess.set(false), 3000))\n }, 1200),\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/crypto-wallet-portfolio/crypto-wallet-portfolio.component.ts" }, { "path": "packages/registry-angular/blocks/crypto-wallet-portfolio/index.ts", "content": "export {\n UiCryptoWalletPortfolioComponent,\n cryptoAssets,\n walletFullAddress,\n walletShortAddress,\n type CryptoAsset,\n} from './crypto-wallet-portfolio.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/crypto-wallet-portfolio/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/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" ] }