ConvertedAmount

Borders · src/components/ConvertedAmount/ConvertedAmount.tsx

The same money in two currencies, and everything needed to check the conversion.

The rate, the named benchmark, the markup and the measurement date all appear together. A converted figure without them cannot be verified by the person paying it, and an unverifiable price is where a quiet spread lives. This is the component that refuses to hide one.

The rate is formatted to six significant digits rather than a fixed number of decimals: a won-to-dollar rate is 0.000722, and four decimal places would round it to 0.0007 - a 3% error printed as precision.

The converted amount uses display: 'code', so a dollar figure beside a won figure reads USD rather than a bare $ that could be one of a dozen dollars.

Import

import { ConvertedAmount } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
amount required	number
currency required	string
converted	{ amount?: number; currency?: string }	The same money in another currency.
rate	number	How many of the target currency one unit of currency buys.
benchmark	React.ReactNode	Which rate this is, by name. "ECB reference rate", "Open Exchange Rates".
markup	number	The spread over the benchmark, as a fraction: 0.015 is 1.5%.
at	React.ReactNode	When the rate was measured.
note	React.ReactNode
locale	string
decimals	boolean
className	string