@cdr-kit/react/Components/VaultGate

VaultGate

A declarative gate. Wrap it around the data you want to protect; it checks the vault's on-chain read condition, collects key shares, and renders the decrypted bytes via a render-prop once access is granted.

import { VaultGate } from "@cdr-kit/react"

Mock by default. Every example on this page runs against an in-memory CDR — no wallet, no chain, no testnet funds. Swap mockKit for config + apiUrl to go live on Aeneid.

Live preview

Press subscribe to run the full mock flow — condition check, payment, threshold key-share collection, and local decryption. It mirrors the real 2-step subscribeAndAccess path against the actual createMockCdrKit() from @cdr-kit/core.

mock kit

vault #4200Subscription

read.condition5 $IP / 30d

7b 22 73 69 67 6e 61 6c 22 3a 22 ?? ?? 9f a3 2e c1 04 7d e8 11 b6 ?? ?? 6a 0c

import { CdrProvider, VaultGate } from "@cdr-kit/react";
import { createMockCdrKit } from "@cdr-kit/core";

export function SignalCard() {
return (
  <CdrProvider mockKit={createMockCdrKit()}>
    <VaultGate
      uuid={4200}
      fallback={<SubscribeButton price="5 $IP" />}
      loading={<CdrSkeleton lines={3} />}>
      {(data) => <pre>{new TextDecoder().decode(data)}</pre>}
    </VaultGate>
  </CdrProvider>
);
}

Usage

The simplest gate: pass a uuid and a render-prop. With auto, VaultGate requests access on mount; without it, it waits for an imperative trigger from the access hook.

SignalCard.tsx

<VaultGate uuid={4200} auto fallback={<SubscribeButton />}>
{(data) => <SignalView bytes={data} />}
</VaultGate>

Props

Prop	Type	Default	Description
uuidrequired	number	—	The CDR vault id. Read it from the VaultCreated event — never predict it (it's a global counter).
childrenrequired	(data: Uint8Array) => ReactNode	—	Render-prop called with the decrypted bytes once the condition is satisfied.
auto	boolean	false	Request access on mount instead of waiting for an imperative trigger.
fallback	ReactNode	null	Rendered while the condition is unmet — typically your subscribe / pay button.
loading	ReactNode	<CdrSkeleton/>	Rendered during the ~15s threshold read while key shares are collected.
accessAuxData	Hex	"0x"	Optional ABI-encoded auxiliary data passed to the read condition (e.g. a tier-gate license tokenId).

States

VaultGate is a thin wrapper over useAccessVault, whose discriminated status drives what renders:

idle / error — condition unmet → renders fallback.
collecting-partials — collecting key shares (the ~15s read) → renders loading.
ready — threshold met, decrypted → renders children(data).

Mock mode

Wrap your tree in a CdrProvider with a createMockCdrKit() and the entire component surface works with zero chain dependencies — ideal for Storybook, tests, and the previews on this page. Going live is a one-line swap:

provider.tsx

// local / tests — no wallet, no chain
<CdrProvider mockKit={createMockCdrKit()}> … </CdrProvider>

// live on Aeneid — same children, real round-trip
<CdrProvider config={wagmiConfig} apiUrl={apiUrl}> … </CdrProvider>

← Previous

CdrProvider

Vault compound