@rhinestone/deposit-modal 0.3.0-alpha.4 → 0.3.0-alpha.6

package/dist/{chunk-V6NJIPSS.cjs → chunk-DX2D2TRZ.cjs}

@@ -162,10 +162,35 @@ Modal.displayName = "Modal";
 
 
 
+
 var _lucidereact = require('lucide-react');
+
 var WalletIcon = _lucidereact.Wallet;
 var ExternalLinkIcon = _lucidereact.ExternalLink;
 var CheckIcon = _lucidereact.Check;
+function TransferCryptoIcon() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 6 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M18.0898 16.3701C19.0352 16.7225 19.8763 17.3076 20.5356 18.0713C21.1949 18.835 21.6509 19.7526 21.8616 20.7392C22.0723 21.7258 22.0307 22.7496 21.7409 23.716C21.451 24.6823 20.9222 25.5599 20.2033 26.2677C19.4844 26.9755 18.5986 27.4906 17.6278 27.7653C16.6571 28.0401 15.6327 28.0656 14.6495 27.8396C13.6663 27.6135 12.756 27.1432 12.0027 26.4721C11.2494 25.801 10.6775 24.9508 10.3398 24.0001M7 12H8V16M16.7098 19.8799L17.4098 20.5899L14.5898 23.4099M14 14C14 17.3137 11.3137 20 8 20C4.68629 20 2 17.3137 2 14C2 10.6863 4.68629 8 8 8C11.3137 8 14 10.6863 14 14Z",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
 var ChevronRightIcon = _lucidereact.ChevronRight;
 var ChevronLeftIcon = _lucidereact.ChevronLeft;
 var ChevronDownIcon = _lucidereact.ChevronDown;
@@ -175,7 +200,7 @@ var CoinsIcon = _lucidereact.Coins;
 var HistoryIcon = _lucidereact.History;
 var InfoIcon = _lucidereact.Info;
 var CopyIcon = _lucidereact.Copy;
-var ArrowRightIcon = _lucidereact.ArrowRight;
+var ArrowUpRightIcon = _lucidereact.ArrowUpRight;
 var AlertTriangleIcon = _lucidereact.AlertTriangle;
 var PercentIcon = _lucidereact.Percent;
 var ClockIcon = _lucidereact.Clock;
@@ -280,7 +305,7 @@ function safeBigInt(value) {
   if (!value) return BigInt(0);
   try {
     return BigInt(value);
-  } catch (e) {
+  } catch (e2) {
     return BigInt(0);
   }
 }
@@ -1266,26 +1291,65 @@ function ListRow({
   subtitle,
   meta,
   trailing,
+  action,
   className = "",
+  onClick,
+  disabled,
   ...props
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  const inner = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    leadingMedia ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-list-row-leading rs-list-row-leading--media", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: leadingMedia, alt: "" }) }) : leading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-list-row-leading", children: leading }) : null,
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-list-row-body", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-list-row-text", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-list-row-title", children: title }),
+        subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-list-row-subtitle", children: subtitle })
+      ] }),
+      action ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: "rs-list-row-action",
+          disabled,
+          onClick: (e) => {
+            e.stopPropagation();
+            action.onClick();
+          },
+          children: action.label
+        }
+      ) : meta && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-list-row-meta", children: meta })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-list-row-chevron", children: _nullishCoalesce(trailing, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChevronRightIcon, {}))) })
+  ] });
+  if (action) {
+    const handleKey = (e) => {
+      if (disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        _optionalChain([onClick, 'optionalCall', _56 => _56(e)]);
+      }
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: `rs-list-row ${className}`.trim(),
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled || void 0,
+        onClick: disabled ? void 0 : (e) => _optionalChain([onClick, 'optionalCall', _57 => _57(e)]),
+        onKeyDown: handleKey,
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "button",
     {
       type: "button",
       className: `rs-list-row ${className}`.trim(),
+      onClick,
+      disabled,
       ...props,
-      children: [
-        leadingMedia ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-list-row-leading rs-list-row-leading--media", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: leadingMedia, alt: "" }) }) : leading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-list-row-leading", children: leading }) : null,
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-list-row-body", children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-list-row-text", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-list-row-title", children: title }),
-            subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-list-row-subtitle", children: subtitle })
-          ] }),
-          meta && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-list-row-meta", children: meta })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-list-row-chevron", children: _nullishCoalesce(trailing, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChevronRightIcon, {}))) })
-      ]
+      children: inner
     }
   );
 }
