@cdr-kit/Getting started/Quickstart

Quickstart

Install the React layer, wrap your app in a provider, drop in a VaultGate. That's it.

Install

terminal

$ pnpm add @cdr-kit/react @cdr-kit/core wagmi viem

Wrap in <CdrProvider>

<CdrProvider> wires WagmiProvider, react-query, and initializes the CDR crypto WASM. Pass config + apiUrl for live mode, or mockKit for offline dev.

App.tsx

import { CdrProvider } from "@cdr-kit/react";
import { wagmiConfig } from "./wagmi";

export function App({ children }) {
return (
  <CdrProvider config={wagmiConfig} apiUrl={process.env.NEXT_PUBLIC_CDR_API_URL!}>
    {children}
  </CdrProvider>
);
}

Gate your data

<VaultGate> checks the on-chain condition, collects key shares, and hands you the decrypted bytes. Pass a fallback for the "not yet entitled" state.

SignalCard.tsx

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

export function SignalCard() {
return (
  <VaultGate uuid={4200} auto fallback={<SubscribeButton />}>
    {(data) => <pre>{new TextDecoder().decode(data)}</pre>}
  </VaultGate>
);
}

Or scaffold a starter

terminal

$ npm create cdr-kit

← Previous

Introduction

Theming