@rhinestone/deposit-modal 0.1.51 → 0.1.53

package/dist/{chunk-NU3ES4JY.cjs → chunk-DBBSH7HP.cjs}

@@ -7,6 +7,7 @@
 
 
 
+
 var _chunkNELAYNA3cjs = require('./chunk-NELAYNA3.cjs');
 
 // src/components/ui/Modal.tsx
@@ -1349,7 +1350,38 @@ function txRefsMatch(a, b) {
 var INITIAL_POLL_INTERVAL = 3e3;
 var MAX_POLL_INTERVAL = 3e4;
 var BACKOFF_MULTIPLIER = 1.5;
-var PROCESS_TIMEOUT_MS = 10 * 60 * 1e3;
+var ESCALATED_DELAY_MS = 10 * 60 * 1e3;
+var SOFT_DELAY_MS = {
+  confirming: 90 * 1e3,
+  received: 90 * 1e3,
+  bridging: 4 * 60 * 1e3
+};
+var PHASE_TIMINGS_PREFIX = "rhinestone:phase-timings";
+function loadPhaseTimings(txHash) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(`${PHASE_TIMINGS_PREFIX}:${txHash}`);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.startedAt !== "number") return null;
+    return parsed;
+  } catch (e3) {
+    return null;
+  }
+}
+function savePhaseTimings(txHash, timings) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(
+      `${PHASE_TIMINGS_PREFIX}:${txHash}`,
+      JSON.stringify(timings)
+    );
+  } catch (e4) {
+  }
+}
+function truncateHash(hash) {
+  return `${hash.slice(0, 10)}...${hash.slice(-8)}`;
+}
 function isEventForTx(event, txHash) {
   const eventTxHash = getEventTxHash(event);
   if (!eventTxHash) return false;
@@ -1387,6 +1419,57 @@ function formatBridgeFailedMessage(event) {
   }
   return { message: "Bridge failed" };
 }
