@daimo/sdk 1.0.0 → 1.0.2

package/dist/hooks/useSessionPolling.js

@@ -0,0 +1,61 @@
+import { isSessionActive } from "../common/legacy/session.js";
+import { useEffect, useState } from "react";
+import { useDaimoClient } from "./DaimoClientContext.js";
+import { createNavLogger } from "./navEvent.js";
+const POLL_INTERVAL_MS = 3000;
+/**
+ * Polls session status from the server while modal is open until terminal.
+ * Terminal = expired or completed.
+ */
+export function useSessionPolling(initialSession, isOpen) {
+    const client = useDaimoClient();
+    const logNavEvent = createNavLogger(client);
+    const [session, setSession] = useState(initialSession);
+    useEffect(() => {
+        if (session.status === "expired") {
+            logNavEvent(session.sessionId, {
+                nodeId: null,
+                nodeType: null,
+                action: "session_expired",
+            });
+        }
+        else if (session.status === "completed") {
+            logNavEvent(session.sessionId, {
+                nodeId: null,
+                nodeType: null,
+                action: "session_completed",
+            });
+        }
+        else if (session.status === "bounced") {
+            logNavEvent(session.sessionId, {
+                nodeId: null,
+                nodeType: null,
+                action: "session_bounced",
+            });
+        }
+    }, [session.status, session.sessionId]);
+    useEffect(() => {
+        const daAddr = session.receivers.evm.address;
+        if (!isOpen || !isSessionActive(session.status) || !daAddr)
+            return;
+        const poll = async () => {
+            try {
+                const updated = await client.pollSession({
+                    sessionId: session.sessionId,
+                    daAddr,
+                });
+                setSession((prev) => ({
+                    ...prev,
+                    status: updated.status,
+                }));
+            }
+            catch (error) {
+                console.error("failed to poll session:", error);
+            }
+        };
+        const interval = setInterval(poll, POLL_INTERVAL_MS);
+        return () => clearInterval(interval);
+    }, [isOpen, session]);
+    return { session, setSession };
+}
+//# sourceMappingURL=useSessionPolling.js.map

package/dist/hooks/useSessionPolling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSessionPolling.js","sourceRoot":"","sources":["../../src/hooks/useSessionPolling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAE9B;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAC/B,cAA4B,EAC5B,MAAe;IAEf,MAAM,MAAM,GAAG,cAAc,EAAE,CAAC;IAChC,MAAM,WAAW,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IAE5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YACjC,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE;gBAC7B,MAAM,EAAE,IAAI;gBACZ,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,iBAAiB;aAC1B,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,OAAO,CAAC,MAAM,KAAK,WAAW,EAAE,CAAC;YAC1C,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE;gBAC7B,MAAM,EAAE,IAAI;gBACZ,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,mBAAmB;aAC5B,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YACxC,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE;gBAC7B,MAAM,EAAE,IAAI;gBACZ,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,iBAAiB;aAC1B,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC;QAC7C,IAAI,CAAC,MAAM,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEnE,MAAM,IAAI,GAAG,KAAK,IAAI,EAAE;YACtB,IAAI,CAAC;gBACH,MAAM,OAAO,GAAG,MAAM,MAAM,CAAC,WAAW,CAAC;oBACvC,SAAS,EAAE,OAAO,CAAC,SAAS;oBAC5B,MAAM;iBACP,CAAC,CAAC;gBACH,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACpB,GAAG,IAAI;oBACP,MAAM,EAAE,OAAO,CAAC,MAAM;iBACvB,CAAC,CAAC,CAAC;YACN,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;YAClD,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC;QACrD,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;AACjC,CAAC"}

package/dist/web/ChooseOptionPage.d.ts

