@rhinestone/deposit-modal 0.13.0 → 0.14.0

package/dist/{chunk-LTMMETAB.mjs → chunk-PKML3XVS.mjs}

@@ -1,11 +1,13 @@
 import {
   ProcessingStep,
+  analyticsTargetProperties,
   deriveAccountSalt,
   isSubmissionUncertain,
   useTokenPrices,
   warnRemovedProps
-} from "./chunk-COCBCQQC.mjs";
+} from "./chunk-7SR7ENVJ.mjs";
 import {
+  AnalyticsSession,
   BodyHeader,
   Button,
   Callout,
@@ -37,8 +39,9 @@ import {
   useReadClient,
   useRpcUrls,
   useStableRpcUrls,
-  useTargetTokens
-} from "./chunk-EOMT5LKX.mjs";
+  useTargetTokens,
+  useWithdrawAnalyticsEmitter
+} from "./chunk-IN77XSWO.mjs";
 import {
   NATIVE_TOKEN_ADDRESS,
   getChainIcon,
@@ -50,10 +53,10 @@ import {
 } from "./chunk-VUATPOWJ.mjs";
 
 // src/WithdrawModal.tsx
-import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState4 } from "react";
 
 // src/WithdrawFlow.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
 
 // src/store/withdraw.ts
 import { createContext, createElement, useContext } from "react";