+function parseWebhookTimestamp(event) {
+  if (typeof _optionalChain([event, 'optionalAccess', _84 => _84.time]) !== "string") return void 0;
+  const timestamp = Date.parse(event.time);
+  return Number.isFinite(timestamp) ? timestamp : void 0;
+}
+function syncPhaseTimings(previous, event) {
+  if (!_optionalChain([event, 'optionalAccess', _85 => _85.type])) return previous;
+  const timestamp = _nullishCoalesce(parseWebhookTimestamp(event), () => ( Date.now()));
+  const setReceived = (event.type === "deposit-received" || event.type === "bridge-started" || event.type === "bridge-complete" || event.type === "bridge-failed" || event.type === "error") && previous.receivedAt === void 0;
+  const setBridging = (event.type === "bridge-started" || event.type === "bridge-complete") && previous.bridgingAt === void 0;
+  const setCompleted = event.type === "bridge-complete" && previous.completedAt === void 0;
+  if (!setReceived && !setBridging && !setCompleted) return previous;
+  return {
+    ...previous,
+    ...setReceived && { receivedAt: timestamp },
+    ...setBridging && { bridgingAt: timestamp },
+    ...setCompleted && { completedAt: timestamp }
+  };
+}
+function formatElapsedTime(seconds) {
+  if (seconds < 60) return `${seconds} second${seconds !== 1 ? "s" : ""}`;
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}m ${secs}s`;
+}
+function getPhaseStartTime(phaseId, phaseTimings) {
+  if (phaseId === "confirming") return phaseTimings.startedAt;
+  if (phaseId === "received") {
+    return _nullishCoalesce(phaseTimings.receivedAt, () => ( phaseTimings.startedAt));
+  }
+  return _nullishCoalesce(_nullishCoalesce(phaseTimings.bridgingAt, () => ( phaseTimings.receivedAt)), () => ( phaseTimings.startedAt));
+}
+function getFailedPhaseId(phaseTimings) {
+  if (phaseTimings.bridgingAt !== void 0) return "bridging";
+  if (phaseTimings.receivedAt !== void 0) return "received";
+  return "confirming";
+}
+function getCurrentPhaseId(state, phaseTimings, isEarlyComplete) {
+  if (state.type === "failed") {
+    return getFailedPhaseId(phaseTimings);
+  }
+  if (isEarlyComplete) {
+    return "bridging";
+  }
+  if (state.type === "complete") {
+    return void 0;
+  }
+  if (_optionalChain([state, 'access', _86 => _86.lastEvent, 'optionalAccess', _87 => _87.type]) === "bridge-started") return "bridging";
+  if (_optionalChain([state, 'access', _88 => _88.lastEvent, 'optionalAccess', _89 => _89.type]) === "deposit-received") return "received";
+  return "confirming";
+}
 function ProcessingStep({
   smartAccount,
   txHash,
@@ -1408,43 +1491,80 @@ function ProcessingStep({
   onDepositFailed,
   onError
 }) {
+  const startTimeRef = _react.useRef.call(void 0, Date.now());
+  const pollIntervalRef = _react.useRef.call(void 0, INITIAL_POLL_INTERVAL);
+  const pollTimeoutRef = _react.useRef.call(void 0, null);
+  const escalatedDelayRef = _react.useRef.call(void 0, false);
   const [state, setState] = _react.useState.call(void 0, 
     directTransfer ? { type: "complete" } : { type: "processing" }
   );
   const [elapsedSeconds, setElapsedSeconds] = _react.useState.call(void 0, 0);
-  const startTimeRef = _react.useRef.call(void 0, Date.now());
-  const intervalRef = _react.useRef.call(void 0, null);
-  _react.useEffect.call(void 0, () => {
-    if (directTransfer) {
-      debugLog(debug, "processing", "direct-transfer:complete", {
-        txHash,
-        flowLabel
-      });
-      _optionalChain([onDepositComplete, 'optionalCall', _84 => _84(txHash, void 0, { amount, sourceChain, sourceToken, targetChain, targetToken })]);
-      return;
+  const [phaseTimings, setPhaseTimings] = _react.useState.call(void 0, () => {
+    const saved = loadPhaseTimings(txHash);
+    if (saved) {
+      startTimeRef.current = saved.startedAt;
+      return saved;
     }
-  }, [debug, directTransfer, flowLabel, txHash, onDepositComplete, amount, sourceChain, sourceToken, targetChain, targetToken]);
+    return { startedAt: startTimeRef.current };
+  });
+  const [hasEscalatedDelay, setHasEscalatedDelay] = _react.useState.call(void 0, false);
   _react.useEffect.call(void 0, () => {
-    if (directTransfer) return;
-    startTimeRef.current = Date.now();
-    intervalRef.current = setInterval(() => {
-      setElapsedSeconds(Math.floor((Date.now() - startTimeRef.current) / 1e3));
-    }, 1e3);
-    return () => {
-      if (intervalRef.current) clearInterval(intervalRef.current);
+    if (!directTransfer) return;
+    const completedAt = Date.now();
+    setPhaseTimings({
+      startedAt: startTimeRef.current,
+      completedAt,
+      endedAt: completedAt
+    });
+    debugLog(debug, "processing", "direct-transfer:complete", {
+      txHash,
+      flowLabel
+    });
+    _optionalChain([onDepositComplete, 'optionalCall', _90 => _90(txHash, void 0, {
+      amount,
+      sourceChain,
+      sourceToken,
+      targetChain,
+      targetToken
+    })]);
+  }, [
+    amount,
+    debug,
+    directTransfer,
+    flowLabel,
+    onDepositComplete,
+    sourceChain,
+    sourceToken,
+    targetChain,
+    targetToken,
+    txHash
+  ]);
+  _react.useEffect.call(void 0, () => {
+    if (directTransfer || state.type !== "processing") return;
+    const updateElapsed = () => {
+      setElapsedSeconds(
+        Math.floor((Date.now() - startTimeRef.current) / 1e3)
+      );
     };
-  }, [directTransfer]);
+    updateElapsed();
+    const intervalId = setInterval(updateElapsed, 1e3);
+    return () => clearInterval(intervalId);
+  }, [directTransfer, state.type]);
   _react.useEffect.call(void 0, () => {
-    if (state.type === "complete" || state.type === "failed" || state.type === "error") {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-    }
-  }, [state.type]);
-  const pollIntervalRef = _react.useRef.call(void 0, INITIAL_POLL_INTERVAL);
-  const pollTimeoutRef = _react.useRef.call(void 0, null);
-  const processTimeoutRef = _react.useRef.call(void 0, null);
+    if (state.type === "processing") return;
+    const endedAt = state.type === "complete" ? _nullishCoalesce(phaseTimings.completedAt, () => ( Date.now())) : Date.now();
+    setElapsedSeconds(Math.floor((endedAt - startTimeRef.current) / 1e3));
+    setPhaseTimings(
+      (previous) => previous.endedAt !== void 0 ? previous : { ...previous, endedAt }
+    );
+  }, [phaseTimings.completedAt, state.type]);
+  _react.useEffect.call(void 0, () => {
+    if (!state.lastEvent) return;
+    setPhaseTimings((previous) => syncPhaseTimings(previous, state.lastEvent));
+  }, [_optionalChain([state, 'access', _91 => _91.lastEvent, 'optionalAccess', _92 => _92.time]), _optionalChain([state, 'access', _93 => _93.lastEvent, 'optionalAccess', _94 => _94.type])]);
+  _react.useEffect.call(void 0, () => {
+    savePhaseTimings(txHash, phaseTimings);
+  }, [txHash, phaseTimings]);
   _react.useEffect.call(void 0, () => {
     if (directTransfer) return;
     if (state.type !== "processing") {
@@ -1468,31 +1588,43 @@ function ProcessingStep({
           debugLog(debug, "processing", "poll:event", {
             type: lastEvent2.type,
             matchesTx: eventMatchesTx,
-            intentId: _optionalChain([eventData, 'optionalAccess', _85 => _85.intentId])
+            intentId: _optionalChain([eventData, 'optionalAccess', _95 => _95.intentId])
           });
         }
         if (!isMounted) return;
-        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _86 => _86.type]) === "bridge-complete") {
+        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _96 => _96.type]) === "bridge-complete") {
           setState({ type: "complete", lastEvent: eventForCurrentTx });
-          const destinationTxHash2 = _optionalChain([eventForCurrentTx, 'access', _87 => _87.data, 'optionalAccess', _88 => _88.destination, 'optionalAccess', _89 => _89.transactionHash]);
+          const destinationTxHash2 = _optionalChain([eventForCurrentTx, 'access', _97 => _97.data, 'optionalAccess', _98 => _98.destination, 'optionalAccess', _99 => _99.transactionHash]);
           debugLog(debug, "processing", "state:complete", {
             txHash,
             destinationTxHash: destinationTxHash2,
             event: eventForCurrentTx.type
           });
-          _optionalChain([onDepositComplete, 'optionalCall', _90 => _90(txHash, destinationTxHash2, { amount, sourceChain, sourceToken, targetChain, targetToken })]);
+          _optionalChain([onDepositComplete, 'optionalCall', _100 => _100(txHash, destinationTxHash2, {
+            amount,
+            sourceChain,
+            sourceToken,
+            targetChain,
+            targetToken
+          })]);
           return;
         }
-        if (!waitForFinalTx && _optionalChain([eventForCurrentTx, 'optionalAccess', _91 => _91.type]) === "bridge-started") {
+        if (!waitForFinalTx && _optionalChain([eventForCurrentTx, 'optionalAccess', _101 => _101.type]) === "bridge-started") {
           setState({ type: "complete", lastEvent: eventForCurrentTx });
           debugLog(debug, "processing", "state:early-complete", {
             txHash,
             event: eventForCurrentTx.type
           });
-          _optionalChain([onDepositComplete, 'optionalCall', _92 => _92(txHash, void 0, { amount, sourceChain, sourceToken, targetChain, targetToken })]);
+          _optionalChain([onDepositComplete, 'optionalCall', _102 => _102(txHash, void 0, {
+            amount,
+            sourceChain,
+            sourceToken,
+            targetChain,
+            targetToken
+          })]);
           return;
         }
-        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _93 => _93.type]) === "bridge-failed") {
+        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _103 => _103.type]) === "bridge-failed") {
           const formatted = formatBridgeFailedMessage(eventForCurrentTx);
           setState({
             type: "failed",
@@ -1504,11 +1636,11 @@ function ProcessingStep({
             message: formatted.message,
             code: formatted.code
           });
-          _optionalChain([onDepositFailed, 'optionalCall', _94 => _94(txHash, formatted.message)]);
+          _optionalChain([onDepositFailed, 'optionalCall', _104 => _104(txHash, formatted.message)]);
           return;
         }
-        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _95 => _95.type]) === "error") {
-          const errorMessage = _nullishCoalesce(_optionalChain([eventForCurrentTx, 'access', _96 => _96.data, 'optionalAccess', _97 => _97.message]), () => ( "Unknown error"));
+        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _105 => _105.type]) === "error") {
+          const errorMessage = _nullishCoalesce(_optionalChain([eventForCurrentTx, 'access', _106 => _106.data, 'optionalAccess', _107 => _107.message]), () => ( "Unknown error"));
           setState({
             type: "failed",
             message: errorMessage,
@@ -1518,10 +1650,13 @@ function ProcessingStep({
             txHash,
             message: errorMessage
           });
-          _optionalChain([onDepositFailed, 'optionalCall', _98 => _98(txHash, errorMessage)]);
+          _optionalChain([onDepositFailed, 'optionalCall', _108 => _108(txHash, errorMessage)]);
           return;
         }
-        setState({ type: "processing", lastEvent: eventForCurrentTx });
+        setState((previous) => ({
+          type: "processing",
+          lastEvent: _nullishCoalesce(eventForCurrentTx, () => ( previous.lastEvent))
+        }));
         scheduleNextPoll();
       } catch (error) {
         debugError(debug, "processing", "poll:failure", error, {
@@ -1553,370 +1688,176 @@ function ProcessingStep({
       }
     };
   }, [
+    amount,
     debug,
     directTransfer,
-    state.type,
+    onDepositComplete,
+    onDepositFailed,
+    service,
     smartAccount,
+    sourceChain,
+    sourceToken,
+    state.type,
+    targetChain,
+    targetToken,
     txHash,
-    service,
-    waitForFinalTx,
-    onDepositComplete,
-    onDepositFailed
+    waitForFinalTx
   ]);
   _react.useEffect.call(void 0, () => {
-    if (directTransfer) return;
-    if (state.type !== "processing") {
-      if (processTimeoutRef.current) {
-        clearTimeout(processTimeoutRef.current);
-        processTimeoutRef.current = null;
-      }
-      return;
-    }
-    processTimeoutRef.current = setTimeout(() => {
-      const message = "Transfer is taking longer than expected. Your funds are safe and our team has been notified.";
-      debugLog(debug, "processing", "state:timeout", {
+    if (directTransfer || state.type !== "processing") return;
+    const timeoutId = setTimeout(() => {
+      if (escalatedDelayRef.current) return;
+      escalatedDelayRef.current = true;
+      setHasEscalatedDelay(true);
+      const message = "Transfer is taking longer than expected. Your funds are safe and processing will continue automatically.";
+      debugLog(debug, "processing", "state:delay-escalated", {
         txHash,
-        timeoutMs: PROCESS_TIMEOUT_MS
+        timeoutMs: ESCALATED_DELAY_MS
       });
-      setState({ type: "error", message });
-      _optionalChain([onError, 'optionalCall', _99 => _99(message, "PROCESS_TIMEOUT")]);
-    }, PROCESS_TIMEOUT_MS);
-    return () => {
-      if (processTimeoutRef.current) {
-        clearTimeout(processTimeoutRef.current);
-        processTimeoutRef.current = null;
-      }
-    };
-  }, [debug, directTransfer, state.type, txHash, onError]);
-  const isDelayed = state.type === "error" || state.type === "failed";
+      _optionalChain([onError, 'optionalCall', _109 => _109(message, "PROCESS_TIMEOUT")]);
+    }, ESCALATED_DELAY_MS);
+    return () => clearTimeout(timeoutId);
+  }, [debug, directTransfer, onError, state.type, txHash]);
   const isComplete = state.type === "complete";
+  const isFailed = state.type === "failed";
   const isProcessing = state.type === "processing";
-  const lastEvent = state.type === "processing" || state.type === "complete" || state.type === "failed" ? state.lastEvent : void 0;
-  const isEarlyComplete = !waitForFinalTx && _optionalChain([lastEvent, 'optionalAccess', _100 => _100.type]) === "bridge-started";
+  const lastEvent = state.lastEvent;
+  const failureMessage = state.type === "failed" ? state.message : void 0;
+  const isEarlyComplete = !waitForFinalTx && _optionalChain([lastEvent, 'optionalAccess', _110 => _110.type]) === "bridge-started";
+  const timelineNowMs = _nullishCoalesce(phaseTimings.endedAt, () => ( Date.now()));
   const flowNoun = flowLabel === "withdraw" ? "withdrawal" : "deposit";
   const flowCapitalized = flowLabel === "withdraw" ? "Withdrawal" : "Deposit";
-  const destinationTxHash = _optionalChain([lastEvent, 'optionalAccess', _101 => _101.data, 'optionalAccess', _102 => _102.destination, 'optionalAccess', _103 => _103.transactionHash]) || null;
+  const destinationTxHash = _optionalChain([lastEvent, 'optionalAccess', _111 => _111.data, 'optionalAccess', _112 => _112.destination, 'optionalAccess', _113 => _113.transactionHash]) || null;
   const sourceDetails = getEventSourceDetails(lastEvent);
   const displaySourceChain = _nullishCoalesce(sourceDetails.chainId, () => ( sourceChain));
   const displaySourceToken = _nullishCoalesce(sourceDetails.token, () => ( sourceToken));
   const displayAmount = _nullishCoalesce(sourceDetails.amount, () => ( amount));
   const sourceExplorerUrl = _chunkNELAYNA3cjs.getExplorerTxUrl.call(void 0, displaySourceChain, txHash);
   const destExplorerUrl = destinationTxHash ? _chunkNELAYNA3cjs.getExplorerTxUrl.call(void 0, targetChain, destinationTxHash) : null;
-  const truncateHash = (hash) => `${hash.slice(0, 10)}...${hash.slice(-8)}`;
-  const formatElapsedTime = (seconds) => {
-    if (seconds < 60) return `${seconds} second${seconds !== 1 ? "s" : ""}`;
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins}m ${secs}s`;
-  };
   const isEvmSourceToken = /^0x[a-fA-F0-9]{40}$/.test(displaySourceToken);
   const sourceSymbol = displaySourceChain === "solana" ? _nullishCoalesce(providedSourceSymbol, () => ( "SOL")) : isEvmSourceToken ? _chunkNELAYNA3cjs.getTokenSymbol.call(void 0, displaySourceToken, displaySourceChain) : _nullishCoalesce(providedSourceSymbol, () => ( "Token"));
