@rhinestone/deposit-modal 0.1.51 → 0.1.53

package/dist/{chunk-BNSX25TA.mjs → chunk-REDAO3MS.mjs}

@@ -6,6 +6,7 @@ import {
   getExplorerTxUrl,
   getTokenAddress,
   getTokenDecimalsByAddress,
+  getTokenIcon,
   getTokenSymbol
 } from "./chunk-ZJQZEIHA.mjs";
 
@@ -1223,7 +1224,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 +1346,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 +1419,57 @@ 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 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,
@@ -1408,43 +1491,80 @@ function ProcessingStep({
   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, void 0, { amount, sourceChain, sourceToken, targetChain, targetToken });
-      return;
+  const [phaseTimings, setPhaseTimings] = useState(() => {
+    const saved = loadPhaseTimings(txHash);
+    if (saved) {
+      startTimeRef.current = saved.startedAt;
+      return saved;
     }
-  }, [debug, directTransfer, flowLabel, txHash, onDepositComplete, amount, sourceChain, sourceToken, targetChain, targetToken]);
+    return { startedAt: startTimeRef.current };
+  });
+  const [hasEscalatedDelay, setHasEscalatedDelay] = 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") {
@@ -1480,7 +1600,13 @@ function ProcessingStep({
             destinationTxHash: destinationTxHash2,
             event: eventForCurrentTx.type
           });
