KQ-669 · IMPERMANENT/METER

Impermanent Meter

Two bars on one scale — what a position would be worth held, and what it is worth pooled — with the shortfall between their ends drawn as hatching that fills on glide as prices diverge, while the percentage rolls its digits on snap. The gap is derived from the pool's own arithmetic rather than handed in, and fees are netted off it honestly. Hovering the gap or pressing the Difference row opens a breakdown whose height is measured rather than reserved; Escape closes it.

KQ-669 · IMPERMANENT/METER

Basinworks ExchangeNone

$23,100held$23,100pooled

Ratio ×1.0 · divergence −0.00% · net +$186

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/impermanent-meter

Props

deposit: number; default —; Position value at entry; both bars are scaled from it.
priceRatio: number; default 1; Price of the pair now against entry — 1 is unchanged, 2 has doubled.
feesEarned: number; default 0; Fees taken since entry; nets off the shortfall in the breakdown.
pair: [string, string]; default ["A", "B"]; The two tickers, named in the breakdown.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }); Formats every cash figure.
warnAt: number; default 0.02; Shortfall fraction at which the gap turns warn.
dangerAt: number; default 0.06; Shortfall fraction at which it turns danger.
open / defaultOpen: boolean; default false; Controlled or initial pinned state of the breakdown; hover previews it on top.
onOpenChange: (open: boolean) => void; default —; Fires from the press or the Escape that changed the pinned state.
label: React.ReactNode; default —; Visible heading; omit it and pass aria-label.

Prop	Type	Default	Description
deposit	number	—	Position value at entry; both bars are scaled from it.
priceRatio	number	1	Price of the pair now against entry — 1 is unchanged, 2 has doubled.
feesEarned	number	0	Fees taken since entry; nets off the shortfall in the breakdown.
pair	[string, string]	["A", "B"]	The two tickers, named in the breakdown.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 })	Formats every cash figure.
warnAt	number	0.02	Shortfall fraction at which the gap turns warn.
dangerAt	number	0.06	Shortfall fraction at which it turns danger.
open / defaultOpen	boolean	false	Controlled or initial pinned state of the breakdown; hover previews it on top.
onOpenChange	(open: boolean) => void	—	Fires from the press or the Escape that changed the pinned state.
label	React.ReactNode	—	Visible heading; omit it and pass aria-label.