KQ-657 · FINALITY/RING

Finality Ring

A ring left open at the top, where the notch is the part of finality still owed. Every confirmation extends the arc on glide and draws its own tick on flick, and the last block fills the remaining sweep and closes the notch in one move on snap, so the ring shutting is the same gesture as the transaction settling. The certainty figure rolls its digits on snap inside a fixed five-character box and gives way to a drawn check at finality, because at that point the number is no longer a probability.

KQ-657 · FINALITY/RING

Withdrawal to Coldbrook

Settling

3 of 12 blocks1,240.00 BSN

Finality 3/12 settling

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/finality-ring

Props

confirmations: number; default —; Blocks seen on top of the transaction; clamped to finality for display.
finality: number; default 12; Confirmations that count as final — the ring's maximum and its tick count.
certaintyFor: (confirmations: number, finality: number) => number; default 1 - 0.5 ** confirmations, exactly 1 at finality; Returns 0–1 for the centre figure. The default halves the remaining doubt per block.
amount: number; default —; The sum being secured, printed under the ring; omit it and the line is not drawn.
format: (value: number) => string; default Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); Formats the amount. The default pins an explicit locale so server and client agree.
asset: string; default "BSN"; Ticker printed after the amount.
onFinal: () => void; default —; Fires once, from the effect that observes the crossing into finality.
pendingLabel / finalLabel: string; default "Settling" / "Final"; The word under the figure before and after finality.
size: "sm" | "md"; default "md"; Ring scale; the centre figure sizes with it.
label: React.ReactNode; default —; Visible caption over the ring; omit it and pass aria-label.

Prop	Type	Default	Description
confirmations	number	—	Blocks seen on top of the transaction; clamped to finality for display.
finality	number	12	Confirmations that count as final — the ring's maximum and its tick count.
certaintyFor	(confirmations: number, finality: number) => number	1 - 0.5 ** confirmations, exactly 1 at finality	Returns 0–1 for the centre figure. The default halves the remaining doubt per block.
amount	number	—	The sum being secured, printed under the ring; omit it and the line is not drawn.
format	(value: number) => string	Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })	Formats the amount. The default pins an explicit locale so server and client agree.
asset	string	"BSN"	Ticker printed after the amount.
onFinal	() => void	—	Fires once, from the effect that observes the crossing into finality.
pendingLabel / finalLabel	string	"Settling" / "Final"	The word under the figure before and after finality.
size	"sm" \| "md"	"md"	Ring scale; the centre figure sizes with it.
label	React.ReactNode	—	Visible caption over the ring; omit it and pass aria-label.