KQ-667 · APPROVE/STEP

Approve Step

Two controls in one row where the second cannot be reached until the first has finished. Approving turns a ring at a constant rate; approval collapses the button to a tick chip that slides aside on glide while Swap takes the width it left, then wakes into it with a single snap from 0.98 and stamps its tick on recoil once the trade lands. Swap is never disabled — it carries aria-disabled so the keyboard reaches it and hears why it is asleep, and every state arrives through the status prop, so the control never invents time.

KQ-667 · APPROVE/STEP

Basinworks ExchangeStep 1 of 2

12,000 BSN148,320 FRN

Approve the allowance first

step 1 · approve 12,000 BSN

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/approve-step

Props

status / defaultStatus: ApproveStepStatus; default "idle"; Controlled or initial state: idle, approving, approved, swapping, done or failed.
onStatusChange: (status: ApproveStepStatus) => void; default —; Fires from the press that moved the control into a pending state.
onApprove: () => void; default —; Fires from the Approve (or Retry) press; the host does the work and sets status.
onSwap: () => void; default —; Fires from the Swap press; the host does the work and sets status.
amount: number; default —; The sum being approved, in symbol.
symbol: string; default —; Ticker being approved, e.g. "BSN".
receive: number; default —; The estimated sum received, in receiveSymbol.
receiveSymbol: string; default —; Ticker received, e.g. "FRN".
format: (value: number) => string; default Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }); Formats both sums, in the labels and in the spoken sentences.
errorMessage: string; default "Approval was not confirmed."; The line shown under the row while status is failed.
label: React.ReactNode; default —; Visible heading; omit it and pass aria-label.

Prop	Type	Default	Description
status / defaultStatus	ApproveStepStatus	"idle"	Controlled or initial state: idle, approving, approved, swapping, done or failed.
onStatusChange	(status: ApproveStepStatus) => void	—	Fires from the press that moved the control into a pending state.
onApprove	() => void	—	Fires from the Approve (or Retry) press; the host does the work and sets status.
onSwap	() => void	—	Fires from the Swap press; the host does the work and sets status.
amount	number	—	The sum being approved, in symbol.
symbol	string	—	Ticker being approved, e.g. "BSN".
receive	number	—	The estimated sum received, in receiveSymbol.
receiveSymbol	string	—	Ticker received, e.g. "FRN".
format	(value: number) => string	Intl.NumberFormat("en-US", { maximumFractionDigits: 2 })	Formats both sums, in the labels and in the spoken sentences.
errorMessage	string	"Approval was not confirmed."	The line shown under the row while status is failed.
label	React.ReactNode	—	Visible heading; omit it and pass aria-label.