KQ-663 · POOL/SHARE

Pool Share

A liquidity position drawn as one wedge of a ring, whose arc grows on glide when you add — one number settling over 450ms rather than a bar snapping. The position and fees roll their digits on snap and the added sum stamps over the ring on recoil, while hovering the ring or pressing the totals control cross-fades the readings to the pool's own. The control is a real aria-pressed button, so the keyboard reaches the second reading exactly as the pointer does and Escape returns to your share.

KQ-663 · POOL/SHARE

Basinworks ExchangeBSN / FRN

2.41%of pool

Your position: $29,900
Fees earned: $185

Share 2.41% — Position $29,900

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/pool-share

Props

poolName: string; default —; The pair's name, e.g. "BSN / FRN".
contributed: number; default —; Your position's value in the pool; the wedge is this against poolTotal.
poolTotal: number; default —; The pool's total value.
fees: number; default 0; Fees earned so far; rolls when it changes.
reserves: [PoolReserve, PoolReserve]; default —; { symbol, amount } per side, printed as the pool's totals reading.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }); Formats every cash figure.
addStep: number; default 500; The sum the Add control offers.
onAdd: (amount: number) => void; default —; Fires from the Add press; raise contributed and the wedge follows.
showTotals / defaultShowTotals: boolean; default false; Controlled or initial pinned state of the second reading; hover borrows it transiently on top.
onShowTotalsChange: (shown: boolean) => void; default —; Fires from the press or the Escape that changed the pinned reading.
label: React.ReactNode; default —; Visible heading; omit it and pass aria-label.

Prop	Type	Default	Description
poolName	string	—	The pair's name, e.g. "BSN / FRN".
contributed	number	—	Your position's value in the pool; the wedge is this against poolTotal.
poolTotal	number	—	The pool's total value.
fees	number	0	Fees earned so far; rolls when it changes.
reserves	[PoolReserve, PoolReserve]	—	{ symbol, amount } per side, printed as the pool's totals reading.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 })	Formats every cash figure.
addStep	number	500	The sum the Add control offers.
onAdd	(amount: number) => void	—	Fires from the Add press; raise contributed and the wedge follows.
showTotals / defaultShowTotals	boolean	false	Controlled or initial pinned state of the second reading; hover borrows it transiently on top.
onShowTotalsChange	(shown: boolean) => void	—	Fires from the press or the Escape that changed the pinned reading.
label	React.ReactNode	—	Visible heading; omit it and pass aria-label.