-  const sourceDecimals = displaySourceChain === "solana" ? _nullishCoalesce(providedSourceDecimals, () => ( 9)) : isEvmSourceToken ? _chunkNELAYNA3cjs.getTokenDecimalsByAddress.call(void 0, displaySourceToken, displaySourceChain) : _nullishCoalesce(providedSourceDecimals, () => ( 18));
+  const sourceDecimals = displaySourceChain === "solana" ? _nullishCoalesce(providedSourceDecimals, () => ( 9)) : isEvmSourceToken ? _chunkNELAYNA3cjs.getTokenDecimalsByAddress.call(void 0, 
+    displaySourceToken,
+    displaySourceChain
+  ) : _nullishCoalesce(providedSourceDecimals, () => ( 18));
   const formattedReceivedAmount = (() => {
     try {
       const raw = _viem.formatUnits.call(void 0, BigInt(displayAmount), sourceDecimals);
       const numeric = Number(raw);
       if (!Number.isFinite(numeric)) return raw;
       return numeric.toLocaleString("en-US", { maximumFractionDigits: 6 });
-    } catch (e3) {
+    } catch (e5) {
       return Number(displayAmount).toLocaleString("en-US", {
         maximumFractionDigits: 6
       });
     }
   })();
-  if (isComplete) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-step", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-step-body rs-space-y-3", children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-success-state", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-success-checkmark", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "svg",
-            {
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2.5",
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M5 12l5 5L20 7"
-                }
-              )
-            }
-          ) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-success-title", children: isEarlyComplete ? `${flowCapitalized} confirmed` : `${flowCapitalized} successful` }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-success-subtitle", children: directTransfer ? "Your transfer is complete." : isEarlyComplete ? "Your transfer has been confirmed and funds will arrive shortly." : "Your funds have been successfully bridged." })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card", children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Status" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "span",
-              {
-                className: "rs-card-value",
-                style: { color: "var(--rs-success)" },
-                children: isEarlyComplete ? "Confirmed" : "Successful"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Total time" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-value", children: formatElapsedTime(elapsedSeconds) })
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "You sent" }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-card-value", children: [
-              formattedReceivedAmount,
-              " ",
-              sourceSymbol
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card", children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Source" }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              "span",
-              {
-                className: "rs-card-value",
-                style: { display: "flex", alignItems: "center", gap: 6 },
-                children: [
-                  _chunkNELAYNA3cjs.getChainIcon.call(void 0, displaySourceChain) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    "img",
-                    {
-                      src: _chunkNELAYNA3cjs.getChainIcon.call(void 0, displaySourceChain),
-                      alt: "",
-                      style: { width: 14, height: 14, borderRadius: "50%" }
-                    }
-                  ),
-                  _chunkNELAYNA3cjs.getChainName.call(void 0, displaySourceChain)
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Destination" }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              "span",
-              {
-                className: "rs-card-value",
-                style: { display: "flex", alignItems: "center", gap: 6 },
-                children: [
-                  _chunkNELAYNA3cjs.getChainIcon.call(void 0, targetChain) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    "img",
-                    {
-                      src: _chunkNELAYNA3cjs.getChainIcon.call(void 0, targetChain),
-                      alt: "",
-                      style: { width: 14, height: 14, borderRadius: "50%" }
-                    }
-                  ),
-                  _chunkNELAYNA3cjs.getChainName.call(void 0, targetChain)
-                ]
-              }
-            )
-          ] }),
-          sourceExplorerUrl && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Transaction" }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              "a",
-              {
-                href: sourceExplorerUrl,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: "rs-link rs-link-external rs-font-mono rs-text-xs",
-                children: [
-                  truncateHash(txHash),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    "svg",
-                    {
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2.5",
-                      style: { width: 12, height: 12 },
-                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        "path",
-                        {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          d: "M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
-                        }
-                      )
-                    }
-                  )
-                ]
-              }
-            )
-          ] }),
-          destinationTxHash && destExplorerUrl && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Destination tx" }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              "a",
-              {
-                href: destExplorerUrl,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: "rs-link rs-link-external rs-font-mono rs-text-xs",
-                children: [
-                  truncateHash(destinationTxHash),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    "svg",
-                    {
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2.5",
-                      style: { width: 12, height: 12 },
-                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        "path",
-                        {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          d: "M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
-                        }
-                      )
-                    }
-                  )
-                ]
-              }
-            )
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-step-footer", style: { gap: 8, display: "flex" }, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", onClick: onClose, fullWidth: true, children: "Close" }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Button, { onClick: onNewDeposit, fullWidth: true, children: [
-          "New ",
-          flowNoun
-        ] })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PoweredBy, {})
-    ] });
-  }
+  const currentPhaseId = getCurrentPhaseId(state, phaseTimings, isEarlyComplete);
+  const activePhaseStartedAt = currentPhaseId ? getPhaseStartTime(currentPhaseId, phaseTimings) : void 0;
+  const activePhaseElapsedMs = isProcessing && activePhaseStartedAt !== void 0 ? timelineNowMs - activePhaseStartedAt : 0;
+  const delayPhaseId = isProcessing && currentPhaseId && activePhaseElapsedMs >= SOFT_DELAY_MS[currentPhaseId] ? currentPhaseId : void 0;
+  const headerTitle = isFailed ? `${flowCapitalized} could not be completed` : isComplete ? isEarlyComplete ? `${flowCapitalized} confirmed` : `${flowCapitalized} successful` : delayPhaseId === "received" ? "Bridge pending" : delayPhaseId === "bridging" ? "Bridge delayed" : delayPhaseId === "confirming" ? `Confirming ${flowNoun}` : `Submitting transaction...`;
+  const headerDescription = isFailed ? _nullishCoalesce(failureMessage, () => ( "The transfer could not be completed.")) : isComplete ? directTransfer ? "Your transfer is complete." : isEarlyComplete ? "The bridge has started. Funds will arrive shortly." : "Your funds were successfully deposited." : delayPhaseId === "received" ? "Funds are in. We are still waiting for the bridge transaction to begin." : delayPhaseId === "bridging" ? "The bridge has started but settlement is taking longer than expected." : delayPhaseId === "confirming" ? "The source transaction has not been picked up yet, but we are still polling automatically." : _optionalChain([state, 'access', _114 => _114.lastEvent, 'optionalAccess', _115 => _115.type]) === "deposit-received" ? "Transfer received. Preparing bridge execution." : _optionalChain([state, 'access', _116 => _116.lastEvent, 'optionalAccess', _117 => _117.type]) === "bridge-started" ? `Bridge started. Sending funds to ${_chunkNELAYNA3cjs.getChainName.call(void 0, targetChain)}.` : "Filling your transaction on the blockchain.";
+  const showAlert = !isFailed && (delayPhaseId !== void 0 || hasEscalatedDelay);
+  const alertMessage = hasEscalatedDelay ? "Taking longer than expected. You can close this window \u2014 processing continues in the background." : "This step is slower than usual but still processing.";
+  const fillStatus = isComplete ? "Successful" : isFailed ? "Failed" : "Processing";
+  const fillStatusClass = isComplete ? "rs-card-value--success" : isFailed ? "rs-card-value--error" : "";
+  const [detailsExpanded, setDetailsExpanded] = _react.useState.call(void 0, false);
+  const txLinkIcon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "path",
+    {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+    }
+  ) });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-step", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-step-header", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-step-header-row", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "div",
-          {
-            className: `rs-step-icon ${isDelayed ? "rs-step-icon--warning" : "rs-step-icon--accent"}`,
-            children: isDelayed ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "svg",
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-step-header--centered", children: [
+      isFailed ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-failed-badge", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "path",
               {
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                  }
-                )
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M12 9v3.75m0 3.75h.008v.008H12v-.008z"
               }
