Skip to main content
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 ("ios", "android", or "other"). Affects exchange deeplink generation. 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.