@@ -0,0 +1,9 @@
+import { NavNodeChooseOption } from "../common/legacy/session.js";
+type ChooseOptionPageProps = {
+    node: NavNodeChooseOption;
+    onNavigate: (nodeId: string) => void;
+    onBack: (() => void) | null;
+};
+export declare function ChooseOptionPage({ node, onNavigate, onBack, }: ChooseOptionPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChooseOptionPage.d.ts.map

package/dist/web/ChooseOptionPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChooseOptionPage.d.ts","sourceRoot":"","sources":["../../src/web/ChooseOptionPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAK3E,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,mBAAmB,CAAC;IAC1B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;CAC7B,CAAC;AAQF,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,UAAU,EACV,MAAM,GACP,EAAE,qBAAqB,2CAqDvB"}

package/dist/web/ChooseOptionPage.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from "../hooks/locale.js";
+import { PageHeader, resolveIconUrl } from "./shared.js";
+/** Max visible rows before scrolling */
+const MAX_VISIBLE_ROWS = 4;
+/** Row height (h-16 = 64px) + gap (gap-3 = 12px) */
+const ROW_HEIGHT = 64;
+const ROW_GAP = 12;
+export function ChooseOptionPage({ node, onNavigate, onBack, }) {
+    const useGridLayout = node.layout === "grid";
+    const isRootPage = onBack === null;
+    // Calculate max height for list layout (4 rows + 3 gaps)
+    const needsScroll = !useGridLayout && node.options.length > MAX_VISIBLE_ROWS;
+    const maxListHeight = MAX_VISIBLE_ROWS * ROW_HEIGHT + (MAX_VISIBLE_ROWS - 1) * ROW_GAP;
+    return (_jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [_jsx(PageHeader, { title: node.title, onBack: onBack }), useGridLayout ? (_jsx("div", { className: "flex-1 overflow-y-auto scroll-fade px-6 pb-4", children: _jsx("div", { className: "grid grid-cols-4 gap-2", children: node.options.map((option) => (_jsx(GridOptionCell, { option: option, onClick: () => onNavigate(option.id) }, option.id))) }) })) : (_jsx("div", { className: "px-6 pb-4", children: _jsx("div", { className: `flex flex-col gap-3 ${needsScroll ? "overflow-y-auto scroll-fade" : ""}`, style: needsScroll ? { maxHeight: maxListHeight } : undefined, children: node.options.map((option) => (_jsx(OptionRow, { option: option, onClick: () => onNavigate(option.id) }, option.id))) }) })), isRootPage && (_jsx("div", { className: "py-4 text-center", children: _jsx("span", { className: "text-sm text-[var(--daimo-text-muted)]", children: t.poweredByDaimo }) }))] }));
+}
+function GridOptionCell({ option, onClick, }) {
+    const icons = getOptionIcons(option);
+    const label = option.label ?? option.title;
+    return (_jsxs("button", { onClick: onClick, className: "flex flex-col items-center gap-2 p-1 rounded-[var(--daimo-radius-md)] hover:[@media(hover:hover)]:bg-[var(--daimo-surface-secondary)] transition-colors min-w-0", children: [icons.length > 0 && (_jsx("img", { src: resolveIconUrl(icons[0]), alt: label, className: "w-full aspect-square max-w-16 object-contain rounded-[25%]" })), _jsx("span", { className: "text-xs font-medium text-[var(--daimo-text)] text-center leading-tight", children: label })] }));
+}
+function OptionRow({ option, onClick, }) {
+    const label = option.label ?? option.title;
+    return (_jsxs("button", { onClick: onClick, className: "w-full h-16 shrink-0 flex items-center justify-between px-5 rounded-[var(--daimo-radius-lg)] bg-[var(--daimo-surface-secondary)] hover:[@media(hover:hover)]:bg-[var(--daimo-surface-hover)] transition-colors text-left", children: [_jsx("span", { className: "text-[var(--daimo-text)] font-semibold", children: label }), _jsx(OptionIcons, { option: option })] }));
+}
+/** Get icons array for an option: explicit icons[], single icon, or empty */
+function getOptionIcons(option) {
+    if (option.icons && option.icons.length > 0) {
+        return option.icons;
+    }
+    if ("icon" in option && option.icon) {
+        return [option.icon];
+    }
+    return [];
+}
+/** Render icons for a list row option */
+function OptionIcons({ option }) {
+    const icons = getOptionIcons(option);
+    if (icons.length === 0)
+        return null;
+    // 2x2 grid for 4+ icons
+    if (icons.length >= 4) {
+        return (_jsx("div", { className: "w-8 h-8 grid grid-cols-2 gap-0.5", children: icons.slice(0, 4).map((icon, i) => (_jsx("img", { src: resolveIconUrl(icon), alt: "", className: "w-[15px] h-[15px] object-contain rounded-[25%]" }, i))) }));
+    }
+    // Stacked overlapped icons for <4
+    return (_jsx("div", { className: "flex items-center", children: icons.map((icon, i) => (_jsx("img", { src: resolveIconUrl(icon), alt: "", className: "w-8 h-8 object-contain rounded-[25%] relative", style: {
+                marginLeft: i > 0 ? -10 : 0,
+                zIndex: icons.length - i,
+            } }, i))) }));
+}
+//# sourceMappingURL=ChooseOptionPage.js.map

package/dist/web/ChooseOptionPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChooseOptionPage.js","sourceRoot":"","sources":["../../src/web/ChooseOptionPage.tsx"],"names":[],"mappings":"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"}

package/dist/web/ConfirmationPage.d.ts