-            ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, {})
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-step-title", children: isDelayed ? `${flowCapitalized} taking longer than expected` : `Bridging ${flowCapitalized}` })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-step-description rs-text-secondary", children: [
-        state.type === "processing" && (_optionalChain([lastEvent, 'optionalAccess', _104 => _104.type]) === "deposit-received" ? "Transfer received. Preparing bridge..." : _optionalChain([lastEvent, 'optionalAccess', _105 => _105.type]) === "bridge-started" ? "Transfer confirmed. Funds arriving shortly..." : `Bridging your ${flowNoun} to ${_chunkNELAYNA3cjs.getChainName.call(void 0, targetChain)}.`),
-        (state.type === "failed" || state.type === "error") && "Your funds are safe. Our team has been notified and is working to complete your transfer."
-      ] })
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-step-body rs-space-y-3", children: [
-      isProcessing && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-progress-bar", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-progress-bar-fill rs-progress-bar-fill--indeterminate" }) }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-alert rs-alert--info", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "svg",
-            {
-              className: "rs-alert-icon",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "rs-alert-text", children: [
-            "You can safely close this window. Your ",
-            flowNoun,
-            " will complete in the background."
-          ] })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          "div",
-          {
-            className: "rs-text-sm rs-text-tertiary",
-            style: { textAlign: "center" },
-            children: [
-              "Elapsed: ",
-              formatElapsedTime(elapsedSeconds)
-            ]
-          }
-        )
-      ] }),
-      isDelayed && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-alert rs-alert--info", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "svg",
-          {
-            className: "rs-alert-icon",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "path",
               {
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
-                d: "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+                d: "M10.29 3.86L1.82 18a2.25 2.25 0 001.93 3.37h16.5A2.25 2.25 0 0022.18 18L13.71 3.86a2.25 2.25 0 00-3.42 0z"
               }
             )
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "rs-alert-text", children: "You can safely close this window. Your funds are secure and the transfer will be completed automatically." })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card", children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Status" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "span",
+          ]
+        }
+      ) }) : isComplete ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-success-badge", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "path",
             {
-              className: "rs-card-value",
-              style: { color: isDelayed ? "var(--color-amber8, #e2a336)" : void 0 },
-              children: isDelayed ? "Processing" : "In progress"
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M5 12l5 5L20 7"
             }
           )
