Introduction

Add an onramp to your app in a single React component.

Wagmi
Privy
Dynamic

"use client";
import { CalmOnramp, useCalm, useSession } from "@calm-xyz/react";

function DepositButton() {
  const { address } = useCalm();
  const session = useSession({ address });
  const ready = !!session.data && !session.isError;
  if (!ready) return <button type="button" disabled>Loading…</button>;
  return (
    <CalmOnramp>
      <button type="button">Deposit funds</button>
    </CalmOnramp>
  );
}

export default function Page() {
  return <DepositButton />;
}

"use client";
import { WagmiCalmProvider } from "@calm-xyz/react/wagmi";
// ...your <WagmiProvider> + <QueryClientProvider> setup here...

<WagmiCalmProvider calmKey={CALM_PUBLISHABLE_KEY} currency="usd">
  {children}
</WagmiCalmProvider>

"use client";
import { CalmOnramp, useCalm, useSession } from "@calm-xyz/react";

function DepositButton() {
  const { address } = useCalm();
  const session = useSession({ address });
  const ready = !!session.data && !session.isError;
  if (!ready) return <button type="button" disabled>Loading…</button>;
  return (
    <CalmOnramp>
      <button type="button">Deposit funds</button>
    </CalmOnramp>
  );
}

export default function Page() {
  return <DepositButton />;
}

"use client";
import { PrivyCalmProvider } from "@calm-xyz/react/privy";
// ...your <PrivyProvider> + <QueryClientProvider> setup here...

<PrivyCalmProvider calmKey={CALM_PUBLISHABLE_KEY} currency="usd">
  {children}
</PrivyCalmProvider>

"use client";
import { CalmOnramp, useCalm, useSession } from "@calm-xyz/react";

function DepositButton() {
  const { address } = useCalm();
  const session = useSession({ address });
  const ready = !!session.data && !session.isError;
  if (!ready) return <button type="button" disabled>Loading…</button>;
  return (
    <CalmOnramp>
      <button type="button">Deposit funds</button>
    </CalmOnramp>
  );
}

export default function Page() {
  return <DepositButton />;
}

"use client";
import { DynamicCalmProvider } from "@calm-xyz/react/dynamic";
// ...your <DynamicContextProvider> + <QueryClientProvider> setup here...

<DynamicCalmProvider calmKey={CALM_PUBLISHABLE_KEY} currency="usd">
  {children}
</DynamicCalmProvider>

See the Wagmi, Privy, and Dynamic pages for the full app/layout.tsx provider tree.

Supported onramps

Method	Status	What the user does
Swap	Live	Swap a token they already hold to USDC. Source chains: Ethereum, Base.
Crypto deposit	Live	Scan a QR code and send crypto from another wallet. Chains: Ethereum, Base, Arbitrum.
Cash App	Beta†	Pay an amount with Cash App; USDC lands in their wallet. USD only.
Bank transfer	Live*	Wire money from a bank account. ACH/wire (USD), SEPA (EUR), Faster Payments (GBP). KYC the first time.
Card	Coming soon	Visa and Mastercard.
Connect exchange	Beta†	Connect a Coinbase account and withdraw USDC into their wallet. Chains: Ethereum, Base, Arbitrum.

* Bank transfers deliver USDC on HyperEVM for now. † Cash App and Connect exchange are available but not yet recommended for production.

Try Calm Sandbox: https://sandbox.calmtreasury.xyz/

Using Wagmi

Drop <WagmiCalmProvider> into any wagmi-based stack — wagmi direct, Reown AppKit, RainbowKit, ConnectKit.

Using Privy

Add <PrivyCalmProvider> to a Privy-authenticated app.

Using Dynamic

Add <DynamicCalmProvider> to a Dynamic-authenticated app.

Get started

Concepts

Reference

Introduction

Supported onramps

Next

Using Wagmi

Using Privy

Using Dynamic

​Supported onramps

​Next

Using Wagmi

Using Privy

Using Dynamic

Supported onramps

Next