Dual-denomination amount field: type in dollars or units, and the toggle flips which one you are editing while the counter-value rides underneath. The headline steps down through font-size tiers as the number grows, so long amounts stay crisp instead of overflowing, and each digit that actually changed blurs and pops into place. Light and dark via shadcn theme tokens; respects reduced motion.
import { useEffect } from "react"
import CryptoFiat, { type BalanceHistory } from "@/components/ui/crypto-fiat"
/* 30 days of wallet balance, oldest → newest: a fixed-seed walk and a fixed
anchor date (never `now`), so the card renders the same on every load. */
const DAYS = 30
const values = (() => {
let s = 20260730
let v = 10_450
return Array.from({ length: DAYS }, () => {
s = (s * 1103515245 + 12345) & 0x7fffffff
v += (s / 0x7fffffff - 0.4) * 380
return Math.round(v * 100) / 100
})
})()
const ANCHOR = Date.UTC(2026, 6, 30)
const labels = Array.from({ length: DAYS }, (_, i) =>
new Date(ANCHOR - (DAYS - 1 - i) * 86_400_000).toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" })
)
const HISTORY: BalanceHistory = { values, labels, period: "30d" }
export default function DemoOne() {
// open the preview in dark by default; the sandbox theme toggle still works
useEffect(() => { document.documentElement.classList.add("dark") }, [])
return (
<div className="flex min-h-[320px] w-full items-center justify-center p-6">
{/* $2,500 at $3,050 per ETH → 0.819672 ETH underneath */}
<CryptoFiat
symbol="ETH"
price={3050}
defaultAmount="2500"
history={HISTORY}
walletName="Main Wallet"
address="0x7c2E…9f4A"
/>
</div>
)
}
Part of ssych ui — browse the full library on 21st.dev.