+        }
+      ) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-processing-badge", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, {}) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-step-title", children: headerTitle }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-step-description rs-text-secondary", children: headerDescription })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-step-body rs-space-y-3", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Fill status" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `rs-card-value ${fillStatusClass}`, children: fillStatus })
         ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Total time" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-value", children: formatElapsedTime(elapsedSeconds) })
+        ] })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card", children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Source" }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "span",
             {
               className: "rs-card-value",
-              style: { display: "flex", alignItems: "center", gap: 8 },
+              style: { display: "flex", alignItems: "center", gap: 6 },
               children: [
                 _chunkNELAYNA3cjs.getChainIcon.call(void 0, displaySourceChain) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   "img",
                   {
                     src: _chunkNELAYNA3cjs.getChainIcon.call(void 0, displaySourceChain),
                     alt: "",
-                    style: { width: 16, height: 16, borderRadius: "50%" }
+                    style: { width: 16, height: 16, borderRadius: 3 }
                   }
                 ),
-                _chunkNELAYNA3cjs.getChainName.call(void 0, displaySourceChain)
+                _chunkNELAYNA3cjs.getChainName.call(void 0, displaySourceChain),
+                sourceExplorerUrl && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "a",
+                  {
+                    href: sourceExplorerUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "rs-card-external-link",
+                    children: txLinkIcon
+                  }
+                )
               ]
             }
           )
