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.

​
<CalmProvider>

Provides the client, runs session bootstrap, polls state, exposes everything to children via useCalm(). 
<CalmProvider
  getAccessToken={getIdentityToken}
  baseUrl="https://api.calmtreasury.xyz"
  defaults={{ email: "ada@example.com", country: "US" }}
>
  {children}
</CalmProvider>

​
Props

​
getAccessToken
() => Promise<string | null>
required
Returns the current Privy identity token. The SDK calls this on session bootstrap. With Privy, pass usePrivy().getIdentityToken.
​
baseUrl
string
default:"https://api.calmtreasury.xyz"
Override the API root. Useful for testing against a local API.
​
defaults
Partial<RegisterBody>
Optional prefills for the register form. Useful when the partner already has the user’s email (from Privy) or wants to lock the country.

​
<DepositFlow>

Renders the step appropriate to the current state. Self-contained — no wiring required beyond mounting it inside a CalmProvider. 
<DepositFlow
  onComplete={(va) => console.log("VA ready", va.id)}
  className="my-custom-card"
/>

​
Props

​
onComplete
(va: VirtualAccount) => void
Fires once when the virtual account is created and the instructions step is showing. Use it to navigate away or hide other UI.
​
className
string
Appended after calm-root. Use it to scope CSS-variable overrides.

​
Styling

CSS is injected once on first mount, scoped to .calm-*. Override via CSS variables on any parent: 
.my-deposit-card {
  --calm-accent: #3b82f6;
  --calm-radius: 16px;
}

<DepositFlow className="my-deposit-card" />
All variables (with defaults):
VariableDefault (light)Default (dark)
--calm-bg#ffffff#0f0f10
--calm-fg#0a0a0a#fafafa
--calm-muted#6b7280#9ca3af
--calm-border#e5e7eb#262626
--calm-accent#111827#fafafa
--calm-accent-fg#ffffff#0a0a0a
--calm-radius12px12px
--calm-fontsystemsystem
prefers-color-scheme: dark is respected automatically.

​
Example: full integration

import { PrivyProvider, usePrivy } from "@privy-io/react-auth";
import { CalmProvider, DepositFlow } from "@calm-xyz/react";

export default function App() {
  return (
    <PrivyProvider appId={import.meta.env.VITE_PRIVY_APP_ID}>
      <Gateway />
    </PrivyProvider>
  );
}

function Gateway() {
  const { ready, authenticated, getIdentityToken, user, login } = usePrivy();
  if (!ready) return null;
  if (!authenticated) return <button onClick={login}>Sign in</button>;

  return (
    <CalmProvider
      getAccessToken={getIdentityToken}
      defaults={{ email: user?.email?.address, country: "US" }}
    >
      <DepositFlow onComplete={(va) => console.log(va)} />
    </CalmProvider>
  );
}