-          onDepositComplete?.(txHash, destinationTxHash2, { amount, sourceChain, sourceToken, targetChain, targetToken });
+          onDepositComplete?.(txHash, destinationTxHash2, {
+            amount,
+            sourceChain,
+            sourceToken,
+            targetChain,
+            targetToken
+          });
           return;
         }
         if (!waitForFinalTx && eventForCurrentTx?.type === "bridge-started") {
@@ -1489,7 +1615,13 @@ function ProcessingStep({
             txHash,
             event: eventForCurrentTx.type
           });
-          onDepositComplete?.(txHash, void 0, { amount, sourceChain, sourceToken, targetChain, targetToken });
+          onDepositComplete?.(txHash, void 0, {
+            amount,
+            sourceChain,
+            sourceToken,
+            targetChain,
+            targetToken
+          });
           return;
         }
         if (eventForCurrentTx?.type === "bridge-failed") {
@@ -1521,7 +1653,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, {
@@ -1553,46 +1688,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;
@@ -1602,16 +1734,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);
@@ -1624,299 +1752,112 @@ 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" }),
-            /* @__PURE__ */ jsx7(
-              "span",
-              {
-                className: "rs-card-value",
-                style: { color: "var(--rs-success)" },
-                children: isEarlyComplete ? "Confirmed" : "Successful"
-              }
-            )
-          ] }),
-          /* @__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",
-              {
-                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)
-                ]
-              }
-            )
-          ] }),
-          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",
-                    {
-                      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"
-                        }
-                      )
-                    }
-                  )
-                ]
-              }
-            )
-          ] }),
-          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",
-                    {
-                      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-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, {})
-    ] });
-  }
+  const currentPhaseId = getCurrentPhaseId(state, phaseTimings, isEarlyComplete);
+  const activePhaseStartedAt = currentPhaseId ? getPhaseStartTime(currentPhaseId, phaseTimings) : void 0;
+  const activePhaseElapsedMs = isProcessing && activePhaseStartedAt !== void 0 ? timelineNowMs - activePhaseStartedAt : 0;
+  const delayPhaseId = isProcessing && currentPhaseId && activePhaseElapsedMs >= SOFT_DELAY_MS[currentPhaseId] ? currentPhaseId : void 0;
+  const headerTitle = isFailed ? `${flowCapitalized} could not be completed` : isComplete ? isEarlyComplete ? `${flowCapitalized} confirmed` : `${flowCapitalized} successful` : delayPhaseId === "received" ? "Bridge pending" : delayPhaseId === "bridging" ? "Bridge delayed" : delayPhaseId === "confirming" ? `Confirming ${flowNoun}` : `Submitting transaction...`;
+  const headerDescription = isFailed ? failureMessage ?? "The transfer could not be completed." : isComplete ? directTransfer ? "Your transfer is complete." : isEarlyComplete ? "The bridge has started. Funds will arrive shortly." : "Your funds were successfully deposited." : delayPhaseId === "received" ? "Funds are in. We are still waiting for the bridge transaction to begin." : delayPhaseId === "bridging" ? "The bridge has started but settlement is taking longer than expected." : delayPhaseId === "confirming" ? "The source transaction has not been picked up yet, but we are still polling automatically." : state.lastEvent?.type === "deposit-received" ? "Transfer received. Preparing bridge execution." : state.lastEvent?.type === "bridge-started" ? `Bridge started. Sending funds to ${getChainName(targetChain)}.` : "Filling your transaction on the blockchain.";
+  const showAlert = !isFailed && (delayPhaseId !== void 0 || hasEscalatedDelay);
+  const alertMessage = hasEscalatedDelay ? "Taking longer than expected. You can close this window \u2014 processing continues in the background." : "This step is slower than usual but still processing.";
+  const fillStatus = isComplete ? "Successful" : isFailed ? "Failed" : "Processing";
+  const fillStatusClass = isComplete ? "rs-card-value--success" : isFailed ? "rs-card-value--error" : "";
+  const [detailsExpanded, setDetailsExpanded] = useState(false);
+  const txLinkIcon = /* @__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"
+    }
+  ) });
   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(
-              "svg",
+    /* @__PURE__ */ jsxs6("div", { className: "rs-step-header--centered", children: [
+      isFailed ? /* @__PURE__ */ jsx7("div", { className: "rs-failed-badge", children: /* @__PURE__ */ jsxs6(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          children: [
+            /* @__PURE__ */ jsx7(
+              "path",
               {
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                children: /* @__PURE__ */ jsx7(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                  }
-                )
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M12 9v3.75m0 3.75h.008v.008H12v-.008z"
               }
-            ) : /* @__PURE__ */ jsx7(Spinner, {})
-          }
-        ),
-        /* @__PURE__ */ jsx7("div", { className: "rs-step-title", children: isDelayed ? `${flowCapitalized} taking longer than expected` : `Bridging ${flowCapitalized}` })
-      ] }),
-      /* @__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__ */ 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: [
-        /* @__PURE__ */ jsx7(
-          "svg",
-          {
-            className: "rs-alert-icon",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            children: /* @__PURE__ */ jsx7(
+            ),
+            /* @__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"
+                d: "M10.29 3.86L1.82 18a2.25 2.25 0 001.93 3.37h16.5A2.25 2.25 0 0022.18 18L13.71 3.86a2.25 2.25 0 00-3.42 0z"
               }
             )
-          }
-        ),
-        /* @__PURE__ */ 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__ */ 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",
+          ]
+        }
+      ) }) : isComplete ? /* @__PURE__ */ jsx7("div", { className: "rs-success-badge", children: /* @__PURE__ */ jsx7(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          children: /* @__PURE__ */ jsx7(
+            "path",
             {
-              className: "rs-card-value",
-              style: { color: isDelayed ? "var(--color-amber8, #e2a336)" : void 0 },
-              children: isDelayed ? "Processing" : "In progress"
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M5 12l5 5L20 7"
             }
           )
+        }
+      ) }) : /* @__PURE__ */ jsx7("div", { className: "rs-processing-badge", children: /* @__PURE__ */ jsx7(Spinner, {}) }),
+      /* @__PURE__ */ jsx7("div", { className: "rs-step-title", children: headerTitle }),
+      /* @__PURE__ */ jsx7("div", { className: "rs-step-description rs-text-secondary", children: headerDescription })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "rs-step-body rs-space-y-3", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "rs-card", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
+          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Fill status" }),
+          /* @__PURE__ */ jsx7("span", { className: `rs-card-value ${fillStatusClass}`, children: fillStatus })
         ] }),
+        /* @__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", 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: 8 },
+              style: { display: "flex", alignItems: "center", gap: 6 },
               children: [
                 getChainIcon(displaySourceChain) && /* @__PURE__ */ jsx7(
                   "img",
                   {
                     src: getChainIcon(displaySourceChain),
                     alt: "",
-                    style: { width: 16, height: 16, borderRadius: "50%" }
+                    style: { width: 16, height: 16, borderRadius: 3 }
                   }
                 ),
-                getChainName(displaySourceChain)
+                getChainName(displaySourceChain),
+                sourceExplorerUrl && /* @__PURE__ */ jsx7(
+                  "a",
+                  {
+                    href: sourceExplorerUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "rs-card-external-link",
+                    children: txLinkIcon
+                  }
+                )
               ]
             }
           )
