Introduction

"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>
  );
}