.svg?fit=max&auto=format&n=dWcfLX8ihtBnx27z&q=85&s=063a44188d21b27136ad7d37c34ee2eb)
@calm-xyz/react is how you embed the Calm onramp in a React app.
Pick the provider that matches how your app already signs users in:
<WagmiCalmProvider>— wagmi-based stacks (wagmi direct, Reown AppKit, RainbowKit, ConnectKit).<PrivyCalmProvider>— Privy-authenticated apps.<DynamicCalmProvider>— Dynamic-authenticated apps.
Mount the provider inside your
<QueryClientProvider> and your
auth/wallet stack, and only once a wallet is connected — the provider
reads the wallet address at mount and throws without one, as it does
for a missing query client or the wrong wallet stack, rather than
failing silently. Each provider’s page shows the gate to use.<CalmOnramp> anywhere in the
tree and wrap a trigger element — clicking it opens the deposit modal.