Introduction

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

Wagmi
Privy
Dynamic

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

export default function Page() {
  return (
    <CalmOnramp>
      <button type="button">Deposit funds</button>
    </CalmOnramp>
  );
}

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

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

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

export default function Page() {
  return (
    <CalmOnramp>
      <button type="button">Deposit funds</button>
    </CalmOnramp>
  );
}

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

<PrivyCalmProvider
  calmKey={CALM_PUBLISHABLE_KEY}
  name="Your App"
  currency="usd"
  rpcUrls={{
    1: "https://your-ethereum-rpc",
    8453: "https://your-base-rpc",
    999: "https://rpc.hyperliquid.xyz/evm",
  }}
>
  {children}
</PrivyCalmProvider>

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

export default function Page() {
  return (
    <CalmOnramp>
      <button type="button">Deposit funds</button>
    </CalmOnramp>
  );
}

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

<DynamicCalmProvider
  calmKey={CALM_PUBLISHABLE_KEY}
  name="Your App"
  currency="usd"
  rpcUrls={{
    1: "https://your-ethereum-rpc",
    8453: "https://your-base-rpc",
    999: "https://rpc.hyperliquid.xyz/evm",
  }}
>
  {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 the destination chain’s payout token. Source chains: Ethereum, Base, HyperEVM, MegaETH, Monad, Polygon.
Crypto deposit	Live	Send crypto in Blink’s hosted flow; the destination chain’s payout token lands in their wallet.
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. Withdrawal networks: Ethereum, Base.

Every flow delivers to any destination chain the SDK supports — Ethereum (1), Base (8453), HyperEVM (999), HyperCore (1337), MegaETH (4326), Monad (143), and Polygon (137) — except where a row says otherwise. Each chain settles in its own payout token: USDC on most, and USDm on MegaETH. Two chains offer a choice of payout token. Polygon pays Circle-native USDC (0x3c49…3359) by default, and bridged USDC.e (0x2791…4174) if you set destinationToken="usdc.e" on the provider. Monad pays Circle-native USDC (0x7547…b603) by default, and Agora’s AUSD (0x0000…012a) if you set destinationToken="ausd". Each pair is two different contracts and they are not interchangeable, so pick one for your users and leave it set — they never see the choice. See CalmOnramp. † 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