Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.calmtreasury.xyz/llms.txt

Use this file to discover all available pages before exploring further.

When the default <DepositFlow /> doesn’t match your design system, you can read state via useCalm() and render whatever you want.

​
useCalm()

Inside a CalmProvider, call useCalm() to access the live state + actions. 
import { useCalm } from "@calm-xyz/react";

function MyFlow() {
  const {
    client,                // vanilla CalmClient
    wallet,                // 0x… address from session, null while bootstrapping
    walletState,           // { wallet, kycState, hasAcceptedTos } | null
    virtualAccount,        // VirtualAccount | null
    step,                  // derived Step (see /concepts/state-machine)
    error,                 // string | null
    defaults,              // <CalmProvider defaults={…}>
    register,              // (body) => Promise<void>
    refresh,               // () => Promise<void>
    createVirtualAccount,  // ({ currency, chain }) => Promise<void>
  } = useCalm();

  switch (step) {
    case "loading":              return <MySpinner />;
    case "register":             return <MyRegisterForm onSubmit={register} />;
    case "bridge_tos":           return <MyTosFrame />;
    case "kyc":                  return <MyKycFrame />;
    case "review":               return <MyReviewBanner />;
    case "rejected":             return <MyRejectedScreen />;
    case "choose_currency_chain": return <MyCurrencyChainPicker onSubmit={createVirtualAccount} />;
    case "creating":             return <MyProvisioning />;
    case "instructions":         return <MyInstructions va={virtualAccount!} />;
    case "error":                return <MyError message={error!} />;
  }
}

​
Reusing individual step components

Every step component is exported. Use them in your own structure: 
import {
  CalmProvider,
  RegisterStep,
  BridgeTosStep,
  KycStep,
  ChooseCurrencyChainStep,
  InstructionsStep,
  useCalm,
} from "@calm-xyz/react";

function CustomLayout() {
  const { step } = useCalm();
  return (
    <div className="my-shell">
      <MyHeader currentStep={step} />
      <main className="calm-root">
        {step === "register" && <RegisterStep />}
        {step === "bridge_tos" && <BridgeTosStep />}
        {step === "kyc" && <KycStep />}
        {step === "choose_currency_chain" && <ChooseCurrencyChainStep />}
        {step === "instructions" && <InstructionsStep />}
      </main>
    </div>
  );
}
Step components rely on the .calm-* CSS classes injected by the package. If you use them, render inside an element with class calm-root (or call injectStyles() manually).

​
Just the client, no React

If you’re building a non-React surface (mobile, server, CLI), use the vanilla client directly: 
import { createClient } from "@calm-xyz/react";

const calm = createClient({ getAccessToken });
await calm.session();
// drive the flow yourself with calm.wallets.*
See Vanilla client for the full surface.