@@ -1927,56 +1868,148 @@ function ProcessingStep({
             "span",
             {
               className: "rs-card-value",
-              style: { display: "flex", alignItems: "center", gap: 8 },
+              style: { display: "flex", alignItems: "center", gap: 6 },
               children: [
                 _chunkNELAYNA3cjs.getChainIcon.call(void 0, targetChain) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   "img",
                   {
                     src: _chunkNELAYNA3cjs.getChainIcon.call(void 0, targetChain),
                     alt: "",
-                    style: { width: 16, height: 16, borderRadius: "50%" }
+                    style: { width: 16, height: 16, borderRadius: 3 }
                   }
                 ),
-                _chunkNELAYNA3cjs.getChainName.call(void 0, targetChain)
+                _chunkNELAYNA3cjs.getChainName.call(void 0, targetChain),
+                destExplorerUrl && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "a",
+                  {
+                    href: destExplorerUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "rs-card-external-link",
+                    children: txLinkIcon
+                  }
+                )
               ]
             }
           )
-        ] }),
+        ] })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-card", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "You receive" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "span",
+          {
+            className: "rs-card-value",
+            style: { display: "flex", alignItems: "center", gap: 6 },
+            children: [
+              _chunkNELAYNA3cjs.getTokenIcon.call(void 0, sourceSymbol) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "img",
+                {
+                  src: _chunkNELAYNA3cjs.getTokenIcon.call(void 0, sourceSymbol),
+                  alt: "",
+                  style: { width: 16, height: 16, borderRadius: "50%" }
+                }
+              ),
+              formattedReceivedAmount,
+              " ",
+              sourceSymbol
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: `rs-details-toggle ${detailsExpanded ? "rs-details-toggle--open" : ""}`,
+          onClick: () => setDetailsExpanded(!detailsExpanded),
+          children: [
+            detailsExpanded ? "Less details" : "More details",
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      detailsExpanded && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card", children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Transaction" }),
-          sourceExplorerUrl ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Source tx" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-value", children: sourceExplorerUrl ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "a",
             {
               href: sourceExplorerUrl,
               target: "_blank",
               rel: "noopener noreferrer",
-              className: "rs-link rs-link-external rs-font-mono rs-text-xs",
+              className: "rs-card-external-link",
+              style: { gap: 4, fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 },
               children: [
                 truncateHash(txHash),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  "svg",
-                  {
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2.5",
-                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        d: "M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
-                      }
-                    )
-                  }
-                )
+                txLinkIcon
+              ]
+            }
+          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 }, children: truncateHash(txHash) }) })
+        ] }),
+        destinationTxHash && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Destination tx" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-value", children: destExplorerUrl ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "a",
+            {
+              href: destExplorerUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "rs-card-external-link",
+              style: { gap: 4, fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 },
+              children: [
+                truncateHash(destinationTxHash),
+                txLinkIcon
               ]
             }
-          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-value rs-card-value--mono", children: truncateHash(txHash) })
+          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 }, children: truncateHash(destinationTxHash) }) })
         ] })
+      ] }),
+      showAlert && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-alert rs-alert--warning", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "svg",
+          {
+            className: "rs-alert-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "rs-alert-text", children: alertMessage })
+      ] })
+    ] }),
+    (isComplete || isFailed) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-step-footer", style: { gap: 8, display: "flex" }, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", onClick: onClose, fullWidth: true, children: "Close" }),
+      onNewDeposit && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Button, { onClick: onNewDeposit, fullWidth: true, children: [
+        "New ",
+        flowNoun
       ] })
     ] }),
-    isDelayed && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-step-footer", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: onClose, fullWidth: true, children: "Close" }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PoweredBy, {})
   ] });
 }