@rhinestone/deposit-modal 0.14.1 → 0.15.0

package/dist/{chunk-GZ4GQ5MC.mjs → chunk-7UQ6OUEE.mjs}

@@ -1,11 +1,16 @@
 import {
+  HistoryEntryButton,
+  HistoryOverlay,
   ProcessingStep,
   analyticsTargetProperties,
+  createHistoryAnalytics,
   deriveAccountSalt,
+  isHistoryEntryVisible,
   isSubmissionUncertain,
+  useHistoryPanel,
   useTokenPrices,
   warnRemovedProps
-} from "./chunk-XCTRKCNM.mjs";
+} from "./chunk-UCBUCX2W.mjs";
 import {
   AnalyticsSession,
   BodyHeader,
@@ -41,7 +46,7 @@ import {
   useStableRpcUrls,
   useTargetTokens,
   useWithdrawAnalyticsEmitter
-} from "./chunk-UX35GYLM.mjs";
+} from "./chunk-5VONFVQN.mjs";
 import {
   NATIVE_TOKEN_ADDRESS,
   getChainIcon,
@@ -50,13 +55,13 @@ import {
   getTokenDecimalsByAddress,
   getTokenSymbol,
   targetChainToCaip2
-} from "./chunk-VUATPOWJ.mjs";
+} from "./chunk-EAGMY3QE.mjs";
 
 // src/WithdrawModal.tsx
-import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
 
 // src/WithdrawFlow.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 
 // src/store/withdraw.ts
 import { createContext, createElement, useContext } from "react";