@@ -1566,7 +1630,7 @@ function ConnectStep({
   const hasReownWallet = rows.some(
     (row) => row.kind === "external" || row.kind === "solana"
   );
-  const showDappImports = hasReownWallet && (_nullishCoalesce(_optionalChain([dappImports, 'optionalAccess', _56 => _56.length]), () => ( 0))) > 0;
+  const showDappImports = hasReownWallet && (_nullishCoalesce(_optionalChain([dappImports, 'optionalAccess', _58 => _58.length]), () => ( 0))) > 0;
   const extraChainCount = Math.max(0, _chunkIVTXEYB2cjs.getSupportedChainIds.call(void 0, ).length - 3);
   const chainBadge2 = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChainBadgeIcons, {}),
@@ -1587,7 +1651,7 @@ function ConnectStep({
         onSelectTransferCrypto && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           ListRow,
           {
-            leading: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CoinsIcon, {}),
+            leading: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TransferCryptoIcon, {}),
             title: "Transfer crypto",
             subtitle: transferCryptoState === "loading" ? "Preparing\u2026" : transferCryptoState === "error" ? _nullishCoalesce(transferCryptoErrorReason, () => ( "Couldn't prepare account \u2014 tap to retry")) : "Instant - No limit",
             meta: chainBadge2,
@@ -1599,15 +1663,17 @@ function ConnectStep({
         rows.map((row) => {
           const collapseToExternal = Boolean(onSelectTransferCrypto) && row.kind !== "solana";
           const subtitleText = row.state === "loading" ? "Preparing\u2026" : row.state === "error" ? _nullishCoalesce(row.errorReason, () => ( "Couldn't prepare wallet \u2014 tap to retry")) : shorten(row.address);
+          const showInlineDisconnect = collapseToExternal && Boolean(onDisconnect) && row.state !== "loading";
           return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             ListRow,
             {
               leading: renderWalletLeading(row),
               title: collapseToExternal ? "External wallet" : row.label,
               subtitle: subtitleText,
-              onClick: () => _optionalChain([onConfirmWallet, 'optionalCall', _57 => _57(row.id)]),
+              onClick: () => _optionalChain([onConfirmWallet, 'optionalCall', _59 => _59(row.id)]),
               disabled: row.state === "loading",
-              trailing: renderRowTrailing(row.state)
+              trailing: renderRowTrailing(row.state),
+              action: showInlineDisconnect && onDisconnect ? { label: "Disconnect", onClick: onDisconnect } : void 0
             },
             row.id
           );
@@ -1625,7 +1691,7 @@ function ConnectStep({
             onClick: handleConnect
           }
         ),
-        showDappImports && _optionalChain([dappImports, 'optionalAccess', _58 => _58.map, 'call', _59 => _59((row) => {
+        showDappImports && _optionalChain([dappImports, 'optionalAccess', _60 => _60.map, 'call', _61 => _61((row) => {
           if (row.status === "loading") {
             return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               ListRow,
@@ -1646,7 +1712,7 @@ function ConnectStep({
                 leading: row.icon,
                 title: row.label,
                 subtitle: formatBalanceUsd(row.status.balanceUsd),
-                onClick: () => _optionalChain([onSelectDappImport, 'optionalCall', _60 => _60(row.id)])
+                onClick: () => _optionalChain([onSelectDappImport, 'optionalCall', _62 => _62(row.id)])
               },
               row.id
             );
@@ -1658,7 +1724,7 @@ function ConnectStep({
                 leading: row.icon,
                 title: row.label,
                 subtitle: row.status.reason,
-                onClick: () => _optionalChain([onSelectDappImport, 'optionalCall', _61 => _61(row.id)])
+                onClick: () => _optionalChain([onSelectDappImport, 'optionalCall', _63 => _63(row.id)])
               },
               row.id
             );
@@ -1676,15 +1742,6 @@ function ConnectStep({
         })])
       ] })
     ] }),
-    onDisconnect && hasReownWallet && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-screen-tight-row", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "button",
-      {
-        type: "button",
-        className: "rs-connect-wallet-manage",
-        onClick: onDisconnect,
-        children: "Disconnect wallet"
-      }
-    ) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PoweredBy, {})
   ] });
 }
