@rhinestone/deposit-modal 0.1.50 → 0.1.52

package/dist/{chunk-7HJ7IBRH.cjs → chunk-RVKMKH2C.cjs}

@@ -1349,7 +1349,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 +1418,61 @@ 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 getDurationSeconds(startMs, endMs) {
+  if (startMs === void 0 || endMs === void 0) return void 0;
+  return Math.max(0, Math.floor((endMs - startMs) / 1e3));
+}
+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,
@@ -1401,49 +1487,87 @@ function ProcessingStep({
   directTransfer,
   flowLabel = "deposit",
   debug,
+  targetToken,
   onClose,
   onNewDeposit,
   onDepositComplete,
   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)]);
-      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]);
+    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") {
@@ -1467,31 +1591,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)]);
+          _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)]);
+          _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",
@@ -1503,11 +1639,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,
@@ -1517,10 +1653,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, {
@@ -1552,255 +1691,371 @@ 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" }),
+  const detectionDurationSeconds = getDurationSeconds(
+    phaseTimings.startedAt,
+    phaseTimings.receivedAt
+  );
+  const queueDurationSeconds = getDurationSeconds(
+    phaseTimings.receivedAt,
+    phaseTimings.bridgingAt
+  );
+  const bridgeDurationSeconds = getDurationSeconds(
+    phaseTimings.bridgingAt,
+    phaseTimings.completedAt
+  );
+  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 statusLabel = isComplete ? isEarlyComplete ? "Confirmed" : "Successful" : isFailed ? "Failed" : delayPhaseId || hasEscalatedDelay ? "Taking longer" : "In progress";
+  const phaseRows = directTransfer ? [] : [
+    {
+      id: "confirming",
+      title: `Confirming ${flowNoun}`,
+      description: phaseTimings.receivedAt !== void 0 ? `${flowCapitalized} detected on ${_chunkNELAYNA3cjs.getChainName.call(void 0, displaySourceChain)}.` : "Waiting for your source-chain transaction to be detected.",
+      tone: phaseTimings.receivedAt !== void 0 ? "complete" : isFailed && currentPhaseId === "confirming" ? "failed" : delayPhaseId === "confirming" ? "warning" : currentPhaseId === "confirming" ? "active" : "pending",
+      statusLabel: phaseTimings.receivedAt !== void 0 ? "Done" : delayPhaseId === "confirming" ? "Delayed" : currentPhaseId === "confirming" ? "Active" : "Pending",
+      timerLabel: phaseTimings.receivedAt !== void 0 ? formatElapsedTime(_nullishCoalesce(detectionDurationSeconds, () => ( 0))) : currentPhaseId === "confirming" ? formatElapsedTime(
+        _nullishCoalesce(getDurationSeconds(
+          getPhaseStartTime("confirming", phaseTimings),
+          timelineNowMs
+        ), () => ( 0))
+      ) : "\u2013"
+    },
+    {
+      id: "received",
+      title: `${flowCapitalized} received`,
+      description: phaseTimings.bridgingAt !== void 0 ? "Funds were handed off for bridge execution." : currentPhaseId === "received" || delayPhaseId === "received" ? "Funds are in. Preparing the bridge transaction." : "Starts once the source transaction has been detected.",
+      tone: phaseTimings.bridgingAt !== void 0 ? "complete" : isFailed && currentPhaseId === "received" ? "failed" : delayPhaseId === "received" ? "warning" : currentPhaseId === "received" ? "active" : "pending",
+      statusLabel: phaseTimings.bridgingAt !== void 0 ? "Done" : delayPhaseId === "received" ? "Delayed" : currentPhaseId === "received" ? "Active" : "Pending",
+      timerLabel: phaseTimings.bridgingAt !== void 0 ? formatElapsedTime(_nullishCoalesce(queueDurationSeconds, () => ( 0))) : currentPhaseId === "received" ? formatElapsedTime(
+        _nullishCoalesce(getDurationSeconds(
+          getPhaseStartTime("received", phaseTimings),
+          timelineNowMs
+        ), () => ( 0))
+      ) : phaseTimings.receivedAt !== void 0 ? "Queued" : "\u2013"
+    },
+    {
+      id: "bridging",
+      title: "Bridging",
+      description: isComplete && !isEarlyComplete ? `Funds landed on ${_chunkNELAYNA3cjs.getChainName.call(void 0, targetChain)}.` : isEarlyComplete ? "Bridge started successfully and will finish in the background." : currentPhaseId === "bridging" || delayPhaseId === "bridging" ? `Sending funds to ${_chunkNELAYNA3cjs.getChainName.call(void 0, targetChain)}.` : "Begins after the bridge transaction is submitted.",
+      tone: isComplete && !isEarlyComplete ? "complete" : isFailed && currentPhaseId === "bridging" ? "failed" : delayPhaseId === "bridging" ? "warning" : currentPhaseId === "bridging" ? "active" : "pending",
+      statusLabel: isComplete && !isEarlyComplete ? "Done" : isEarlyComplete ? "In flight" : delayPhaseId === "bridging" ? "Delayed" : currentPhaseId === "bridging" ? "Active" : "Pending",
+      timerLabel: isComplete && !isEarlyComplete ? formatElapsedTime(_nullishCoalesce(bridgeDurationSeconds, () => ( 0))) : currentPhaseId === "bridging" ? formatElapsedTime(
+        _nullishCoalesce(getDurationSeconds(
+          getPhaseStartTime("bridging", phaseTimings),
+          _nullishCoalesce(_nullishCoalesce(phaseTimings.completedAt, () => ( phaseTimings.endedAt)), () => ( timelineNowMs))
+        ), () => ( 0))
+      ) : phaseTimings.bridgingAt !== void 0 ? "In flight" : "\u2013"
+    }
+  ];
+  const phaseBoardTitle = `${_chunkNELAYNA3cjs.getChainName.call(void 0, displaySourceChain)} to ${_chunkNELAYNA3cjs.getChainName.call(void 0, 
+    targetChain
+  )}`;
+  const highlightedMetricLabel = isEarlyComplete ? "Bridge handoff" : bridgeDurationSeconds !== void 0 ? "Bridge time" : "Total time";
+  const highlightedMetricValue = isEarlyComplete ? "In flight" : bridgeDurationSeconds !== void 0 ? formatElapsedTime(bridgeDurationSeconds) : formatElapsedTime(elapsedSeconds);
+  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}` : `Processing ${flowNoun}`;
+  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 have been successfully bridged." : 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)}.` : `Waiting for your ${flowNoun} to be detected and routed.`;
+  const infoAlertTone = isFailed ? "error" : isComplete ? isEarlyComplete ? "info" : "success" : delayPhaseId || hasEscalatedDelay ? "warning" : "info";
+  const infoAlertMessage = isFailed ? _nullishCoalesce(failureMessage, () => ( `Your ${flowNoun} could not be completed.`)) : isComplete ? directTransfer ? "This route did not require bridging." : isEarlyComplete ? "The bridge has started successfully and will finish in the background." : "Funds arrived successfully on the destination chain." : hasEscalatedDelay ? "This transfer is taking longer than expected. You can close the window and it will keep processing in the background." : delayPhaseId ? "This phase is moving slower than usual, but it is still being processed automatically." : `You can safely close this window. Your ${flowNoun} will continue in the background.`;
+  const renderPhaseBoard = () => directTransfer ? null : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-phase-board", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-phase-board-header", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-phase-board-kicker", children: "Transfer phases" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-phase-board-route", children: phaseBoardTitle })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-phase-board-total", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Total elapsed" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: formatElapsedTime(elapsedSeconds) })
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-phase-list", children: phaseRows.map((phase) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: `rs-phase-row rs-phase-row--${phase.tone}`,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-phase-rail", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-phase-dot" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-phase-copy", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-phase-row-header", children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-phase-title-block", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-phase-title", children: phase.title }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-phase-description", children: phase.description })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-phase-meta", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-phase-status", children: phase.statusLabel }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-phase-timer", children: phase.timerLabel })
+            ] })
+          ] }) })
+        ]
+      },
+      phase.id
+    )) })
+  ] });
+  const renderPrimarySummaryCard = () => /* @__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: isFailed ? "var(--rs-error)" : isComplete ? "var(--rs-success)" : delayPhaseId || hasEscalatedDelay ? "var(--color-amber8, #e2a336)" : void 0
+          },
+          children: statusLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-card-row", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: highlightedMetricLabel }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-value", children: highlightedMetricValue })
+    ] }),
+    !isProcessing && bridgeDurationSeconds !== void 0 && /* @__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
+      ] })
+    ] })
+  ] });
+  const renderRouteCard = () => /* @__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)
+          ]
+        }
+      )
+    ] }),
+    /* @__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, 
+        "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, 
-              "span",
+              "svg",
               {
-                className: "rs-card-value",
-                style: { color: "var(--rs-success)" },
-                children: isEarlyComplete ? "Confirmed" : "Successful"
+                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"
+                  }
+                )
               }
             )
-          ] }),
-          /* @__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",
+          ]
+        }
+      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-value rs-card-value--mono", children: truncateHash(txHash) })
+    ] }),
+    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",
               {
-                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)
-                ]
+                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-card-row", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-card-label", children: "Destination" }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              "span",
+          ]
+        }
+      )
+    ] })
+  ] });
+  const renderFooter = () => {
+    if (!isComplete && !isFailed) {
+      return null;
+    }
+    return /* @__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
+      ] })
+    ] });
+  };
+  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 ${isFailed ? "rs-step-icon--error" : delayPhaseId || hasEscalatedDelay ? "rs-step-icon--warning" : isComplete ? "rs-step-icon--success" : "rs-step-icon--accent"}`,
+            children: isFailed ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              "svg",
               {
-                className: "rs-card-value",
-                style: { display: "flex", alignItems: "center", gap: 6 },
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
                 children: [
-                  _chunkNELAYNA3cjs.getChainIcon.call(void 0, targetChain) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    "img",
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "path",
                     {
-                      src: _chunkNELAYNA3cjs.getChainIcon.call(void 0, targetChain),
-                      alt: "",
-                      style: { width: 14, height: 14, borderRadius: "50%" }
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M12 9v3.75m0 3.75h.008v.008H12v-.008z"
                     }
                   ),
-                  _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",
+                    "path",
                     {
-                      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"
-                        }
-                      )
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      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"
                     }
                   )
                 ]
               }
-            )
-          ] }),
-          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",
+            ) : isComplete ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "svg",
               {
-                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"
-                        }
-                      )
-                    }
-                  )
-                ]
+                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.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, {})
-    ] });
-  }
-  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, 
+            ) : delayPhaseId || hasEscalatedDelay ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "svg",
               {
                 viewBox: "0 0 24 24",
@@ -1819,54 +2074,13 @@ function ProcessingStep({
             ) : /* @__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.jsx.call(void 0, "div", { className: "rs-step-title", children: headerTitle })
       ] }),
-      /* @__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.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: [
-      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: [
+      renderPhaseBoard(),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `rs-alert rs-alert--${infoAlertTone}`, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "svg",
           {
@@ -1885,97 +2099,12 @@ function ProcessingStep({
             )
           }
         ),
-        /* @__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.jsx.call(void 0, "p", { className: "rs-alert-text", children: infoAlertMessage })
       ] }),
-      /* @__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: isDelayed ? "var(--color-amber8, #e2a336)" : void 0 },
-              children: isDelayed ? "Processing" : "In progress"
-            }
-          )
-        ] }),
-        /* @__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 },
-              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%" }
-                  }
-                ),
-                _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: 8 },
-              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%" }
-                  }
-                ),
-                _chunkNELAYNA3cjs.getChainName.call(void 0, targetChain)
-              ]
-            }
-          )
-        ] }),
-        /* @__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, 
-            "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",
-                    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.jsx.call(void 0, "span", { className: "rs-card-value rs-card-value--mono", children: truncateHash(txHash) })
-        ] })
-      ] })
+      renderPrimarySummaryCard(),
+      renderRouteCard()
     ] }),
-    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" }) }),
+    renderFooter(),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PoweredBy, {})
   ] });
 }