.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 — gate it on your
app’s connection state. Set up wrong (no query client, the wrong wallet
stack, or no connected wallet) it throws a clear error at mount rather
than failing silently.<CalmOnramp> anywhere in the
tree and wrap a trigger element — clicking it opens the deposit modal.