@rhinestone/deposit-modal 0.1.50 → 0.1.52

package/dist/{chunk-FKNYONM2.mjs → chunk-MKSZIA74.mjs}

@@ -1223,7 +1223,7 @@ function accountFromPrivateKey(privateKey) {
 }
 
 // src/components/steps/ProcessingStep.tsx
-import { useState, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
 import { formatUnits } from "viem";
 
 // src/components/ui/PoweredBy.tsx
@@ -1345,11 +1345,42 @@ function txRefsMatch(a, b) {
 }
 
 // src/components/steps/ProcessingStep.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 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 {
+    return null;
+  }
+}
+function savePhaseTimings(txHash, timings) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(
+      `${PHASE_TIMINGS_PREFIX}:${txHash}`,
+      JSON.stringify(timings)
+    );
+  } catch {
+  }
+}
+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 event?.time !== "string") return void 0;
+  const timestamp = Date.parse(event.time);
+  return Number.isFinite(timestamp) ? timestamp : void 0;
+}
+function syncPhaseTimings(previous, event) {
+  if (!event?.type) return previous;
+  const timestamp = 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 phaseTimings.receivedAt ?? phaseTimings.startedAt;
+  }
+  return 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 (state.lastEvent?.type === "bridge-started") return "bridging";
+  if (state.lastEvent?.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 = useRef2(Date.now());
+  const pollIntervalRef = useRef2(INITIAL_POLL_INTERVAL);
+  const pollTimeoutRef = useRef2(null);
+  const escalatedDelayRef = useRef2(false);
   const [state, setState] = useState(
     directTransfer ? { type: "complete" } : { type: "processing" }
   );
   const [elapsedSeconds, setElapsedSeconds] = useState(0);
-  const startTimeRef = useRef2(Date.now());
-  const intervalRef = useRef2(null);
-  useEffect2(() => {
-    if (directTransfer) {
-      debugLog(debug, "processing", "direct-transfer:complete", {
-        txHash,
-        flowLabel
-      });
-      onDepositComplete?.(txHash);
-      return;
+  const [phaseTimings, setPhaseTimings] = useState(() => {
+    const saved = loadPhaseTimings(txHash);
+    if (saved) {
+      startTimeRef.current = saved.startedAt;
+      return saved;
     }
-  }, [debug, directTransfer, flowLabel, txHash, onDepositComplete]);
+    return { startedAt: startTimeRef.current };
+  });
+  const [hasEscalatedDelay, setHasEscalatedDelay] = useState(false);
   useEffect2(() => {
-    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
+    });
+    onDepositComplete?.(txHash, void 0, {
+      amount,
+      sourceChain,
+      sourceToken,
+      targetChain,
+      targetToken
+    });
+  }, [
+    amount,
+    debug,
+    directTransfer,
+    flowLabel,
+    onDepositComplete,
+    sourceChain,
+    sourceToken,
+    targetChain,
+    targetToken,
+    txHash
+  ]);
+  useEffect2(() => {
+    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]);
   useEffect2(() => {
-    if (state.type === "complete" || state.type === "failed" || state.type === "error") {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-    }
-  }, [state.type]);
-  const pollIntervalRef = useRef2(INITIAL_POLL_INTERVAL);
-  const pollTimeoutRef = useRef2(null);
-  const processTimeoutRef = useRef2(null);
+    if (state.type === "processing") return;
+    const endedAt = state.type === "complete" ? 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]);
+  useEffect2(() => {
+    if (!state.lastEvent) return;
+    setPhaseTimings((previous) => syncPhaseTimings(previous, state.lastEvent));
+  }, [state.lastEvent?.time, state.lastEvent?.type]);
+  useEffect2(() => {
+    savePhaseTimings(txHash, phaseTimings);
+  }, [txHash, phaseTimings]);
   useEffect2(() => {
     if (directTransfer) return;
     if (state.type !== "processing") {
@@ -1479,7 +1603,13 @@ function ProcessingStep({
             destinationTxHash: destinationTxHash2,
             event: eventForCurrentTx.type
           });
-          onDepositComplete?.(txHash, destinationTxHash2);
+          onDepositComplete?.(txHash, destinationTxHash2, {
+            amount,
+            sourceChain,
+            sourceToken,
+            targetChain,
+            targetToken
+          });
           return;
         }
         if (!waitForFinalTx && eventForCurrentTx?.type === "bridge-started") {
@@ -1488,7 +1618,13 @@ function ProcessingStep({
             txHash,
             event: eventForCurrentTx.type
           });
-          onDepositComplete?.(txHash);
+          onDepositComplete?.(txHash, void 0, {
+            amount,
+            sourceChain,
+            sourceToken,
+            targetChain,
+            targetToken
+          });
           return;
         }
         if (eventForCurrentTx?.type === "bridge-failed") {
@@ -1520,7 +1656,10 @@ function ProcessingStep({
           onDepositFailed?.(txHash, errorMessage);
           return;
         }
-        setState({ type: "processing", lastEvent: eventForCurrentTx });
+        setState((previous) => ({
+          type: "processing",
+          lastEvent: eventForCurrentTx ?? previous.lastEvent
+        }));
         scheduleNextPoll();
       } catch (error) {
         debugError(debug, "processing", "poll:failure", error, {
@@ -1552,46 +1691,43 @@ function ProcessingStep({
       }
     };
   }, [
+    amount,
     debug,
     directTransfer,
-    state.type,
+    onDepositComplete,
+    onDepositFailed,
+    service,
     smartAccount,
+    sourceChain,
+    sourceToken,
+    state.type,
+    targetChain,
+    targetToken,
     txHash,
-    service,
-    waitForFinalTx,
-    onDepositComplete,
-    onDepositFailed
+    waitForFinalTx
   ]);
   useEffect2(() => {
-    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 });
       onError?.(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";
+    }, 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 lastEvent = state.lastEvent;
+  const failureMessage = state.type === "failed" ? state.message : void 0;
   const isEarlyComplete = !waitForFinalTx && lastEvent?.type === "bridge-started";
+  const timelineNowMs = phaseTimings.endedAt ?? Date.now();
   const flowNoun = flowLabel === "withdraw" ? "withdrawal" : "deposit";
   const flowCapitalized = flowLabel === "withdraw" ? "Withdrawal" : "Deposit";
   const destinationTxHash = lastEvent?.data?.destination?.transactionHash || null;
@@ -1601,16 +1737,12 @@ function ProcessingStep({
   const displayAmount = sourceDetails.amount ?? amount;
   const sourceExplorerUrl = getExplorerTxUrl(displaySourceChain, txHash);
   const destExplorerUrl = destinationTxHash ? getExplorerTxUrl(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" ? providedSourceSymbol ?? "SOL" : isEvmSourceToken ? getTokenSymbol(displaySourceToken, displaySourceChain) : providedSourceSymbol ?? "Token";
-  const sourceDecimals = displaySourceChain === "solana" ? providedSourceDecimals ?? 9 : isEvmSourceToken ? getTokenDecimalsByAddress(displaySourceToken, displaySourceChain) : providedSourceDecimals ?? 18;
+  const sourceDecimals = displaySourceChain === "solana" ? providedSourceDecimals ?? 9 : isEvmSourceToken ? getTokenDecimalsByAddress(
+    displaySourceToken,
+    displaySourceChain
+  ) : providedSourceDecimals ?? 18;
   const formattedReceivedAmount = (() => {
     try {
       const raw = formatUnits(BigInt(displayAmount), sourceDecimals);
@@ -1623,184 +1755,307 @@ function ProcessingStep({
       });
     }
   })();
-  if (isComplete) {
-    return /* @__PURE__ */ jsxs6("div", { className: "rs-step", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "rs-step-body rs-space-y-3", children: [
-        /* @__PURE__ */ jsxs6("div", { className: "rs-success-state", children: [
-          /* @__PURE__ */ jsx7("div", { className: "rs-success-checkmark", children: /* @__PURE__ */ jsx7(
-            "svg",
-            {
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2.5",
-              children: /* @__PURE__ */ jsx7(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M5 12l5 5L20 7"
-                }
-              )
-            }
-          ) }),
-          /* @__PURE__ */ jsx7("div", { className: "rs-success-title", children: isEarlyComplete ? `${flowCapitalized} confirmed` : `${flowCapitalized} successful` }),
-          /* @__PURE__ */ jsx7("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__ */ jsxs6("div", { className: "rs-card", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ jsx7("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 ${getChainName(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(detectionDurationSeconds ?? 0) : currentPhaseId === "confirming" ? formatElapsedTime(
+        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(queueDurationSeconds ?? 0) : currentPhaseId === "received" ? formatElapsedTime(
+        getDurationSeconds(
+          getPhaseStartTime("received", phaseTimings),
+          timelineNowMs
+        ) ?? 0
+      ) : phaseTimings.receivedAt !== void 0 ? "Queued" : "\u2013"
+    },
+    {
+      id: "bridging",
+      title: "Bridging",
+      description: isComplete && !isEarlyComplete ? `Funds landed on ${getChainName(targetChain)}.` : isEarlyComplete ? "Bridge started successfully and will finish in the background." : currentPhaseId === "bridging" || delayPhaseId === "bridging" ? `Sending funds to ${getChainName(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(bridgeDurationSeconds ?? 0) : currentPhaseId === "bridging" ? formatElapsedTime(
+        getDurationSeconds(
+          getPhaseStartTime("bridging", phaseTimings),
+          phaseTimings.completedAt ?? phaseTimings.endedAt ?? timelineNowMs
+        ) ?? 0
+      ) : phaseTimings.bridgingAt !== void 0 ? "In flight" : "\u2013"
+    }
+  ];
+  const phaseBoardTitle = `${getChainName(displaySourceChain)} to ${getChainName(
+    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 ? 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." : state.lastEvent?.type === "deposit-received" ? "Transfer received. Preparing bridge execution." : state.lastEvent?.type === "bridge-started" ? `Bridge started. Sending funds to ${getChainName(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 ? 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__ */ jsxs6("div", { className: "rs-phase-board", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "rs-phase-board-header", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx7("div", { className: "rs-phase-board-kicker", children: "Transfer phases" }),
+        /* @__PURE__ */ jsx7("div", { className: "rs-phase-board-route", children: phaseBoardTitle })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "rs-phase-board-total", children: [
+        /* @__PURE__ */ jsx7("span", { children: "Total elapsed" }),
+        /* @__PURE__ */ jsx7("strong", { children: formatElapsedTime(elapsedSeconds) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "rs-phase-list", children: phaseRows.map((phase) => /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: `rs-phase-row rs-phase-row--${phase.tone}`,
+        children: [
+          /* @__PURE__ */ jsx7("div", { className: "rs-phase-rail", children: /* @__PURE__ */ jsx7("span", { className: "rs-phase-dot" }) }),
+          /* @__PURE__ */ jsx7("div", { className: "rs-phase-copy", children: /* @__PURE__ */ jsxs6("div", { className: "rs-phase-row-header", children: [
+            /* @__PURE__ */ jsxs6("div", { className: "rs-phase-title-block", children: [
+              /* @__PURE__ */ jsx7("div", { className: "rs-phase-title", children: phase.title }),
+              /* @__PURE__ */ jsx7("div", { className: "rs-phase-description", children: phase.description })
+            ] }),
+            /* @__PURE__ */ jsxs6("div", { className: "rs-phase-meta", children: [
+              /* @__PURE__ */ jsx7("span", { className: "rs-phase-status", children: phase.statusLabel }),
+              /* @__PURE__ */ jsx7("span", { className: "rs-phase-timer", children: phase.timerLabel })
+            ] })
+          ] }) })
+        ]
+      },
+      phase.id
+    )) })
+  ] });
+  const renderPrimarySummaryCard = () => /* @__PURE__ */ jsxs6("div", { className: "rs-card", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
+      /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Status" }),
+      /* @__PURE__ */ jsx7(
+        "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__ */ jsxs6("div", { className: "rs-card-row", children: [
+      /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: highlightedMetricLabel }),
+      /* @__PURE__ */ jsx7("span", { className: "rs-card-value", children: highlightedMetricValue })
+    ] }),
+    !isProcessing && bridgeDurationSeconds !== void 0 && /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
+      /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Total time" }),
+      /* @__PURE__ */ jsx7("span", { className: "rs-card-value", children: formatElapsedTime(elapsedSeconds) })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
+      /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "You sent" }),
+      /* @__PURE__ */ jsxs6("span", { className: "rs-card-value", children: [
+        formattedReceivedAmount,
+        " ",
+        sourceSymbol
+      ] })
+    ] })
+  ] });
+  const renderRouteCard = () => /* @__PURE__ */ jsxs6("div", { className: "rs-card", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
+      /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Source" }),
+      /* @__PURE__ */ jsxs6(
+        "span",
+        {
+          className: "rs-card-value",
+          style: { display: "flex", alignItems: "center", gap: 6 },
+          children: [
+            getChainIcon(displaySourceChain) && /* @__PURE__ */ jsx7(
+              "img",
+              {
+                src: getChainIcon(displaySourceChain),
+                alt: "",
+                style: { width: 14, height: 14, borderRadius: "50%" }
+              }
+            ),
+            getChainName(displaySourceChain)
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
+      /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Destination" }),
+      /* @__PURE__ */ jsxs6(
+        "span",
+        {
+          className: "rs-card-value",
+          style: { display: "flex", alignItems: "center", gap: 6 },
+          children: [
+            getChainIcon(targetChain) && /* @__PURE__ */ jsx7(
+              "img",
+              {
+                src: getChainIcon(targetChain),
+                alt: "",
+                style: { width: 14, height: 14, borderRadius: "50%" }
+              }
+            ),
+            getChainName(targetChain)
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
+      /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Transaction" }),
+      sourceExplorerUrl ? /* @__PURE__ */ jsxs6(
+        "a",
+        {
+          href: sourceExplorerUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "rs-link rs-link-external rs-font-mono rs-text-xs",
+          children: [
+            truncateHash(txHash),
             /* @__PURE__ */ jsx7(
-              "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__ */ jsx7(
+                  "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__ */ jsxs6("div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Total time" }),
-            /* @__PURE__ */ jsx7("span", { className: "rs-card-value", children: formatElapsedTime(elapsedSeconds) })
-          ] }),
-          /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "You sent" }),
-            /* @__PURE__ */ jsxs6("span", { className: "rs-card-value", children: [
-              formattedReceivedAmount,
-              " ",
-              sourceSymbol
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "rs-card", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Source" }),
-            /* @__PURE__ */ jsxs6(
-              "span",
+          ]
+        }
+      ) : /* @__PURE__ */ jsx7("span", { className: "rs-card-value rs-card-value--mono", children: truncateHash(txHash) })
+    ] }),
+    destinationTxHash && destExplorerUrl && /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
+      /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Destination tx" }),
+      /* @__PURE__ */ jsxs6(
+        "a",
+        {
+          href: destExplorerUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "rs-link rs-link-external rs-font-mono rs-text-xs",
+          children: [
+            truncateHash(destinationTxHash),
+            /* @__PURE__ */ jsx7(
+              "svg",
               {
-                className: "rs-card-value",
-                style: { display: "flex", alignItems: "center", gap: 6 },
-                children: [
-                  getChainIcon(displaySourceChain) && /* @__PURE__ */ jsx7(
-                    "img",
-                    {
-                      src: getChainIcon(displaySourceChain),
-                      alt: "",
-                      style: { width: 14, height: 14, borderRadius: "50%" }
-                    }
-                  ),
-                  getChainName(displaySourceChain)
-                ]
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                style: { width: 12, height: 12 },
+                children: /* @__PURE__ */ jsx7(
+                  "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__ */ jsxs6("div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Destination" }),
-            /* @__PURE__ */ jsxs6(
-              "span",
+          ]
+        }
+      )
+    ] })
+  ] });
+  const renderFooter = () => {
+    if (!isComplete && !isFailed) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs6("div", { className: "rs-step-footer", style: { gap: 8, display: "flex" }, children: [
+      /* @__PURE__ */ jsx7(Button, { variant: "outline", onClick: onClose, fullWidth: true, children: "Close" }),
+      onNewDeposit && /* @__PURE__ */ jsxs6(Button, { onClick: onNewDeposit, fullWidth: true, children: [
+        "New ",
+        flowNoun
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "rs-step", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "rs-step-header", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "rs-step-header-row", children: [
+        /* @__PURE__ */ jsx7(
+          "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__ */ jsxs6(
+              "svg",
               {
-                className: "rs-card-value",
-                style: { display: "flex", alignItems: "center", gap: 6 },
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
                 children: [
-                  getChainIcon(targetChain) && /* @__PURE__ */ jsx7(
-                    "img",
+                  /* @__PURE__ */ jsx7(
+                    "path",
                     {
-                      src: getChainIcon(targetChain),
-                      alt: "",
-                      style: { width: 14, height: 14, borderRadius: "50%" }
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M12 9v3.75m0 3.75h.008v.008H12v-.008z"
                     }
                   ),
-                  getChainName(targetChain)
-                ]
-              }
-            )
-          ] }),
-          sourceExplorerUrl && /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Transaction" }),
-            /* @__PURE__ */ jsxs6(
-              "a",
-              {
-                href: sourceExplorerUrl,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: "rs-link rs-link-external rs-font-mono rs-text-xs",
-                children: [
-                  truncateHash(txHash),
                   /* @__PURE__ */ jsx7(
-                    "svg",
+                    "path",
                     {
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2.5",
-                      style: { width: 12, height: 12 },
-                      children: /* @__PURE__ */ jsx7(
-                        "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__ */ jsxs6("div", { className: "rs-card-row", children: [
-            /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Destination tx" }),
-            /* @__PURE__ */ jsxs6(
-              "a",
+            ) : isComplete ? /* @__PURE__ */ jsx7(
+              "svg",
               {
-                href: destExplorerUrl,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: "rs-link rs-link-external rs-font-mono rs-text-xs",
-                children: [
-                  truncateHash(destinationTxHash),
-                  /* @__PURE__ */ jsx7(
-                    "svg",
-                    {
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2.5",
-                      style: { width: 12, height: 12 },
-                      children: /* @__PURE__ */ jsx7(
-                        "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__ */ jsx7(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M5 12l5 5L20 7"
+                  }
+                )
               }
-            )
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "rs-step-footer", style: { gap: 8, display: "flex" }, children: [
-        /* @__PURE__ */ jsx7(Button, { variant: "outline", onClick: onClose, fullWidth: true, children: "Close" }),
-        /* @__PURE__ */ jsxs6(Button, { onClick: onNewDeposit, fullWidth: true, children: [
-          "New ",
-          flowNoun
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx7(PoweredBy, {})
-    ] });
-  }
-  return /* @__PURE__ */ jsxs6("div", { className: "rs-step", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "rs-step-header", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "rs-step-header-row", children: [
-        /* @__PURE__ */ jsx7(
-          "div",
-          {
-            className: `rs-step-icon ${isDelayed ? "rs-step-icon--warning" : "rs-step-icon--accent"}`,
-            children: isDelayed ? /* @__PURE__ */ jsx7(
+            ) : delayPhaseId || hasEscalatedDelay ? /* @__PURE__ */ jsx7(
               "svg",
               {
                 viewBox: "0 0 24 24",
@@ -1819,54 +2074,13 @@ function ProcessingStep({
             ) : /* @__PURE__ */ jsx7(Spinner, {})
           }
         ),
-        /* @__PURE__ */ jsx7("div", { className: "rs-step-title", children: isDelayed ? `${flowCapitalized} taking longer than expected` : `Bridging ${flowCapitalized}` })
+        /* @__PURE__ */ jsx7("div", { className: "rs-step-title", children: headerTitle })
       ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "rs-step-description rs-text-secondary", children: [
-        state.type === "processing" && (lastEvent?.type === "deposit-received" ? "Transfer received. Preparing bridge..." : lastEvent?.type === "bridge-started" ? "Transfer confirmed. Funds arriving shortly..." : `Bridging your ${flowNoun} to ${getChainName(targetChain)}.`),
-        (state.type === "failed" || state.type === "error") && "Your funds are safe. Our team has been notified and is working to complete your transfer."
-      ] })
+      /* @__PURE__ */ jsx7("div", { className: "rs-step-description rs-text-secondary", children: headerDescription })
     ] }),
     /* @__PURE__ */ jsxs6("div", { className: "rs-step-body rs-space-y-3", children: [
-      isProcessing && /* @__PURE__ */ jsxs6(Fragment, { children: [
-        /* @__PURE__ */ jsx7("div", { className: "rs-progress-bar", children: /* @__PURE__ */ jsx7("div", { className: "rs-progress-bar-fill rs-progress-bar-fill--indeterminate" }) }),
-        /* @__PURE__ */ jsxs6("div", { className: "rs-alert rs-alert--info", children: [
-          /* @__PURE__ */ jsx7(
-            "svg",
-            {
-              className: "rs-alert-icon",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              children: /* @__PURE__ */ jsx7(
-                "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__ */ jsxs6("p", { className: "rs-alert-text", children: [
-            "You can safely close this window. Your ",
-            flowNoun,
-            " will complete in the background."
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs6(
-          "div",
-          {
-            className: "rs-text-sm rs-text-tertiary",
-            style: { textAlign: "center" },
-            children: [
-              "Elapsed: ",
-              formatElapsedTime(elapsedSeconds)
-            ]
-          }
-        )
-      ] }),
-      isDelayed && /* @__PURE__ */ jsxs6("div", { className: "rs-alert rs-alert--info", children: [
+      renderPhaseBoard(),
+      /* @__PURE__ */ jsxs6("div", { className: `rs-alert rs-alert--${infoAlertTone}`, children: [
         /* @__PURE__ */ jsx7(
           "svg",
           {
@@ -1885,97 +2099,12 @@ function ProcessingStep({
             )
           }
         ),
-        /* @__PURE__ */ jsx7("p", { className: "rs-alert-text", children: "You can safely close this window. Your funds are secure and the transfer will be completed automatically." })
+        /* @__PURE__ */ jsx7("p", { className: "rs-alert-text", children: infoAlertMessage })
       ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "rs-card", children: [
-        /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Status" }),
-          /* @__PURE__ */ jsx7(
-            "span",
-            {
-              className: "rs-card-value",
-              style: { color: isDelayed ? "var(--color-amber8, #e2a336)" : void 0 },
-              children: isDelayed ? "Processing" : "In progress"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Source" }),
-          /* @__PURE__ */ jsxs6(
-            "span",
-            {
-              className: "rs-card-value",
-              style: { display: "flex", alignItems: "center", gap: 8 },
-              children: [
-                getChainIcon(displaySourceChain) && /* @__PURE__ */ jsx7(
-                  "img",
-                  {
-                    src: getChainIcon(displaySourceChain),
-                    alt: "",
-                    style: { width: 16, height: 16, borderRadius: "50%" }
-                  }
-                ),
-                getChainName(displaySourceChain)
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Destination" }),
-          /* @__PURE__ */ jsxs6(
-            "span",
-            {
-              className: "rs-card-value",
-              style: { display: "flex", alignItems: "center", gap: 8 },
-              children: [
-                getChainIcon(targetChain) && /* @__PURE__ */ jsx7(
-                  "img",
-                  {
-                    src: getChainIcon(targetChain),
-                    alt: "",
-                    style: { width: 16, height: 16, borderRadius: "50%" }
-                  }
-                ),
-                getChainName(targetChain)
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Transaction" }),
-          sourceExplorerUrl ? /* @__PURE__ */ jsxs6(
-            "a",
-            {
-              href: sourceExplorerUrl,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "rs-link rs-link-external rs-font-mono rs-text-xs",
-              children: [
-                truncateHash(txHash),
-                /* @__PURE__ */ jsx7(
-                  "svg",
-                  {
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2.5",
-                    children: /* @__PURE__ */ jsx7(
-                      "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__ */ jsx7("span", { className: "rs-card-value rs-card-value--mono", children: truncateHash(txHash) })
-        ] })
-      ] })
+      renderPrimarySummaryCard(),
+      renderRouteCard()
     ] }),
-    isDelayed && /* @__PURE__ */ jsx7("div", { className: "rs-step-footer", children: /* @__PURE__ */ jsx7(Button, { onClick: onClose, fullWidth: true, children: "Close" }) }),
+    renderFooter(),
     /* @__PURE__ */ jsx7(PoweredBy, {})
   ] });
 }