@@ -0,0 +1,32 @@
+import { SessionStatus } from "../common/legacy/session.js";
+type ConfirmationPageProps = {
+    sessionId: string;
+    /** Session state - drives confirmation status */
+    sessionState?: SessionStatus;
+    /** Source token chain ID (what user is paying with) */
+    sourceChainId?: number;
+    /** Source token symbol (what user is paying with) */
+    sourceTokenSymbol?: string;
+    /** Source token logo URI */
+    sourceTokenLogoURI?: string;
+    /** Amount in USD being sent */
+    sourceAmountUsd?: number;
+    /** Pending tx hash - set after wallet confirms but before onchain detection */
+    pendingTxHash?: string;
+    returnUrl?: string;
+    /** Secondary message to show when done (only for session page, not modal) */
+    returnLabel?: string;
+    /** Back handler - only shown during "confirming" state */
+    onBack?: () => void;
+};
+/**
+ * Confirmation page showing payment progress.
+ * - confirming: Wallet popup open, show source token icon
+ * - waiting: Tx submitted, show source token icon
+ * - processing: Fulfillment STARTED, show spinner
+ * - done: Fulfillment COMPLETED, show green checkmark
+ * - refunding: Payment bounced, show spinner (future use)
+ */
+export declare function ConfirmationPage({ sessionId, sessionState, sourceChainId, sourceTokenSymbol, sourceTokenLogoURI, sourceAmountUsd, pendingTxHash, returnUrl, returnLabel, onBack, }: ConfirmationPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ConfirmationPage.d.ts.map

package/dist/web/ConfirmationPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationPage.d.ts","sourceRoot":"","sources":["../../src/web/ConfirmationPage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAkB5D,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+EAA+E;IAC/E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,SAAS,EACT,WAAW,EACX,MAAM,GACP,EAAE,qBAAqB,2CAyFvB"}

package/dist/web/ConfirmationPage.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getChainName } from "../common/chain.js";
+import { useEffect, useState } from "react";
+import { ConfirmationSpinner } from "./ConfirmationSpinner.js";
+import { t } from "../hooks/locale.js";
+import { PageHeader, ShowReceiptButton, TokenIconWithChainBadge, } from "./shared.js";
+/**
+ * Confirmation page showing payment progress.
+ * - confirming: Wallet popup open, show source token icon
+ * - waiting: Tx submitted, show source token icon
+ * - processing: Fulfillment STARTED, show spinner
+ * - done: Fulfillment COMPLETED, show green checkmark
+ * - refunding: Payment bounced, show spinner (future use)
+ */
+export function ConfirmationPage({ sessionId, sessionState, sourceChainId, sourceTokenSymbol, sourceTokenLogoURI, sourceAmountUsd, pendingTxHash, returnUrl, returnLabel, onBack, }) {
+    const status = getConfirmationStatus(pendingTxHash, sessionState);
+    // For processing status: show "Payment received" then change after 2s
+    const [processingMessage, setProcessingMessage] = useState(t.paymentReceived);
+    useEffect(() => {
+        if (status === "processing") {
+            const timer = setTimeout(() => {
+                setProcessingMessage(t.processingYourPayment);
+            }, 2000);
+            return () => clearTimeout(timer);
+        }
+    }, [status]);
+    // Show source token info (amount, chain) when we have basic data
+    const showSourceInfo = (status === "confirming" || status === "waiting") &&
+        sourceChainId != null &&
+        sourceTokenSymbol != null;
+    // Show token icon only when we also have a logo URI
+    const showSourceIcon = showSourceInfo && sourceTokenLogoURI != null;
+    // Show back button only during confirming (before tx submitted)
+    const showBack = status === "confirming" && onBack != null;
+    // Get display title based on status
+    const displayTitle = getDisplayTitle(status, processingMessage);
+    // Chain name for display
+    const chainName = sourceChainId ? getChainName(sourceChainId) : "";
+    return (_jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [_jsx(PageHeader, { onBack: showBack ? onBack : undefined, title: displayTitle }), _jsxs("div", { className: "flex-1 flex flex-col items-center justify-center p-6 gap-4", children: [showSourceIcon && (_jsx(TokenIconWithChainBadge, { chainId: sourceChainId, symbol: sourceTokenSymbol, logoURI: sourceTokenLogoURI, size: "lg" })), status !== "confirming" && status !== "waiting" && (_jsx(ConfirmationSpinner, { done: status === "done" })), showSourceInfo && (_jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-3xl font-semibold text-[var(--daimo-text)] tabular-nums", children: sourceAmountUsd != null
+                                    ? `$${sourceAmountUsd.toFixed(2)} ${sourceTokenSymbol}`
+                                    : sourceTokenSymbol }), _jsxs("p", { className: "text-lg text-[var(--daimo-text-secondary)]", children: [t.onChain, " ", chainName] })] })), status === "done" && returnUrl && (_jsx("a", { href: returnUrl, className: "w-full max-w-xs min-h-[44px] py-4 px-6 rounded-[var(--daimo-radius-lg)] font-semibold bg-[var(--daimo-surface-secondary)] text-[var(--daimo-text)] hover:[@media(hover:hover)]:bg-[var(--daimo-surface-hover)] active:scale-[0.97] touch-action-manipulation transition-[background-color,transform] duration-150 ease-out text-center flex items-center justify-center", children: t.returnToApp })), status === "done" && !returnUrl && returnLabel && (_jsx("p", { className: "text-center text-[var(--daimo-text-secondary)] px-8 whitespace-pre-line", children: returnLabel })), (status === "waiting" ||
+                        status === "processing" ||
+                        status === "done") && _jsx(ShowReceiptButton, { sessionId: sessionId })] })] }));
+}
+/** Derive UI status from session state and pending tx hash */
+function getConfirmationStatus(pendingTxHash, sessionState) {
+    if (sessionState === "processing")
+        return "processing";
+    if (sessionState === "completed")
+        return "done";
+    if (sessionState === "bounced")
+        return "refunding";
+    if (pendingTxHash)
+        return "waiting";
+    return "confirming";
+}
+/** Get display title for status */
+function getDisplayTitle(status, processingMessage) {
+    switch (status) {
+        case "confirming":
+            return t.confirmYourPayment;
+        case "waiting":
+            return t.waitingForYourPayment;
+        case "processing":
+            return processingMessage;
+        case "done":
+            return t.paymentCompleted;
+        case "refunding":
+            return t.refundingYourPayment;
+    }
+}
+//# sourceMappingURL=ConfirmationPage.js.map

