Components

AmountDisplay

Stable

Large inline currency input for transfer modals. The “0” placeholder renders in muted gray; typed values switch to foreground black. Matches the Figma pattern: $ prefix at 30px + amount at 60px bold.

Interactive (type a number)

Available: $24,567.54

Read-only (no input)

2,500

Usage

import { AmountDisplay } from "@mnee-ui/ui"// Balance comes from your backend / APIconst { balance } = useWalletBalance()   // e.g. { balance: 24567.54 }const [amount, setAmount] = useState("")<AmountDisplay  value={amount}  onChange={setAmount}  subtitle={`Available: $${balance.toLocaleString("en-US", { minimumFractionDigits: 2 })}`}  subtitleAction={{    label: "Max",    onClick: () => setAmount(String(balance)),  }}/>

Backend-driven balance

The subtitle and subtitleAction props accept any dynamic value. Pass your API balance directly — the component does not fetch or format data internally.

// subtitle and subtitleAction accept any dynamic value.// Wire them to your API response:const { data } = useSWR("/api/wallet/balance", fetcher)const available = data?.available ?? 0<AmountDisplay  value={amount}  onChange={setAmount}  subtitle={`Available: $${available.toLocaleString("en-US", {    minimumFractionDigits: 2,    maximumFractionDigits: 2,  })}`}  subtitleAction={{    label: "Max",    onClick: () => setAmount(String(available)),  }}/>

Props

Prop	Type	Default	Description
value	string	""	Current numeric string
onChange	(value: string) => void	—	Called on input change
prefix	string	"$"	Currency prefix (30px bold) — use for USD mode
suffix	string	—	Token suffix (30px bold, e.g. "USDC") — use for crypto mode
placeholder	string	"0"	Placeholder when empty (muted color)
subtitle	string	—	Text below the amount — pass your backend balance here
subtitleAction	{ label: string; onClick: () => void }	—	Inline action (e.g. Max) — wire onClick to set the BE balance
readOnly	boolean	false	Disable input, show as static text
className	string	—	Additional container classes