@cdr-kit/react-ui/Components/AccessStepper

<AccessStepper>

Designed wait-state UI for the 2-step pay→access flow. Derives step state from useAccessVault's status + an optional {collected, threshold} for the determinate partial-collection bar.

import { AccessStepper } from "@cdr-kit/react-ui"

Live preview

phase selector

Subscribe & pay
subscribe(uuid, periods, price)
Collect validator partials
threshold collection
collected 6 / 10
Decrypt locally
key shares → plaintext

import { AccessStepper } from "@cdr-kit/react-ui";
import { useAccessVault } from "@cdr-kit/react";

function Stepper({ uuid }) {
const { status, progress } = useAccessVault(uuid);
return <AccessStepper status={status} progress={progress} withPay />;
}

Props

Prop	Type	Default	Description
statusrequired	"idle" \| "paying" \| "collecting-partials" \| "ready" \| "error"	—	Drives which step is active / done / errored.
progress	{ collected: number; threshold: number }	—	When provided, drives the determinate partials bar in the collecting step.
withPay	boolean	true	Include the leading Subscribe & pay step (for subscription-gated vaults).

← Previous

ConditionBadge

SubscribeButton