@@ -219,7 +222,7 @@ function WithdrawFormStep({
   registrationError = null,
   onRecipientChange,
   onSubmit,
-  onBalanceUsdChange
+  onFriction
 }) {
   const [recipient, setRecipient] = useState(defaultRecipient ?? "");
   const [amount, setAmount] = useState(defaultAmount ?? "");
@@ -232,6 +235,7 @@ function WithdrawFormStep({
   const chainDropdownRef = useRef(null);
   const tokenDropdownRef = useRef(null);
   const publicClientChainId = publicClient.chain?.id;
+  const onFrictionRef = useLatestRef(onFriction);
   useClickOutside(chainDropdownRef, () => setShowChainDropdown(false));
   useClickOutside(tokenDropdownRef, () => setShowTokenDropdown(false));
   const targetSymbol = getTokenSymbol(targetToken, targetChain);
@@ -272,6 +276,7 @@ function WithdrawFormStep({
       } catch {
         if (active) {
           setBalance(null);
+          onFrictionRef.current?.("wallet_balance_unavailable");
           timeoutId = setTimeout(fetchBalance, retryDelayMs);
           retryDelayMs = Math.min(Math.round(retryDelayMs * 1.5), 3e4);
         }
@@ -286,7 +291,7 @@ function WithdrawFormStep({
         clearTimeout(timeoutId);
       }
     };
-  }, [accountAddress, publicClient, publicClientChainId, asset]);
+  }, [accountAddress, publicClient, publicClientChainId, asset, onFrictionRef]);
   const formattedBalance = useMemo(() => {
     if (balance === null) return "...";
     try {
@@ -301,18 +306,9 @@ function WithdrawFormStep({
     }
   }, [balance, asset.decimals]);
   useEffect(() => {
-    if (balance === null) return;
-    const sym = asset.symbol.toUpperCase();
-    if (sym !== "USDC" && sym !== "USDT" && sym !== "USDT0") return;
-    try {
-      const raw = formatUnits(balance, asset.decimals);
-      const numeric = Number(raw);
-      if (!Number.isFinite(numeric)) return;
-      onBalanceUsdChange?.(numeric);
-    } catch {
-      return;
-    }
-  }, [balance, asset.decimals, asset.symbol, onBalanceUsdChange]);
+    if (targetTokenOptions.length > 0 || !recipient || !amount) return;
+    onFrictionRef.current?.("route_target_tokens_unavailable");
+  }, [targetTokenOptions.length, recipient, amount, onFrictionRef]);
   const amountUsd = useMemo(() => {
     if (!amount) return null;
     const parsed = Number(amount);
@@ -332,6 +328,7 @@ function WithdrawFormStep({
   const handleWithdraw = useCallback(async () => {
     if (!recipient || !/^0x[a-fA-F0-9]{40}$/.test(recipient)) {
       setError("Enter a valid recipient address");
+      onFriction?.("recipient_invalid");
       return;
     }
     const lowerRecipient = recipient.toLowerCase();
@@ -339,11 +336,13 @@ function WithdrawFormStep({
       setError(
         "Recipient can't be your own account. Send to a different wallet."
       );
+      onFriction?.("recipient_not_allowed");
       return;
     }
     const parsed = Number(amount);
     if (!amount || !Number.isFinite(parsed) || parsed <= 0) {
       setError("Enter a valid amount");
+      onFriction?.("amount_invalid");
       return;
     }
     if (balance !== null) {
@@ -351,10 +350,12 @@ function WithdrawFormStep({
         const amountInUnits = parseUnits(amount, asset.decimals);
         if (amountInUnits > balance) {
           setError("Insufficient balance");
+          onFriction?.("amount_insufficient_balance");
           return;
         }
       } catch {
         setError("Invalid amount");
+        onFriction?.("amount_invalid");
         return;
       }
     }
@@ -375,7 +376,8 @@ function WithdrawFormStep({
     asset.decimals,
     accountAddress,
     depositAddress,
-    onSubmit
+    onSubmit,
+    onFriction
   ]);
   if (isBalanceLoading) {
     return /* @__PURE__ */ jsxs("div", { className: "rs-screen", children: [
@@ -751,7 +753,171 @@ WithdrawReviewStep.displayName = "WithdrawReviewStep";
 
 // src/WithdrawFlow.tsx
 import { parseUnits as parseUnits2 } from "viem";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/core/withdraw-analytics.tsx
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useMemo as useMemo2
+} from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function withdrawFailureReasonForError(error) {
+  if (isSubmissionUncertain(error)) return "submission_uncertain";
+  const message = (error instanceof Error ? error.message : String(error ?? "")).toLowerCase();
+  if (message.includes("changed before submission")) {
+    return "registration_target_changed";
+  }
+  if (message.includes("did not return a txhash")) {
+    return "submission_missing_hash";
+  }
+  if (message.includes("reject") || message.includes("denied")) {
+    return "submission_rejected";
+  }
+  return "submission_failed";
+}
+function createWithdrawAnalyticsController(emit) {
+  let step = null;
+  let afterHandoff = false;
+  let sameRoute = null;
+  let opened = false;
+  let closed = false;
+  const dedupe = /* @__PURE__ */ new Set();
+  const stamp = (payload) => sameRoute === null ? payload : { ...payload, same_route: sameRoute };
+  const send = (payload) => {
+    controller.openSession();
+    emit(stamp(payload));
+  };
+  const emitOnce = (key, payload) => {
+    if (dedupe.has(key)) return;
+    dedupe.add(key);
+    send(payload);
+  };
+  const controller = {
+    openSession() {
+      if (opened) return;
+      opened = true;
+      emit({ type: "withdraw_modal_open" });
+    },
+    openStep(nextStep) {
+      controller.openSession();
+      if (step === nextStep) return;
+      step = nextStep;
+      emitOnce(`step-open:${nextStep}`, {
+        type: "withdraw_modal_step_open",
+        step: nextStep
+      });
+    },
+    completeStep(completedStep = step ?? void 0) {
+      if (!completedStep) return;
+      emitOnce(`step-complete:${completedStep}`, {
+        type: "withdraw_modal_step_complete",
+        step: completedStep
+      });
+    },
+    friction(reason, eventStep = step ?? void 0) {
+      if (!eventStep) return;
+      emitOnce(`friction:${eventStep}:${reason}`, {
+        type: "withdraw_modal_friction",
+        step: eventStep,
+        reason
+      });
+    },
+    failure(reason, retryable, eventStep = step ?? void 0) {
+      if (!eventStep) return;
+      emitOnce(`failure:${eventStep}:${reason}`, {
+        type: "withdraw_modal_failure",
+        step: eventStep,
+        reason,
+        retryable
+      });
+    },
+    retry(reason, eventStep = step ?? void 0) {
+      if (!eventStep) return;
+      send({ type: "withdraw_modal_retry", step: eventStep, reason });
+      for (const key of [...dedupe]) {
+        if (key.includes(`:${eventStep}:`)) dedupe.delete(key);
+      }
+    },
+    handoff({ transactionHash, managedAccount, sameRoute: route }, eventStep) {
+      const handoffStep = eventStep ?? step ?? "submit";
+      if (step !== handoffStep) controller.openStep(handoffStep);
+      sameRoute = route;
+      afterHandoff = true;
+      emitOnce(`handoff:${transactionHash}`, {
+        type: "withdraw_modal_handoff",
+        step: handoffStep,
+        transaction_hash: transactionHash,
+        managed_account: managedAccount,
+        same_route: route
+      });
+    },
+    outcome(outcome) {
+      if (!step) return;
+      emitOnce(`outcome:${outcome}`, {
+        type: "withdraw_modal_ui_outcome",
+        step,
+        outcome
+      });
+    },
+    abandon(reason) {
+      if (!step || afterHandoff) return;
+      emitOnce(`abandon:${step}:${reason}`, {
+        type: "withdraw_modal_abandoned",
+        step,
+        reason
+      });
+    },
+    close(source) {
+      if (closed) return;
+      closed = true;
+      send({
+        type: "withdraw_modal_close",
+        source,
+        step,
+        after_handoff: afterHandoff
+      });
+    },
+    /** "New withdrawal" on the terminal screen: a fresh attempt in the same
+     *  session, so the envelope and its session id stay. */
+    resetAttempt() {
+      step = null;
+      afterHandoff = false;
+      sameRoute = null;
+      dedupe.clear();
+    },
+    get step() {
+      return step;
+    },
+    get afterHandoff() {
+      return afterHandoff;
+    },
+    get sameRoute() {
+      return sameRoute;
+    }
+  };
+  return controller;
+}
+var WithdrawAnalyticsControllerContext = createContext2(null);
+var noopController = createWithdrawAnalyticsController(() => {
+});
+function WithdrawAnalyticsControllerProvider({
+  children,
+  controllerRef
+}) {
+  const emit = useWithdrawAnalyticsEmitter();
+  const controller = useMemo2(
+    () => createWithdrawAnalyticsController(emit),
+    [emit]
+  );
+  if (controllerRef) controllerRef.current = controller;
+  return /* @__PURE__ */ jsx3(WithdrawAnalyticsControllerContext.Provider, { value: controller, children });
+}
+function useWithdrawAnalyticsController() {
+  return useContext2(WithdrawAnalyticsControllerContext) ?? noopController;
+}
+
+// src/WithdrawFlow.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var ADDR_REGEX = /^0x[a-fA-F0-9]{40}$/;
 var REGISTRATION_DEBOUNCE_MS = 600;
 var WITHDRAW_INDEXING_DELAY_MS = 2e3;
@@ -773,17 +939,19 @@ function WithdrawFlow({
   onStepChange,
   onClose,
   onLifecycle,
-  onEvent,
   onError,
   debug
 }) {
   const rpcUrls = useRpcUrls();
   const onStepChangeRef = useLatestRef(onStepChange);
-  const onEventRef = useLatestRef(onEvent);
+  const analytics = useWithdrawAnalyticsController();
   const onLifecycleRef = useLatestRef(onLifecycle);
   const onErrorRef = useLatestRef(onError);
   const isFlowActiveRef = useRef2(true);
   const submitGenerationRef = useRef2(0);
+  const lastSubmitFailureRef = useRef2(
+    null
+  );
   useEffect2(() => {
     isFlowActiveRef.current = true;
     return () => {
@@ -807,7 +975,6 @@ function WithdrawFlow({
   const [recipientInput, setRecipientInput] = useState3(
     defaultRecipient ?? ""
   );
-  const [totalBalanceUsd, setTotalBalanceUsd] = useState3(0);
   useEffect2(() => {
     setTargetChain(targetChainProp);
   }, [targetChainProp]);
@@ -822,7 +989,7 @@ function WithdrawFlow({
   const flowStep = useWithdrawStore((s) => s.step);
   const reviewedRecipient = useWithdrawStore((s) => s.recipient);
   const publicClient = useReadClient(sourceChain, rpcUrls);
-  const recipientForRegistration = useMemo2(() => {
+  const recipientForRegistration = useMemo3(() => {
     if (!recipientInput) return void 0;
     return ADDR_REGEX.test(recipientInput) ? recipientInput : void 0;
   }, [recipientInput]);
@@ -907,7 +1074,7 @@ function WithdrawFlow({
     onLifecycleRef,
     onErrorRef
   ]);
-  const asset = useMemo2(() => {
+  const asset = useMemo3(() => {
     const symbol = getTokenSymbol(sourceToken, sourceChain);
     const decimals = getTokenDecimalsByAddress(sourceToken, sourceChain);
     return {
@@ -927,33 +1094,35 @@ function WithdrawFlow({
     recipient: reviewedRecipient
   } : null;
   const isReviewedTargetReady = registration.kind === "ready" && reviewedTarget !== null && targetsEqual(registration.registeredTarget, reviewedTarget);
+  useEffect2(() => {
+    if (flowStep !== "review") return;
+    if (registration.kind !== "ready" || isReviewedTargetReady) return;
+    analytics.friction("registration_stale", "review");
+  }, [analytics, flowStep, registration.kind, isReviewedTargetReady]);
   const reviewBackHandler = useCallback2(() => {
     submitGenerationRef.current += 1;
+    analytics.abandon("back");
     storeApi.dispatch({ type: "review/back" });
-  }, [storeApi]);
+  }, [analytics, storeApi]);
   useEffect2(() => {
     onStepChangeRef.current?.(
       flowStep === "review" ? reviewBackHandler : void 0,
       flowStep
     );
   }, [flowStep, reviewBackHandler, onStepChangeRef]);
-  const lastStepOpenEventKeyRef = useRef2(null);
   useEffect2(() => {
-    if (flowStep !== "form") {
-      lastStepOpenEventKeyRef.current = null;
-      return;
+    analytics.openSession();
+    analytics.openStep(analyticsStepForFlowStep(flowStep));
+  }, [analytics, flowStep]);
+  useEffect2(() => {
+    if (registration.kind === "pending") {
+      analytics.friction("registration_pending");
+    } else if (registration.kind === "stale") {
+      analytics.friction("registration_stale");
+    } else if (registration.kind === "failed") {
+      analytics.failure("registration_failed", true);
     }
-    if (lastStepOpenEventKeyRef.current === "form") return;
-    lastStepOpenEventKeyRef.current = "form";
-    const tokenSymbol = getTokenSymbol(targetToken, targetChain);
-    const chainName = getChainName(targetChain);
-    onEventRef.current?.({
-      type: "withdraw_modal_select_amount_open",
-      pred_balance: totalBalanceUsd,
-      default_token: tokenSymbol,
-      default_chain: chainName
-    });
-  }, [flowStep, targetToken, targetChain, totalBalanceUsd, onEventRef]);
+  }, [analytics, registration.kind]);
   useEffect2(() => {
     logFlow("state:changed", {
       step: flowStep,
@@ -974,33 +1143,34 @@ function WithdrawFlow({
   ]);
   const handleError = useCallback2(
     (message, code, cause) => {
+      if (code === "PROCESS_TIMEOUT") {
+        analytics.friction("processor_status_poll_failed", "processing");
+      }
       logFlowError("flow:error", cause ?? message, { code });
       onErrorRef.current?.({ message, code, cause });
     },
-    [logFlowError, onErrorRef]
+    [analytics, logFlowError, onErrorRef]
   );
   const handleFormContinue = useCallback2(
     (recipient, amountValue) => {
-      const tokenSymbol = getTokenSymbol(targetToken, targetChain);
-      const chainName = getChainName(targetChain);
-      onEventRef.current?.({
-        type: "withdraw_modal_select_amount_cta_click",
-        pred_balance: totalBalanceUsd,
-        selected_token: tokenSymbol,
-        selected_chain: chainName,
-        amount: amountValue,
-        cta_name: "withdraw"
-      });
+      analytics.completeStep("form");
       storeApi.dispatch({
         type: "form/continue",
         amount: amountValue,
         recipient
       });
     },
-    [targetToken, targetChain, totalBalanceUsd, onEventRef, storeApi]
+    [analytics, storeApi]
   );
   const handleReviewConfirm = useCallback2(
     async () => {
+      const previousFailure = lastSubmitFailureRef.current;
+      if (previousFailure) {
+        lastSubmitFailureRef.current = null;
+        analytics.retry(previousFailure, "submit");
+      }
+      analytics.completeStep("review");
+      analytics.openStep("submit");
       const state = storeApi.getState();
       const recipient = state.recipient;
       const amountValue = state.amount;
@@ -1018,11 +1188,13 @@ function WithdrawFlow({
       };
       const matchingRegistration = getMatchingRegistration();
       if (!matchingRegistration) {
+        analytics.failure("registration_target_changed", true, "submit");
         throw new Error("Withdrawal target is still being prepared");
       }
       const smartAccount = matchingRegistration.smartAccount;
       const lowerRecipient = recipient.toLowerCase();
       if (lowerRecipient === accountAddress.toLowerCase() || lowerRecipient === smartAccount.toLowerCase()) {
+        analytics.failure("recipient_not_allowed", false, "submit");
         throw new Error(
           "Recipient can't be your own account. Send to a different wallet."
         );
@@ -1060,6 +1232,15 @@ function WithdrawFlow({
         if (!result?.txHash) {
           throw new Error("onSendTransaction did not return a txHash");
         }
+        analytics.handoff(
+          {
+            transactionHash: result.txHash,
+            managedAccount: smartAccount,
+            sameRoute: isSameRoute
+          },
+          "submit"
+        );
+        analytics.completeStep("submit");
         logFlow("withdraw:submitted", {
           txHash: result.txHash,
           smartAccount,
@@ -1086,6 +1267,9 @@ function WithdrawFlow({
         });
       } catch (err) {
         const raw = err instanceof Error ? err.message : "Withdraw failed";
+        const reason = withdrawFailureReasonForError(err);
+        lastSubmitFailureRef.current = reason;
+        analytics.failure(reason, reason !== "submission_uncertain", "submit");
         logFlowError("submit:failed", err, {
           sourceChain,
           sourceToken,
@@ -1097,6 +1281,7 @@ function WithdrawFlow({
       }
     },
     [
+      analytics,
       targetChain,
       targetToken,
       asset.decimals,
@@ -1114,6 +1299,8 @@ function WithdrawFlow({
   );
   const handleWithdrawComplete = useCallback2(
     (txHash, destinationTxHash, context) => {
+      analytics.openStep("processing");
+      analytics.outcome("completed");
       logFlow("withdraw:complete", { txHash, destinationTxHash, ...context });
       onLifecycleRef.current?.({
         type: "complete",
@@ -1131,10 +1318,13 @@ function WithdrawFlow({
       });
       storeApi.dispatch({ type: "withdraw/complete" });
     },
-    [logFlow, onLifecycleRef, storeApi]
+    [analytics, logFlow, onLifecycleRef, storeApi]
   );
   const handleWithdrawFailed = useCallback2(
     (txHash, error) => {
+      analytics.openStep("processing");
+      analytics.outcome("failed");
+      analytics.failure("processor_failed", false, "processing");
       logFlowError("withdraw:failed", error, { txHash });
       onLifecycleRef.current?.({
         type: "failed",
@@ -1143,11 +1333,11 @@ function WithdrawFlow({
       });
       storeApi.dispatch({ type: "withdraw/failed" });
     },
-    [logFlowError, onLifecycleRef, storeApi]
+    [analytics, logFlowError, onLifecycleRef, storeApi]
   );
   const targetChainOptions = useDestinationChains();
   const targetTokensFor = useTargetTokens();
-  const targetTokenOptions = useMemo2(
+  const targetTokenOptions = useMemo3(
     () => targetTokensFor(targetChain),
     [targetChain, targetTokensFor]
   );
@@ -1175,10 +1365,16 @@ function WithdrawFlow({
   const handleTargetTokenChange = useCallback2((token) => {
     setTargetToken(token);
   }, []);
+  const handleFormFriction = useCallback2(
+    (reason) => {
+      analytics.friction(reason, "form");
+    },
+    [analytics]
+  );
   const depositAddress = registration.kind === "ready" || registration.kind === "stale" ? registration.smartAccount : void 0;
   const stepView = deriveStepView(flowStep, registration);
   return /* @__PURE__ */ jsxs3("div", { className: "rs-modal-body", children: [
-    stepView === "form" && /* @__PURE__ */ jsx3(
+    stepView === "form" && /* @__PURE__ */ jsx4(
       WithdrawFormStep,
       {
         publicClient,
@@ -1197,10 +1393,10 @@ function WithdrawFlow({
         registrationError: registration.kind === "failed" ? registration.error : null,
         onRecipientChange: setRecipientInput,
         onSubmit: async (r, a) => handleFormContinue(r, a),
-        onBalanceUsdChange: setTotalBalanceUsd
+        onFriction: handleFormFriction
       }
     ),
-    stepView === "review" && /* @__PURE__ */ jsx3(
+    stepView === "review" && /* @__PURE__ */ jsx4(
       WithdrawReviewStep,
       {
         sourceChain,
@@ -1217,7 +1413,7 @@ function WithdrawFlow({
         onError: handleError
       }
     ),
-    stepView === "processing" && registration.kind !== "idle" && /* @__PURE__ */ jsx3(
+    stepView === "processing" && registration.kind !== "idle" && /* @__PURE__ */ jsx4(
       ProcessingStep,
       {
         smartAccount: storeApi.getState().processingSmartAccount ?? (registration.kind === "ready" || registration.kind === "stale" ? registration.smartAccount : "0x0"),
@@ -1233,7 +1429,10 @@ function WithdrawFlow({
         service,
         flowLabel: "withdraw",
         onClose,
-        onNewDeposit: () => storeApi.dispatch({ type: "flow/reset" }),
+        onNewDeposit: () => {
+          analytics.resetAttempt();
+          storeApi.dispatch({ type: "flow/reset" });
+        },
         onDepositComplete: handleWithdrawComplete,
         onDepositFailed: handleWithdrawFailed,
         onError: handleError,
@@ -1249,6 +1448,13 @@ function toBaseUnits(amount, decimals) {
     return "0";
   }
 }
+function analyticsStepForFlowStep(step) {
+  if (step === "review") return "review";
+  if (step === "processing" || step === "complete" || step === "failed") {
+    return "processing";
+  }
+  return "form";
+}
 function deriveStepView(step, _registration) {
   if (step === "review") return "review";
   if (step === "processing" || step === "complete" || step === "failed") {
@@ -1258,7 +1464,32 @@ function deriveStepView(step, _registration) {
 }
 
 // src/WithdrawModal.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function buildWithdrawAnalyticsSessionProperties({
+  inline = false,
+  closeOnOverlayClick = false,
+  targetChain,
+  targetToken,
+  recipient,
+  defaultAmount,
+  seedTargetChain,
+  seedTargetToken
+}) {
+  return {
+    presentation: inline ? "inline" : "overlay",
+    overlay_close_enabled: !inline && closeOnOverlayClick,
+    prefills: {
+      target_chain: targetChain !== void 0,
+      target_token: targetToken !== void 0,
+      recipient: recipient !== void 0,
+      amount: defaultAmount !== void 0
+    },
+    ...analyticsTargetProperties({
+      targetChain: seedTargetChain,
+      targetToken: seedTargetToken
+    })
+  };
+}
 function WithdrawModal({
   accountAddress,
   sourceChain: sourceChainProp,
@@ -1282,6 +1513,8 @@ function WithdrawModal({
   onLifecycle,
   onEvent,
   onError,
+  enableAnalyticsIngest,
+  analyticsIngestUrl,
   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
@@ -1295,6 +1528,10 @@ function WithdrawModal({
   checkBackendUrl("WithdrawModal", backendUrl);
   const modalRef = useRef3(null);
   const onReadyRef = useLatestRef(onReady);
+  const analyticsControllerRef = useRef3(
+    null
+  );
+  const previousOpenRef = useRef3(isOpen);
   const [backHandler, setBackHandler] = useState4(
     void 0
   );
@@ -1303,11 +1540,11 @@ function WithdrawModal({
   const targetChain = getChainId(targetChainProp ?? sourceChainProp);
   const sourceChain = getChainId(sourceChainProp);
   const rpcUrls = useStableRpcUrls(rpcUrlsProp);
-  const service = useMemo3(
+  const service = useMemo4(
     () => createDepositService(backendUrl, { debug, debugScope: "service:withdraw" }),
     [backendUrl, debug]
   );
-  const store = useMemo3(() => createWithdrawStore(), []);
+  const store = useMemo4(() => createWithdrawStore(), []);
   const onErrorRef = useLatestRef(onError);
   useEffect3(() => {
     if (isOpen && typeof onSendTransaction !== "function") {
@@ -1315,8 +1552,38 @@ function WithdrawModal({
         message: "WithdrawModal requires an `onSendTransaction` function.",
         code: "WITHDRAW_MISSING_SEND_TRANSACTION"
       });
+      analyticsControllerRef.current?.failure(
+        "submission_handler_missing",
+        false,
+        "form"
+      );
     }
   }, [isOpen, onSendTransaction, onErrorRef]);
+  const closeWithSource = useCallback3(
+    (source) => {
+      const analytics = analyticsControllerRef.current;
+      analytics?.abandon("modal_close");
+      analytics?.close(source);
+      onClose();
+    },
+    [onClose]
+  );
+  const handleModalDismiss = useCallback3(
+    (reason) => {
+      closeWithSource(
+        reason === "escape" ? "escape" : reason === "overlay" ? "overlay" : "header_button"
+      );
+    },
+    [closeWithSource]
+  );
+  useEffect3(() => {
+    if (previousOpenRef.current && !isOpen) {
+      const analytics = analyticsControllerRef.current;
+      analytics?.abandon("modal_close");
+      analytics?.close("host_controlled");
+    }
+    previousOpenRef.current = isOpen;
+  }, [isOpen]);
   useEffect3(() => {
     if (!isOpen || !modalRef.current) return;
     return applyTheme(modalRef.current, theme);
@@ -1342,65 +1609,92 @@ function WithdrawModal({
       submitting: false
     });
   }, [screen, backHandler, onUiStateRef]);
+  const analyticsSessionProperties = buildWithdrawAnalyticsSessionProperties({
+    inline,
+    closeOnOverlayClick,
+    targetChain: targetChainProp,
+    targetToken,
+    recipient,
+    defaultAmount,
+    seedTargetChain: targetChain,
+    seedTargetToken: targetToken ?? sourceToken
+  });
   const showBackButton = uiConfig?.showBackButton ?? true;
   const canGoBack = backHandler !== void 0;
-  return /* @__PURE__ */ jsx4(RpcUrlsProvider, { value: rpcUrls, children: /* @__PURE__ */ jsx4(ChainCatalogProvider, { service, rpcUrls, children: /* @__PURE__ */ jsx4(WithdrawStoreProvider, { store, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(RpcUrlsProvider, { value: rpcUrls, children: /* @__PURE__ */ jsx5(ChainCatalogProvider, { service, rpcUrls, children: /* @__PURE__ */ jsx5(WithdrawStoreProvider, { store, children: /* @__PURE__ */ jsx5(
     Modal,
     {
       isOpen,
-      onClose,
+      onClose: handleModalDismiss,
       className,
       inline,
       closeOnOverlayClick,
-      children: /* @__PURE__ */ jsxs4("div", { ref: modalRef, className: "rs-modal", children: [
-        /* @__PURE__ */ jsxs4("div", { className: "rs-modal-header--redesigned", children: [
-          /* @__PURE__ */ jsx4("div", { className: "rs-modal-header-nav-left", children: showBackButton && canGoBack && backHandler && /* @__PURE__ */ jsx4(
-            "button",
-            {
-              type: "button",
-              className: "rs-modal-header-back",
-              "aria-label": "Go back",
-              onClick: backHandler,
-              children: /* @__PURE__ */ jsx4(ChevronLeftIcon, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsx4("div", { className: "rs-modal-header-nav-right", children: /* @__PURE__ */ jsx4(
-            "button",
+      children: /* @__PURE__ */ jsx5(
+        AnalyticsSession,
+        {
+          modal: "withdraw",
+          sessionProperties: analyticsSessionProperties,
+          onEvent,
+          backendUrl,
+          enableIngest: enableAnalyticsIngest,
+          ingestUrl: analyticsIngestUrl,
+          children: /* @__PURE__ */ jsx5(
+            WithdrawAnalyticsControllerProvider,
             {
-              type: "button",
-              onClick: onClose,
-              className: "rs-modal-close",
-              "aria-label": "Close",
-              children: /* @__PURE__ */ jsx4(CloseIcon, {})
+              controllerRef: analyticsControllerRef,
+              children: /* @__PURE__ */ jsxs4("div", { ref: modalRef, className: "rs-modal", children: [
+                /* @__PURE__ */ jsxs4("div", { className: "rs-modal-header--redesigned", children: [
+                  /* @__PURE__ */ jsx5("div", { className: "rs-modal-header-nav-left", children: showBackButton && canGoBack && backHandler && /* @__PURE__ */ jsx5(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rs-modal-header-back",
+                      "aria-label": "Go back",
+                      onClick: backHandler,
+                      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__ */ jsx5(
+                  WithdrawFlow,
+                  {
+                    accountAddress,
+                    sourceChain,
+                    sourceToken,
+                    targetChain,
+                    targetToken: targetToken ?? sourceToken,
+                    recipient,
+                    amount: defaultAmount,
+                    service,
+                    forceRegister,
+                    onSendTransaction,
+                    onStepChange: handleStepChange,
+                    onClose: closeWithSource,
+                    onLifecycle,
+                    onError,
+                    debug
+                  }
+                )
+              ] })
             }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx4(
-          WithdrawFlow,
-          {
-            accountAddress,
-            sourceChain,
-            sourceToken,
-            targetChain,
-            targetToken: targetToken ?? sourceToken,
-            recipient,
-            amount: defaultAmount,
-            service,
-            forceRegister,
-            onSendTransaction,
-            onStepChange: handleStepChange,
-            onClose,
-            onLifecycle,
-            onEvent,
-            onError,
-            debug
-          }
-        )
-      ] })
+          )
+        }
+      )
     }
   ) }) }) });
 }
 
 export {
+  buildWithdrawAnalyticsSessionProperties,
   WithdrawModal
 };