package/dist/web/ConfirmationPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationPage.js","sourceRoot":"","sources":["../../src/web/ConfirmationPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AACvC,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,aAAa,CAAC;AA8BrB;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,SAAS,EACT,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,SAAS,EACT,WAAW,EACX,MAAM,GACgB;IACtB,MAAM,MAAM,GAAG,qBAAqB,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;IAElE,sEAAsE;IACtE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;IAC9E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,KAAK,YAAY,EAAE,CAAC;YAC5B,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5B,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;YAChD,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,iEAAiE;IACjE,MAAM,cAAc,GAClB,CAAC,MAAM,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,CAAC;QACjD,aAAa,IAAI,IAAI;QACrB,iBAAiB,IAAI,IAAI,CAAC;IAE5B,oDAAoD;IACpD,MAAM,cAAc,GAAG,cAAc,IAAI,kBAAkB,IAAI,IAAI,CAAC;IAEpE,gEAAgE;IAChE,MAAM,QAAQ,GAAG,MAAM,KAAK,YAAY,IAAI,MAAM,IAAI,IAAI,CAAC;IAE3D,oCAAoC;IACpC,MAAM,YAAY,GAAG,eAAe,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAEhE,yBAAyB;IACzB,MAAM,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnE,OAAO,CACL,eAAK,SAAS,EAAC,8BAA8B,aAC3C,KAAC,UAAU,IAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,YAAY,GAAI,EAC1E,eAAK,SAAS,EAAC,4DAA4D,aAExE,cAAc,IAAI,CACjB,KAAC,uBAAuB,IACtB,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,kBAAkB,EAC3B,IAAI,EAAC,IAAI,GACT,CACH,EAGA,MAAM,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,IAAI,CAClD,KAAC,mBAAmB,IAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAI,CACjD,EAGA,cAAc,IAAI,CACjB,eAAK,SAAS,EAAC,aAAa,aAE1B,YAAG,SAAS,EAAC,8DAA8D,YACxE,eAAe,IAAI,IAAI;oCACtB,CAAC,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,iBAAiB,EAAE;oCACvD,CAAC,CAAC,iBAAiB,GACnB,EACJ,aAAG,SAAS,EAAC,4CAA4C,aACtD,CAAC,CAAC,OAAO,OAAG,SAAS,IACpB,IACA,CACP,EAGA,MAAM,KAAK,MAAM,IAAI,SAAS,IAAI,CACjC,YACE,IAAI,EAAE,SAAS,EACf,SAAS,EAAC,yWAAyW,YAElX,CAAC,CAAC,WAAW,GACZ,CACL,EAEA,MAAM,KAAK,MAAM,IAAI,CAAC,SAAS,IAAI,WAAW,IAAI,CACjD,YAAG,SAAS,EAAC,yEAAyE,YACnF,WAAW,GACV,CACL,EAGA,CAAC,MAAM,KAAK,SAAS;wBACpB,MAAM,KAAK,YAAY;wBACvB,MAAM,KAAK,MAAM,CAAC,IAAI,KAAC,iBAAiB,IAAC,SAAS,EAAE,SAAS,GAAI,IAC/D,IACF,CACP,CAAC;AACJ,CAAC;AAED,8DAA8D;AAC9D,SAAS,qBAAqB,CAC5B,aAAiC,EACjC,YAAuC;IAEvC,IAAI,YAAY,KAAK,YAAY;QAAE,OAAO,YAAY,CAAC;IACvD,IAAI,YAAY,KAAK,WAAW;QAAE,OAAO,MAAM,CAAC;IAChD,IAAI,YAAY,KAAK,SAAS;QAAE,OAAO,WAAW,CAAC;IACnD,IAAI,aAAa;QAAE,OAAO,SAAS,CAAC;IACpC,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,mCAAmC;AACnC,SAAS,eAAe,CACtB,MAA0B,EAC1B,iBAAyB;IAEzB,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,YAAY;YACf,OAAO,CAAC,CAAC,kBAAkB,CAAC;QAC9B,KAAK,SAAS;YACZ,OAAO,CAAC,CAAC,qBAAqB,CAAC;QACjC,KAAK,YAAY;YACf,OAAO,iBAAiB,CAAC;QAC3B,KAAK,MAAM;YACT,OAAO,CAAC,CAAC,gBAAgB,CAAC;QAC5B,KAAK,WAAW;YACd,OAAO,CAAC,CAAC,oBAAoB,CAAC;IAClC,CAAC;AACH,CAAC"}

package/dist/web/ConfirmationSpinner.d.ts

