KQ-629 · TRADE/CONFIRM

Trade Confirm

The last look at the number. The sheet rises inside its own frame on glide — never a bounce, because nothing is worth celebrating until the order is placed — while a ring beside the quote drains linearly across the hold from a motion value, pausing whenever the tab is hidden. Expiry dims the quote in place, disables confirm rather than hiding it, and slides a refresh control into the hold line; a new price rolls the digits on snap and refills the ring. Focus enters on Confirm, Tab cycles inside, Escape cancels, and focus returns to whatever opened it.

KQ-629 · TRADE/CONFIRM

Order ticketCBK

Instrument: CBK
Venue: Basinworks Exchange
Side: Buy
Size: 40 units

CBK buy 40 · quote 18.42 · idle

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/trade-confirm

Props

open / defaultOpen: boolean; default false; Controlled or initial visibility.
onOpenChange: (open: boolean) => void; default —; Fires from the press, key or confirm that changed it.
side: "buy" | "sell"; default "buy"; Order side; colours the header chip.
symbol: string; default —; Instrument code.
size: number; default —; Units on the order.
price: number; default —; The held quote. A new value rolls the digits and restarts the hold.
fee: number; default 0; Added to the total.
holdMs: number; default 12000; Milliseconds the quote holds before it expires.
format: (value: number) => string; default USD, 2dp; Formats the fee and the total.
formatPrice: (value: number) => string; default 2dp; Formats the quote.
unitLabel: string; default "units"; Noun printed after the size.
onConfirm: (price: number) => void; default —; Fires from the press that confirmed, with the quote it confirmed.
onRefresh: () => void; default —; Fires from the press that asked for a new quote.
onExpire: () => void; default —; Fires from the ring's completion.

Prop	Type	Default	Description
open / defaultOpen	boolean	false	Controlled or initial visibility.
onOpenChange	(open: boolean) => void	—	Fires from the press, key or confirm that changed it.
side	"buy" \| "sell"	"buy"	Order side; colours the header chip.
symbol	string	—	Instrument code.
size	number	—	Units on the order.
price	number	—	The held quote. A new value rolls the digits and restarts the hold.
fee	number	0	Added to the total.
holdMs	number	12000	Milliseconds the quote holds before it expires.
format	(value: number) => string	USD, 2dp	Formats the fee and the total.
formatPrice	(value: number) => string	2dp	Formats the quote.
unitLabel	string	"units"	Noun printed after the size.
onConfirm	(price: number) => void	—	Fires from the press that confirmed, with the quote it confirmed.
onRefresh	() => void	—	Fires from the press that asked for a new quote.
onExpire	() => void	—	Fires from the ring's completion.