Loading page…
Loading page…
Every balance, delta, and fee readout is one component: mono + tabular-nums always, crypto or fiat leading with the rolling-digits flip, signed success/danger tones, a sign-less muted zero, and blurred-dot privacy masking.
The same holding with crypto or fiat leading. Flipping mode animates both lines through the rolling-digits idiom.
<AmountDisplay amount="1.41712345" symbol="BTC" fiat="$164,740.60" mode="crypto" size="lg" />--ch-fg--ch-fg-muted--ch-font-family-monoDefault — the asset amount leads, fiat rides secondary.
<AmountDisplay amount="1.41712345" symbol="BTC" fiat="$164,740.60" mode="fiat" size="lg" />--ch-fg--ch-fg-muted--ch-fg-faintFiat leads for spending contexts; the crypto line keeps the ticker in faint.
Currency code is the switch control. Enabled currencies come from localization/settings; optional converted values sit below or next to the primary, and movement can show value, percentage, or both.
Click the currency code to advance through enabled values.
<AmountDisplay
amount="0.81273800"
symbol="BTC"
fiat="$83,451.26"
conversions={[{ currency: "EUR", value: "€71,982.14" }]}
enabledCurrencies={["BTC", "USD", "EUR"]}
change={{ percent: "+2.41%", direction: "up", period: "24h" }}
/>Balances and reusable value readouts use the beUI AnimatedNumber tween whenever their formatted value changes. Increasing and decreasing values settle in place while their exact currency prefix, sign, grouping, decimal precision, compact suffix, and ticker remain intact. Reduced-motion users receive the final value immediately.
<AmountDisplay amount={liveBalance.toFixed(8)} fiat={formatUsd(liveFiat)} symbol="BTC" />--ch-motion-duration-slow--ch-font-family-monoThe crypto and fiat lines update together through AnimatedValue, which adapts AnimatedNumber to pre-formatted financial strings. No remount is required.
Receive renders positive (success, plus sign), send renders negative (danger, minus sign). Zero drops the sign and mutes — an empty wallet is calm, not alarming.
<AmountDisplay amount="1.41712345" symbol="BTC" fiat="$164,740.60" />--ch-fg--ch-fg-mutedUnsigned — balances and quotes.
<AmountDisplay amount="0.65000000" symbol="BTC" fiat="$75,562.50" tone="positive" />--ch-success--ch-fg-mutedIncoming — success tone, plus sign on both lines.
<AmountDisplay amount="0.03500000" symbol="BTC" fiat="$4,068.75" tone="negative" />--ch-danger--ch-fg-mutedOutgoing — danger tone, true minus sign (−, not hyphen).
<AmountDisplay amount="0.00000000" symbol="BTC" fiat="$0.00" tone="positive" />--ch-fg-mutedSign-less and muted even with a tone set — nothing moved.
Privacy replaces both values with blurred dots, announces “Amount hidden” to screen readers, and neutralizes tone — a masked amount leaks nothing, not even direction.
<AmountDisplay amount="1.41712345" symbol="BTC" fiat="$164,740.60" />--ch-fg--ch-fg-mutedFull readout.
<AmountDisplay amount="1.41712345" symbol="BTC" fiat="$164,740.60" privacy />--ch-fg-mutedBlurred dots on both lines; sign suppressed.
<AmountDisplay amount="1.41712345" symbol="BTC" fiat="$164,740.60" mode="fiat" privacy />--ch-fg-mutedMasking is mode-independent.
sm rides transaction rows, md is the working default, lg heads detail panels, xl is reserved for the portfolio total.
<AmountDisplay size="sm" … />--ch-font-size-smTransaction rows, tables.
<AmountDisplay size="md" … />--ch-font-size-xlDefault — cards, list headers.
<AmountDisplay size="lg" … />--ch-font-size-3xlDetail panel headline.
<AmountDisplay size="xl" … />--ch-font-size-5xlPortfolio total only.
The lg positive readout under dark, light, and Harbor Mode — the success tone holds AA on every layer.
<AmountDisplay amount="0.65000000" symbol="BTC" fiat="$75,562.50" tone="positive" size="lg" />--ch-success--ch-fg-muted--ch-font-family-mono