> ## Documentation Index
> Fetch the complete documentation index at: https://docs.calmtreasury.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> The onramp built for Hyperliquid apps.

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

<Tabs>
  <Tab title="Wagmi">
    <CodeGroup>
      ```tsx app/page.tsx theme={null}
      "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 />;
      }
      ```

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

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

  <Tab title="Privy">
    <CodeGroup>
      ```tsx app/page.tsx theme={null}
      "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 />;
      }
      ```

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

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

  <Tab title="Dynamic">
    <CodeGroup>
      ```tsx app/page.tsx theme={null}
      "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 />;
      }
      ```

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

      <DynamicCalmProvider calmKey={CALM_PUBLISHABLE_KEY} currency="usd">
        {children}
      </DynamicCalmProvider>
      ```
    </CodeGroup>
  </Tab>
</Tabs>

See the [Wagmi](/sdk/react/wagmi), [Privy](/sdk/react/privy), and
[Dynamic](/sdk/react/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.

<Tip>
  Try Calm Sandbox: [https://sandbox.calmtreasury.xyz/](https://sandbox.calmtreasury.xyz/)
</Tip>

## Next

<CardGroup cols={2}>
  <Card title="Using Wagmi" icon="ethereum" href="/sdk/react/wagmi">
    Drop `<WagmiCalmProvider>` into any wagmi-based stack — wagmi
    direct, Reown AppKit, RainbowKit, ConnectKit.
  </Card>

  <Card title="Using Privy" icon="lock" href="/sdk/react/privy">
    Add `<PrivyCalmProvider>` to a Privy-authenticated app.
  </Card>

  <Card title="Using Dynamic" icon="bolt" href="/sdk/react/dynamic">
    Add `<DynamicCalmProvider>` to a Dynamic-authenticated app.
  </Card>
</CardGroup>