@@ -1828,8 +1885,8 @@ function Tooltip({ content, children, className }) {
     function handleOutside(event) {
       const target = event.target;
       if (!target) return;
-      if (_optionalChain([triggerRef, 'access', _62 => _62.current, 'optionalAccess', _63 => _63.contains, 'call', _64 => _64(target)])) return;
-      if (_optionalChain([bubbleRef, 'access', _65 => _65.current, 'optionalAccess', _66 => _66.contains, 'call', _67 => _67(target)])) return;
+      if (_optionalChain([triggerRef, 'access', _64 => _64.current, 'optionalAccess', _65 => _65.contains, 'call', _66 => _66(target)])) return;
+      if (_optionalChain([bubbleRef, 'access', _67 => _67.current, 'optionalAccess', _68 => _68.contains, 'call', _69 => _69(target)])) return;
       setOpen(false);
     }
     function handleKey(event) {
@@ -1909,7 +1966,7 @@ function asNumber(value) {
   const trimmed = value.trim();
   if (!trimmed) return void 0;
   const caipMatch = trimmed.match(/^eip155:(\d+)$/);
-  if (_optionalChain([caipMatch, 'optionalAccess', _68 => _68[1]])) {
+  if (_optionalChain([caipMatch, 'optionalAccess', _70 => _70[1]])) {
     const parsed2 = Number(caipMatch[1]);
     return Number.isFinite(parsed2) ? parsed2 : void 0;
   }
@@ -1928,28 +1985,28 @@ function asAddress(value) {
   return /^0x[a-fA-F0-9]{40}$/.test(value) ? value : void 0;
 }
 function getEventTxHash(event) {
-  if (!_optionalChain([event, 'optionalAccess', _69 => _69.type])) return void 0;
+  if (!_optionalChain([event, 'optionalAccess', _71 => _71.type])) return void 0;
   if (event.type === "deposit-received") {
-    return asString(_optionalChain([event, 'access', _70 => _70.data, 'optionalAccess', _71 => _71.transactionHash]));
+    return asString(_optionalChain([event, 'access', _72 => _72.data, 'optionalAccess', _73 => _73.transactionHash]));
   }
   if (event.type === "bridge-started" || event.type === "bridge-complete") {
-    const deposit = isRecord(_optionalChain([event, 'access', _72 => _72.data, 'optionalAccess', _73 => _73.deposit])) ? event.data.deposit : void 0;
-    const source = isRecord(_optionalChain([event, 'access', _74 => _74.data, 'optionalAccess', _75 => _75.source])) ? event.data.source : void 0;
-    return _nullishCoalesce(asString(_optionalChain([deposit, 'optionalAccess', _76 => _76.transactionHash])), () => ( asString(_optionalChain([source, 'optionalAccess', _77 => _77.transactionHash]))));
+    const deposit = isRecord(_optionalChain([event, 'access', _74 => _74.data, 'optionalAccess', _75 => _75.deposit])) ? event.data.deposit : void 0;
+    const source = isRecord(_optionalChain([event, 'access', _76 => _76.data, 'optionalAccess', _77 => _77.source])) ? event.data.source : void 0;
+    return _nullishCoalesce(asString(_optionalChain([deposit, 'optionalAccess', _78 => _78.transactionHash])), () => ( asString(_optionalChain([source, 'optionalAccess', _79 => _79.transactionHash]))));
   }
   if (event.type === "bridge-failed" || event.type === "error") {
-    const deposit = isRecord(_optionalChain([event, 'access', _78 => _78.data, 'optionalAccess', _79 => _79.deposit])) ? event.data.deposit : void 0;
-    const source = isRecord(_optionalChain([event, 'access', _80 => _80.data, 'optionalAccess', _81 => _81.source])) ? event.data.source : void 0;
-    return _nullishCoalesce(asString(_optionalChain([deposit, 'optionalAccess', _82 => _82.transactionHash])), () => ( asString(_optionalChain([source, 'optionalAccess', _83 => _83.transactionHash]))));
+    const deposit = isRecord(_optionalChain([event, 'access', _80 => _80.data, 'optionalAccess', _81 => _81.deposit])) ? event.data.deposit : void 0;
+    const source = isRecord(_optionalChain([event, 'access', _82 => _82.data, 'optionalAccess', _83 => _83.source])) ? event.data.source : void 0;
+    return _nullishCoalesce(asString(_optionalChain([deposit, 'optionalAccess', _84 => _84.transactionHash])), () => ( asString(_optionalChain([source, 'optionalAccess', _85 => _85.transactionHash]))));
   }
   if (event.type === "post-bridge-swap-complete" || event.type === "post-bridge-swap-failed") {
-    const deposit = isRecord(_optionalChain([event, 'access', _84 => _84.data, 'optionalAccess', _85 => _85.deposit])) ? event.data.deposit : void 0;
-    return asString(_optionalChain([deposit, 'optionalAccess', _86 => _86.transactionHash]));
+    const deposit = isRecord(_optionalChain([event, 'access', _86 => _86.data, 'optionalAccess', _87 => _87.deposit])) ? event.data.deposit : void 0;
+    return asString(_optionalChain([deposit, 'optionalAccess', _88 => _88.transactionHash]));
   }
   return void 0;
 }
 function getEventSourceDetails(event) {
-  if (!_optionalChain([event, 'optionalAccess', _87 => _87.type]) || !isRecord(event.data)) return {};
+  if (!_optionalChain([event, 'optionalAccess', _89 => _89.type]) || !isRecord(event.data)) return {};
   if (event.type === "deposit-received") {
     return {
       chainId: asNumber(event.data.chain),
@@ -1961,15 +2018,15 @@ function getEventSourceDetails(event) {
   const deposit = isRecord(event.data.deposit) ? event.data.deposit : void 0;
   if (event.type === "bridge-started" || event.type === "bridge-complete" || event.type === "bridge-failed" || event.type === "error" || event.type === "post-bridge-swap-complete" || event.type === "post-bridge-swap-failed") {
     return {
-      chainId: _nullishCoalesce(asNumber(_optionalChain([source, 'optionalAccess', _88 => _88.chain])), () => ( asNumber(_optionalChain([deposit, 'optionalAccess', _89 => _89.chain])))),
-      amount: _nullishCoalesce(asAmount(_optionalChain([source, 'optionalAccess', _90 => _90.amount])), () => ( asAmount(_optionalChain([deposit, 'optionalAccess', _91 => _91.amount])))),
-      token: _nullishCoalesce(_nullishCoalesce(asAddress(_optionalChain([source, 'optionalAccess', _92 => _92.asset])), () => ( asAddress(_optionalChain([deposit, 'optionalAccess', _93 => _93.asset])))), () => ( asAddress(_optionalChain([deposit, 'optionalAccess', _94 => _94.token]))))
+      chainId: _nullishCoalesce(asNumber(_optionalChain([source, 'optionalAccess', _90 => _90.chain])), () => ( asNumber(_optionalChain([deposit, 'optionalAccess', _91 => _91.chain])))),
+      amount: _nullishCoalesce(asAmount(_optionalChain([source, 'optionalAccess', _92 => _92.amount])), () => ( asAmount(_optionalChain([deposit, 'optionalAccess', _93 => _93.amount])))),
+      token: _nullishCoalesce(_nullishCoalesce(asAddress(_optionalChain([source, 'optionalAccess', _94 => _94.asset])), () => ( asAddress(_optionalChain([deposit, 'optionalAccess', _95 => _95.asset])))), () => ( asAddress(_optionalChain([deposit, 'optionalAccess', _96 => _96.token]))))
     };
   }
   return {};
 }
 function isDepositEvent(event) {
-  return _optionalChain([event, 'optionalAccess', _95 => _95.type]) === "deposit-received" || _optionalChain([event, 'optionalAccess', _96 => _96.type]) === "bridge-started" || _optionalChain([event, 'optionalAccess', _97 => _97.type]) === "bridge-complete" || _optionalChain([event, 'optionalAccess', _98 => _98.type]) === "bridge-failed" || _optionalChain([event, 'optionalAccess', _99 => _99.type]) === "post-bridge-swap-complete" || _optionalChain([event, 'optionalAccess', _100 => _100.type]) === "post-bridge-swap-failed" || _optionalChain([event, 'optionalAccess', _101 => _101.type]) === "error";
+  return _optionalChain([event, 'optionalAccess', _97 => _97.type]) === "deposit-received" || _optionalChain([event, 'optionalAccess', _98 => _98.type]) === "bridge-started" || _optionalChain([event, 'optionalAccess', _99 => _99.type]) === "bridge-complete" || _optionalChain([event, 'optionalAccess', _100 => _100.type]) === "bridge-failed" || _optionalChain([event, 'optionalAccess', _101 => _101.type]) === "post-bridge-swap-complete" || _optionalChain([event, 'optionalAccess', _102 => _102.type]) === "post-bridge-swap-failed" || _optionalChain([event, 'optionalAccess', _103 => _103.type]) === "error";
 }
 function isHexString(value) {
   return value.startsWith("0x") || value.startsWith("0X");
@@ -1983,6 +2040,66 @@ function txRefsMatch(a, b) {
 
 // src/components/steps/ProcessingStep.tsx
 
+function SuccessBadge() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      width: "40",
+      height: "40",
+      viewBox: "0 0 40 40",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "rect",
+          {
+            width: "40",
+            height: "40",
+            rx: "8",
+            fill: "var(--rs-icon-wrapper-bg)"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M28 14L17 25L12 20",
+            stroke: "var(--rs-icon-wrapper-icon)",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function FailedBadge() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      width: "40",
+      height: "40",
+      viewBox: "0 0 40 40",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: "40", height: "40", rx: "8", fill: "#FB2C36" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M26 14L14 26M14 14L26 26",
+            stroke: "white",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
 var INITIAL_POLL_INTERVAL = 3e3;
 var MAX_POLL_INTERVAL = 3e4;
 var BACKOFF_MULTIPLIER = 1.5;
@@ -2001,7 +2118,7 @@ function loadPhaseTimings(txHash) {
     const parsed = JSON.parse(raw);
     if (typeof parsed.startedAt !== "number") return null;
     return parsed;
-  } catch (e2) {
+  } catch (e3) {
     return null;
   }
 }
@@ -2012,7 +2129,7 @@ function savePhaseTimings(txHash, timings) {
       `${PHASE_TIMINGS_PREFIX}:${txHash}`,
       JSON.stringify(timings)
     );
-  } catch (e3) {
+  } catch (e4) {
   }
 }
 function isEventForTx(event, txHash) {
@@ -2021,7 +2138,7 @@ function isEventForTx(event, txHash) {
   return txRefsMatch(eventTxHash, txHash);
 }
 function formatBridgeFailedMessage(event) {
-  const eventData = _nullishCoalesce(_optionalChain([event, 'optionalAccess', _102 => _102.data]), () => ( {}));
+  const eventData = _nullishCoalesce(_optionalChain([event, 'optionalAccess', _104 => _104.data]), () => ( {}));
   const code = typeof eventData.errorCode === "string" ? eventData.errorCode : void 0;
   const backendMessage = typeof eventData.message === "string" ? eventData.message.trim() : "";
   function toUserFacingFailure(raw) {
@@ -2053,12 +2170,12 @@ function formatBridgeFailedMessage(event) {
   return { message: "Bridge failed" };
 }
 function parseWebhookTimestamp(event) {
-  if (typeof _optionalChain([event, 'optionalAccess', _103 => _103.time]) !== "string") return void 0;
+  if (typeof _optionalChain([event, 'optionalAccess', _105 => _105.time]) !== "string") return void 0;
   const timestamp = Date.parse(event.time);
   return Number.isFinite(timestamp) ? timestamp : void 0;
 }
 function syncPhaseTimings(previous, event) {
-  if (!_optionalChain([event, 'optionalAccess', _104 => _104.type])) return previous;
+  if (!_optionalChain([event, 'optionalAccess', _106 => _106.type])) return previous;
   const timestamp = _nullishCoalesce(parseWebhookTimestamp(event), () => ( Date.now()));
   const setReceived = (event.type === "deposit-received" || event.type === "bridge-started" || event.type === "bridge-complete" || event.type === "bridge-failed" || event.type === "post-bridge-swap-complete" || event.type === "post-bridge-swap-failed" || event.type === "error") && previous.receivedAt === void 0;
   const setBridging = (event.type === "bridge-started" || event.type === "bridge-complete" || event.type === "post-bridge-swap-complete") && previous.bridgingAt === void 0;
@@ -2099,9 +2216,9 @@ function getCurrentPhaseId(state, phaseTimings, isEarlyComplete) {
   if (state.type === "complete") {
     return void 0;
   }
-  if (_optionalChain([state, 'access', _105 => _105.lastEvent, 'optionalAccess', _106 => _106.type]) === "bridge-started" || _optionalChain([state, 'access', _107 => _107.lastEvent, 'optionalAccess', _108 => _108.type]) === "bridge-complete")
+  if (_optionalChain([state, 'access', _107 => _107.lastEvent, 'optionalAccess', _108 => _108.type]) === "bridge-started" || _optionalChain([state, 'access', _109 => _109.lastEvent, 'optionalAccess', _110 => _110.type]) === "bridge-complete")
     return "bridging";
-  if (_optionalChain([state, 'access', _109 => _109.lastEvent, 'optionalAccess', _110 => _110.type]) === "deposit-received") return "received";
+  if (_optionalChain([state, 'access', _111 => _111.lastEvent, 'optionalAccess', _112 => _112.type]) === "deposit-received") return "received";
   return "confirming";
 }
 function ProcessingStep({
@@ -2175,7 +2292,7 @@ function ProcessingStep({
       flowLabel
     });
     const context = processingContextRef.current;
-    _optionalChain([onDepositCompleteRef, 'access', _111 => _111.current, 'optionalCall', _112 => _112(txHash, void 0, {
+    _optionalChain([onDepositCompleteRef, 'access', _113 => _113.current, 'optionalCall', _114 => _114(txHash, void 0, {
       amount: context.amount,
       sourceChain: context.sourceChain,
       sourceToken: context.sourceToken,
@@ -2212,7 +2329,7 @@ function ProcessingStep({
   _react.useEffect.call(void 0, () => {
     if (!state.lastEvent) return;
     setPhaseTimings((previous) => syncPhaseTimings(previous, state.lastEvent));
-  }, [_optionalChain([state, 'access', _113 => _113.lastEvent, 'optionalAccess', _114 => _114.time]), _optionalChain([state, 'access', _115 => _115.lastEvent, 'optionalAccess', _116 => _116.type])]);
+  }, [_optionalChain([state, 'access', _115 => _115.lastEvent, 'optionalAccess', _116 => _116.time]), _optionalChain([state, 'access', _117 => _117.lastEvent, 'optionalAccess', _118 => _118.type])]);
   _react.useEffect.call(void 0, () => {
     savePhaseTimings(txHash, phaseTimings);
   }, [txHash, phaseTimings]);
@@ -2240,21 +2357,21 @@ function ProcessingStep({
           debugLog(debug, "processing", "poll:event", {
             type: lastEvent2.type,
             matchesTx: eventMatchesTx,
-            intentId: _optionalChain([eventData, 'optionalAccess', _117 => _117.intentId])
+            intentId: _optionalChain([eventData, 'optionalAccess', _119 => _119.intentId])
           });
         }
         if (!isMounted) return;
         const awaitingPostBridgeSwap = processingContextRef.current.waitForFinalTx && processingContextRef.current.hasPostBridgeActions;
-        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _118 => _118.type]) === "post-bridge-swap-complete") {
+        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _120 => _120.type]) === "post-bridge-swap-complete") {
           setState({ type: "complete", lastEvent: eventForCurrentTx });
-          const swapTxHash = _optionalChain([eventForCurrentTx, 'access', _119 => _119.data, 'optionalAccess', _120 => _120.swap, 'optionalAccess', _121 => _121.transactionHash]);
+          const swapTxHash = _optionalChain([eventForCurrentTx, 'access', _121 => _121.data, 'optionalAccess', _122 => _122.swap, 'optionalAccess', _123 => _123.transactionHash]);
           debugLog(debug, "processing", "state:complete", {
             txHash,
             destinationTxHash: swapTxHash,
             event: eventForCurrentTx.type
           });
           const context = processingContextRef.current;
-          _optionalChain([onDepositCompleteRef, 'access', _122 => _122.current, 'optionalCall', _123 => _123(txHash, swapTxHash, {
+          _optionalChain([onDepositCompleteRef, 'access', _124 => _124.current, 'optionalCall', _125 => _125(txHash, swapTxHash, {
             amount: context.amount,
             sourceChain: context.sourceChain,
             sourceToken: context.sourceToken,
@@ -2263,7 +2380,7 @@ function ProcessingStep({
           })]);
           return;
         }
-        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _124 => _124.type]) === "post-bridge-swap-failed") {
+        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _126 => _126.type]) === "post-bridge-swap-failed") {
           const formatted = formatBridgeFailedMessage(eventForCurrentTx);
           setState({
             type: "failed",
@@ -2275,19 +2392,19 @@ function ProcessingStep({
             message: formatted.message,
             code: formatted.code
           });
-          _optionalChain([onDepositFailedRef, 'access', _125 => _125.current, 'optionalCall', _126 => _126(txHash, formatted.message)]);
+          _optionalChain([onDepositFailedRef, 'access', _127 => _127.current, 'optionalCall', _128 => _128(txHash, formatted.message)]);
           return;
         }
-        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _127 => _127.type]) === "bridge-complete" && !awaitingPostBridgeSwap) {
+        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _129 => _129.type]) === "bridge-complete" && !awaitingPostBridgeSwap) {
           setState({ type: "complete", lastEvent: eventForCurrentTx });
-          const destinationTxHash2 = _optionalChain([eventForCurrentTx, 'access', _128 => _128.data, 'optionalAccess', _129 => _129.destination, 'optionalAccess', _130 => _130.transactionHash]);
+          const destinationTxHash2 = _optionalChain([eventForCurrentTx, 'access', _130 => _130.data, 'optionalAccess', _131 => _131.destination, 'optionalAccess', _132 => _132.transactionHash]);
           debugLog(debug, "processing", "state:complete", {
             txHash,
             destinationTxHash: destinationTxHash2,
             event: eventForCurrentTx.type
           });
           const context = processingContextRef.current;
-          _optionalChain([onDepositCompleteRef, 'access', _131 => _131.current, 'optionalCall', _132 => _132(txHash, destinationTxHash2, {
+          _optionalChain([onDepositCompleteRef, 'access', _133 => _133.current, 'optionalCall', _134 => _134(txHash, destinationTxHash2, {
             amount: context.amount,
             sourceChain: context.sourceChain,
             sourceToken: context.sourceToken,
@@ -2296,14 +2413,14 @@ function ProcessingStep({
           })]);
           return;
         }
-        if (!waitForFinalTx && _optionalChain([eventForCurrentTx, 'optionalAccess', _133 => _133.type]) === "bridge-started") {
+        if (!waitForFinalTx && _optionalChain([eventForCurrentTx, 'optionalAccess', _135 => _135.type]) === "bridge-started") {
           setState({ type: "complete", lastEvent: eventForCurrentTx });
           debugLog(debug, "processing", "state:early-complete", {
             txHash,
             event: eventForCurrentTx.type
           });
           const context = processingContextRef.current;
-          _optionalChain([onDepositCompleteRef, 'access', _134 => _134.current, 'optionalCall', _135 => _135(txHash, void 0, {
+          _optionalChain([onDepositCompleteRef, 'access', _136 => _136.current, 'optionalCall', _137 => _137(txHash, void 0, {
             amount: context.amount,
             sourceChain: context.sourceChain,
             sourceToken: context.sourceToken,
@@ -2312,7 +2429,7 @@ function ProcessingStep({
           })]);
           return;
         }
-        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _136 => _136.type]) === "bridge-failed") {
+        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _138 => _138.type]) === "bridge-failed") {
           const formatted = formatBridgeFailedMessage(eventForCurrentTx);
           setState({
             type: "failed",
@@ -2324,11 +2441,11 @@ function ProcessingStep({
             message: formatted.message,
             code: formatted.code
           });
-          _optionalChain([onDepositFailedRef, 'access', _137 => _137.current, 'optionalCall', _138 => _138(txHash, formatted.message)]);
+          _optionalChain([onDepositFailedRef, 'access', _139 => _139.current, 'optionalCall', _140 => _140(txHash, formatted.message)]);
           return;
         }
-        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _139 => _139.type]) === "error") {
-          const errorMessage = _nullishCoalesce(_optionalChain([eventForCurrentTx, 'access', _140 => _140.data, 'optionalAccess', _141 => _141.message]), () => ( "Unknown error"));
+        if (_optionalChain([eventForCurrentTx, 'optionalAccess', _141 => _141.type]) === "error") {
+          const errorMessage = _nullishCoalesce(_optionalChain([eventForCurrentTx, 'access', _142 => _142.data, 'optionalAccess', _143 => _143.message]), () => ( "Unknown error"));
           setState({
             type: "failed",
             message: errorMessage,
@@ -2338,7 +2455,7 @@ function ProcessingStep({
             txHash,
             message: errorMessage
           });
-          _optionalChain([onDepositFailedRef, 'access', _142 => _142.current, 'optionalCall', _143 => _143(txHash, errorMessage)]);
+          _optionalChain([onDepositFailedRef, 'access', _144 => _144.current, 'optionalCall', _145 => _145(txHash, errorMessage)]);
           return;
         }
         setState((previous) => ({
@@ -2399,7 +2516,7 @@ function ProcessingStep({
         txHash,
         timeoutMs: ESCALATED_DELAY_MS
       });
-      _optionalChain([onErrorRef, 'access', _144 => _144.current, 'optionalCall', _145 => _145(message, "PROCESS_TIMEOUT")]);
+      _optionalChain([onErrorRef, 'access', _146 => _146.current, 'optionalCall', _147 => _147(message, "PROCESS_TIMEOUT")]);
     }, ESCALATED_DELAY_MS);
     return () => clearTimeout(timeoutId);
   }, [debug, directTransfer, onErrorRef, state.type, txHash]);
@@ -2408,12 +2525,12 @@ function ProcessingStep({
   const isProcessing = state.type === "processing";
   const lastEvent = state.lastEvent;
   const failureMessage = state.type === "failed" ? state.message : void 0;
-  const isEarlyComplete = !waitForFinalTx && _optionalChain([lastEvent, 'optionalAccess', _146 => _146.type]) === "bridge-started";
+  const isEarlyComplete = !waitForFinalTx && _optionalChain([lastEvent, 'optionalAccess', _148 => _148.type]) === "bridge-started";
   const timelineNowMs = _nullishCoalesce(phaseTimings.endedAt, () => ( Date.now()));
   const flowNoun = flowLabel === "withdraw" ? "withdrawal" : "deposit";
   const flowCapitalized = flowLabel === "withdraw" ? "Withdrawal" : "Deposit";
-  const isPostBridgeSwapEvent = _optionalChain([lastEvent, 'optionalAccess', _147 => _147.type]) === "post-bridge-swap-complete" || _optionalChain([lastEvent, 'optionalAccess', _148 => _148.type]) === "post-bridge-swap-failed";
-  const destinationTxHash = isPostBridgeSwapEvent ? _optionalChain([lastEvent, 'optionalAccess', _149 => _149.data, 'optionalAccess', _150 => _150.swap, 'optionalAccess', _151 => _151.transactionHash]) || null : _optionalChain([lastEvent, 'optionalAccess', _152 => _152.data, 'optionalAccess', _153 => _153.destination, 'optionalAccess', _154 => _154.transactionHash]) || null;
+  const isPostBridgeSwapEvent = _optionalChain([lastEvent, 'optionalAccess', _149 => _149.type]) === "post-bridge-swap-complete" || _optionalChain([lastEvent, 'optionalAccess', _150 => _150.type]) === "post-bridge-swap-failed";
+  const destinationTxHash = isPostBridgeSwapEvent ? _optionalChain([lastEvent, 'optionalAccess', _151 => _151.data, 'optionalAccess', _152 => _152.swap, 'optionalAccess', _153 => _153.transactionHash]) || null : _optionalChain([lastEvent, 'optionalAccess', _154 => _154.data, 'optionalAccess', _155 => _155.destination, 'optionalAccess', _156 => _156.transactionHash]) || null;
   const sourceDetails = getEventSourceDetails(lastEvent);
   const displaySourceChain = _nullishCoalesce(sourceDetails.chainId, () => ( sourceChain));
   const displaySourceToken = _nullishCoalesce(sourceDetails.token, () => ( sourceToken));
@@ -2432,7 +2549,7 @@ function ProcessingStep({
       const numeric = Number(raw);
       if (!Number.isFinite(numeric)) return raw;
       return numeric.toLocaleString("en-US", { maximumFractionDigits: 6 });
-    } catch (e4) {
+    } catch (e5) {
       return Number(displayAmount).toLocaleString("en-US", {
         maximumFractionDigits: 6
       });
@@ -2457,96 +2574,94 @@ function ProcessingStep({
   const sourceChainName = _chunkIVTXEYB2cjs.getChainName.call(void 0, displaySourceChain);
   const targetChainName = _chunkIVTXEYB2cjs.getChainName.call(void 0, targetChain);
   const totalTimeText = formatElapsedTime(elapsedSeconds);
-  const feeSponsored = _nullishCoalesce(_optionalChain([uiConfig, 'optionalAccess', _155 => _155.feeSponsored]), () => ( false));
-  const feeTooltip = _nullishCoalesce(_optionalChain([uiConfig, 'optionalAccess', _156 => _156.feeTooltip]), () => ( (feeSponsored ? "Network fees are sponsored for this deposit." : "Network fees apply.")));
+  const feeSponsored = _nullishCoalesce(_optionalChain([uiConfig, 'optionalAccess', _157 => _157.feeSponsored]), () => ( false));
+  const feeTooltip = _nullishCoalesce(_optionalChain([uiConfig, 'optionalAccess', _158 => _158.feeTooltip]), () => ( (feeSponsored ? "Network fees are sponsored for this deposit." : "Network fees apply.")));
   const stateTitle = isComplete ? `${flowCapitalized} successful` : isFailed ? `${flowCapitalized} failed` : "Processing...";
-  const stateVariant = isComplete ? "success" : isFailed ? "error" : "default";
-  const stateIcon = isComplete ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckIcon, {}) : isFailed ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseIcon, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WalletIcon, {});
   const handleRetry = _nullishCoalesce(onRetry, () => ( onNewDeposit));
+  const headerContent = isComplete ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-body-header", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SuccessBadge, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-body-header-text", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "rs-body-header-title", children: stateTitle }) })
+  ] }) : isFailed ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-body-header", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FailedBadge, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-body-header-text", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "rs-body-header-title", children: stateTitle }) })
+  ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BodyHeader, { icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WalletIcon, {}), title: stateTitle });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-screen", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-screen-body rs-screen-body--gap-32", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        BodyHeader,
-        {
-          variant: stateVariant,
-          icon: stateIcon,
-          title: stateTitle
-        }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-amount-details", children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-amount-detail-row", children: [
+      headerContent,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-details", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Source chain" }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-amount-detail-value", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-review-detail-value", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: sourceChainName }),
-            sourceChainIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-amount-detail-icon", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: sourceChainIcon, alt: "" }) }),
+            sourceChainIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: sourceChainIcon, alt: "" }) }),
             sourceExplorerUrl && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "a",
               {
                 href: sourceExplorerUrl,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                className: "rs-amount-detail-link",
+                className: "rs-review-detail-link",
                 "aria-label": "View source transaction",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExternalLinkIcon, {})
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-amount-detail-row", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Destination chain" }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-amount-detail-value", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-review-detail-value", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: targetChainName }),
-            targetChainIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-amount-detail-icon", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: targetChainIcon, alt: "" }) }),
+            targetChainIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: targetChainIcon, alt: "" }) }),
             destExplorerUrl && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "a",
               {
                 href: destExplorerUrl,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                className: "rs-amount-detail-link",
+                className: "rs-review-detail-link",
                 "aria-label": "View destination transaction",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExternalLinkIcon, {})
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-amount-detail-row", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: isProcessing ? "Estimated time" : "Total time" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-amount-detail-value", children: isProcessing ? estimatedTime : totalTimeText })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-review-detail-value", children: isProcessing ? estimatedTime : totalTimeText })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-amount-detail-row", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "You send" }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-amount-detail-value", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-review-detail-value", children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
               formattedReceivedAmount,
               " ",
               sourceSymbol
             ] }),
