Overview - Calm

@calm-xyz/react lets you embed the Calm onramp in a React application. Configure it with your publishable key, the connected wallet address, and the callbacks Calm uses to interact with the wallet.

Mount the Calm provider inside your QueryClientProvider and wallet authentication stack after a wallet connects. It requires both a wallet address and a query client, and throws immediately if either is missing.

To open the onramp in a modal, place CalmDialog anywhere beneath the provider and wrap your trigger element. For a page-level experience, use CalmEmbed to render the same flow directly in your layout without a trigger or dialog.

app/page.tsx

"use client";
import { CalmDialog, CalmProvider } from "@calm-xyz/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useState } from "react";

export default function Page() {
  // `address` and the three callbacks come from your own wallet stack.
  const [queryClient] = useState(() => new QueryClient());
  return (
    <QueryClientProvider client={queryClient}>
      <CalmProvider
        publishableKey={CALM_PUBLISHABLE_KEY}
        name="Your App"
        address={address}
        chain={1337}
        destinationToken="USDC"
        currency="USD"
        country="US"
        sendTransaction={sendTransaction}
        signTypedData={signTypedData}
        waitForReceipt={waitForReceipt}
      >
        <CalmDialog>
          <button type="button">Deposit funds</button>
        </CalmDialog>
      </CalmProvider>
    </QueryClientProvider>
  );
}