KQ-661 · SWAP/PAIR

Swap Pair

A swap card whose two asset fields trade places. Pressing the flip control turns its arrow a half turn on snap while the cards travel between slots as a FLIP on glide, and the inverted rate rolls its digits on snap. The pay field is a real decimal input and the receive field is an output bound to it, so Tab reaches the amount, the Max control and the flip, and Enter or Space reverses the pair.

KQ-661 · SWAP/PAIR

Basinworks Exchange · swap

You pay1,280.40

BSN

You receive96.20

FRN

1 BSN =FRNNetwork fee 9.3135 FRN

Pay 250.00 BSN — Receive 3,104.50 FRN

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/swap-pair

Props

assets: [SwapAsset, SwapAsset]; default —; The pair in its base order: { symbol, name, balance }. Index 0 pays while the card is not inverted.
rate: number; default —; Units of assets[1] per one of assets[0]; inverted when the pair flips.
amount / defaultAmount: number; default 0; Controlled or initial pay amount, always denominated in the paying asset.
onAmountChange: (amount: number) => void; default —; Fires from the keystroke, the Max press, or the flip that rebased the amount.
inverted / defaultInverted: boolean; default false; Controlled or initial direction; true pays assets[1].
onInvertedChange: (inverted: boolean) => void; default —; Fires from the flip press.
format: (value: number, symbol: string) => string; default en-US grouping, 2 dp at 1,000 and above, up to 6 dp below; Formats every figure the card prints, including the rate.
feeRate: number; default 0.003; Share of the receive figure quoted as the network fee line.
label: React.ReactNode; default —; Visible heading; omit it and pass aria-label.

Prop	Type	Default	Description
assets	[SwapAsset, SwapAsset]	—	The pair in its base order: { symbol, name, balance }. Index 0 pays while the card is not inverted.
rate	number	—	Units of assets[1] per one of assets[0]; inverted when the pair flips.
amount / defaultAmount	number	0	Controlled or initial pay amount, always denominated in the paying asset.
onAmountChange	(amount: number) => void	—	Fires from the keystroke, the Max press, or the flip that rebased the amount.
inverted / defaultInverted	boolean	false	Controlled or initial direction; true pays assets[1].
onInvertedChange	(inverted: boolean) => void	—	Fires from the flip press.
format	(value: number, symbol: string) => string	en-US grouping, 2 dp at 1,000 and above, up to 6 dp below	Formats every figure the card prints, including the rate.
feeRate	number	0.003	Share of the receive figure quoted as the network fee line.
label	React.ReactNode	—	Visible heading; omit it and pass aria-label.