-            sourceTokenIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-amount-detail-icon", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: sourceTokenIcon, alt: "" }) })
+            sourceTokenIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: sourceTokenIcon, alt: "" }) })
           ] })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-amount-detail-row", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Receive" }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-amount-detail-value", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-review-detail-value", children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
               "~",
               formattedReceivedAmount,
               " ",
               targetSymbol
             ] }),
-            targetTokenIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-amount-detail-icon", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: targetTokenIcon, alt: "" }) })
+            targetTokenIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: targetTokenIcon, alt: "" }) })
           ] })
         ] }),
-        isFailed && balanceAfterUsd !== void 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-amount-detail-row", children: [
+        isFailed && balanceAfterUsd !== void 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Balance" }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-amount-detail-value", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-review-detail-value", children: [
             "$",
             balanceAfterUsd.toFixed(2)
           ] })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-amount-detail-row", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-review-detail-row", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Fees" }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-amount-detail-value", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "rs-review-detail-value", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "span",
               {
@@ -2554,7 +2669,7 @@ function ProcessingStep({
                 children: "$0.05"
               }
             ),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tooltip, { content: feeTooltip, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-amount-detail-info", "aria-label": "Fee info", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfoIcon, {}) }) })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tooltip, { content: feeTooltip, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "rs-review-detail-info", "aria-label": "Fee info", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfoIcon, {}) }) })
           ] })
         ] })
       ] }),
