FX Converter

Beta

Two currency fields with a swap button between them, the rate and when it was taken, a fees card ending with the total, and a note.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add fx-converter
Also works with shadcn: npx shadcn@latest add @ritla/fx-converter
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

fx-converter.tsx

import { FxConverter } from "@/components/ui/fx-converter";<FxConverter  send={{ label: "You send", amount, onAmountChange: setAmount, currency: { code: "SAR", country: "SA" } }}  receive={{ label: "Recipient gets", amount: converted, currency: { code: "USD", country: "US" } }}  onSwap={swap}  labels={{ swap: "Swap currencies", changeCurrency: "Change currency" }}  rate="1 SAR = 0.2663 USD"  rateTime="Mid-market rate at 07:17 UTC"  fees={[{ label: "Our fee", value: "SAR 5.00" }, { label: "Total to pay", value: "SAR 1,005.00" }]}/>

API reference

FxConverter

Prop	Type	Default	Description
`send / receive`	`SwapField`	None	Each side: label, amount, onAmountChange (leave it out for read only), currency, onCurrencyClick, caption. The same field as the Swap card's.
`onSwap`	`() => void`	None	Swaps the two sides.
`labels`	`{ swap, changeCurrency }`	None	Button names in the page language.
`rate`	`string`	None	The rate line, left to right.
`rateTime`	`ReactNode`	None	When the rate was taken.
`fees`	`{ label, value }[]`	None	The fees card, in order; the last line is the total. With no lines there is no card.
`note`	`ReactNode`	None	The line at the bottom.

Accessibility

ARIA

Each amount is a labelled input and the converted side is read only. The swap button sits between the fields in the tab order too.
The rate is a polite live region: a changed amount or currency is announced once.

Arabic and RTL notes

Mirrors

The amount is on the right, the currency pill on the left, and the labels start on the right.

Does not mirror

The swap arrows point up and down and never mirror.
The rate line, the amounts and the currency codes stay left to right.

Numerals: Amounts can be typed in Latin or Arabic-Indic digits, with the Arabic decimal separator «٫»; read them with parseAmount from @/lib/money.
Arabic typography: heading-28 Semibold amounts and a body-16 Semibold rate.