Composed
Exchange
Coin marks, token tabs, amount fields and the trade-status vocabulary.
9sSUCCESSPENDINGFAILED
BTC→USDC24h range
$113,940$116,680
You are selling
0.0428 BTC
$0.00
Transaction fee0 USDC
Service fee0.3%
Price impact2.40%
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/exchange.jsonCoin hue is identity
A coin's colour tells one asset from another and carries no sentiment, so it never borrows the success or error tokens. In a screen where green and red mean gain and loss, an asset that happened to be green would read as winning.
The number is the field
AmountField has no box. The underline carries the state: absent when empty,
brand while focused, error when the balance cannot cover it. Passing coins
turns the chip into a picker; leaving it off gives a static chip.
Price impact and quote timers are honest
PriceImpact escalates its tone with the number rather than staying decorative,
and QuoteTimer counts a real countdown — a settled quote expires and re-prices
instead of letting you confirm a price that no longer exists.
| Prop | Type | Default | Description |
|---|---|---|---|
| coin / coins | Coin | — | AmountField. Passing the array makes the chip a picker. |
| state | "empty" | "focus" | "filled" | "error" | "empty" | AmountField. The underline, not a box. |
| onMax | () => void | — | Fills with the whole balance — the most-used control on any swap. |
| status | TxStatus | — | StatusPill. success, pending, failed, cancelled. |
| low / high / value | number | — | RangeBar. Where today sits in its own range. |