Loading page…
Loading page…
One holding on a raised surface. Name, network, address, balance, delta, and chart are independent options, so compact account identity and full portfolio cards share one component without empty placeholders.
sm is a compact list row. md adds inline address and amount structure. lg opens a chart slot. Surfaces use elevation, not outline-only card framing.
<AccountCard size="sm" name="Primary Account" network="Monero" address={address} balance={{ crypto: "18.45000000", symbol: "XMR", fiat: "$6,058.98" }} delta={{ value: "+4.2%", direction: "up" }} />--ch-surface--ch-border--ch-fg-muted--ch-successName and balance on one line; the address rides truncated in mono beneath the name.
<AccountCard size="md" name="Cold Storage" network="Bitcoin" address={address} balance={{ crypto: "1.41712345", symbol: "BTC", fiat: "$164,740.60" }} delta={{ value: "+1.8%", direction: "up" }} />--ch-surface--ch-border--ch-primary-muted--ch-primaryMonogram + network chip header, md AmountDisplay, and the full AddressDisplay chip with its copy affordance.
<AccountCard size="lg" name="Cold Storage" … sparkline={<Sparkline data={series} />} />--ch-radius-xl--ch-viz-1--ch-border-faint--ch-primaryFeature layout: lg AmountDisplay, a full-width sparkline slot, and the address separated by a faint divider.
Missing props remove their regions cleanly. Use identity-only cards for account pickers, balance-only cards for summaries, and address-free cards where disclosure is unnecessary.
<AccountCard name="Signing Vault" network="Bitcoin" />
<AccountCard name="Watch-only" balance={balance} />
<AccountCard />selected repaints the frame to the aurum accent and lights the beacon shadow — the same treasury seal the confirmed transaction uses. Pass onSelect to make the whole card a role=button that toggles on click, Enter, or Space (aria-pressed reflects selected); the composed copy button stays independently operable.
<AccountCard name="Cold Storage" … onSelect={() => choose(id)} />--ch-surface--ch-borderResting frame — border-line on surface.
<AccountCard name="Cold Storage" … onSelect={() => choose(id)} selected />--ch-accent--ch-surface-raised--ch-shadow-beaconAccent border + shadow-beacon glow, raised surface; aria-pressed is true.
The signed delta reads success + up arrow when a holding gains, danger + down arrow when it loses — direction is explicit, never inferred from the string. The sparkline is a slot: pass any ReactNode (here a real Sparkline over the 24h series), rendered only at lg.
<AccountCard size="lg" tone="accent" delta={{ value: "+4.2%", direction: "up" }} sparkline={<Sparkline data={series} className="text-viz-3" />} … />--ch-success--ch-accent--ch-viz-3--ch-accent-mutedXMR up 4.2% over 24h; the trend line fills the feature slot.
<AccountCard size="sm" name="Everyday Spending" network="Dbloon" delta={{ value: "-2.6%", direction: "down" }} … />--ch-danger--ch-fg-muted--ch-surfaceDBL down 2.6%; the row keeps its footprint while the delta turns danger.
tone=default follows inherited primary. Calypso changes that primary to blue while retaining ColdHarbor surfaces; tone=accent stays gold for treasury or long-term holdings.
<AccountCard tone="default" name="Everyday Spending" … />--ch-primary--ch-primary-mutedIon primary monogram + network dot — the working default.
<AccountCard tone="accent" name="Cold Storage" … />--ch-accent--ch-accent-mutedAurum treasury monogram + gold-tinted border for premium holdings.
The selected accent card under dark, light, and Harbor Mode — in Harbor Mode the beacon halo intensifies, so the chosen account reads brightest on your own node.
<AccountCard size="md" tone="accent" selected name="Cold Storage" … />--ch-accent--ch-shadow-beacon--ch-surface-raised--ch-success