@@ -2562,7 +2677,16 @@ function ProcessingStep({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertTriangleIcon, { style: { width: 16, height: 16, flexShrink: 0 } }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: failureMessage })
       ] }),
-      isProcessing && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { fullWidth: true, disabled: true, loading: true, children: "Submitting transaction..." }),
+      isProcessing && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        Button,
+        {
+          fullWidth: true,
+          disabled: true,
+          loading: true,
+          loadingText: "Submitting transaction...",
+          children: "Submitting transaction..."
+        }
+      ),
       isComplete && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-screen-button-row", children: [
         onNewDeposit && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Button, { variant: "outline", onClick: onNewDeposit, fullWidth: true, children: [
           "New ",
@@ -2902,7 +3026,7 @@ function loadSessionOwnerFromStorage(eoaAddress) {
       privateKey: parsed.privateKey,
       address: account.address
     };
-  } catch (e5) {
+  } catch (e6) {
     return null;
   }
 }
@@ -2983,4 +3107,4 @@ function accountFromPrivateKey(privateKey) {
 
 
 
-exports.Modal = Modal; exports.WalletIcon = WalletIcon; exports.ExternalLinkIcon = ExternalLinkIcon; exports.CheckIcon = CheckIcon; exports.ChevronLeftIcon = ChevronLeftIcon; exports.ChevronDownIcon = ChevronDownIcon; exports.CloseIcon = CloseIcon; exports.HandCoinsIcon = HandCoinsIcon; exports.CoinsIcon = CoinsIcon; exports.HistoryIcon = HistoryIcon; exports.InfoIcon = InfoIcon; exports.CopyIcon = CopyIcon; exports.ArrowRightIcon = ArrowRightIcon; exports.AlertTriangleIcon = AlertTriangleIcon; exports.PercentIcon = PercentIcon; exports.ClockIcon = ClockIcon; exports.PlusCircleIcon = PlusCircleIcon; exports.CircleArrowOutUpLeftIcon = CircleArrowOutUpLeftIcon; exports.BodyHeader = BodyHeader; exports.ListRow = ListRow; exports.PoweredBy = PoweredBy; exports.Spinner = Spinner; exports.ConnectStep = ConnectStep; exports.Button = Button; exports.debugLog = debugLog; exports.debugError = debugError; exports.toEvmCaip2 = toEvmCaip2; exports.parseEvmChainId = parseEvmChainId; exports.isSolanaCaip2 = isSolanaCaip2; exports.getAssetId = getAssetId; exports.portfolioToAssets = portfolioToAssets; exports.isNativeAsset = isNativeAsset; exports.buildSessionDetails = buildSessionDetails; exports.createDepositService = createDepositService; exports.currencyFormatter = currencyFormatter; exports.tokenFormatter = tokenFormatter; exports.formatUserError = formatUserError; exports.Tooltip = Tooltip; exports.getEventTxHash = getEventTxHash; exports.isDepositEvent = isDepositEvent; exports.txRefsMatch = txRefsMatch; exports.useLatestRef = useLatestRef; exports.ProcessingStep = ProcessingStep; exports.SAFE_ABI = SAFE_ABI; exports.executeSafeEthTransfer = executeSafeEthTransfer; exports.executeSafeErc20Transfer = executeSafeErc20Transfer; exports.buildSafeTransaction = buildSafeTransaction; exports.getPublicClient = getPublicClient; exports.loadSessionOwnerFromStorage = loadSessionOwnerFromStorage; exports.saveSessionOwnerToStorage = saveSessionOwnerToStorage; exports.createSessionOwnerKey = createSessionOwnerKey; exports.accountFromPrivateKey = accountFromPrivateKey; exports.applyTheme = applyTheme;
+exports.Modal = Modal; exports.WalletIcon = WalletIcon; exports.ExternalLinkIcon = ExternalLinkIcon; exports.CheckIcon = CheckIcon; exports.ChevronLeftIcon = ChevronLeftIcon; exports.ChevronDownIcon = ChevronDownIcon; exports.CloseIcon = CloseIcon; exports.HandCoinsIcon = HandCoinsIcon; exports.CoinsIcon = CoinsIcon; exports.HistoryIcon = HistoryIcon; exports.InfoIcon = InfoIcon; exports.CopyIcon = CopyIcon; exports.ArrowUpRightIcon = ArrowUpRightIcon; exports.AlertTriangleIcon = AlertTriangleIcon; exports.PercentIcon = PercentIcon; exports.ClockIcon = ClockIcon; exports.PlusCircleIcon = PlusCircleIcon; exports.CircleArrowOutUpLeftIcon = CircleArrowOutUpLeftIcon; exports.BodyHeader = BodyHeader; exports.ListRow = ListRow; exports.PoweredBy = PoweredBy; exports.Spinner = Spinner; exports.ConnectStep = ConnectStep; exports.Button = Button; exports.debugLog = debugLog; exports.debugError = debugError; exports.toEvmCaip2 = toEvmCaip2; exports.parseEvmChainId = parseEvmChainId; exports.isSolanaCaip2 = isSolanaCaip2; exports.getAssetId = getAssetId; exports.portfolioToAssets = portfolioToAssets; exports.isNativeAsset = isNativeAsset; exports.buildSessionDetails = buildSessionDetails; exports.createDepositService = createDepositService; exports.currencyFormatter = currencyFormatter; exports.tokenFormatter = tokenFormatter; exports.formatUserError = formatUserError; exports.Tooltip = Tooltip; exports.getEventTxHash = getEventTxHash; exports.isDepositEvent = isDepositEvent; exports.txRefsMatch = txRefsMatch; exports.useLatestRef = useLatestRef; exports.ProcessingStep = ProcessingStep; exports.SAFE_ABI = SAFE_ABI; exports.executeSafeEthTransfer = executeSafeEthTransfer; exports.executeSafeErc20Transfer = executeSafeErc20Transfer; exports.buildSafeTransaction = buildSafeTransaction; exports.getPublicClient = getPublicClient; exports.loadSessionOwnerFromStorage = loadSessionOwnerFromStorage; exports.saveSessionOwnerToStorage = saveSessionOwnerToStorage; exports.createSessionOwnerKey = createSessionOwnerKey; exports.accountFromPrivateKey = accountFromPrivateKey; exports.applyTheme = applyTheme;