@@ -1927,56 +1868,148 @@ function ProcessingStep({
             "span",
             {
               className: "rs-card-value",
-              style: { display: "flex", alignItems: "center", gap: 8 },
+              style: { display: "flex", alignItems: "center", gap: 6 },
               children: [
                 getChainIcon(targetChain) && /* @__PURE__ */ jsx7(
                   "img",
                   {
                     src: getChainIcon(targetChain),
                     alt: "",
-                    style: { width: 16, height: 16, borderRadius: "50%" }
+                    style: { width: 16, height: 16, borderRadius: 3 }
                   }
                 ),
-                getChainName(targetChain)
+                getChainName(targetChain),
+                destExplorerUrl && /* @__PURE__ */ jsx7(
+                  "a",
+                  {
+                    href: destExplorerUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "rs-card-external-link",
+                    children: txLinkIcon
+                  }
+                )
               ]
             }
           )
-        ] }),
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx7("div", { className: "rs-card", children: /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
+        /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "You receive" }),
+        /* @__PURE__ */ jsxs6(
+          "span",
+          {
+            className: "rs-card-value",
+            style: { display: "flex", alignItems: "center", gap: 6 },
+            children: [
+              getTokenIcon(sourceSymbol) && /* @__PURE__ */ jsx7(
+                "img",
+                {
+                  src: getTokenIcon(sourceSymbol),
+                  alt: "",
+                  style: { width: 16, height: 16, borderRadius: "50%" }
+                }
+              ),
+              formattedReceivedAmount,
+              " ",
+              sourceSymbol
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          type: "button",
+          className: `rs-details-toggle ${detailsExpanded ? "rs-details-toggle--open" : ""}`,
+          onClick: () => setDetailsExpanded(!detailsExpanded),
+          children: [
+            detailsExpanded ? "Less details" : "More details",
+            /* @__PURE__ */ jsx7(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ jsx7(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      detailsExpanded && /* @__PURE__ */ jsxs6("div", { className: "rs-card", children: [
         /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Transaction" }),
-          sourceExplorerUrl ? /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Source tx" }),
+          /* @__PURE__ */ jsx7("span", { className: "rs-card-value", children: sourceExplorerUrl ? /* @__PURE__ */ jsxs6(
             "a",
             {
               href: sourceExplorerUrl,
               target: "_blank",
               rel: "noopener noreferrer",
-              className: "rs-link rs-link-external rs-font-mono rs-text-xs",
+              className: "rs-card-external-link",
+              style: { gap: 4, fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 },
               children: [
                 truncateHash(txHash),
-                /* @__PURE__ */ 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"
-                      }
-                    )
-                  }
-                )
+                txLinkIcon
+              ]
+            }
+          ) : /* @__PURE__ */ jsx7("span", { style: { fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 }, children: truncateHash(txHash) }) })
+        ] }),
+        destinationTxHash && /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
+          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Destination tx" }),
+          /* @__PURE__ */ jsx7("span", { className: "rs-card-value", children: destExplorerUrl ? /* @__PURE__ */ jsxs6(
+            "a",
+            {
+              href: destExplorerUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "rs-card-external-link",
+              style: { gap: 4, fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 },
+              children: [
+                truncateHash(destinationTxHash),
+                txLinkIcon
               ]
             }
-          ) : /* @__PURE__ */ jsx7("span", { className: "rs-card-value rs-card-value--mono", children: truncateHash(txHash) })
+          ) : /* @__PURE__ */ jsx7("span", { style: { fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 }, children: truncateHash(destinationTxHash) }) })
         ] })
+      ] }),
+      showAlert && /* @__PURE__ */ jsxs6("div", { className: "rs-alert rs-alert--warning", 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: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx7("p", { className: "rs-alert-text", children: alertMessage })
+      ] })
+    ] }),
+    (isComplete || isFailed) && /* @__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
       ] })
     ] }),
-    isDelayed && /* @__PURE__ */ jsx7("div", { className: "rs-step-footer", children: /* @__PURE__ */ jsx7(Button, { onClick: onClose, fullWidth: true, children: "Close" }) }),
     /* @__PURE__ */ jsx7(PoweredBy, {})
   ] });
 }