Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.daimo.com/llms.txt

Use this file to discover all available pages before exploring further.

The Daimo modal is a drop-in React component that handles the entire deposit flow: chain selection, wallet connection, transaction signing, and status updates.

​
Installation

npm install @daimo/sdk
Peer dependencies: react >= 18.

​
Setup

Wrap your app in DaimoSDKProvider: 
import { DaimoSDKProvider } from "@daimo/sdk/web";
import "@daimo/sdk/web/theme.css";

function App() {
  return <DaimoSDKProvider>{/* your app */}</DaimoSDKProvider>;
}

​
Basic usage

  1. Create a session on your server (see Quickstart)
  2. Pass sessionId and clientSecret to <DaimoModal>
import { DaimoModal } from "@daimo/sdk/web";

function DepositPage({ sessionId, clientSecret }) {
  return (
    <DaimoModal
      sessionId={sessionId}
      clientSecret={clientSecret}
      onPaymentStarted={() => console.log("deposit initiated")}
      onPaymentCompleted={() => console.log("deposit succeeded")}
    />
  );
}
The sessionId and clientSecret come from the session object returned by POST /v1/sessions.

​
Props

PropTypeDefaultDescription
sessionIdstring-Unique session ID. Sessions are created server-side. (required)
clientSecretstring-Unique client secret, returned at session creation. (required)
defaultOpenbooleantrueWhether the modal starts open
connectToInjectedWalletsbooleanfalseSkip payment method picker. Auto-connect to injected wallets.
connectToAddressAddress-Skip payment method picker. Use already-connected EVM wallet at the specified address.
embeddedbooleanfalseRender inline instead of as a floating modal
platformstringautoCaller’s platform. Prefer "desktop" or "mobile"; legacy "ios", "android", and "other" still work. Affects wallet and exchange UX. Auto-detected.
returnUrlstring-URL to navigate to after successful payment
returnLabelstring-Text shown on successful payment. Button label if returnUrl is set (default “Return to App”), otherwise text.

​
Event handlers

HandlerFires when
onPaymentStartedUser’s deposit transaction is detected
onPaymentCompletedFunds are delivered to the destination
onOpenModal becomes visible
onCloseModal is dismissed

​
Embedded mode

Set embedded to render the deposit flow inline instead of as an overlay modal: 
<DaimoModal
  sessionId={sessionId}
  clientSecret={clientSecret}
  embedded
  onPaymentCompleted={() => router.push("/success")}
/>
This is useful for embedding the deposit flow directly into a page layout.