KQ-660 · RECEIPT/PROOF

Receipt Proof

A receipt's inclusion proof drawn as the tree it actually is: choosing a leaf picks out the edges that prove it and the sibling hash a verifier needs at every level, and turning the status to checking draws that path leaf-first with each edge's pathLength on glide, staggered by cascade so the climb stays inside the choreography budget. Verifying stamps the root — the seal lands from 1.25× on recoil and its check draws on flick — while a failure only changes colour, because a failure does not celebrate. Hashes are procedural and seeded and every coordinate is rounded before it reaches an attribute, so the tree hydrates identically on the server and in the browser.

KQ-660 · RECEIPT/PROOF

Basinworks receiptidle

Leaf 30xbfc02cb8f0b943f3

Proving leaf 3 · on the proof path240.00 BSN

Proof leaf 3 idle

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/receipt-proof

Props

leaves: number; default 8; Leaf count, rounded up to a power of two so the tree pairs evenly.
value / defaultValue: number; default 0; Controlled or initial leaf index — the receipt being proved.
onValueChange: (index: number) => void; default —; Fires from the click or key press that chose a leaf.
status: "idle" | "checking" | "verified" | "failed"; default "idle"; Drives the draw and the stamp; the host owns the timing.
seed: string; default "basin"; Seeds the procedural hashes so the same tree is drawn every render.
amount: number; default —; The receipt's value, printed under the tree; omit it and the figure 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.
onNodeFocus: (node: ProofNode) => void; default —; Fires from the hover or focus that changed the read-out, with the node's level, index, hash and role.
rootLabel: string; default "Block root"; Name of the root node in its label and read-out.
label: React.ReactNode; default —; Visible caption; omit it and pass aria-label.

Prop	Type	Default	Description
leaves	number	8	Leaf count, rounded up to a power of two so the tree pairs evenly.
value / defaultValue	number	0	Controlled or initial leaf index — the receipt being proved.
onValueChange	(index: number) => void	—	Fires from the click or key press that chose a leaf.
status	"idle" \| "checking" \| "verified" \| "failed"	"idle"	Drives the draw and the stamp; the host owns the timing.
seed	string	"basin"	Seeds the procedural hashes so the same tree is drawn every render.
amount	number	—	The receipt's value, printed under the tree; omit it and the figure 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.
onNodeFocus	(node: ProofNode) => void	—	Fires from the hover or focus that changed the read-out, with the node's level, index, hash and role.
rootLabel	string	"Block root"	Name of the root node in its label and read-out.
label	React.ReactNode	—	Visible caption; omit it and pass aria-label.