Crypto/Fiat

Component 6

About

A crypto amount input that switches between fiat and token units at the current rate, for wallets, exchanges and payment flows. Part of ssych ui: https://ssych.com/library/crypto-fiat

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Crypto/Fiat to your project and fits it to your theme.

Code

How Crypto/Fiat is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  )
}