@@ -622,7 +627,7 @@ function WithdrawFormStep({
 WithdrawFormStep.displayName = "WithdrawFormStep";
 
 // src/components/steps/WithdrawReviewStep.tsx
-import { useState as useState2 } from "react";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function shortenAddress(addr) {
   return addr.length > 12 ? `${addr.slice(0, 6)}\u2026${addr.slice(-4)}` : addr;
@@ -639,11 +644,18 @@ function WithdrawReviewStep({
   registrationPending = false,
   registrationError = null,
   service,
+  onSubmittingChange,
   onConfirm,
   onError
 }) {
   const [isSubmitting, setIsSubmitting] = useState2(false);
   const [error, setError] = useState2(null);
+  const onSubmittingChangeRef = useRef2(onSubmittingChange);
+  onSubmittingChangeRef.current = onSubmittingChange;
+  useEffect2(() => {
+    onSubmittingChangeRef.current?.(isSubmitting);
+    return () => onSubmittingChangeRef.current?.(false);
+  }, [isSubmitting]);
   const sourceChainName = getChainName(sourceChain);
   const sourceChainIcon = getChainIcon(sourceChain);
   const targetSymbol = getTokenSymbol(targetToken, targetChain);
@@ -798,6 +810,23 @@ function createWithdrawAnalyticsController(emit) {
       opened = true;
       emit({ type: "withdraw_modal_open" });
     },
+    // Never deduplicated: the visit id and the per-visit dedupe belong to the
+    // history adapter, which knows what a visit is.
+    historyOpened(detail) {
+      send({ type: "withdraw_modal_history_open", ...detail });
+    },
+    historyRowViewed(detail) {
+      send({ type: "withdraw_modal_history_row_view", ...detail });
+    },
+    historyLoadMore(detail) {
+      send({ type: "withdraw_modal_history_load_more", ...detail });
+    },
+    historyFallbackOpened(detail) {
+      send({ type: "withdraw_modal_history_fallback_open", ...detail });
+    },
+    historyRecoveryStarted(detail) {
+      send({ type: "withdraw_modal_history_recovery_start", ...detail });
+    },
     openStep(nextStep) {
       controller.openSession();
       if (step === nextStep) return;
@@ -938,6 +967,8 @@ function WithdrawFlow({
   onSendTransaction,
   onStepChange,
   onClose,
+  onDestinationChange,
+  onSubmittingChange,
   onLifecycle,
   onError,
   debug
@@ -947,12 +978,12 @@ function WithdrawFlow({
   const analytics = useWithdrawAnalyticsController();
   const onLifecycleRef = useLatestRef(onLifecycle);
   const onErrorRef = useLatestRef(onError);
-  const isFlowActiveRef = useRef2(true);
-  const submitGenerationRef = useRef2(0);
-  const lastSubmitFailureRef = useRef2(
+  const isFlowActiveRef = useRef3(true);
+  const submitGenerationRef = useRef3(0);
+  const lastSubmitFailureRef = useRef3(
     null
   );
-  useEffect2(() => {
+  useEffect3(() => {
     isFlowActiveRef.current = true;
     return () => {
       isFlowActiveRef.current = false;
@@ -975,13 +1006,13 @@ function WithdrawFlow({
   const [recipientInput, setRecipientInput] = useState3(
     defaultRecipient ?? ""
   );
-  useEffect2(() => {
+  useEffect3(() => {
     setTargetChain(targetChainProp);
   }, [targetChainProp]);
-  useEffect2(() => {
+  useEffect3(() => {
     setTargetToken(targetTokenProp);
   }, [targetTokenProp]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (defaultRecipient) setRecipientInput(defaultRecipient);
   }, [defaultRecipient]);
   const storeApi = useWithdrawStoreApi();
@@ -993,7 +1024,22 @@ function WithdrawFlow({
     if (!recipientInput) return void 0;
     return ADDR_REGEX.test(recipientInput) ? recipientInput : void 0;
   }, [recipientInput]);
-  useEffect2(() => {
+  const onDestinationChangeRef = useLatestRef(onDestinationChange);
+  const reportedDestinationRef = useRef3(void 0);
+  useEffect3(() => {
+    if (reportedDestinationRef.current === recipientForRegistration) return;
+    const report = () => {
+      reportedDestinationRef.current = recipientForRegistration;
+      onDestinationChangeRef.current?.(recipientForRegistration);
+    };
+    if (!reportedDestinationRef.current) {
+      report();
+      return;
+    }
+    const timeout = setTimeout(report, REGISTRATION_DEBOUNCE_MS);
+    return () => clearTimeout(timeout);
+  }, [recipientForRegistration, onDestinationChangeRef]);
+  useEffect3(() => {
     if (!recipientForRegistration) return;
     const desiredTarget = {
       chain: targetChain,
@@ -1094,7 +1140,7 @@ function WithdrawFlow({
     recipient: reviewedRecipient
   } : null;
   const isReviewedTargetReady = registration.kind === "ready" && reviewedTarget !== null && targetsEqual(registration.registeredTarget, reviewedTarget);
-  useEffect2(() => {
+  useEffect3(() => {
     if (flowStep !== "review") return;
     if (registration.kind !== "ready" || isReviewedTargetReady) return;
     analytics.friction("registration_stale", "review");
@@ -1104,17 +1150,17 @@ function WithdrawFlow({
     analytics.abandon("back");
     storeApi.dispatch({ type: "review/back" });
   }, [analytics, storeApi]);
-  useEffect2(() => {
+  useEffect3(() => {
     onStepChangeRef.current?.(
       flowStep === "review" ? reviewBackHandler : void 0,
       flowStep
     );
   }, [flowStep, reviewBackHandler, onStepChangeRef]);
-  useEffect2(() => {
+  useEffect3(() => {
     analytics.openSession();
     analytics.openStep(analyticsStepForFlowStep(flowStep));
   }, [analytics, flowStep]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (registration.kind === "pending") {
       analytics.friction("registration_pending");
     } else if (registration.kind === "stale") {
@@ -1123,7 +1169,7 @@ function WithdrawFlow({
       analytics.failure("registration_failed", true);
     }
   }, [analytics, registration.kind]);
-  useEffect2(() => {
+  useEffect3(() => {
     logFlow("state:changed", {
       step: flowStep,
       sourceChain,
@@ -1341,7 +1387,7 @@ function WithdrawFlow({
     () => targetTokensFor(targetChain),
     [targetChain, targetTokensFor]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     if (targetTokenOptions.length === 0) return;
     const matches = targetTokenOptions.some(
       (option) => option.address.toLowerCase() === targetToken.toLowerCase()
@@ -1409,6 +1455,7 @@ function WithdrawFlow({
         service,
         registrationPending: registration.kind === "pending" || registration.kind === "stale" || !isReviewedTargetReady,
         registrationError: registration.kind === "failed" ? registration.error : null,
+        onSubmittingChange,
         onConfirm: handleReviewConfirm,
         onError: handleError
       }
@@ -1515,6 +1562,7 @@ function WithdrawModal({
   onError,
   enableAnalyticsIngest,
   analyticsIngestUrl,
+  signRecovery,
   debug,
   // Every prop 0.9.0 removed lands here, since none of them is named above.
   // `uiConfig` is destructured, so its removed nested key isn't scanned — that
@@ -1526,16 +1574,21 @@ function WithdrawModal({
 }) {
   warnRemovedProps("WithdrawModal", removedProps);
   checkBackendUrl("WithdrawModal", backendUrl);
-  const modalRef = useRef3(null);
+  const modalRef = useRef4(null);
   const onReadyRef = useLatestRef(onReady);
-  const analyticsControllerRef = useRef3(
+  const analyticsControllerRef = useRef4(
     null
   );
-  const previousOpenRef = useRef3(isOpen);
+  const analyticsSessionIdRef = useRef4(null);
+  const previousOpenRef = useRef4(isOpen);
   const [backHandler, setBackHandler] = useState4(
     void 0
   );
   const [screen, setScreen] = useState4("form");
+  const [submitting, setSubmitting] = useState4(false);
+  const [historyRecipient, setHistoryRecipient] = useState4(
+    recipient
+  );
   const onUiStateRef = useLatestRef(onUiState);
   const targetChain = getChainId(targetChainProp ?? sourceChainProp);
   const sourceChain = getChainId(sourceChainProp);
@@ -1544,9 +1597,30 @@ function WithdrawModal({
     () => createDepositService(backendUrl, { debug, debugScope: "service:withdraw" }),
     [backendUrl, debug]
   );
+  const historyAnalytics = useMemo4(
+    () => createHistoryAnalytics({
+      modal: "withdraw",
+      controllerRef: analyticsControllerRef,
+      sessionIdRef: analyticsSessionIdRef
+    }),
+    []
+  );
+  const history = useHistoryPanel({
+    isOpen,
+    recipient: historyRecipient,
+    service,
+    canRecover: Boolean(signRecovery),
+    analytics: historyAnalytics
+  });
+  const { markStale: markHistoryStale, recoverySubmitting } = history;
+  const historyButtonVisible = isHistoryEntryVisible({
+    screen,
+    submitting,
+    settled: false
+  });
   const store = useMemo4(() => createWithdrawStore(), []);
   const onErrorRef = useLatestRef(onError);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isOpen && typeof onSendTransaction !== "function") {
       onErrorRef.current?.({
         message: "WithdrawModal requires an `onSendTransaction` function.",
@@ -1561,12 +1635,13 @@ function WithdrawModal({
   }, [isOpen, onSendTransaction, onErrorRef]);
   const closeWithSource = useCallback3(
     (source) => {
+      if (submitting || recoverySubmitting) return;
       const analytics = analyticsControllerRef.current;
       analytics?.abandon("modal_close");
       analytics?.close(source);
       onClose();
     },
-    [onClose]
+    [onClose, submitting, recoverySubmitting]
   );
   const handleModalDismiss = useCallback3(
     (reason) => {
@@ -1576,7 +1651,7 @@ function WithdrawModal({
     },
     [closeWithSource]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (previousOpenRef.current && !isOpen) {
       const analytics = analyticsControllerRef.current;
       analytics?.abandon("modal_close");
@@ -1584,31 +1659,44 @@ function WithdrawModal({
     }
     previousOpenRef.current = isOpen;
   }, [isOpen]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isOpen || !modalRef.current) return;
     return applyTheme(modalRef.current, theme);
   }, [isOpen, theme]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isOpen) {
       onReadyRef.current?.();
     }
   }, [isOpen, onReadyRef]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isOpen) {
       store.dispatch({ type: "modal/reset" });
+      setHistoryRecipient(recipient);
     }
-  }, [isOpen, store]);
+  }, [isOpen, store, recipient]);
   const handleStepChange = useCallback3((onBack, next) => {
     setBackHandler(() => onBack);
     if (next) setScreen(next);
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     onUiStateRef.current?.({
       screen,
       back: backHandler,
-      submitting: false
+      // A transfer or a recovery in flight is a submission whose outcome is
+      // unknown, so a native host's dismissal lock has to hold through it.
+      submitting: submitting || recoverySubmitting
     });
-  }, [screen, backHandler, onUiStateRef]);
+  }, [screen, backHandler, submitting, recoverySubmitting, onUiStateRef]);
+  const onLifecycleRef = useLatestRef(onLifecycle);
+  const handleLifecycle = useCallback3(
+    (event) => {
+      onLifecycleRef.current?.(event);
+      if (event.type === "submitted" || event.type === "complete" || event.type === "failed") {
+        markHistoryStale();
+      }
+    },
+    [onLifecycleRef, markHistoryStale]
+  );
   const analyticsSessionProperties = buildWithdrawAnalyticsSessionProperties({
     inline,
     closeOnOverlayClick,
@@ -1620,7 +1708,7 @@ function WithdrawModal({
     seedTargetToken: targetToken ?? sourceToken
   });
   const showBackButton = uiConfig?.showBackButton ?? true;
-  const canGoBack = backHandler !== void 0;
+  const canGoBack = backHandler !== void 0 && !submitting;
   return /* @__PURE__ */ jsx5(RpcUrlsProvider, { value: rpcUrls, children: /* @__PURE__ */ jsx5(ChainCatalogProvider, { service, rpcUrls, children: /* @__PURE__ */ jsx5(WithdrawStoreProvider, { store, children: /* @__PURE__ */ jsx5(
     Modal,
     {
@@ -1629,6 +1717,7 @@ function WithdrawModal({
       className,
       inline,
       closeOnOverlayClick,
+      ariaLabel: "Withdraw",
       children: /* @__PURE__ */ jsx5(
         AnalyticsSession,
         {
@@ -1638,6 +1727,7 @@ function WithdrawModal({
           backendUrl,
           enableIngest: enableAnalyticsIngest,
           ingestUrl: analyticsIngestUrl,
+          sessionIdRef: analyticsSessionIdRef,
           children: /* @__PURE__ */ jsx5(
             WithdrawAnalyticsControllerProvider,
             {
@@ -1654,16 +1744,25 @@ function WithdrawModal({
                       children: /* @__PURE__ */ jsx5(ChevronLeftIcon, {})
                     }
                   ) }),
-                  /* @__PURE__ */ jsx5("div", { className: "rs-modal-header-nav-right", children: /* @__PURE__ */ jsx5(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => closeWithSource("header_button"),
-                      className: "rs-modal-close",
-                      "aria-label": "Close",
-                      children: /* @__PURE__ */ jsx5(CloseIcon, {})
-                    }
-                  ) })
+                  /* @__PURE__ */ jsxs4("div", { className: "rs-modal-header-nav-right", children: [
+                    historyButtonVisible && historyRecipient && /* @__PURE__ */ jsx5(
+                      HistoryEntryButton,
+                      {
+                        badge: history.badge,
+                        onClick: history.openPanel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx5(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => closeWithSource("header_button"),
+                        className: "rs-modal-close",
+                        "aria-label": "Close",
+                        children: /* @__PURE__ */ jsx5(CloseIcon, {})
+                      }
+                    )
+                  ] })
                 ] }),
                 /* @__PURE__ */ jsx5(
                   WithdrawFlow,
@@ -1680,10 +1779,32 @@ function WithdrawModal({
                     onSendTransaction,
                     onStepChange: handleStepChange,
                     onClose: closeWithSource,
-                    onLifecycle,
+                    onDestinationChange: setHistoryRecipient,
+                    onSubmittingChange: setSubmitting,
+                    onLifecycle: handleLifecycle,
                     onError,
                     debug
                   }
+                ),
+                history.isPanelOpen && /* @__PURE__ */ jsx5(
+                  HistoryOverlay,
+                  {
+                    controller: history,
+                    backLabel: "Withdraw",
+                    title: "Deposit history",
+                    recipient: historyRecipient,
+                    backendUrl,
+                    service,
+                    signRecovery,
+                    debug,
+                    onCloseModal: () => closeWithSource("header_button"),
+                    analytics: historyAnalytics,
+                    inline,
+                    closeOnOverlayClick,
+                    enableAnalyticsIngest,
+                    analyticsIngestUrl,
+                    onEvent
+                  }
                 )
               ] })
             }

package/dist/{chunk-LMG46EP2.mjs → chunk-CXBMIZUF.mjs}

@@ -1,5 +1,5 @@
 // src/core/version.ts
-var MODAL_VERSION = "0.14.1";
+var MODAL_VERSION = "0.15.0";
 var SERVICE_HEADERS = {
   "Content-Type": "application/json",
   "x-deposit-modal-version": MODAL_VERSION