@rhinestone/deposit-modal 0.2.4 → 0.3.0-alpha.0

package/dist/{chunk-KJEHVIPZ.mjs → chunk-FKPTIHU7.mjs}

@@ -1,10 +1,17 @@
 import {
+  AlertTriangleIcon,
+  BodyHeader,
   Button,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  CircleArrowOutUpLeftIcon,
+  CloseIcon,
   ConnectStep,
   Modal,
   PoweredBy,
   ProcessingStep,
   Spinner,
+  WalletIcon,
   accountFromPrivateKey,
   applyTheme,
   buildSessionDetails,
@@ -21,7 +28,7 @@ import {
   saveSessionOwnerToStorage,
   toEvmCaip2,
   useLatestRef
-} from "./chunk-WNFGZS56.mjs";
+} from "./chunk-UIHAYD7J.mjs";
 import {
   DEFAULT_BACKEND_URL,
   DEFAULT_SIGNER_ADDRESS,
@@ -34,7 +41,7 @@ import {
   getTokenDecimalsByAddress,
   getTokenIcon,
   getTokenSymbol
-} from "./chunk-WHW3ZMOT.mjs";
+} from "./chunk-EEHUOFIW.mjs";
 
 // src/WithdrawModal.tsx
 import {
@@ -42,13 +49,128 @@ import {
   useEffect as useEffect3,
   useMemo as useMemo3,
   useRef as useRef3,
-  useState as useState3,
+  useState as useState4,
   lazy,
   Suspense
 } from "react";
 
 // src/WithdrawFlow.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+
+// src/store/withdraw.tsx
+import { createContext, createElement, useContext } from "react";
+import { useStore } from "zustand";
+import { createStore } from "zustand/vanilla";
+function unreachable(action) {
+  throw new Error(
+    `[deposit-modal/withdraw-store] Unhandled action: ${JSON.stringify(action)}`
+  );
+}
+function applyWithdrawAction(state, action) {
+  switch (action.type) {
+    case "wallet/id-selected":
+      return { ...state, selectedWalletId: action.walletId };
+    case "registration/started":
+      return {
+        ...state,
+        registration: state.registration.kind === "ready" ? {
+          kind: "stale",
+          smartAccount: state.registration.smartAccount,
+          registeredTarget: state.registration.registeredTarget
+        } : { kind: "pending" }
+      };
+    case "registration/ready":
+      return {
+        ...state,
+        registration: {
+          kind: "ready",
+          smartAccount: action.smartAccount,
+          registeredTarget: action.registeredTarget
+        },
+        step: state.step === "connect" ? "form" : state.step
+      };
+    case "registration/failed":
+      return {
+        ...state,
+        registration: { kind: "failed", error: action.error }
+      };
+    case "form/continue":
+      return {
+        ...state,
+        amount: action.amount,
+        recipient: action.recipient,
+        step: "review"
+      };
+    case "review/back":
+      return { ...state, step: "form" };
+    case "withdraw/submitted":
+      return { ...state, txHash: action.txHash, step: "processing" };
+    case "withdraw/complete":
+      return { ...state, step: "complete" };
+    case "withdraw/failed":
+      return { ...state, step: "failed" };
+    case "flow/reset":
+      return {
+        ...state,
+        step: "form",
+        amount: null,
+        recipient: null,
+        txHash: null
+      };
+    case "modal/reset":
+      return {
+        ...state,
+        step: "connect",
+        selectedWalletId: null,
+        registration: { kind: "idle" },
+        amount: null,
+        recipient: null,
+        txHash: null
+      };
+    default:
+      return unreachable(action);
+  }
+}
+function createWithdrawStore() {
+  const store = createStore(() => ({
+    step: "connect",
+    selectedWalletId: null,
+    registration: { kind: "idle" },
+    amount: null,
+    recipient: null,
+    txHash: null
+  }));
+  return {
+    ...store,
+    dispatch(action) {
+      store.setState((state) => applyWithdrawAction(state, action));
+    }
+  };
+}
+var WithdrawStoreContext = createContext(null);
+function WithdrawStoreProvider({
+  store,
+  children
+}) {
+  return createElement(
+    WithdrawStoreContext.Provider,
+    { value: store },
+    children
+  );
+}
+function useWithdrawStoreApi() {
+  const store = useContext(WithdrawStoreContext);
+  if (!store) {
+    throw new Error(
+      "useWithdrawStore must be called inside <WithdrawStoreProvider>"
+    );
+  }
+  return store;
+}
+function useWithdrawStore(selector) {
+  const store = useWithdrawStoreApi();
+  return useStore(store, selector);
+}
 
 // src/components/steps/WithdrawFormStep.tsx
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -82,6 +204,9 @@ function WithdrawFormStep({
   switchChain,
   walletIcon,
   submitting = false,
+  registrationPending = false,
+  registrationError = null,
+  onRecipientChange,
   onSubmit,
   onBalanceUsdChange
 }) {
@@ -220,8 +345,9 @@ function WithdrawFormStep({
   const handleUseConnected = useCallback(() => {
     if (!preferredConnectedRecipient) return;
     setRecipient(preferredConnectedRecipient);
+    onRecipientChange?.(preferredConnectedRecipient);
     setError(null);
-  }, [preferredConnectedRecipient]);
+  }, [preferredConnectedRecipient, onRecipientChange]);
   const handleWithdraw = useCallback(async () => {
     if (!recipient || !/^0x[a-fA-F0-9]{40}$/.test(recipient)) {
       setError("Enter a valid recipient address");
@@ -267,6 +393,7 @@ function WithdrawFormStep({
   }
   return /* @__PURE__ */ jsxs("div", { className: "rs-step", children: [
     /* @__PURE__ */ jsxs("div", { className: "rs-step-body rs-withdraw-form", children: [
+      /* @__PURE__ */ jsx(BodyHeader, { icon: /* @__PURE__ */ jsx(CircleArrowOutUpLeftIcon, {}), title: "Withdraw" }),
       /* @__PURE__ */ jsxs("div", { className: "rs-withdraw-section", children: [
         /* @__PURE__ */ jsx("label", { className: "rs-withdraw-label", children: "Recipient address" }),
         /* @__PURE__ */ jsxs("div", { className: "rs-withdraw-input-row", children: [
@@ -278,7 +405,9 @@ function WithdrawFormStep({
               placeholder: "0x...",
               value: recipient,
               onChange: (e) => {
-                setRecipient(e.target.value.trim());
+                const next = e.target.value.trim();
+                setRecipient(next);
+                onRecipientChange?.(next);
                 if (error) setError(null);
               }
             }
@@ -302,24 +431,7 @@ function WithdrawFormStep({
                 ),
                 isRecipientConnected ? null : "Use connected"
               ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    className: "rs-withdraw-use-connected-icon",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        d: "M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3"
-                      }
-                    )
-                  }
-                ),
+                /* @__PURE__ */ jsx(WalletIcon, { className: "rs-withdraw-use-connected-icon" }),
                 isRecipientConnected ? null : "Use connected"
               ] })
             }
@@ -346,19 +458,16 @@ function WithdrawFormStep({
               }
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "rs-withdraw-amount-right", children: [
-            /* @__PURE__ */ jsx("span", { className: "rs-withdraw-token-label", children: asset.symbol }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "rs-withdraw-max-btn",
-                onClick: handleMaxClick,
-                disabled: balance === null,
-                children: "Max"
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsx("div", { className: "rs-withdraw-amount-right", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "rs-withdraw-max-btn",
+              onClick: handleMaxClick,
+              disabled: balance === null,
+              children: "Max"
+            }
+          ) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "rs-withdraw-amount-info", children: [
           /* @__PURE__ */ jsx("span", { className: "rs-withdraw-usd", children: amountUsd !== null ? currencyFormatter.format(amountUsd) : "$0.00" }),
@@ -372,12 +481,12 @@ function WithdrawFormStep({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "rs-withdraw-receive-row", children: [
         /* @__PURE__ */ jsxs("div", { className: "rs-withdraw-receive-col", children: [
-          /* @__PURE__ */ jsx("label", { className: "rs-withdraw-label", children: "Receive token" }),
+          /* @__PURE__ */ jsx("label", { className: "rs-withdraw-label rs-withdraw-label--sm", children: "Receive chain" }),
           /* @__PURE__ */ jsxs(
             "div",
             {
               className: "rs-withdraw-dropdown-container",
-              ref: tokenDropdownRef,
+              ref: chainDropdownRef,
               children: [
                 /* @__PURE__ */ jsxs(
                   "button",
@@ -385,79 +494,67 @@ function WithdrawFormStep({
                     type: "button",
                     className: "rs-withdraw-dropdown",
                     onClick: () => {
-                      setShowTokenDropdown(!showTokenDropdown);
-                      setShowChainDropdown(false);
+                      setShowChainDropdown(!showChainDropdown);
+                      setShowTokenDropdown(false);
                     },
                     children: [
                       /* @__PURE__ */ jsxs("div", { className: "rs-withdraw-dropdown-value", children: [
-                        getTokenIcon(targetSymbol) && /* @__PURE__ */ jsx(
+                        getChainIcon(targetChain) && /* @__PURE__ */ jsx(
                           "img",
                           {
-                            src: getTokenIcon(targetSymbol),
-                            alt: targetSymbol,
+                            src: getChainIcon(targetChain),
+                            alt: targetChainName,
                             className: "rs-withdraw-dropdown-icon"
                           }
                         ),
-                        /* @__PURE__ */ jsx("span", { children: targetSymbol })
+                        /* @__PURE__ */ jsx("span", { children: targetChainName })
                       ] }),
                       /* @__PURE__ */ jsx(
-                        "svg",
+                        ChevronDownIcon,
                         {
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
                           className: "rs-withdraw-dropdown-arrow",
                           style: {
-                            transform: showTokenDropdown ? "rotate(180deg)" : void 0
-                          },
-                          children: /* @__PURE__ */ jsx(
-                            "path",
-                            {
-                              strokeLinecap: "round",
-                              strokeLinejoin: "round",
-                              d: "M19 9l-7 7-7-7"
-                            }
-                          )
+                            transform: showChainDropdown ? "rotate(180deg)" : void 0
+                          }
                         }
                       )
                     ]
                   }
                 ),
-                showTokenDropdown && /* @__PURE__ */ jsx("div", { className: "rs-withdraw-dropdown-menu", children: targetTokenOptions.map((option) => /* @__PURE__ */ jsxs(
+                showChainDropdown && /* @__PURE__ */ jsx("div", { className: "rs-withdraw-dropdown-menu", children: targetChains.map((chain) => /* @__PURE__ */ jsxs(
                   "button",
                   {
                     type: "button",
                     className: "rs-withdraw-dropdown-item",
                     onClick: () => {
-                      onTargetTokenChange(option.address);
-                      setShowTokenDropdown(false);
+                      onTargetChainChange(chain.id);
+                      setShowChainDropdown(false);
                     },
                     children: [
-                      getTokenIcon(option.symbol) && /* @__PURE__ */ jsx(
+                      getChainIcon(chain.id) && /* @__PURE__ */ jsx(
                         "img",
                         {
-                          src: getTokenIcon(option.symbol),
-                          alt: option.symbol,
+                          src: getChainIcon(chain.id),
+                          alt: chain.name,
                           className: "rs-withdraw-dropdown-icon"
                         }
                       ),
-                      /* @__PURE__ */ jsx("span", { children: option.symbol })
+                      /* @__PURE__ */ jsx("span", { children: chain.name })
                     ]
                   },
-                  option.address
+                  chain.id
                 )) })
               ]
             }
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "rs-withdraw-receive-col", children: [
-          /* @__PURE__ */ jsx("label", { className: "rs-withdraw-label", children: "Receive chain" }),
+          /* @__PURE__ */ jsx("label", { className: "rs-withdraw-label rs-withdraw-label--sm", children: "Receive token" }),
           /* @__PURE__ */ jsxs(
             "div",
             {
               className: "rs-withdraw-dropdown-container",
-              ref: chainDropdownRef,
+              ref: tokenDropdownRef,
               children: [
                 /* @__PURE__ */ jsxs(
                   "button",
@@ -465,67 +562,55 @@ function WithdrawFormStep({
                     type: "button",
                     className: "rs-withdraw-dropdown",
                     onClick: () => {
-                      setShowChainDropdown(!showChainDropdown);
-                      setShowTokenDropdown(false);
+                      setShowTokenDropdown(!showTokenDropdown);
+                      setShowChainDropdown(false);
                     },
                     children: [
                       /* @__PURE__ */ jsxs("div", { className: "rs-withdraw-dropdown-value", children: [
-                        getChainIcon(targetChain) && /* @__PURE__ */ jsx(
+                        getTokenIcon(targetSymbol) && /* @__PURE__ */ jsx(
                           "img",
                           {
-                            src: getChainIcon(targetChain),
-                            alt: targetChainName,
+                            src: getTokenIcon(targetSymbol),
+                            alt: targetSymbol,
                             className: "rs-withdraw-dropdown-icon"
                           }
                         ),
-                        /* @__PURE__ */ jsx("span", { children: targetChainName })
+                        /* @__PURE__ */ jsx("span", { children: targetSymbol })
                       ] }),
                       /* @__PURE__ */ jsx(
-                        "svg",
+                        ChevronDownIcon,
                         {
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
                           className: "rs-withdraw-dropdown-arrow",
                           style: {
-                            transform: showChainDropdown ? "rotate(180deg)" : void 0
-                          },
-                          children: /* @__PURE__ */ jsx(
-                            "path",
-                            {
-                              strokeLinecap: "round",
-                              strokeLinejoin: "round",
-                              d: "M19 9l-7 7-7-7"
-                            }
-                          )
+                            transform: showTokenDropdown ? "rotate(180deg)" : void 0
+                          }
                         }
                       )
                     ]
                   }
                 ),
-                showChainDropdown && /* @__PURE__ */ jsx("div", { className: "rs-withdraw-dropdown-menu", children: targetChains.map((chain) => /* @__PURE__ */ jsxs(
+                showTokenDropdown && /* @__PURE__ */ jsx("div", { className: "rs-withdraw-dropdown-menu", children: targetTokenOptions.map((option) => /* @__PURE__ */ jsxs(
                   "button",
                   {
                     type: "button",
                     className: "rs-withdraw-dropdown-item",
                     onClick: () => {
-                      onTargetChainChange(chain.id);
-                      setShowChainDropdown(false);
+                      onTargetTokenChange(option.address);
+                      setShowTokenDropdown(false);
                     },
                     children: [
-                      getChainIcon(chain.id) && /* @__PURE__ */ jsx(
+                      getTokenIcon(option.symbol) && /* @__PURE__ */ jsx(
                         "img",
                         {
-                          src: getChainIcon(chain.id),
-                          alt: chain.name,
+                          src: getTokenIcon(option.symbol),
+                          alt: option.symbol,
                           className: "rs-withdraw-dropdown-icon"
                         }
                       ),
-                      /* @__PURE__ */ jsx("span", { children: chain.name })
+                      /* @__PURE__ */ jsx("span", { children: option.symbol })
                     ]
                   },
-                  chain.id
+                  option.address
                 )) })
               ]
             }
@@ -534,24 +619,12 @@ function WithdrawFormStep({
       ] }),
       chainMismatch && /* @__PURE__ */ jsx("div", { className: "rs-chain-switch", children: /* @__PURE__ */ jsx("div", { className: "rs-chain-switch-text", children: isSwitching ? `Switching to ${getChainName(asset.chainId)}...` : `Switch to ${getChainName(asset.chainId)} to continue.` }) }),
       error && /* @__PURE__ */ jsxs("div", { className: "rs-withdraw-error", children: [
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
-              }
-            )
-          }
-        ),
+        /* @__PURE__ */ jsx(AlertTriangleIcon, {}),
         /* @__PURE__ */ jsx("span", { children: error })
+      ] }),
+      !error && registrationError && /* @__PURE__ */ jsxs("div", { className: "rs-withdraw-error", children: [
+        /* @__PURE__ */ jsx(AlertTriangleIcon, {}),
+        /* @__PURE__ */ jsx("span", { children: registrationError })
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "rs-step-footer", children: /* @__PURE__ */ jsx(
@@ -560,8 +633,8 @@ function WithdrawFormStep({
         onClick: handleWithdraw,
         fullWidth: true,
         loading: isBusy,
-        disabled: !recipient || !amount || chainMismatch || isBusy,
-        children: isBusy ? "Preparing..." : !recipient ? "Enter Recipient Address" : !amount ? "Enter Withdraw Amount" : "Withdraw"
+        disabled: !recipient || !amount || chainMismatch || isBusy || Boolean(registrationError),
+        children: isBusy ? "Preparing..." : registrationPending ? "Preparing session..." : !recipient ? "Enter Recipient Address" : !amount ? "Enter Withdraw Amount" : "Withdraw"
       }
     ) }),
     /* @__PURE__ */ jsx(PoweredBy, {})
@@ -569,6 +642,129 @@ function WithdrawFormStep({
 }
 WithdrawFormStep.displayName = "WithdrawFormStep";
 
+// src/components/steps/WithdrawReviewStep.tsx
+import { 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;
+}
+function WithdrawReviewStep({
+  sourceChain,
+  sourceSymbol,
+  targetChain,
+  targetToken,
+  amount,
+  recipient,
+  estimatedTime = "< 1 min",
+  registrationPending = false,
+  registrationError = null,
+  onConfirm,
+  onError
+}) {
+  const [isSubmitting, setIsSubmitting] = useState2(false);
+  const [error, setError] = useState2(null);
+  const sourceChainName = getChainName(sourceChain);
+  const sourceChainIcon = getChainIcon(sourceChain);
+  const targetSymbol = getTokenSymbol(targetToken, targetChain);
+  const targetChainName = getChainName(targetChain);
+  const targetChainIcon = getChainIcon(targetChain);
+  const sourceTokenIcon = getTokenIcon(sourceSymbol);
+  const targetTokenIcon = getTokenIcon(targetSymbol);
+  const handleConfirm = async () => {
+    setError(null);
+    setIsSubmitting(true);
+    try {
+      await onConfirm();
+    } catch (err) {
+      const raw = err instanceof Error ? err.message : "Withdraw failed";
+      const message = formatUserError(raw);
+      setError(message);
+      onError?.(message, "WITHDRAW_REVIEW_ERROR");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const disabled = isSubmitting || registrationPending || Boolean(registrationError);
+  return /* @__PURE__ */ jsxs2("div", { className: "rs-screen", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "rs-screen-body rs-screen-body--gap-32", children: [
+      /* @__PURE__ */ jsx2(
+        BodyHeader,
+        {
+          icon: /* @__PURE__ */ jsx2(CircleArrowOutUpLeftIcon, {}),
+          title: "Review withdrawal"
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { className: "rs-amount-details", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "rs-amount-detail-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: "You send" }),
+          /* @__PURE__ */ jsxs2("span", { className: "rs-amount-detail-value", children: [
+            /* @__PURE__ */ jsxs2("span", { children: [
+              amount,
+              " ",
+              sourceSymbol
+            ] }),
+            sourceTokenIcon && /* @__PURE__ */ jsx2("span", { className: "rs-amount-detail-icon", children: /* @__PURE__ */ jsx2("img", { src: sourceTokenIcon, alt: "" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "rs-amount-detail-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: "Source chain" }),
+          /* @__PURE__ */ jsxs2("span", { className: "rs-amount-detail-value", children: [
+            /* @__PURE__ */ jsx2("span", { children: sourceChainName }),
+            sourceChainIcon && /* @__PURE__ */ jsx2("span", { className: "rs-amount-detail-icon", children: /* @__PURE__ */ jsx2("img", { src: sourceChainIcon, alt: "" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "rs-amount-detail-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: "Recipient" }),
+          /* @__PURE__ */ jsx2("span", { className: "rs-amount-detail-value", children: /* @__PURE__ */ jsx2("span", { children: shortenAddress(recipient) }) })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "rs-amount-detail-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: "Receive" }),
+          /* @__PURE__ */ jsxs2("span", { className: "rs-amount-detail-value", children: [
+            /* @__PURE__ */ jsxs2("span", { children: [
+              amount,
+              " ",
+              targetSymbol
+            ] }),
+            targetTokenIcon && /* @__PURE__ */ jsx2("span", { className: "rs-amount-detail-icon", children: /* @__PURE__ */ jsx2("img", { src: targetTokenIcon, alt: "" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "rs-amount-detail-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: "Destination chain" }),
+          /* @__PURE__ */ jsxs2("span", { className: "rs-amount-detail-value", children: [
+            /* @__PURE__ */ jsx2("span", { children: targetChainName }),
+            targetChainIcon && /* @__PURE__ */ jsx2("span", { className: "rs-amount-detail-icon", children: /* @__PURE__ */ jsx2("img", { src: targetChainIcon, alt: "" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "rs-amount-detail-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: "Estimated time" }),
+          /* @__PURE__ */ jsx2("span", { className: "rs-amount-detail-value", children: estimatedTime })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsxs2("div", { className: "rs-amount-error", role: "alert", children: [
+        /* @__PURE__ */ jsx2(AlertTriangleIcon, { style: { width: 16, height: 16, flexShrink: 0 } }),
+        /* @__PURE__ */ jsx2("span", { children: error })
+      ] }),
+      !error && registrationError && /* @__PURE__ */ jsxs2("div", { className: "rs-amount-error", role: "alert", children: [
+        /* @__PURE__ */ jsx2(AlertTriangleIcon, { style: { width: 16, height: 16, flexShrink: 0 } }),
+        /* @__PURE__ */ jsx2("span", { children: registrationError })
+      ] }),
+      /* @__PURE__ */ jsx2(
+        Button,
+        {
+          onClick: handleConfirm,
+          loading: isSubmitting,
+          loadingText: "Submitting transaction...",
+          disabled,
+          fullWidth: true,
+          children: "Continue"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2(PoweredBy, {})
+  ] });
+}
+WithdrawReviewStep.displayName = "WithdrawReviewStep";
+
 // src/core/safe.ts
 import {
   concat,
@@ -856,7 +1052,25 @@ async function buildSafeTransaction(params) {
 
 // src/WithdrawFlow.tsx
 import { encodeFunctionData as encodeFunctionData2, erc20Abi as erc20Abi3, parseUnits as parseUnits2 } from "viem";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ADDR_REGEX = /^0x[a-fA-F0-9]{40}$/;
+var REGISTRATION_DEBOUNCE_MS = 600;
+function resolveSessionOwner(eoaAddress) {
+  const localOwner = loadSessionOwnerFromStorage(eoaAddress);
+  if (localOwner) {
+    return {
+      account: accountFromPrivateKey(localOwner.privateKey),
+      address: localOwner.address
+    };
+  }
+  const created = createSessionOwnerKey();
+  saveSessionOwnerToStorage(eoaAddress, created.privateKey, created.address);
+  return { account: created.account, address: created.address };
+}
+function targetsEqual(a, b) {
+  if (!a) return false;
+  return a.chain === b.chain && a.token.toLowerCase() === b.token.toLowerCase() && (a.recipient?.toLowerCase() ?? "") === (b.recipient?.toLowerCase() ?? "");
+}
 function WithdrawFlow({
   dappWalletClient,
   dappPublicClient,
@@ -879,30 +1093,17 @@ function WithdrawFlow({
   onDisconnect,
   onSignTransaction,
   onRequestConnect,
-  connectButtonLabel,
   onStepChange,
-  onTotalBalanceChange,
   onClose,
-  onConnected,
-  onWithdrawSubmitted,
-  onWithdrawComplete,
-  onWithdrawFailed,
+  onLifecycle,
   onEvent,
   onError,
   debug
 }) {
   const onStepChangeRef = useLatestRef(onStepChange);
-  const onTotalBalanceChangeRef = useLatestRef(onTotalBalanceChange);
   const onEventRef = useLatestRef(onEvent);
-  const onConnectedRef = useLatestRef(onConnected);
-  const onWithdrawSubmittedRef = useLatestRef(onWithdrawSubmitted);
-  const onWithdrawCompleteRef = useLatestRef(onWithdrawComplete);
-  const onWithdrawFailedRef = useLatestRef(onWithdrawFailed);
+  const onLifecycleRef = useLatestRef(onLifecycle);
   const onErrorRef = useLatestRef(onError);
-  const [step, setStep] = useState2({ type: "form" });
-  const [isSubmitting, setIsSubmitting] = useState2(false);
-  const [totalBalanceUsd, setTotalBalanceUsd] = useState2(0);
-  const [isConnectSelectionConfirmed, setIsConnectSelectionConfirmed] = useState2(false);
   const logFlow = useCallback2(
     (message, data) => {
       debugLog(debug, "withdraw-flow", message, data);
@@ -915,12 +1116,20 @@ function WithdrawFlow({
     },
     [debug]
   );
-  const [targetChain, setTargetChain] = useState2(targetChainProp);
-  const [targetToken, setTargetToken] = useState2(targetTokenProp);
+  const [targetChain, setTargetChain] = useState3(targetChainProp);
+  const [targetToken, setTargetToken] = useState3(targetTokenProp);
+  const [recipientInput, setRecipientInput] = useState3(
+    defaultRecipient ?? ""
+  );
+  const [totalBalanceUsd, setTotalBalanceUsd] = useState3(0);
+  const [isConnectSelectionConfirmed, setIsConnectSelectionConfirmed] = useState3(false);
   useEffect2(() => {
     setTargetChain(targetChainProp);
     setTargetToken(targetTokenProp);
   }, [targetChainProp, targetTokenProp]);
+  useEffect2(() => {
+    if (defaultRecipient) setRecipientInput(defaultRecipient);
+  }, [defaultRecipient]);
   const hasCustomSigner = Boolean(dappAddress && onSignTransaction);
   const dappSwitchChain = useMemo2(() => {
     if (!dappWalletClient?.switchChain) return void 0;
@@ -941,7 +1150,7 @@ function WithdrawFlow({
       });
       seen.add(id);
     }
-    if (reownWallet?.address && reownWallet.isConnected && reownWallet.walletClient && reownWallet.publicClient && !seen.has(reownWallet.address.toLowerCase())) {
+    if (reownWallet?.address && reownWallet.isConnected && reownWallet.walletClient && reownWallet.publicClient) {
       const id = `evm:${reownWallet.address.toLowerCase()}`;
       if (!seen.has(id)) {
         options.push({
@@ -960,10 +1169,18 @@ function WithdrawFlow({
     reownWallet?.address,
     reownWallet?.isConnected,
     reownWallet?.walletClient,
-    reownWallet?.publicClient
+    reownWallet?.publicClient,
+    reownWallet?.icon
   ]);
   const canAutoLock = hasCustomSigner || Boolean(dappWalletClient?.account && dappAddress) && !reownWallet;
-  const [selectedWalletId, setSelectedWalletId] = useState2(null);
+  const storeApi = useWithdrawStoreApi();
+  const selectedWalletId = useWithdrawStore((s) => s.selectedWalletId);
+  const registration = useWithdrawStore((s) => s.registration);
+  const flowStep = useWithdrawStore((s) => s.step);
+  const setSelectedWalletId = useCallback2(
+    (walletId) => storeApi.dispatch({ type: "wallet/id-selected", walletId }),
+    [storeApi]
+  );
   const signerContext = useMemo2(() => {
     if (canAutoLock) {
       if (hasCustomSigner) {
@@ -982,7 +1199,7 @@ function WithdrawFlow({
       };
     }
     if (!isConnectSelectionConfirmed || !selectedWalletId) return null;
-    const selectedOption = walletOptions.find((option) => option.id === selectedWalletId);
+    const selectedOption = walletOptions.find((o) => o.id === selectedWalletId);
     if (!selectedOption || !selectedOption.address) return null;
     if (selectedOption.kind === "connected" && dappWalletClient?.account && dappWalletClient.account.address.toLowerCase() === selectedOption.address.toLowerCase()) {
       return {
@@ -1014,6 +1231,131 @@ function WithdrawFlow({
     reownWallet,
     sourceChain
   ]);
+  const ownerAddress = signerContext?.ownerAddress;
+  const recipientForRegistration = useMemo2(() => {
+    if (!recipientInput) return void 0;
+    return ADDR_REGEX.test(recipientInput) ? recipientInput : void 0;
+  }, [recipientInput]);
+  useEffect2(() => {
+    if (!ownerAddress) return;
+    const desiredTarget = {
+      chain: targetChain,
+      token: targetToken,
+      recipient: recipientForRegistration
+    };
+    const current = storeApi.getState().registration;
+    if (current.kind === "ready" && targetsEqual(current.registeredTarget, desiredTarget)) {
+      return;
+    }
+    let cancelled = false;
+    const timeout = setTimeout(async () => {
+      try {
+        storeApi.dispatch({ type: "registration/started" });
+        const sessionOwner = resolveSessionOwner(ownerAddress);
+        if (cancelled) return;
+        logFlow("auto-register:setup", {
+          ownerAddress,
+          targetChain,
+          targetToken,
+          recipient: recipientForRegistration
+        });
+        const setup = await service.setupAccount({
+          ownerAddress,
+          sessionOwnerAddress: sessionOwner.address,
+          targetChain: toEvmCaip2(targetChain),
+          targetToken,
+          recipient: recipientForRegistration,
+          signerAddress,
+          sessionChainIds,
+          forceRegister
+        });
+        if (cancelled) return;
+        if (setup.needsRegistration) {
+          if (!setup.accountParams || !setup.sessionDetailsUnsigned) {
+            throw new Error("Missing registration payload from setup-account");
+          }
+          const typedData = setup.sessionDetailsUnsigned.data;
+          if (!sessionOwner.account.signTypedData) {
+            throw new Error(
+              "Session owner account does not support signTypedData"
+            );
+          }
+          const signature = await sessionOwner.account.signTypedData({
+            domain: typedData.domain,
+            types: typedData.types,
+            primaryType: typedData.primaryType,
+            message: typedData.message
+          });
+          if (cancelled) return;
+          const sessionDetails = buildSessionDetails(
+            setup.sessionDetailsUnsigned,
+            signature
+          );
+          await service.registerAccount({
+            address: setup.smartAccount,
+            accountParams: {
+              factory: setup.accountParams.factory,
+              factoryData: setup.accountParams.factoryData,
+              sessionDetails
+            },
+            eoaAddress: ownerAddress,
+            sessionOwner: sessionOwner.address,
+            target: {
+              chain: toEvmCaip2(targetChain),
+              token: targetToken,
+              recipient: recipientForRegistration
+            }
+          });
+          if (cancelled) return;
+          logFlow("auto-register:registered", {
+            smartAccount: setup.smartAccount
+          });
+        }
+        storeApi.dispatch({
+          type: "registration/ready",
+          smartAccount: setup.smartAccount,
+          registeredTarget: desiredTarget
+        });
+        onLifecycleRef.current?.({
+          type: "connected",
+          address: ownerAddress,
+          smartAccount: setup.smartAccount
+        });
+      } catch (err) {
+        if (cancelled) return;
+        const raw = err instanceof Error ? err.message : "Registration failed";
+        const message = formatUserError(raw);
+        logFlowError("auto-register:failed", err, {
+          ownerAddress,
+          targetChain,
+          targetToken
+        });
+        storeApi.dispatch({
+          type: "registration/failed",
+          error: message
+        });
+        onErrorRef.current?.({ message, code: "WITHDRAW_REGISTER_FAILED" });
+      }
+    }, REGISTRATION_DEBOUNCE_MS);
+    return () => {
+      cancelled = true;
+      clearTimeout(timeout);
+    };
+  }, [
+    ownerAddress,
+    targetChain,
+    targetToken,
+    recipientForRegistration,
+    service,
+    signerAddress,
+    sessionChainIds,
+    forceRegister,
+    storeApi,
+    logFlow,
+    logFlowError,
+    onLifecycleRef,
+    onErrorRef
+  ]);
   const asset = useMemo2(() => {
     const symbol = getTokenSymbol(sourceToken, sourceChain);
     const decimals = getTokenDecimalsByAddress(sourceToken, sourceChain);
@@ -1028,60 +1370,51 @@ function WithdrawFlow({
   }, [sourceChain, sourceToken]);
   const isSourceNative = sourceToken.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase();
   const isSameRoute = targetChain === sourceChain && targetToken.toLowerCase() === sourceToken.toLowerCase();
-  const stepIndex = step.type === "form" ? 0 : 1;
-  const currentBackHandler = void 0;
+  const reviewBackHandler = useCallback2(() => {
+    storeApi.dispatch({ type: "review/back" });
+  }, [storeApi]);
   useEffect2(() => {
-    onStepChangeRef.current?.(stepIndex, currentBackHandler);
-  }, [stepIndex, currentBackHandler, onStepChangeRef]);
+    onStepChangeRef.current?.(
+      flowStep === "review" ? reviewBackHandler : void 0
+    );
+  }, [flowStep, reviewBackHandler, onStepChangeRef]);
   const lastStepOpenEventKeyRef = useRef2(null);
   useEffect2(() => {
-    if (step.type !== "form") {
+    if (flowStep !== "form") {
       lastStepOpenEventKeyRef.current = null;
       return;
     }
-    if (lastStepOpenEventKeyRef.current === "form") {
-      return;
-    }
+    if (lastStepOpenEventKeyRef.current === "form") return;
     lastStepOpenEventKeyRef.current = "form";
-    if (step.type === "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
-      });
-    }
-  }, [step.type, targetToken, targetChain, totalBalanceUsd, onEventRef]);
+    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]);
   useEffect2(() => {
     logFlow("state:changed", {
-      step: step.type,
+      step: flowStep,
       sourceChain,
       sourceToken,
       targetChain,
       targetToken,
-      selectedWalletId
+      selectedWalletId,
+      registration: registration.kind
     });
   }, [
     logFlow,
     selectedWalletId,
     sourceChain,
     sourceToken,
-    step.type,
+    flowStep,
     targetChain,
-    targetToken
+    targetToken,
+    registration.kind
   ]);
-  useEffect2(() => {
-    onTotalBalanceChangeRef.current?.(totalBalanceUsd);
-  }, [totalBalanceUsd, onTotalBalanceChangeRef]);
-  const handleConnected = useCallback2(
-    (addr, smartAccount) => {
-      logFlow("setup:connected", { address: addr, smartAccount });
-      onConnectedRef.current?.({ address: addr, smartAccount });
-    },
-    [logFlow, onConnectedRef]
-  );
   const handleError = useCallback2(
     (message, code) => {
       logFlowError("flow:error", message, { code });
@@ -1089,23 +1422,8 @@ function WithdrawFlow({
     },
     [logFlowError, onErrorRef]
   );
-  const resolveSessionOwner = useCallback2(async (eoaAddress) => {
-    const localOwner = loadSessionOwnerFromStorage(eoaAddress);
-    if (localOwner) {
-      return {
-        account: accountFromPrivateKey(localOwner.privateKey),
-        address: localOwner.address
-      };
-    }
-    const created = createSessionOwnerKey();
-    saveSessionOwnerToStorage(eoaAddress, created.privateKey, created.address);
-    return {
-      account: created.account,
-      address: created.address
-    };
-  }, []);
-  const handleFormSubmit = useCallback2(
-    async (recipient, amountValue) => {
+  const handleFormContinue = useCallback2(
+    (recipient, amountValue) => {
       const tokenSymbol = getTokenSymbol(targetToken, targetChain);
       const chainName = getChainName(targetChain);
       onEventRef.current?.({
@@ -1116,17 +1434,32 @@ function WithdrawFlow({
         amount: amountValue,
         cta_name: "withdraw"
       });
-      const ownerAddress2 = signerContext?.ownerAddress;
-      if (!ownerAddress2) {
-        throw new Error("Wallet not connected");
+      storeApi.dispatch({
+        type: "form/continue",
+        amount: amountValue,
+        recipient
+      });
+    },
+    [targetToken, targetChain, totalBalanceUsd, onEventRef, storeApi]
+  );
+  const handleReviewConfirm = useCallback2(
+    async () => {
+      const state = storeApi.getState();
+      if (state.registration.kind !== "ready") {
+        throw new Error("Session not ready");
+      }
+      const smartAccount = state.registration.smartAccount;
+      const recipient = state.recipient;
+      const amountValue = state.amount;
+      if (!recipient || !amountValue) {
+        throw new Error("Missing recipient or amount");
       }
       if (!onSignTransaction && !signerContext?.walletClient) {
         throw new Error("Wallet not connected");
       }
-      setIsSubmitting(true);
       try {
         logFlow("submit:start", {
-          ownerAddress: ownerAddress2,
+          smartAccount,
           recipient,
           amount: amountValue,
           sourceChain,
@@ -1134,60 +1467,6 @@ function WithdrawFlow({
           targetChain,
           targetToken
         });
-        const sessionOwner = await resolveSessionOwner(ownerAddress2);
-        const setup = await service.setupAccount({
-          ownerAddress: ownerAddress2,
-          sessionOwnerAddress: sessionOwner.address,
-          targetChain: toEvmCaip2(targetChain),
-          targetToken,
-          recipient,
-          signerAddress,
-          sessionChainIds,
-          forceRegister
-        });
-        const smartAccount = setup.smartAccount;
-        logFlow("setup:resolved", {
-          smartAccount,
-          needsRegistration: setup.needsRegistration
-        });
-        if (setup.needsRegistration) {
-          if (!setup.accountParams || !setup.sessionDetailsUnsigned) {
-            throw new Error("Missing registration payload from setup-account");
-          }
-          const typedData = setup.sessionDetailsUnsigned.data;
-          if (!sessionOwner.account.signTypedData) {
-            throw new Error(
-              "Session owner account does not support signTypedData"
-            );
-          }
-          const signature = await sessionOwner.account.signTypedData({
-            domain: typedData.domain,
-            types: typedData.types,
-            primaryType: typedData.primaryType,
-            message: typedData.message
-          });
-          const sessionDetails = buildSessionDetails(
-            setup.sessionDetailsUnsigned,
-            signature
-          );
-          await service.registerAccount({
-            address: smartAccount,
-            accountParams: {
-              factory: setup.accountParams.factory,
-              factoryData: setup.accountParams.factoryData,
-              sessionDetails
-            },
-            eoaAddress: ownerAddress2,
-            sessionOwner: sessionOwner.address,
-            target: {
-              chain: toEvmCaip2(targetChain),
-              token: targetToken,
-              recipient
-            }
-          });
-          logFlow("register:success", { smartAccount });
-        }
-        handleConnected(ownerAddress2, smartAccount);
         const amountUnits = parseUnits2(amountValue, asset.decimals);
         const pc = signerContext?.publicClient ?? getPublicClient(sourceChain);
         let result;
@@ -1249,21 +1528,14 @@ function WithdrawFlow({
           sourceChain,
           sourceToken
         });
-        onWithdrawSubmittedRef.current?.({
+        onLifecycleRef.current?.({
+          type: "submitted",
           txHash: result.txHash,
           sourceChain,
           amount: amountUnits.toString(),
           safeAddress
         });
-        setStep({
-          type: "processing",
-          smartAccount,
-          txHash: result.txHash,
-          sourceChain,
-          sourceToken,
-          amount: amountUnits.toString(),
-          directTransfer: isSameRoute
-        });
+        storeApi.dispatch({ type: "withdraw/submitted", txHash: result.txHash });
       } catch (err) {
         const raw = err instanceof Error ? err.message : "Withdraw failed";
         logFlowError("submit:failed", err, {
@@ -1274,20 +1546,13 @@ function WithdrawFlow({
         });
         handleError(formatUserError(raw), "WITHDRAW_FLOW_ERROR");
         throw err;
-      } finally {
-        setIsSubmitting(false);
       }
     },
     [
       signerContext,
-      resolveSessionOwner,
-      signerAddress,
-      sessionChainIds,
-      forceRegister,
       targetChain,
       targetToken,
       service,
-      handleConnected,
       asset.decimals,
       safeAddress,
       sourceToken,
@@ -1298,15 +1563,15 @@ function WithdrawFlow({
       handleError,
       logFlow,
       logFlowError,
-      onEventRef,
-      totalBalanceUsd,
-      onWithdrawSubmittedRef
+      onLifecycleRef,
+      storeApi
     ]
   );
   const handleWithdrawComplete = useCallback2(
     (txHash, destinationTxHash, context) => {
       logFlow("withdraw:complete", { txHash, destinationTxHash, ...context });
-      onWithdrawCompleteRef.current?.({
+      onLifecycleRef.current?.({
+        type: "complete",
         txHash,
         destinationTxHash,
         amount: context.amount,
@@ -1315,15 +1580,21 @@ function WithdrawFlow({
         targetChain: context.targetChain,
         targetToken: context.targetToken
       });
+      storeApi.dispatch({ type: "withdraw/complete" });
     },
-    [logFlow, onWithdrawCompleteRef]
+    [logFlow, onLifecycleRef, storeApi]
   );
   const handleWithdrawFailed = useCallback2(
     (txHash, error) => {
       logFlowError("withdraw:failed", error, { txHash });
-      onWithdrawFailedRef.current?.({ txHash, error });
+      onLifecycleRef.current?.({
+        type: "failed",
+        txHash,
+        error
+      });
+      storeApi.dispatch({ type: "withdraw/failed" });
     },
-    [logFlowError, onWithdrawFailedRef]
+    [logFlowError, onLifecycleRef, storeApi]
   );
   const allowedChainSet = useMemo2(
     () => allowedRoutes?.sourceChains ? new Set(allowedRoutes.sourceChains) : null,
@@ -1353,20 +1624,18 @@ function WithdrawFlow({
     const matches = targetTokenOptions.some(
       (option) => option.address.toLowerCase() === targetToken.toLowerCase()
     );
-    if (!matches) {
-      setTargetToken(targetTokenOptions[0].address);
-    }
+    if (!matches) setTargetToken(targetTokenOptions[0].address);
   }, [targetToken, targetTokenOptions]);
   const handleTargetChainChange = useCallback2(
     (chainId) => {
       setTargetChain(chainId);
       let options = getSupportedTargetTokens(chainId);
       if (allowedTokenSet) {
-        options = options.filter((t) => allowedTokenSet.has(t.symbol.toUpperCase()));
-      }
-      if (options.length === 0) {
-        return;
+        options = options.filter(
+          (t) => allowedTokenSet.has(t.symbol.toUpperCase())
+        );
       }
+      if (options.length === 0) return;
       const currentlySupported = options.some(
         (option) => option.address.toLowerCase() === targetToken.toLowerCase()
       );
@@ -1381,27 +1650,18 @@ function WithdrawFlow({
   }, []);
   const selectedWalletIdEffective = useMemo2(() => {
     if (selectedWalletId) return selectedWalletId;
-    if (walletOptions.length === 1) {
-      return walletOptions[0].id;
-    }
+    if (walletOptions.length === 1) return walletOptions[0].id;
     return null;
   }, [selectedWalletId, walletOptions]);
   const walletOptionsKey = useMemo2(
-    () => walletOptions.map((option) => option.id).join(","),
+    () => walletOptions.map((o) => o.id).join(","),
     [walletOptions]
   );
   const showConnectStep = !canAutoLock && !isConnectSelectionConfirmed;
   useEffect2(() => {
     setIsConnectSelectionConfirmed(false);
-  }, [walletOptionsKey, selectedWalletIdEffective]);
-  useEffect2(() => {
-    if (!showConnectStep && isConnectSelectionConfirmed && !signerContext) {
-      setSelectedWalletId(null);
-      setIsConnectSelectionConfirmed(false);
-    }
-  }, [showConnectStep, isConnectSelectionConfirmed, signerContext]);
-  const ownerAddress = signerContext?.ownerAddress;
-  const selectedWalletOption = selectedWalletIdEffective ? walletOptions.find((option) => option.id === selectedWalletIdEffective) ?? null : null;
+  }, [walletOptionsKey]);
+  const selectedWalletOption = selectedWalletIdEffective ? walletOptions.find((o) => o.id === selectedWalletIdEffective) ?? null : null;
   const selectedWalletIcon = useMemo2(() => {
     if (!ownerAddress) return void 0;
     const selected = walletOptions.find(
@@ -1410,22 +1670,19 @@ function WithdrawFlow({
     return selected?.kind === "external" ? selected.icon ?? reownWallet?.icon : void 0;
   }, [walletOptions, ownerAddress, reownWallet?.icon]);
   if (showConnectStep) {
-    return /* @__PURE__ */ jsx2("div", { className: "rs-modal-body", children: /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3("div", { className: "rs-modal-body", children: /* @__PURE__ */ jsx3(
       ConnectStep,
       {
         walletOptions,
-        selectedWalletId: selectedWalletIdEffective,
-        onSelectWallet: setSelectedWalletId,
+        onConfirmWallet: (walletId) => {
+          setSelectedWalletId(walletId);
+          setIsConnectSelectionConfirmed(true);
+        },
         onRequestConnect,
         onConnect,
         onDisconnect,
-        onContinue: () => {
-          if (selectedWalletIdEffective) {
-            setSelectedWalletId(selectedWalletIdEffective);
-          }
-          setIsConnectSelectionConfirmed(true);
-        },
-        connectButtonLabel
+        title: "Withdraw",
+        subtitle: "Choose a wallet to continue"
       }
     ) });
   }
@@ -1433,8 +1690,9 @@ function WithdrawFlow({
   if (!onSignTransaction && !signerContext.walletClient) return null;
   const resolvedConnectedRecipient = selectedWalletOption?.kind === "external" ? selectedWalletOption.address : void 0;
   const formPublicClient = signerContext.publicClient ?? getPublicClient(sourceChain);
-  return /* @__PURE__ */ jsxs2("div", { className: "rs-modal-body", children: [
-    step.type === "form" && /* @__PURE__ */ jsx2(
+  const stepView = deriveStepView(flowStep, registration);
+  return /* @__PURE__ */ jsxs3("div", { className: "rs-modal-body", children: [
+    stepView === "form" && /* @__PURE__ */ jsx3(
       WithdrawFormStep,
       {
         walletClient: signerContext.walletClient,
@@ -1452,27 +1710,44 @@ function WithdrawFlow({
         onTargetTokenChange: handleTargetTokenChange,
         switchChain: signerContext.switchChain,
         walletIcon: selectedWalletIcon,
-        submitting: isSubmitting,
-        onSubmit: handleFormSubmit,
+        registrationPending: registration.kind === "pending" || registration.kind === "stale",
+        registrationError: registration.kind === "failed" ? registration.error : null,
+        onRecipientChange: setRecipientInput,
+        onSubmit: async (r, a) => handleFormContinue(r, a),
         onBalanceUsdChange: setTotalBalanceUsd
       }
     ),
-    step.type === "processing" && /* @__PURE__ */ jsx2(
+    stepView === "review" && /* @__PURE__ */ jsx3(
+      WithdrawReviewStep,
+      {
+        sourceChain,
+        sourceSymbol: asset.symbol,
+        targetChain,
+        targetToken,
+        amount: storeApi.getState().amount ?? "0",
+        recipient: storeApi.getState().recipient ?? recipientForRegistration ?? "0x0",
+        registrationPending: registration.kind === "pending" || registration.kind === "stale",
+        registrationError: registration.kind === "failed" ? registration.error : null,
+        onConfirm: handleReviewConfirm,
+        onError: handleError
+      }
+    ),
+    stepView === "processing" && registration.kind !== "idle" && /* @__PURE__ */ jsx3(
       ProcessingStep,
       {
-        smartAccount: step.smartAccount,
-        txHash: step.txHash,
-        sourceChain: step.sourceChain,
-        sourceToken: step.sourceToken,
+        smartAccount: registration.kind === "ready" || registration.kind === "stale" ? registration.smartAccount : "0x0",
+        txHash: storeApi.getState().txHash ?? "0x0",
+        sourceChain,
+        sourceToken,
         targetChain,
         targetToken,
-        amount: step.amount,
-        directTransfer: step.directTransfer,
+        amount: storeApi.getState().amount ?? "0",
+        directTransfer: isSameRoute,
         waitForFinalTx,
         service,
         flowLabel: "withdraw",
         onClose,
-        onNewDeposit: () => setStep({ type: "form" }),
+        onNewDeposit: () => storeApi.dispatch({ type: "flow/reset" }),
         onDepositComplete: handleWithdrawComplete,
         onDepositFailed: handleWithdrawFailed,
         onError: handleError,
@@ -1481,20 +1756,27 @@ function WithdrawFlow({
     )
   ] });
 }
+function deriveStepView(step, _registration) {
+  if (step === "review") return "review";
+  if (step === "processing" || step === "complete" || step === "failed") {
+    return "processing";
+  }
+  return "form";
+}
 
 // src/WithdrawModal.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var ReownWithdrawInner = lazy(
-  () => import("./WithdrawModalReown-YSRO5ZTA.mjs").then((m) => ({
+  () => import("./WithdrawModalReown-O6V6KRH6.mjs").then((m) => ({
     default: m.WithdrawModalReown
   }))
 );
 function WithdrawModal(props) {
   const needsReown = !!props.reownAppId;
   if (needsReown) {
-    return /* @__PURE__ */ jsx3(Suspense, { fallback: null, children: /* @__PURE__ */ jsx3(ReownWithdrawInner, { ...props }) });
+    return /* @__PURE__ */ jsx4(Suspense, { fallback: null, children: /* @__PURE__ */ jsx4(ReownWithdrawInner, { ...props }) });
   }
-  return /* @__PURE__ */ jsx3(WithdrawModalInner, { ...props });
+  return /* @__PURE__ */ jsx4(WithdrawModalInner, { ...props });
 }
 WithdrawModal.displayName = "WithdrawModal";
 function WithdrawModalInner({
@@ -1523,31 +1805,36 @@ function WithdrawModalInner({
   onDisconnect,
   onSignTransaction,
   onRequestConnect,
-  connectButtonLabel,
   theme,
-  branding,
   uiConfig,
   className,
   onReady,
-  onConnected,
-  onWithdrawSubmitted,
-  onWithdrawComplete,
-  onWithdrawFailed,
+  onLifecycle,
   onEvent,
   onError,
   debug
 }) {
   const modalRef = useRef3(null);
   const onReadyRef = useLatestRef(onReady);
-  const [currentStepIndex, setCurrentStepIndex] = useState3(0);
-  const [totalBalanceUsd, setTotalBalanceUsd] = useState3(null);
-  const backHandlerRef = useRef3(void 0);
+  const [backHandler, setBackHandler] = useState4(
+    void 0
+  );
   const targetChain = getChainId(targetChainProp);
   const sourceChain = getChainId(sourceChainProp);
   const service = useMemo3(
     () => createDepositService(backendUrl, { debug, debugScope: "service:withdraw" }),
     [backendUrl, debug]
   );
+  const store = useMemo3(() => createWithdrawStore(), []);
+  const onErrorRef = useLatestRef(onError);
+  useEffect3(() => {
+    if (isOpen && onSignTransaction && !dappAddress) {
+      onErrorRef.current?.({
+        message: "WithdrawModal requires `dappAddress` when `onSignTransaction` is provided.",
+        code: "WITHDRAW_MISSING_DAPP_ADDRESS"
+      });
+    }
+  }, [isOpen, onSignTransaction, dappAddress, onErrorRef]);
   useEffect3(() => {
     if (isOpen && modalRef.current) {
       applyTheme(modalRef.current, theme);
@@ -1560,30 +1847,15 @@ function WithdrawModalInner({
   }, [isOpen, onReadyRef]);
   useEffect3(() => {
     if (!isOpen) {
-      setCurrentStepIndex(0);
+      store.dispatch({ type: "modal/reset" });
     }
-  }, [isOpen]);
-  const handleStepChange = useCallback3(
-    (stepIndex, onBack) => {
-      setCurrentStepIndex(stepIndex);
-      backHandlerRef.current = onBack;
-    },
-    []
-  );
-  const handleTotalBalanceChange = useCallback3((balance2) => {
-    setTotalBalanceUsd(balance2);
-  }, []);
-  const handleBack = useCallback3(() => {
-    backHandlerRef.current?.();
+  }, [isOpen, store]);
+  const handleStepChange = useCallback3((onBack) => {
+    setBackHandler(() => onBack);
   }, []);
-  const showLogo = uiConfig?.showLogo ?? false;
-  const showStepper = uiConfig?.showStepper ?? false;
   const showBackButton = uiConfig?.showBackButton ?? true;
-  const balance = uiConfig?.balance;
-  const logoUrl = branding?.logoUrl ?? "https://github.com/rhinestonewtf.png";
-  const title = branding?.title ?? "Withdraw";
-  const canGoBack = currentStepIndex > 0 && currentStepIndex < 3 && backHandlerRef.current;
-  return /* @__PURE__ */ jsx3(
+  const canGoBack = backHandler !== void 0;
+  return /* @__PURE__ */ jsx4(WithdrawStoreProvider, { store, children: /* @__PURE__ */ jsx4(
     Modal,
     {
       isOpen,
@@ -1591,89 +1863,30 @@ function WithdrawModalInner({
       className,
       inline,
       closeOnOverlayClick,
-      children: /* @__PURE__ */ jsxs3("div", { ref: modalRef, className: "rs-modal", children: [
-        /* @__PURE__ */ jsxs3("div", { className: "rs-modal-header--redesigned", children: [
-          /* @__PURE__ */ jsx3("div", { className: "rs-modal-header-nav-left", children: showBackButton && canGoBack && /* @__PURE__ */ jsx3(
+      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: handleBack,
-              children: /* @__PURE__ */ jsx3(
-                "svg",
-                {
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  children: /* @__PURE__ */ jsx3(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      d: "M15.75 19.5L8.25 12l7.5-7.5"
-                    }
-                  )
-                }
-              )
+              onClick: backHandler,
+              children: /* @__PURE__ */ jsx4(ChevronLeftIcon, {})
             }
           ) }),
-          /* @__PURE__ */ jsxs3("div", { className: "rs-modal-header-nav-center", children: [
-            /* @__PURE__ */ jsxs3("div", { className: "rs-modal-header-title-row", children: [
-              showLogo && logoUrl && /* @__PURE__ */ jsx3(
-                "img",
-                {
-                  src: logoUrl,
-                  alt: "",
-                  className: "rs-modal-logo",
-                  onError: (e) => {
-                    e.target.style.display = "none";
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx3("span", { className: "rs-modal-header-title", children: title }),
-              showStepper && /* @__PURE__ */ jsx3("div", { className: "rs-modal-progress", style: { marginLeft: 8 }, children: [0, 1].map((i) => /* @__PURE__ */ jsx3(
-                "div",
-                {
-                  className: `rs-modal-progress-dot ${i <= currentStepIndex ? "rs-modal-progress-dot--active" : "rs-modal-progress-dot--inactive"}`
-                },
-                i
-              )) })
-            ] }),
-            balance && /* @__PURE__ */ jsxs3("div", { className: "rs-modal-header-balance", children: [
-              /* @__PURE__ */ jsx3("span", { className: "rs-modal-header-balance-label", children: balance.title }),
-              /* @__PURE__ */ jsx3("span", { className: "rs-modal-header-balance-value", children: balance.amount ?? (totalBalanceUsd !== null ? currencyFormatter.format(totalBalanceUsd) : null) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx3("div", { className: "rs-modal-header-nav-right", children: /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4("div", { className: "rs-modal-header-nav-right", children: /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
               onClick: onClose,
               className: "rs-modal-close",
               "aria-label": "Close",
-              children: /* @__PURE__ */ jsx3(
-                "svg",
-                {
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  children: /* @__PURE__ */ jsx3(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      d: "M6 18L18 6M6 6l12 12"
-                    }
-                  )
-                }
-              )
+              children: /* @__PURE__ */ jsx4(CloseIcon, {})
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           WithdrawFlow,
           {
             dappWalletClient,
@@ -1697,14 +1910,9 @@ function WithdrawModalInner({
             onDisconnect,
             onSignTransaction,
             onRequestConnect,
-            connectButtonLabel,
             onStepChange: handleStepChange,
-            onTotalBalanceChange: handleTotalBalanceChange,
             onClose,
-            onConnected,
-            onWithdrawSubmitted,
-            onWithdrawComplete,
-            onWithdrawFailed,
+            onLifecycle,
             onEvent,
             onError,
             debug
@@ -1712,7 +1920,7 @@ function WithdrawModalInner({
         )
       ] })
     }
-  );
+  ) });
 }
 
 export {