@@ -0,0 +1,7 @@
+type ConfirmationSpinnerProps = {
+    done: boolean;
+};
+/** Spinner → checkmark transition for payment confirmation. */
+export declare function ConfirmationSpinner({ done }: ConfirmationSpinnerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ConfirmationSpinner.d.ts.map

package/dist/web/ConfirmationSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationSpinner.d.ts","sourceRoot":"","sources":["../../src/web/ConfirmationSpinner.tsx"],"names":[],"mappings":"AAAA,KAAK,wBAAwB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,+DAA+D;AAC/D,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,EAAE,wBAAwB,2CAyBrE"}

package/dist/web/ConfirmationSpinner.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Spinner → checkmark transition for payment confirmation. */
+export function ConfirmationSpinner({ done }) {
+    return (_jsx("div", { className: "relative w-[100px] h-[100px]", children: _jsxs("div", { className: "absolute inset-[6px] rounded-full flex items-center justify-center overflow-hidden", style: { backgroundColor: "var(--daimo-bg)" }, children: [_jsx(LoadingCircle, { className: `absolute w-full h-full transition-opacity duration-200 ${done ? "opacity-0" : "opacity-100"}`, spinning: !done }), _jsx(TickIcon, { className: `absolute w-full h-full transition-[opacity,transform] duration-200 ${done ? "opacity-100 scale-100" : "opacity-0 scale-50"}`, style: { color: "var(--daimo-checkmark)" } })] }) }));
+}
+function LoadingCircle({ className, spinning, }) {
+    return (_jsxs("svg", { className: className, style: {
+            color: "var(--daimo-accent)",
+            animation: spinning ? "spin 400ms linear infinite" : "none",
+        }, viewBox: "0 0 100 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [_jsx("style", { children: `
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` }), _jsx("circle", { cx: "50", cy: "50", r: "50", fill: "currentColor", fillOpacity: "0.15" }), _jsx("circle", { cx: "50", cy: "50", r: "30", stroke: "currentColor", strokeOpacity: "0.4", strokeWidth: "16" }), _jsx("path", { d: "M50 20V20C66.5685 20 80 33.4315 80 50V50", stroke: "currentColor", strokeWidth: "16", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+function TickIcon({ className, style, }) {
+    return (_jsx("svg", { className: className, style: style, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18ZM13.274 7.13324C13.6237 6.70579 13.5607 6.07577 13.1332 5.72604C12.7058 5.37632 12.0758 5.43932 11.726 5.86676L7.92576 10.5115L6.20711 8.79289C5.81658 8.40237 5.18342 8.40237 4.79289 8.79289C4.40237 9.18342 4.40237 9.81658 4.79289 10.2071L7.29289 12.7071C7.49267 12.9069 7.76764 13.0128 8.04981 12.9988C8.33199 12.9847 8.59505 12.8519 8.77396 12.6332L13.274 7.13324Z", fill: "currentColor" }) }));
+}
+//# sourceMappingURL=ConfirmationSpinner.js.map

package/dist/web/ConfirmationSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationSpinner.js","sourceRoot":"","sources":["../../src/web/ConfirmationSpinner.tsx"],"names":[],"mappings":";AAIA,+DAA+D;AAC/D,MAAM,UAAU,mBAAmB,CAAC,EAAE,IAAI,EAA4B;IACpE,OAAO,CACL,cAAK,SAAS,EAAC,8BAA8B,YAC3C,eACE,SAAS,EAAC,oFAAoF,EAC9F,KAAK,EAAE,EAAE,eAAe,EAAE,iBAAiB,EAAE,aAG7C,KAAC,aAAa,IACZ,SAAS,EAAE,0DACT,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aACvB,EAAE,EACF,QAAQ,EAAE,CAAC,IAAI,GACf,EAGF,KAAC,QAAQ,IACP,SAAS,EAAE,sEACT,IAAI,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,oBACnC,EAAE,EACF,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,GAC1C,IACE,GACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,GAIT;IACC,OAAO,CACL,eACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,KAAK,EAAE,qBAAqB;YAC5B,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,MAAM;SAC5D,EACD,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,aAElB,0BAAQ;;;;;OAKP,GAAS,EACV,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,WAAW,EAAC,MAAM,GAAG,EACxE,iBACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,KAAK,EACnB,WAAW,EAAC,IAAI,GAChB,EACF,eACE,CAAC,EAAC,0CAA0C,EAC5C,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,IAAI,EAChB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,IACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,GAIN;IACC,OAAO,CACL,cACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,YAElB,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,4dAA4d,EAC9d,IAAI,EAAC,cAAc,GACnB,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/web/DaimoModal.d.ts

@@ -0,0 +1,15 @@
+import type { ModalSession } from "../common/legacy/session.js";
+import { type DaimoModalEventHandlers } from "../hooks/types.js";
+export type DaimoModalProps = DaimoModalEventHandlers & {
+    session: ModalSession | null;
+    defaultOpen?: boolean;
+    connectedWalletOnly?: boolean;
+    embedded?: boolean;
+    animate?: boolean;
+    maxHeight?: number;
+    platform?: "ios" | "android" | "other";
+    returnUrl?: string;
+    returnLabel?: string;
+};
+export declare function DaimoModal(props: DaimoModalProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=DaimoModal.d.ts.map

package/dist/web/DaimoModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DaimoModal.d.ts","sourceRoot":"","sources":["../../src/web/DaimoModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EAQb,MAAM,6BAA6B,CAAC;AAWrC,OAAO,EACL,KAAK,uBAAuB,EAG7B,MAAM,mBAAmB,CAAC;AAmB3B,MAAM,MAAM,eAAe,GAAG,uBAAuB,GAAG;IACtD,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA4BF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,kDA6BhD"}

package/dist/web/DaimoModal.js

@@ -0,0 +1,283 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tron } from "../common/chain.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { formatUserError } from "../hooks/formatUserError.js";
+import { t } from "../hooks/locale.js";
+import { createNavLogger } from "../hooks/navEvent.js";
+import { usePaymentCallbacks } from "../hooks/usePaymentCallbacks.js";
+import { useSessionNav } from "../hooks/useSessionNav.js";
+import { useSessionPolling } from "../hooks/useSessionPolling.js";
+import { useDaimoClient } from "../hooks/DaimoClientContext.js";
+import { findNode, } from "../hooks/types.js";
+import { PrimaryButton } from "./buttons.js";
+import { ChooseOptionPage } from "./ChooseOptionPage.js";
+import { ConfirmationPage } from "./ConfirmationPage.js";
+import { EmbeddedContainer, ModalContainer } from "./containers.js";
+import { DeeplinkPage } from "./DeeplinkPage.js";
+import { ExchangePage } from "./ExchangePage.js";
+import { ExpiredPage } from "./ExpiredPage.js";
+import { SelectAmountPage } from "./SelectAmountPage.js";
+import { SelectTokenPage } from "./SelectTokenPage.js";
+import { ContactSupportButton, ErrorMessage as SharedErrorMessage, } from "./shared.js";
+import { useWalletFlow, isUserRejection } from "./useWalletFlow.js";
+import { WaitingDepositAddressPage } from "./WaitingDepositAddressPage.js";
+import { WalletAmountPage } from "./WalletAmountPage.js";
+function useModalCloseHandler(sessionId, getNodeCtx, isOpen, setIsOpen, onClose) {
+    const client = useDaimoClient();
+    const logNavEvent = createNavLogger(client);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        logNavEvent(sessionId, { ...getNodeCtx(), action: "nav_open" });
+    }, [isOpen, sessionId, getNodeCtx]);
+    const handleClose = useCallback(() => {
+        logNavEvent(sessionId, { ...getNodeCtx(), action: "nav_close" });
+        setIsOpen(false);
+        onClose?.();
+    }, [sessionId, getNodeCtx, setIsOpen, onClose]);
+    return { handleClose };
+}
+export function DaimoModal(props) {
+    const { session, embedded = false, animate = true, defaultOpen = true, maxHeight, } = props;
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    if (!session) {
+        if (!isOpen)
+            return null;
+        const skeleton = _jsx(SkeletonContent, {});
+        if (embedded)
+            return _jsx(EmbeddedContainer, { children: skeleton });
+        return (_jsx(ModalContainer, { animate: animate, maxHeight: maxHeight, children: skeleton }));
+    }
+    return (_jsx(DaimoModalInner, { ...props, session: session, isOpen: isOpen, setIsOpen: setIsOpen }));
+}
+const CONNECTED_WALLET_NAV = [
+    { type: "ConnectedWallet", id: "ConnectedWallet", title: "Connected Wallet" },
+];
+function DaimoModalInner({ session: initialSession, isOpen, setIsOpen, connectedWalletOnly = false, embedded = false, animate = true, maxHeight, platform, returnUrl, returnLabel, onPaymentStarted, onPaymentCompleted, onOpen, onClose, }) {
+    const effectiveInitial = connectedWalletOnly
+        ? { ...initialSession, navTree: CONNECTED_WALLET_NAV }
+        : initialSession;
+    const { session, setSession } = useSessionPolling(effectiveInitial, isOpen);
+    const nav = useSessionNav(session, setSession, platform);
+    const hasConnectedWallet = session.navTree.some((n) => n.type === "ConnectedWallet");
+    const walletFlow = useWalletFlow(session.sessionId, session.receivers.evm.address, hasConnectedWallet);
+    const autoNavRef = useRef(null);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        if (nav.topEntry &&
+            nav.topEntry.type !== "choose-option" &&
+            nav.topEntry.type !== "deeplink") {
+            return;
+        }
+        const currentNodeId = nav.topEntry?.nodeId;
+        let node = currentNodeId
+            ? findNode(currentNodeId, session.navTree)
+            : (session.navTree[0] ?? null);
+        let targetId = null;
+        while (node?.type === "ChooseOption") {
+            const chooseNode = node;
+            if (chooseNode.options?.length !== 1)
+                break;
+            targetId = chooseNode.options[0].id;
+            node = findNode(targetId, session.navTree);
+        }
+        if (!targetId && node && node.type !== "ChooseOption") {
+            targetId = node.id;
+        }
+        if (targetId && autoNavRef.current !== targetId) {
+            autoNavRef.current = targetId;
+            nav.handleNavigate(targetId, { autoNav: true });
+        }
+    }, [isOpen, nav, session.navTree]);
+    useEffect(() => {
+        if (nav.topEntry?.type !== "wallet-connect")
+            return;
+        if (walletFlow.isConnecting || !walletFlow.wallet)
+            return;
+        nav.handleWalletConnected();
+    }, [nav.topEntry, walletFlow.wallet, walletFlow.isConnecting, nav]);
+    const sendingRef = useRef(null);
+    useEffect(() => {
+        if (nav.topEntry?.type !== "wallet-sending")
+            return;
+        if (nav.topEntry.txHash || nav.topEntry.error)
+            return;
+        const sendKey = `${nav.topEntry.nodeId}-${nav.topEntry.amountUsd}`;
+        if (sendingRef.current === sendKey)
+            return;
+        sendingRef.current = sendKey;
+        const { token, amountUsd } = nav.topEntry;
+        walletFlow
+            .sendTransaction(token, amountUsd)
+            .then(({ txHash }) => {
+            nav.handleWalletTxResult(txHash);
+            sendingRef.current = null;
+        })
+            .catch((err) => {
+            sendingRef.current = null;
+            if (isUserRejection(err)) {
+                nav.handleBack();
+                return;
+            }
+            nav.handleWalletTxResult(undefined, formatUserError(err, t.transactionFailed));
+        });
+    }, [nav, walletFlow]);
+    const { handleClose } = useModalCloseHandler(session.sessionId, nav.getNodeCtx, isOpen, setIsOpen, onClose);
+    usePaymentCallbacks(session, isOpen, {
+        onOpen,
+        onPaymentStarted,
+        onPaymentCompleted,
+    });
+    if (!isOpen)
+        return null;
+    const isTerminal = session.status === "expired" ||
+        session.status === "completed" ||
+        session.status === "bounced";
+    const pageKey = isTerminal
+        ? session.status
+        : `${nav.topEntry?.type ?? "root"}-${nav.topEntry?.nodeId ?? ""}`;
+    const renderInContainer = (content, showFooterSpacer = true) => {
+        const page = (_jsx("div", { className: "daimo-page-enter flex-1 min-h-0 flex flex-col", children: content }, pageKey));
+        if (embedded) {
+            return (_jsx(EmbeddedContainer, { showFooterSpacer: showFooterSpacer, children: page }));
+        }
+        return (_jsx(ModalContainer, { showFooterSpacer: showFooterSpacer, onClose: handleClose, animate: animate, pageKey: pageKey, maxHeight: maxHeight, children: page }));
+    };
+    if (session.status === "expired") {
+        return renderInContainer(_jsx(ExpiredPage, { onClose: handleClose }));
+    }
+    if (session.status === "processing" ||
+        session.status === "completed" ||
+        session.status === "bounced") {
+        return renderInContainer(_jsx(ConfirmationPage, { sessionId: session.sessionId, sessionState: session.status, returnUrl: returnUrl, returnLabel: returnLabel }));
+    }
+    const content = renderEntry(nav.topEntry, {
+        session,
+        canGoBack: nav.canGoBack,
+        onNavigate: nav.handleNavigate,
+        onBack: nav.handleBack,
+        onAmountContinue: nav.handleAmountContinue,
+        onRetry: nav.handleRetry,
+        onRefresh: nav.handleRefresh,
+        walletFlow,
+        onWalletSelectToken: nav.handleWalletSelectToken,
+        onWalletSending: nav.handleWalletSending,
+    });
+    const showFooterSpacer = !(!nav.topEntry ||
+        (nav.topEntry.type === "choose-option" && !nav.canGoBack));
+    return renderInContainer(content, showFooterSpacer);
+}
+function renderEntry(entry, ctx) {
+    if (!entry) {
+        const rootNode = ctx.session.navTree[0];
+        if (!rootNode)
+            return _jsx(LoadingMessage, {});
+        if (rootNode.type === "ChooseOption") {
+            return (_jsx(ChooseOptionPage, { node: rootNode, onNavigate: ctx.onNavigate, onBack: null }));
+        }
+        return null;
+    }
+    switch (entry.type) {
+        case "choose-option": {
+            const node = findNode(entry.nodeId, ctx.session.navTree);
+            if (!node)
+                return null;
+            return (_jsx(ChooseOptionPage, { node: node, onNavigate: ctx.onNavigate, onBack: ctx.canGoBack ? ctx.onBack : null }));
+        }
+        case "deeplink": {
+            const node = findNode(entry.nodeId, ctx.session.navTree);
+            if (!node)
+                return null;
+            return _jsx(DeeplinkPage, { node: node, onBack: ctx.canGoBack ? ctx.onBack : null });
+        }
+        case "select-amount":
+            return renderSelectAmount(entry, ctx);
+        case "waiting-deposit":
+            return renderWaitingDeposit(entry, ctx);
+        case "waiting-tron":
+            return renderWaitingTron(entry, ctx);
+        case "exchange-page":
+            return renderExchangePage(entry, ctx);
+        case "wallet-connect":
+            return renderWalletConnect(ctx);
+        case "wallet-select-token":
+            return renderWalletSelectToken(ctx);
+        case "wallet-select-amount":
+            return renderWalletSelectAmount(entry, ctx);
+        case "wallet-sending":
+            return renderWalletSending(entry, ctx);
+        default:
+            return null;
+    }
+}
+function renderSelectAmount(entry, ctx) {
+    const node = findNode(entry.nodeId, ctx.session.navTree);
+    if (!node)
+        return null;
+    if (entry.flowType === "deposit") {
+        const depositNode = node;
+        return (_jsx(SelectAmountPage, { node: depositNode, minimumUsd: depositNode.minimumUsd, maximumUsd: depositNode.maximumUsd, tokenSuffix: depositNode.tokenSuffix, chainId: depositNode.chainId, onBack: ctx.canGoBack ? ctx.onBack : undefined, onContinue: ctx.onAmountContinue }));
+    }
+    if (entry.flowType === "tron") {
+        const tronNode = node;
+        return (_jsx(SelectAmountPage, { node: { icon: tronNode.icon, title: tronNode.title }, minimumUsd: tronNode.minimumUsd, maximumUsd: tronNode.maximumUsd, tokenSuffix: "USDT", chainId: tron.chainId, onBack: ctx.canGoBack ? ctx.onBack : undefined, onContinue: ctx.onAmountContinue }));
+    }
+    if (entry.flowType === "exchange") {
+        const exchangeNode = node;
+        return (_jsx(SelectAmountPage, { node: { icon: exchangeNode.icon, title: exchangeNode.title }, minimumUsd: exchangeNode.minimumUsd, maximumUsd: exchangeNode.maximumUsd, onBack: ctx.canGoBack ? ctx.onBack : undefined, onContinue: ctx.onAmountContinue }));
+    }
+    return null;
+}
+function renderWaitingDeposit(entry, ctx) {
+    const node = findNode(entry.nodeId, ctx.session.navTree);
+    if (!node)
+        return null;
+    const selectedToken = node.tokenSuffix === "USDC" || node.tokenSuffix === "USDT" ? node.tokenSuffix : undefined;
+    return _jsx(WaitingDepositAddressPage, { node: node, amountUsd: entry.amountUsd, selectedToken: selectedToken, sessionId: ctx.session.sessionId, onBack: ctx.onBack, onRefresh: ctx.onRefresh });
+}
+function renderWaitingTron(entry, ctx) {
+    const node = findNode(entry.nodeId, ctx.session.navTree);
+    if (!node)
+        return null;
+    if (entry.error)
+        return _jsx(FlowErrorMessage, { error: entry.error, onBack: ctx.onBack, onRetry: ctx.onRetry });
+    return (_jsx(WaitingDepositAddressPage, { node: { type: "DepositAddress", id: entry.nodeId, title: node.title, address: entry.address ?? "", chainId: tron.chainId, icon: node.icon, minimumUsd: node.minimumUsd, maximumUsd: node.maximumUsd, expiresAt: entry.expiresAt ?? 0, tokenSuffix: "USDT" }, amountUsd: entry.amountUsd, selectedToken: "USDT", loading: !entry.address, sessionId: ctx.session.sessionId, onBack: ctx.onBack, onRefresh: ctx.onRetry }));
+}
+function renderExchangePage(entry, ctx) {
+    const node = findNode(entry.nodeId, ctx.session.navTree);
+    if (!node)
+        return null;
+    if (entry.error)
+        return _jsx(FlowErrorMessage, { error: entry.error, onBack: ctx.onBack, onRetry: ctx.onRetry });
+    return _jsx(ExchangePage, { node: node, exchangeUrl: entry.exchangeUrl, waitingMessage: entry.waitingMessage, isLoading: !entry.exchangeUrl, onBack: ctx.onBack });
+}
+function renderWalletConnect(ctx) {
+    const { walletFlow } = ctx;
+    if (walletFlow.isConnecting)
+        return _jsx(LoadingMessage, {});
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center flex-1 gap-6 p-6", children: [_jsx(PrimaryButton, { onClick: walletFlow.connect, children: t.connectWallet }), walletFlow.connectError && _jsx(SharedErrorMessage, { message: walletFlow.connectError }), _jsx(ContactSupportButton, { subject: "Wallet connection", info: { sessionId: ctx.session.sessionId, error: walletFlow.connectError ?? t.walletUnavailable } })] }));
+}
+function renderWalletSelectToken(ctx) {
+    return _jsx(SelectTokenPage, { options: ctx.walletFlow.balances, isLoading: ctx.walletFlow.isLoadingBalances, onSelect: ctx.onWalletSelectToken });
+}
+function renderWalletSelectAmount(entry, ctx) {
+    return _jsx(WalletAmountPage, { token: entry.token, onBack: ctx.onBack, onContinue: (amountUsd) => ctx.onWalletSending(entry.token, amountUsd) });
+}
+function renderWalletSending(entry, ctx) {
+    if (entry.error)
+        return _jsx(FlowErrorMessage, { error: entry.error, onBack: ctx.onBack, onRetry: ctx.onBack });
+    return (_jsx(ConfirmationPage, { sessionId: ctx.session.sessionId, sourceChainId: entry.token.balance.token.chainId, sourceTokenSymbol: entry.token.balance.token.symbol, sourceTokenLogoURI: entry.token.balance.token.logoURI, sourceAmountUsd: entry.amountUsd, pendingTxHash: entry.txHash, onBack: !entry.txHash ? ctx.onBack : undefined }));
+}
+function LoadingMessage() {
+    return (_jsx("div", { className: "flex items-center justify-center h-full text-[var(--daimo-text-muted)]", children: t.loading }));
+}
+function FlowErrorMessage({ error, onBack, onRetry }) {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-4 text-[var(--daimo-text-muted)]", children: [_jsx("p", { children: error }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { className: "px-4 py-2 rounded-lg bg-[var(--daimo-surface)] hover:bg-[var(--daimo-surface-hover)] transition-colors", onClick: onBack, children: t.back }), _jsx("button", { className: "px-4 py-2 rounded-lg bg-[var(--daimo-primary)] text-white hover:opacity-90 transition-opacity", onClick: onRetry, children: t.tryAgain })] })] }));
+}
+function SkeletonContent({ rowCount = 4 }) {
+    const skeletonBg = "var(--daimo-skeleton, #e5e7eb)";
+    const radiusLg = "var(--daimo-radius-lg, 16px)";
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "flex items-center justify-center p-6", children: _jsx("div", { className: "h-5 w-32 rounded animate-pulse", style: { backgroundColor: skeletonBg } }) }), _jsx("div", { className: "px-6 pb-4 flex flex-col gap-3", children: [...Array(rowCount)].map((_, i) => (_jsx("div", { className: "h-16 animate-pulse", style: { backgroundColor: skeletonBg, borderRadius: radiusLg, animationDelay: `${i * 100}ms` } }, i))) }), _jsx("div", { className: "py-4 text-center", children: _jsx("span", { className: "inline-block h-4 w-28 rounded animate-pulse", style: { backgroundColor: skeletonBg } }) })] }));
+}
+//# sourceMappingURL=DaimoModal.js.map