Account Card
One holding, framed. AccountCard composes AmountDisplay for the balance and AddressDisplay for the address, adds a network chip and a signed 24h delta, and scales from a compact list row to a feature card with a sparkline. Give it onSelect and the whole card becomes a keyboard-operable button; select it and the frame turns aurum with the beacon halo.
Sizes
sm is a compact list row — monogram, name, network · address, and a right-aligned balance. md is the standard card with the AddressDisplay chip. lg opens into a feature card with a sparkline slot and the delta in the header.
<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-success
Name 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-primary
Monogram + 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-primary
Feature layout: lg AmountDisplay, a full-width sparkline slot, and the address separated by a faint divider.
Selected state
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-border
Resting frame — border-line on surface.
<AccountCard name="Cold Storage" … onSelect={() => choose(id)} selected />--ch-accent--ch-surface-raised--ch-shadow-beacon
Accent border + shadow-beacon glow, raised surface; aria-pressed is true.
With delta / sparkline
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-muted
XMR 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-surface
DBL down 2.6%; the row keeps its footprint while the delta turns danger.
Per-brand tone
tone defaults to the ion primary — the monogram disc and network dot read blue. tone="accent" leans on the aurum treasury accent (Titan), tinting the disc and softening the border toward gold; it is the register for premium or long-term holdings. Under a brand scope (Calypso teal, Maelstrom violet) the primary token re-maps, so the default tone follows the active brand while accent stays aurum.
<AccountCard tone="default" name="Everyday Spending" … />--ch-primary--ch-primary-muted
Ion primary monogram + network dot — the working default.
<AccountCard tone="accent" name="Cold Storage" … />--ch-accent--ch-accent-muted
Aurum treasury monogram + gold-tinted border for premium holdings.
Across themes
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