@rhinestone/deposit-modal 0.1.65 → 0.1.66

package/dist/{chunk-IYZGLNY6.mjs → chunk-JDO7QPPH.mjs}

@@ -19,14 +19,16 @@ import {
   getPublicClient,
   isDepositEvent,
   isNativeAsset,
+  isSolanaCaip2,
   loadSessionOwnerFromStorage,
+  parseEvmChainId,
   portfolioToAssets,
   saveSessionOwnerToStorage,
   toEvmCaip2,
   tokenFormatter,
   txRefsMatch,
   useLatestRef
-} from "./chunk-GAHX5RAT.mjs";
+} from "./chunk-FWGLRTWF.mjs";
 import {
   DEFAULT_BACKEND_URL,
   DEFAULT_SIGNER_ADDRESS,
@@ -36,9 +38,11 @@ import {
   getChainIcon,
   getChainId,
   getChainName,
+  getExplorerUrl,
   getSupportedChainIds,
   getTargetTokenSymbolsForChain,
   getTokenAddress,
+  getTokenDecimalsByAddress,
   getTokenIcon,
   getTokenSymbol,
   isStablecoinSymbol
@@ -50,7 +54,7 @@ import {
   useEffect as useEffect10,
   useRef as useRef6,
   useState as useState11,
-  useCallback as useCallback4,
+  useCallback as useCallback5,
   lazy,
   Suspense
 } from "react";
@@ -2586,6 +2590,7 @@ function DepositFlow({
   allowedRoutes,
   onStepChange,
   onTotalBalanceChange,
+  onSmartAccountChange,
   onClose,
   onConnected,
   onDepositSubmitted,
@@ -2597,6 +2602,7 @@ function DepositFlow({
 }) {
   const onStepChangeRef = useLatestRef(onStepChange);
   const onTotalBalanceChangeRef = useLatestRef(onTotalBalanceChange);
+  const onSmartAccountChangeRef = useLatestRef(onSmartAccountChange);
   const onEventRef = useLatestRef(onEvent);
   const hasInitialReownSession = Boolean(
     enableSolana ? reownWallet?.isConnected || reownWallet?.address : reownWallet?.address
@@ -3001,12 +3007,13 @@ function DepositFlow({
     setStep({ type: "setup" });
   }, []);
   const handleNewDeposit = useCallback3(() => {
+    onSmartAccountChangeRef.current?.(null);
     setFlowMode(null);
     setStep({ type: "setup" });
     setIsConnectSelectionConfirmed(false);
     setSelectedWalletId(null);
     hasNavigatedBackRef.current = false;
-  }, []);
+  }, [onSmartAccountChangeRef]);
   const handleSetupComplete = useCallback3(
     (smartAccount, solanaDepositAddress) => {
       logFlow("setup:complete", {
@@ -3014,6 +3021,7 @@ function DepositFlow({
         hasSolanaDepositAddress: Boolean(solanaDepositAddress),
         flowMode: isDepositAddressMode ? "deposit-address" : isSolanaWalletMode ? "solana-wallet" : "wallet"
       });
+      onSmartAccountChangeRef.current?.(smartAccount);
       if (isDepositAddressMode) {
         setStep({
           type: "deposit-address",
@@ -3037,7 +3045,7 @@ function DepositFlow({
         setStep({ type: "select-asset", smartAccount });
       }
     },
-    [isDepositAddressMode, isSolanaWalletMode, logFlow]
+    [isDepositAddressMode, isSolanaWalletMode, logFlow, onSmartAccountChangeRef]
   );
   const handleDepositAddressDetected = useCallback3(
     (txHash, chainId, amount, token, sourceSymbol, sourceDecimals) => {
@@ -3664,10 +3672,251 @@ function DepositFlow({
   ] });
 }
 
+// src/components/history/DepositHistoryPanel.tsx
+import { useCallback as useCallback4 } from "react";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function shortenHash(hash) {
+  if (hash.length <= 14) return hash;
+  return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
+}
+function formatTimestamp(iso) {
+  try {
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime())) return iso;
+    const now = /* @__PURE__ */ new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMin = Math.floor(diffMs / 6e4);
+    if (diffMin < 1) return "Just now";
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHr = Math.floor(diffMin / 60);
+    if (diffHr < 24) return `${diffHr}h ago`;
+    const diffDay = Math.floor(diffHr / 24);
+    if (diffDay < 7) return `${diffDay}d ago`;
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric"
+    });
+  } catch {
+    return iso;
+  }
+}
+function resolveChainId(value) {
+  if (value === void 0 || value === null) return null;
+  if (typeof value === "number") return value;
+  if (isSolanaCaip2(value) || value === "solana") return "solana";
+  const parsed = parseEvmChainId(value);
+  if (parsed !== null) return parsed;
+  const num = Number(value);
+  return Number.isFinite(num) ? num : null;
+}
+function resolveTokenSymbol(token, chainId) {
+  if (!token) return "";
+  if (chainId !== null && chainId !== void 0 && chainId !== "solana" && /^0x[a-fA-F0-9]{40}$/.test(token)) {
+    const sym = getTokenSymbol(token, chainId);
+    if (sym !== "Token") return sym;
+  }
+  return shortenHash(token);
+}
+function formatAmount(rawAmount, token, chainId) {
+  if (!rawAmount) return "";
+  let decimals = 18;
+  if (token && chainId !== null && chainId !== void 0 && chainId !== "solana" && /^0x[a-fA-F0-9]{40}$/.test(token)) {
+    decimals = getTokenDecimalsByAddress(token, chainId);
+  }
+  try {
+    const raw = BigInt(rawAmount);
+    const divisor = BigInt(10 ** decimals);
+    const whole = raw / divisor;
+    const remainder = raw % divisor;
+    if (remainder === 0n) return whole.toString();
+    const fracStr = remainder.toString().padStart(decimals, "0");
+    const trimmed = fracStr.slice(0, 6).replace(/0+$/, "");
+    if (!trimmed) return whole.toString();
+    return `${whole}.${trimmed}`;
+  } catch {
+    return rawAmount;
+  }
+}
+function getTxExplorerUrl(txHash, chainId) {
+  if (!chainId) return null;
+  const base = getExplorerUrl(chainId);
+  if (!base) return null;
+  return `${base}/tx/${txHash}`;
+}
+function normalizeStatus(raw) {
+  const lower = raw.toLowerCase();
+  if (lower === "completed" || lower === "complete" || lower === "bridge-complete" || lower === "processed") return "completed";
+  if (lower === "failed" || lower === "error" || lower === "bridge-failed") return "failed";
+  if (lower === "processing" || lower === "submitted" || lower === "bridging") return "processing";
+  return "pending";
+}
+var STATUS_LABEL = {
+  pending: "Pending",
+  processing: "Processing",
+  completed: "Completed",
+  failed: "Failed"
+};
+function ExternalLinkIcon() {
+  return /* @__PURE__ */ jsx11("svg", { className: "rs-history-ext-icon", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 1.5H2.25A.75.75 0 0 0 1.5 2.25v7.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75V7.5m-3-6h3m0 0v3m0-3L6 6" }) });
+}
+function DepositHistoryPanel({
+  deposits,
+  isLoading,
+  error,
+  hasMore,
+  isLoadingMore,
+  onLoadMore,
+  onClose
+}) {
+  const handleKeyDown = useCallback4(
+    (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "rs-history-panel",
+      role: "dialog",
+      "aria-label": "Deposit history",
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "rs-history-header", children: [
+          /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              className: "rs-history-back",
+              "aria-label": "Close history",
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx11("span", { className: "rs-history-header-title", children: "History" }),
+          /* @__PURE__ */ jsx11("div", { className: "rs-history-header-spacer" })
+        ] }),
+        /* @__PURE__ */ jsxs11("div", { className: "rs-history-body", children: [
+          isLoading && deposits.length === 0 && /* @__PURE__ */ jsxs11("div", { className: "rs-history-state", children: [
+            /* @__PURE__ */ jsx11("div", { className: "rs-history-spinner", children: /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx11("path", { d: "M12 2v4m0 12v4m-7.07-3.93l2.83-2.83m8.48-8.48l2.83-2.83M2 12h4m12 0h4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83", strokeLinecap: "round" }) }) }),
+            /* @__PURE__ */ jsx11("span", { className: "rs-history-state-text", children: "Loading history..." })
+          ] }),
+          error && !isLoading && /* @__PURE__ */ jsxs11("div", { className: "rs-history-state", children: [
+            /* @__PURE__ */ jsx11("div", { className: "rs-history-state-icon rs-history-state-icon--error", children: /* @__PURE__ */ jsxs11("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", d: "M12 8v4m0 4h.01" })
+            ] }) }),
+            /* @__PURE__ */ jsx11("span", { className: "rs-history-state-text", children: error })
+          ] }),
+          !isLoading && !error && deposits.length === 0 && /* @__PURE__ */ jsxs11("div", { className: "rs-history-state", children: [
+            /* @__PURE__ */ jsx11("div", { className: "rs-history-state-icon", children: /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" }) }) }),
+            /* @__PURE__ */ jsx11("span", { className: "rs-history-state-text", children: "No deposits yet" }),
+            /* @__PURE__ */ jsx11("span", { className: "rs-history-state-hint", children: "Your deposit history will appear here" })
+          ] }),
+          deposits.length > 0 && /* @__PURE__ */ jsxs11("div", { className: "rs-history-list", children: [
+            deposits.map((deposit, i) => /* @__PURE__ */ jsx11(HistoryRow, { deposit }, deposit.txHash || i)),
+            hasMore && /* @__PURE__ */ jsx11(
+              "button",
+              {
+                type: "button",
+                className: "rs-history-load-more",
+                onClick: onLoadMore,
+                disabled: isLoadingMore,
+                children: isLoadingMore ? "Loading..." : "Load more"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function HistoryRow({ deposit }) {
+  const status = normalizeStatus(deposit.status);
+  const sourceChainId = resolveChainId(deposit.chain);
+  const targetChainId = resolveChainId(deposit.targetChain);
+  const sourceChainName = sourceChainId ? getChainName(sourceChainId) : null;
+  const targetChainName = targetChainId ? getChainName(targetChainId) : null;
+  const sourceChainIcon = sourceChainId ? getChainIcon(sourceChainId) : void 0;
+  const targetChainIcon = targetChainId ? getChainIcon(targetChainId) : void 0;
+  const sourceSymbol = resolveTokenSymbol(deposit.token, sourceChainId);
+  const targetSymbol = resolveTokenSymbol(deposit.targetToken, targetChainId);
+  const rawAmount = deposit.sourceAmount ?? deposit.amount;
+  const formattedAmount = rawAmount ? formatAmount(rawAmount, deposit.token, sourceChainId) : null;
+  const timestamp = deposit.createdAt ? formatTimestamp(deposit.createdAt) : null;
+  const srcTxUrl = deposit.sourceTxHash ? getTxExplorerUrl(deposit.sourceTxHash, sourceChainId) : null;
+  const dstTxUrl = deposit.destinationTxHash ? getTxExplorerUrl(deposit.destinationTxHash, targetChainId) : null;
+  return /* @__PURE__ */ jsxs11("div", { className: "rs-history-row", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "rs-history-row-primary", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "rs-history-route", children: [
+        /* @__PURE__ */ jsxs11("span", { className: "rs-history-chain", children: [
+          sourceChainIcon && /* @__PURE__ */ jsx11("img", { src: sourceChainIcon, alt: "", className: "rs-history-chain-icon" }),
+          /* @__PURE__ */ jsx11("span", { className: "rs-history-chain-name", children: sourceChainName ?? "Unknown" })
+        ] }),
+        /* @__PURE__ */ jsx11("svg", { className: "rs-history-route-arrow", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.5 6h7m0 0L7 3.5M9.5 6 7 8.5" }) }),
+        /* @__PURE__ */ jsxs11("span", { className: "rs-history-chain", children: [
+          targetChainIcon && /* @__PURE__ */ jsx11("img", { src: targetChainIcon, alt: "", className: "rs-history-chain-icon" }),
+          /* @__PURE__ */ jsx11("span", { className: "rs-history-chain-name", children: targetChainName ?? "Unknown" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs11("span", { className: `rs-history-status rs-history-status--${status}`, children: [
+        /* @__PURE__ */ jsx11("span", { className: `rs-history-dot rs-history-dot--${status}` }),
+        STATUS_LABEL[status]
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: "rs-history-row-secondary", children: [
+      /* @__PURE__ */ jsx11("span", { className: "rs-history-amount", children: formattedAmount ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+        formattedAmount,
+        " ",
+        /* @__PURE__ */ jsx11("span", { className: "rs-history-token", children: sourceSymbol }),
+        targetSymbol && sourceSymbol !== targetSymbol && /* @__PURE__ */ jsxs11("span", { className: "rs-history-token-target", children: [
+          " \u2192 ",
+          targetSymbol
+        ] })
+      ] }) : /* @__PURE__ */ jsx11("span", { className: "rs-history-no-amount", children: "\u2014" }) }),
+      timestamp && /* @__PURE__ */ jsx11("span", { className: "rs-history-time", children: timestamp })
+    ] }),
+    (srcTxUrl || dstTxUrl) && /* @__PURE__ */ jsxs11("div", { className: "rs-history-row-links", children: [
+      srcTxUrl && deposit.sourceTxHash && /* @__PURE__ */ jsxs11(
+        "a",
+        {
+          href: srcTxUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "rs-history-tx-link",
+          title: deposit.sourceTxHash,
+          children: [
+            /* @__PURE__ */ jsx11("span", { className: "rs-history-tx-hash", children: shortenHash(deposit.sourceTxHash) }),
+            /* @__PURE__ */ jsx11(ExternalLinkIcon, {})
+          ]
+        }
+      ),
+      dstTxUrl && deposit.destinationTxHash && /* @__PURE__ */ jsxs11(
+        "a",
+        {
+          href: dstTxUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "rs-history-tx-link",
+          title: deposit.destinationTxHash,
+          children: [
+            /* @__PURE__ */ jsx11("span", { className: "rs-history-tx-hash", children: shortenHash(deposit.destinationTxHash) }),
+            /* @__PURE__ */ jsx11(ExternalLinkIcon, {})
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+DepositHistoryPanel.displayName = "DepositHistoryPanel";
+
 // src/DepositModal.tsx
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var ReownDepositInner = lazy(
-  () => import("./DepositModalReown-Y4M3RA73.mjs").then((m) => ({ default: m.DepositModalReown }))
+  () => import("./DepositModalReown-RXIVPSEE.mjs").then((m) => ({ default: m.DepositModalReown }))
 );
 function DepositModal(props) {
   const needsReown = !!props.reownAppId;
@@ -3676,7 +3925,7 @@ function DepositModal(props) {
     "dappWalletClient"
   );
   if (needsReown) {
-    return /* @__PURE__ */ jsx11(Suspense, { fallback: null, children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(Suspense, { fallback: null, children: /* @__PURE__ */ jsx12(
       ReownDepositInner,
       {
         ...props,
@@ -3684,7 +3933,7 @@ function DepositModal(props) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     DepositModalInner,
     {
       ...props,
@@ -3740,6 +3989,16 @@ function DepositModalInner({
   const [currentStepIndex, setCurrentStepIndex] = useState11(0);
   const [totalBalanceUsd, setTotalBalanceUsd] = useState11(null);
   const backHandlerRef = useRef6(void 0);
+  const showHistoryButton = uiConfig?.showHistoryButton ?? false;
+  const [activeSmartAccount, setActiveSmartAccount] = useState11(null);
+  const [historyOpen, setHistoryOpen] = useState11(false);
+  const [historyDeposits, setHistoryDeposits] = useState11([]);
+  const [historyNextCursor, setHistoryNextCursor] = useState11(null);
+  const [historyLoading, setHistoryLoading] = useState11(false);
+  const [historyLoadingMore, setHistoryLoadingMore] = useState11(false);
+  const [historyError, setHistoryError] = useState11(null);
+  const historyStaleRef = useRef6(false);
+  const historyLoadedRef = useRef6(false);
   const targetChain = getChainId(targetChainProp);
   const sourceChain = sourceChainProp ? getChainId(sourceChainProp) : void 0;
   const service = useMemo8(
@@ -3769,19 +4028,121 @@ function DepositModalInner({
       setCurrentStepIndex(0);
     }
   }, [isOpen]);
-  const handleStepChange = useCallback4(
+  const handleStepChange = useCallback5(
     (stepIndex, onBack) => {
       setCurrentStepIndex(stepIndex);
       backHandlerRef.current = onBack;
     },
     []
   );
-  const handleTotalBalanceChange = useCallback4((balance2) => {
+  const handleTotalBalanceChange = useCallback5((balance2) => {
     setTotalBalanceUsd(balance2);
   }, []);
-  const handleBack = useCallback4(() => {
+  const handleBack = useCallback5(() => {
     backHandlerRef.current?.();
   }, []);
+  const handleSmartAccountChange = useCallback5(
+    (account) => {
+      setActiveSmartAccount(account);
+      if (!account) {
+        historyStaleRef.current = true;
+      }
+    },
+    []
+  );
+  const fetchHistory = useCallback5(
+    async (cursor) => {
+      if (!activeSmartAccount) return;
+      const isInitial = !cursor;
+      if (isInitial) {
+        setHistoryLoading(true);
+      } else {
+        setHistoryLoadingMore(true);
+      }
+      setHistoryError(null);
+      try {
+        const result = await service.fetchDepositHistory({
+          account: activeSmartAccount,
+          limit: 20,
+          cursor
+        });
+        if (isInitial) {
+          setHistoryDeposits(result.deposits);
+        } else {
+          setHistoryDeposits((prev) => [...prev, ...result.deposits]);
+        }
+        setHistoryNextCursor(result.nextCursor ?? null);
+        historyStaleRef.current = false;
+        historyLoadedRef.current = true;
+      } catch (err) {
+        setHistoryError(
+          err instanceof Error ? err.message : "Failed to load history"
+        );
+      } finally {
+        if (isInitial) {
+          setHistoryLoading(false);
+        } else {
+          setHistoryLoadingMore(false);
+        }
+      }
+    },
+    [activeSmartAccount, service]
+  );
+  const handleHistoryOpen = useCallback5(() => {
+    setHistoryOpen(true);
+    if (!historyLoadedRef.current || historyStaleRef.current) {
+      fetchHistory();
+    }
+  }, [fetchHistory]);
+  const handleHistoryClose = useCallback5(() => {
+    setHistoryOpen(false);
+  }, []);
+  const handleHistoryLoadMore = useCallback5(() => {
+    if (historyNextCursor) {
+      fetchHistory(historyNextCursor);
+    }
+  }, [fetchHistory, historyNextCursor]);
+  const markHistoryStale = useCallback5(() => {
+    historyStaleRef.current = true;
+    if (historyOpen) {
+      fetchHistory();
+    }
+  }, [historyOpen, fetchHistory]);
+  const onDepositSubmittedRef = useLatestRef(onDepositSubmitted);
+  const onDepositCompleteRef = useLatestRef(onDepositComplete);
+  const onDepositFailedRef = useLatestRef(onDepositFailed);
+  const handleDepositSubmitted = useCallback5(
+    (data) => {
+      onDepositSubmittedRef.current?.(data);
+      if (showHistoryButton) markHistoryStale();
+    },
+    [onDepositSubmittedRef, showHistoryButton, markHistoryStale]
+  );
+  const handleDepositComplete = useCallback5(
+    (data) => {
+      onDepositCompleteRef.current?.(data);
+      if (showHistoryButton) markHistoryStale();
+    },
+    [onDepositCompleteRef, showHistoryButton, markHistoryStale]
+  );
+  const handleDepositFailed = useCallback5(
+    (data) => {
+      onDepositFailedRef.current?.(data);
+      if (showHistoryButton) markHistoryStale();
+    },
+    [onDepositFailedRef, showHistoryButton, markHistoryStale]
+  );
+  useEffect10(() => {
+    if (!isOpen) {
+      setHistoryOpen(false);
+      setHistoryDeposits([]);
+      setHistoryNextCursor(null);
+      setHistoryError(null);
+      setActiveSmartAccount(null);
+      historyStaleRef.current = false;
+      historyLoadedRef.current = false;
+    }
+  }, [isOpen]);
   const showLogo = uiConfig?.showLogo ?? false;
   const showStepper = uiConfig?.showStepper ?? false;
   const showBackButton = uiConfig?.showBackButton ?? true;
@@ -3789,7 +4150,7 @@ function DepositModalInner({
   const logoUrl = branding?.logoUrl ?? "https://github.com/rhinestonewtf.png";
   const title = branding?.title ?? "Deposit";
   const canGoBack = currentStepIndex > 0 && currentStepIndex < 4 && backHandlerRef.current !== void 0;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Modal,
     {
       isOpen,
@@ -3797,23 +4158,23 @@ function DepositModalInner({
       className,
       inline,
       closeOnOverlayClick,
-      children: /* @__PURE__ */ jsxs11("div", { ref: modalRef, className: "rs-modal", children: [
-        /* @__PURE__ */ jsxs11("div", { className: "rs-modal-header--redesigned", children: [
-          /* @__PURE__ */ jsx11("div", { className: "rs-modal-header-nav-left", children: showBackButton && canGoBack && /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsxs12("div", { ref: modalRef, className: "rs-modal", children: [
+        /* @__PURE__ */ jsxs12("div", { className: "rs-modal-header--redesigned", children: [
+          /* @__PURE__ */ jsx12("div", { className: "rs-modal-header-nav-left", children: showBackButton && canGoBack && /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
               className: "rs-modal-header-back",
               "aria-label": "Go back",
               onClick: handleBack,
-              children: /* @__PURE__ */ jsx11(
+              children: /* @__PURE__ */ jsx12(
                 "svg",
                 {
                   viewBox: "0 0 24 24",
                   fill: "none",
                   stroke: "currentColor",
                   strokeWidth: "2",
-                  children: /* @__PURE__ */ jsx11(
+                  children: /* @__PURE__ */ jsx12(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -3825,9 +4186,9 @@ function DepositModalInner({
               )
             }
           ) }),
-          /* @__PURE__ */ jsxs11("div", { className: "rs-modal-header-nav-center", children: [
-            /* @__PURE__ */ jsxs11("div", { className: "rs-modal-header-title-row", children: [
-              showLogo && logoUrl && /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsxs12("div", { className: "rs-modal-header-nav-center", children: [
+            /* @__PURE__ */ jsxs12("div", { className: "rs-modal-header-title-row", children: [
+              showLogo && logoUrl && /* @__PURE__ */ jsx12(
                 "img",
                 {
                   src: logoUrl,
@@ -3838,20 +4199,20 @@ function DepositModalInner({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx11("span", { className: "rs-modal-header-title", children: title }),
-              showStepper && currentStepIndex >= 2 && /* @__PURE__ */ jsxs11("div", { className: "rs-step-indicator", style: { marginLeft: 8 }, children: [
-                /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx12("span", { className: "rs-modal-header-title", children: title }),
+              showStepper && currentStepIndex >= 2 && /* @__PURE__ */ jsxs12("div", { className: "rs-step-indicator", style: { marginLeft: 8 }, children: [
+                /* @__PURE__ */ jsx12(
                   "div",
                   {
                     className: `rs-step-indicator-node ${currentStepIndex >= 4 ? "rs-step-indicator-node--complete" : "rs-step-indicator-node--active"}`,
-                    children: currentStepIndex >= 4 ? /* @__PURE__ */ jsx11(
+                    children: currentStepIndex >= 4 ? /* @__PURE__ */ jsx12(
                       "svg",
                       {
                         viewBox: "0 0 24 24",
                         fill: "none",
                         stroke: "currentColor",
                         strokeWidth: "3",
-                        children: /* @__PURE__ */ jsx11(
+                        children: /* @__PURE__ */ jsx12(
                           "path",
                           {
                             strokeLinecap: "round",
@@ -3863,13 +4224,13 @@ function DepositModalInner({
                     ) : "1"
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   "div",
                   {
                     className: `rs-step-indicator-line ${currentStepIndex >= 4 ? "rs-step-indicator-line--active" : ""}`
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   "div",
                   {
                     className: `rs-step-indicator-node ${currentStepIndex >= 4 ? "rs-step-indicator-node--active" : "rs-step-indicator-node--inactive"}`,
@@ -3878,42 +4239,71 @@ function DepositModalInner({
                 )
               ] })
             ] }),
-            balance && /* @__PURE__ */ jsxs11("div", { className: "rs-modal-header-balance", children: [
-              /* @__PURE__ */ jsxs11("span", { children: [
+            balance && /* @__PURE__ */ jsxs12("div", { className: "rs-modal-header-balance", children: [
+              /* @__PURE__ */ jsxs12("span", { children: [
                 balance.title,
                 ":"
               ] }),
-              /* @__PURE__ */ jsx11("span", { className: "rs-modal-header-balance-value", children: balance.amount ?? (totalBalanceUsd !== null ? currencyFormatter.format(totalBalanceUsd) : null) })
+              /* @__PURE__ */ jsx12("span", { className: "rs-modal-header-balance-value", children: balance.amount ?? (totalBalanceUsd !== null ? currencyFormatter.format(totalBalanceUsd) : null) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx11("div", { className: "rs-modal-header-nav-right", children: /* @__PURE__ */ jsx11(
-            "button",
-            {
-              type: "button",
-              onClick: onClose,
-              className: "rs-modal-close",
-              "aria-label": "Close",
-              children: /* @__PURE__ */ jsx11(
-                "svg",
-                {
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  children: /* @__PURE__ */ jsx11(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      d: "M6 18L18 6M6 6l12 12"
-                    }
-                  )
-                }
-              )
-            }
-          ) })
+          /* @__PURE__ */ jsxs12("div", { className: "rs-modal-header-nav-right", children: [
+            showHistoryButton && /* @__PURE__ */ jsx12(
+              "button",
+              {
+                type: "button",
+                className: "rs-modal-header-history",
+                "aria-label": "Deposit history",
+                onClick: handleHistoryOpen,
+                disabled: !activeSmartAccount,
+                children: /* @__PURE__ */ jsx12(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.75",
+                    children: /* @__PURE__ */ jsx12(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "rs-modal-close",
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx12(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    children: /* @__PURE__ */ jsx12(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M6 18L18 6M6 6l12 12"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] })
         ] }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           DepositFlow,
           {
             dappWalletClient,
@@ -3942,15 +4332,28 @@ function DepositModalInner({
             allowedRoutes,
             onStepChange: handleStepChange,
             onTotalBalanceChange: handleTotalBalanceChange,
+            onSmartAccountChange: showHistoryButton ? handleSmartAccountChange : void 0,
             onClose,
             onConnected,
-            onDepositSubmitted,
-            onDepositComplete,
-            onDepositFailed,
+            onDepositSubmitted: showHistoryButton ? handleDepositSubmitted : onDepositSubmitted,
+            onDepositComplete: showHistoryButton ? handleDepositComplete : onDepositComplete,
+            onDepositFailed: showHistoryButton ? handleDepositFailed : onDepositFailed,
             onEvent,
             onError,
             debug
           }
+        ),
+        showHistoryButton && historyOpen && /* @__PURE__ */ jsx12(
+          DepositHistoryPanel,
+          {
+            deposits: historyDeposits,
+            isLoading: historyLoading,
+            error: historyError,
+            hasMore: Boolean(historyNextCursor),
+            isLoadingMore: historyLoadingMore,
+            onLoadMore: handleHistoryLoadMore,
+            onClose: handleHistoryClose
+          }
         )
       ] })
     }