@rhinestone/deposit-modal 0.1.52 → 0.1.53

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

@@ -6,6 +6,7 @@ import {
   getExplorerTxUrl,
   getTokenAddress,
   getTokenDecimalsByAddress,
+  getTokenIcon,
   getTokenSymbol
 } from "./chunk-ZJQZEIHA.mjs";
 
@@ -1437,10 +1438,6 @@ function syncPhaseTimings(previous, event) {
     ...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);
@@ -1755,332 +1752,236 @@ function ProcessingStep({
       });
     }
   })();
-  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"
-    },
+  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",
     {
-      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"
+      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"
     }
-  ];
-  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",
+  ) });
+  return /* @__PURE__ */ jsxs6("div", { className: "rs-step", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "rs-step-header--centered", children: [
+      isFailed ? /* @__PURE__ */ jsx7("div", { className: "rs-failed-badge", children: /* @__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(displaySourceChain) && /* @__PURE__ */ jsx7(
-              "img",
+            /* @__PURE__ */ jsx7(
+              "path",
               {
-                src: getChainIcon(displaySourceChain),
-                alt: "",
-                style: { width: 14, height: 14, borderRadius: "50%" }
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M12 9v3.75m0 3.75h.008v.008H12v-.008z"
               }
             ),
-            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",
+            /* @__PURE__ */ jsx7(
+              "path",
               {
-                src: getChainIcon(targetChain),
-                alt: "",
-                style: { width: 14, height: 14, borderRadius: "50%" }
+                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"
               }
-            ),
-            getChainName(targetChain)
+            )
           ]
         }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-      /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Transaction" }),
-      sourceExplorerUrl ? /* @__PURE__ */ jsxs6(
-        "a",
+      ) }) : isComplete ? /* @__PURE__ */ jsx7("div", { className: "rs-success-badge", children: /* @__PURE__ */ jsx7(
+        "svg",
         {
-          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",
+          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-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: 6 },
+              children: [
+                getChainIcon(displaySourceChain) && /* @__PURE__ */ jsx7(
+                  "img",
                   {
-                    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"
+                    src: getChainIcon(displaySourceChain),
+                    alt: "",
+                    style: { width: 16, height: 16, borderRadius: 3 }
+                  }
+                ),
+                getChainName(displaySourceChain),
+                sourceExplorerUrl && /* @__PURE__ */ jsx7(
+                  "a",
+                  {
+                    href: sourceExplorerUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "rs-card-external-link",
+                    children: txLinkIcon
                   }
                 )
-              }
-            )
-          ]
-        }
-      ) : /* @__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("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: 16, height: 16, borderRadius: 3 }
+                  }
+                ),
+                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(
-        "a",
+        "button",
         {
-          href: destExplorerUrl,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "rs-link rs-link-external rs-font-mono rs-text-xs",
+          type: "button",
+          className: `rs-details-toggle ${detailsExpanded ? "rs-details-toggle--open" : ""}`,
+          onClick: () => setDetailsExpanded(!detailsExpanded),
           children: [
-            truncateHash(destinationTxHash),
+            detailsExpanded ? "Less details" : "More details",
             /* @__PURE__ */ jsx7(
               "svg",
               {
                 viewBox: "0 0 24 24",
                 fill: "none",
                 stroke: "currentColor",
-                strokeWidth: "2.5",
-                style: { width: 12, height: 12 },
+                strokeWidth: "2",
                 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"
+                    d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
                   }
                 )
               }
             )
           ]
         }
-      )
-    ] })
-  ] });
-  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",
-              {
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                children: [
-                  /* @__PURE__ */ jsx7(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      d: "M12 9v3.75m0 3.75h.008v.008H12v-.008z"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx7(
-                    "path",
-                    {
-                      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"
-                    }
-                  )
-                ]
-              }
-            ) : isComplete ? /* @__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"
-                  }
-                )
-              }
-            ) : delayPhaseId || hasEscalatedDelay ? /* @__PURE__ */ jsx7(
-              "svg",
-              {
-                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(Spinner, {})
-          }
-        ),
-        /* @__PURE__ */ jsx7("div", { className: "rs-step-title", children: headerTitle })
+      ),
+      detailsExpanded && /* @__PURE__ */ jsxs6("div", { className: "rs-card", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
+          /* @__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-card-external-link",
+              style: { gap: 4, fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 },
+              children: [
+                truncateHash(txHash),
+                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", { style: { fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 }, children: truncateHash(destinationTxHash) }) })
+        ] })
       ] }),
-      /* @__PURE__ */ jsx7("div", { className: "rs-step-description rs-text-secondary", children: headerDescription })
-    ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "rs-step-body rs-space-y-3", children: [
-      renderPhaseBoard(),
-      /* @__PURE__ */ jsxs6("div", { className: `rs-alert rs-alert--${infoAlertTone}`, children: [
+      showAlert && /* @__PURE__ */ jsxs6("div", { className: "rs-alert rs-alert--warning", children: [
         /* @__PURE__ */ jsx7(
           "svg",
           {
@@ -2094,17 +1995,21 @@ function ProcessingStep({
               {
                 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: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx7("p", { className: "rs-alert-text", children: infoAlertMessage })
-      ] }),
-      renderPrimarySummaryCard(),
-      renderRouteCard()
+        /* @__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
+      ] })
     ] }),
-    renderFooter(),
     /* @__PURE__ */ jsx7(PoweredBy, {})
   ] });
 }