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-Session ID from your backend (required)
clientSecretstring-Client secret from your backend (required)
defaultOpenbooleantrueWhether the modal opens automatically on mount
connectedWalletOnlybooleanfalseSkip chain/method selection, use only the connected wallet
embeddedbooleanfalseRender inline instead of as an overlay
animatebooleantrueEnable open/close animations
maxHeightnumber-Maximum height of the modal in pixels
platform"ios" | "android" | "other"-Platform hint for wallet deeplinks
returnUrlstring-URL shown as a “return” link after completion
returnLabelstring-Label for the return link

​
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.