@rhinestone/deposit-modal 0.6.1 → 0.8.0

package/dist/{chunk-GBOCV2LQ.mjs → chunk-RXWJ267K.mjs}

@@ -1,5 +1,8 @@
 import {
   CHAIN_BY_ID,
+  HYPERCORE_CHAIN_ID,
+  HYPERCORE_MAINNET_CAIP2,
+  HYPERCORE_SOURCE_TOKENS,
   NATIVE_TOKEN_ADDRESS,
   findTokenDecimals,
   getChainIcon,
@@ -9,11 +12,12 @@ import {
   getSupportedChainIds,
   getTokenAddress,
   getTokenDecimalsByAddress,
-  getTokenIcon,
   getTokenSymbol,
+  isHyperCoreCaip2,
   isSolanaCaip2,
-  parseEvmChainId
-} from "./chunk-WJX3TJFK.mjs";
+  parseEvmChainId,
+  tokenIconUrl
+} from "./chunk-SX52FXKH.mjs";
 
 // src/components/ui/Modal.tsx
 import {
@@ -538,6 +542,7 @@ function createDepositService(baseUrl, options) {
   }
   const PORTFOLIO_CACHE_TTL_MS = 3e4;
   const portfolioCache = /* @__PURE__ */ new Map();
+  let topTokensPromise = null;
   function cachedPortfolio(key, fetcher, forceRefresh = false) {
     const now = Date.now();
     const entry = portfolioCache.get(key);
@@ -642,7 +647,7 @@ function createDepositService(baseUrl, options) {
     },
     async fetchPortfolio(address, options2) {
       return cachedPortfolio(`evm:${address.toLowerCase()}`, async () => {
-        const url = apiUrl(`/portfolio/${address}`);
+        const url = apiUrl(`/portfolio/${address}?includeUnsupported=true`);
         debugLog(debug, scope, "fetchPortfolio:request", { url, address });
         const response = await fetch(url, {
           method: "GET",
@@ -1004,7 +1009,8 @@ function createDepositService(baseUrl, options) {
       const url = apiUrl("/quotes/preview");
       const body = {
         account: params.account,
-        sourceChainId: `eip155:${params.sourceChainId}`,
+        // HyperCore has its own CAIP-2 namespace — never the eip155 placeholder.
+        sourceChainId: params.sourceChainId === "hypercore" ? HYPERCORE_MAINNET_CAIP2 : `eip155:${params.sourceChainId}`,
         sourceToken: params.sourceToken,
         amount: params.amount
       };
@@ -1178,6 +1184,60 @@ function createDepositService(baseUrl, options) {
         stale: body.stale === true ? true : void 0
       };
     },
+    getTopTokens() {
+      if (!topTokensPromise) {
+        topTokensPromise = (async () => {
+          try {
+            const response = await fetch(apiUrl("/tokens"), {
+              method: "GET",
+              headers: { "Content-Type": "application/json" }
+            });
+            if (!response.ok) {
+              debugLog(debug, scope, "getTopTokens:unavailable", {
+                status: response.status
+              });
+              return null;
+            }
+            const data = await response.json();
+            const tokens = data.tokens ?? null;
+            debugLog(debug, scope, "getTopTokens:success", {
+              chains: tokens ? Object.keys(tokens).length : 0
+            });
+            return tokens;
+          } catch (error) {
+            debugError(debug, scope, "getTopTokens:error", error);
+            return null;
+          }
+        })();
+      }
+      return topTokensPromise;
+    },
+    async getSetup() {
+      const url = apiUrl("/setup");
+      try {
+        const response = await fetch(url, {
+          method: "GET",
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store"
+        });
+        if (!response.ok) {
+          debugLog(debug, scope, "getSetup:unavailable", {
+            status: response.status
+          });
+          return null;
+        }
+        const data = await response.json();
+        debugLog(debug, scope, "getSetup:success", {
+          hasWhitelist: Boolean(data.depositWhitelist),
+          whitelistChains: data.depositWhitelist ? Object.keys(data.depositWhitelist).length : 0,
+          minDepositUsd: data.minDepositUsd
+        });
+        return data;
+      } catch (error) {
+        debugError(debug, scope, "getSetup:error", error);
+        return null;
+      }
+    },
     async fetchSwappedOrderStatus(smartAccount) {
       const url = apiUrl(
         `/onramp/swapped/status/${encodeURIComponent(smartAccount)}`
@@ -1198,7 +1258,16 @@ function createDepositService(baseUrl, options) {
       const status = typeof body.status === "string" ? body.status : null;
       const orderId = typeof body.orderId === "string" ? body.orderId : null;
       if (!status || !orderId) return null;
-      const numericOrNull = (v) => typeof v === "number" && Number.isFinite(v) ? v : null;
+      const numericOrNull = (v) => {
+        if (typeof v === "number") {
+          return Number.isFinite(v) ? v : null;
+        }
+        if (typeof v === "string" && v.trim().length > 0) {
+          const parsed = Number(v);
+          return Number.isFinite(parsed) ? parsed : null;
+        }
+        return null;
+      };
       return {
         orderId,
         status,
@@ -1266,8 +1335,13 @@ function normalizeOrchestratorPortfolio(data) {
 function normalizeDirectToken(token) {
   const rawChainId = extractNumber(token, "chainId") ?? extractNumber(token.chain, "id");
   const rawChainString = extractString(token, "chainId") ?? extractString(token.chain, "id");
-  const chainId = rawChainId ?? (rawChainString ? isSolanaCaip2(rawChainString) || rawChainString.toLowerCase() === "solana" ? "solana" : parseEvmChainId(rawChainString) : null);
+  const chainId = rawChainId ?? (rawChainString ? isSolanaCaip2(rawChainString) || rawChainString.toLowerCase() === "solana" ? "solana" : (
+    // HyperCore (`hypercore:mainnet`) is a non-EVM source; keep its USDC
+    // instead of dropping it as an unparseable chain string.
+    isHyperCoreCaip2(rawChainString) || rawChainString.toLowerCase() === "hypercore" ? "hypercore" : parseEvmChainId(rawChainString)
+  ) : null);
   if (chainId === null) return null;
+  const registryChainId = typeof chainId === "number" ? chainId : chainId === "hypercore" ? HYPERCORE_CHAIN_ID : void 0;
   const symbol = extractString(token, "symbol") ?? extractString(token, "tokenSymbol") ?? extractString(token, "tokenName") ?? extractString(token, "name");
   if (!symbol) return null;
   const balanceValue = extractString(token, "balance") ?? extractString(token, "amount") ?? extractString(token, "value") ?? extractString(token, "rawBalance") ?? extractNumber(token, "balance")?.toString() ?? extractNumber(token, "amount")?.toString() ?? extractNumber(token, "value")?.toString() ?? extractNumber(token, "rawBalance")?.toString();
@@ -1275,14 +1349,14 @@ function normalizeDirectToken(token) {
   const address = extractString(token, "address") ?? extractString(token, "tokenAddress") ?? extractString(
     token.token,
     "address"
-  ) ?? (typeof chainId === "number" ? getTokenAddress(symbol, chainId) : void 0);
+  ) ?? (registryChainId !== void 0 ? getTokenAddress(symbol, registryChainId) : void 0);
   if (!address) return null;
   const balanceUsd = extractNumber(token, "balanceUsd") ?? extractNumber(token, "usdValue") ?? extractNumber(token, "valueUsd") ?? extractNumericString(token, "balanceUsd") ?? extractNumericString(token, "usdValue") ?? extractNumericString(token, "valueUsd") ?? 0;
   const isSolanaToken = chainId === "solana";
-  const registrySymbol = isSolanaToken ? "Token" : getTokenSymbol(address, chainId);
+  const registrySymbol = isSolanaToken ? "Token" : getTokenSymbol(address, registryChainId);
   const resolvedSymbol = isSolanaToken ? symbol : registrySymbol !== "Token" ? registrySymbol : symbol;
   const backendDecimals = extractNumber(token, "decimals") ?? extractNumber(token, "tokenDecimals");
-  const resolvedDecimals = !isSolanaToken && registrySymbol !== "Token" ? getTokenDecimalsByAddress(address, chainId) : backendDecimals ?? 18;
+  const resolvedDecimals = !isSolanaToken && registrySymbol !== "Token" ? getTokenDecimalsByAddress(address, registryChainId) : backendDecimals ?? 18;
   return {
     chainId,
     address,
@@ -2231,7 +2305,7 @@ function VisaMark() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx17("rect", { width: "37.2537", height: "24", rx: "4.2985", fill: "white" }),
+        /* @__PURE__ */ jsx17("rect", { width: "38", height: "24", rx: "4.2985", fill: "white" }),
         /* @__PURE__ */ jsx17(
           "path",
           {
@@ -2254,7 +2328,7 @@ function MastercardMark() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx17("rect", { width: "37.2537", height: "24", rx: "4.2985", fill: "white" }),
+        /* @__PURE__ */ jsx17("rect", { width: "38", height: "24", rx: "4.2985", fill: "white" }),
         /* @__PURE__ */ jsx17(
           "path",
           {
@@ -2298,7 +2372,7 @@ function AmexMark() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx17("rect", { width: "37.2537", height: "24", rx: "4.2985", fill: "#006FCF" }),
+        /* @__PURE__ */ jsx17("rect", { width: "38", height: "24", rx: "4.2985", fill: "#006FCF" }),
         /* @__PURE__ */ jsx17(
           "path",
           {
@@ -2683,11 +2757,33 @@ function ConnectStep({
 }
 ConnectStep.displayName = "ConnectStep";
 
+// src/components/ui/TokenIcon.tsx
+import { useState as useState2 } from "react";
+import { Fragment as Fragment3, jsx as jsx19 } from "react/jsx-runtime";
+function TokenIcon({ symbol, className, fallback }) {
+  const [failedSymbol, setFailedSymbol] = useState2(null);
+  if (failedSymbol === symbol) {
+    return /* @__PURE__ */ jsx19(Fragment3, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx19(
+    "img",
+    {
+      src: tokenIconUrl(symbol),
+      alt: "",
+      className,
+      loading: "lazy",
+      decoding: "async",
+      onError: () => setFailedSymbol(symbol)
+    }
+  );
+}
+TokenIcon.displayName = "TokenIcon";
+
 // src/components/steps/ProcessingStep.tsx
-import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef4, useState as useState6 } from "react";
 
 // src/components/ui/Button.tsx
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 function Button({
   children,
   variant = "accent",
@@ -2707,7 +2803,7 @@ function Button({
     className
   ].filter(Boolean).join(" ");
   const showInlineLoadingText = loading && loadingText !== void 0;
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "button",
     {
       className: classes,
@@ -2715,11 +2811,11 @@ function Button({
       "aria-busy": loading || void 0,
       ...props,
       children: showInlineLoadingText ? /* @__PURE__ */ jsxs17("span", { className: "rs-button__loading-row", children: [
-        /* @__PURE__ */ jsx19(Spinner, { className: "rs-spinner--sm" }),
-        /* @__PURE__ */ jsx19("span", { children: loadingText })
-      ] }) : /* @__PURE__ */ jsxs17(Fragment3, { children: [
-        /* @__PURE__ */ jsx19("span", { className: loading ? "rs-button__content--hidden" : "", children }),
-        loading && /* @__PURE__ */ jsx19("span", { className: "rs-button__spinner", children: /* @__PURE__ */ jsx19(Spinner, { className: "rs-spinner--sm" }) })
+        /* @__PURE__ */ jsx20(Spinner, { className: "rs-spinner--sm" }),
+        /* @__PURE__ */ jsx20("span", { children: loadingText })
+      ] }) : /* @__PURE__ */ jsxs17(Fragment4, { children: [
+        /* @__PURE__ */ jsx20("span", { className: loading ? "rs-button__content--hidden" : "", children }),
+        loading && /* @__PURE__ */ jsx20("span", { className: "rs-button__spinner", children: /* @__PURE__ */ jsx20(Spinner, { className: "rs-spinner--sm" }) })
       ] })
     }
   );
@@ -2728,16 +2824,16 @@ Button.displayName = "Button";
 
 // src/components/ui/Tooltip.tsx
 import {
-  useState as useState2,
+  useState as useState3,
   useRef as useRef3,
   useEffect as useEffect4,
   useCallback as useCallback2
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function Tooltip({ content, children, className }) {
-  const [open, setOpen] = useState2(false);
-  const [position, setPosition] = useState2(null);
+  const [open, setOpen] = useState3(false);
+  const [position, setPosition] = useState3(null);
   const triggerRef = useRef3(null);
   const bubbleRef = useRef3(null);
   const updatePosition = useCallback2(() => {
@@ -2783,7 +2879,7 @@ function Tooltip({ content, children, className }) {
       onMouseEnter: () => setOpen(true),
       onMouseLeave: () => setOpen(false),
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "span",
           {
             className: "rs-tooltip-trigger",
@@ -2805,7 +2901,7 @@ function Tooltip({ content, children, className }) {
           }
         ),
         open && position && typeof document !== "undefined" && createPortal2(
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             "span",
             {
               ref: bubbleRef,
@@ -2824,88 +2920,116 @@ function Tooltip({ content, children, className }) {
 Tooltip.displayName = "Tooltip";
 
 // src/components/ui/FeesAccordion.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
-function FeesAccordion({ total, rows }) {
-  const [open, setOpen] = useState3(false);
+import { useState as useState4 } from "react";
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+function FeesAccordion({ total, rows, tooltip }) {
+  const [open, setOpen] = useState4(false);
   const expandable = rows.length > 0;
   return /* @__PURE__ */ jsxs19("div", { className: "rs-fees-accordion", children: [
-    /* @__PURE__ */ jsxs19(
-      "button",
-      {
-        type: "button",
-        className: "rs-fees-accordion-summary",
-        "aria-expanded": expandable ? open : void 0,
-        disabled: !expandable,
-        onClick: () => expandable && setOpen((o) => !o),
-        children: [
-          /* @__PURE__ */ jsx21("span", { children: "Fees" }),
-          /* @__PURE__ */ jsxs19("span", { className: "rs-review-detail-value", children: [
-            /* @__PURE__ */ jsx21("span", { children: total }),
-            expandable && /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsxs19("div", { className: "rs-fees-accordion-summary", children: [
+      /* @__PURE__ */ jsxs19("span", { className: "rs-fees-accordion-label", children: [
+        /* @__PURE__ */ jsx22("span", { children: "Fees" }),
+        tooltip && /* @__PURE__ */ jsx22(Tooltip, { content: tooltip, children: /* @__PURE__ */ jsx22("span", { className: "rs-review-detail-info", "aria-label": "Fees info", children: /* @__PURE__ */ jsx22(InfoIcon, {}) }) })
+      ] }),
+      /* @__PURE__ */ jsxs19(
+        "button",
+        {
+          type: "button",
+          className: "rs-fees-accordion-toggle",
+          "aria-label": "Fees",
+          "aria-expanded": expandable ? open : void 0,
+          disabled: !expandable,
+          onClick: () => expandable && setOpen((o) => !o),
+          children: [
+            /* @__PURE__ */ jsx22("span", { children: total }),
+            expandable && /* @__PURE__ */ jsx22(
               "span",
               {
                 className: `rs-fees-accordion-chevron${open ? " rs-fees-accordion-chevron--open" : ""}`,
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx21(ChevronDownIcon, {})
+                children: /* @__PURE__ */ jsx22(ChevronDownIcon, {})
               }
             )
-          ] })
-        ]
-      }
-    ),
-    expandable && open && /* @__PURE__ */ jsx21("div", { className: "rs-fees-accordion-rows", children: rows.map((row, i) => /* @__PURE__ */ jsxs19("div", { className: "rs-fees-accordion-row", children: [
-      /* @__PURE__ */ jsx21("span", { children: row.label }),
-      /* @__PURE__ */ jsx21("span", { className: "rs-review-detail-value", children: row.value })
+          ]
+        }
+      )
+    ] }),
+    expandable && open && /* @__PURE__ */ jsx22("div", { className: "rs-fees-accordion-rows", children: rows.map((row, i) => /* @__PURE__ */ jsxs19("div", { className: "rs-fees-accordion-row", children: [
+      /* @__PURE__ */ jsx22("span", { children: row.label }),
+      /* @__PURE__ */ jsxs19("span", { className: "rs-review-detail-value", children: [
+        /* @__PURE__ */ jsx22(
+          "span",
+          {
+            className: row.strike ? "rs-review-detail-value--strike" : void 0,
+            children: row.value
+          }
+        ),
+        row.tooltip && /* @__PURE__ */ jsx22(Tooltip, { content: row.tooltip, children: /* @__PURE__ */ jsx22(
+          "span",
+          {
+            className: "rs-review-detail-info",
+            "aria-label": `${row.label} info`,
+            children: /* @__PURE__ */ jsx22(InfoIcon, {})
+          }
+        ) })
+      ] })
     ] }, `${row.label}-${i}`)) })
   ] });
 }
 FeesAccordion.displayName = "FeesAccordion";
 
 // src/components/steps/SwappedReceipt.tsx
-import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 function SwappedReceipt({
   onrampMethod,
   onrampMethodIcon,
   amountPaid,
   depositedAmount,
-  depositedIcon,
+  depositedSymbol,
   feesTotal,
   feeRows,
+  feesTooltip,
   newLabel,
   onNewDeposit,
   onClose
 }) {
   return /* @__PURE__ */ jsxs20("div", { className: "rs-screen", children: [
     /* @__PURE__ */ jsxs20("div", { className: "rs-screen-body rs-screen-body--gap-32", children: [
-      /* @__PURE__ */ jsx22(BodyHeader, { icon: /* @__PURE__ */ jsx22(CheckIcon, {}), title: "Deposit successful" }),
+      /* @__PURE__ */ jsx23(BodyHeader, { icon: /* @__PURE__ */ jsx23(CheckIcon, {}), title: "Deposit successful" }),
       /* @__PURE__ */ jsxs20("div", { className: "rs-review-details", children: [
         onrampMethod && /* @__PURE__ */ jsxs20("div", { className: "rs-review-detail-row", children: [
-          /* @__PURE__ */ jsx22("span", { children: "Onramp method" }),
+          /* @__PURE__ */ jsx23("span", { children: "Onramp method" }),
           /* @__PURE__ */ jsxs20("span", { className: "rs-review-detail-value", children: [
-            /* @__PURE__ */ jsx22("span", { children: onrampMethod }),
-            onrampMethodIcon && /* @__PURE__ */ jsx22("span", { className: "rs-review-detail-icon rs-review-detail-icon--square", children: /* @__PURE__ */ jsx22("img", { src: onrampMethodIcon, alt: "" }) })
+            /* @__PURE__ */ jsx23("span", { children: onrampMethod }),
+            onrampMethodIcon && /* @__PURE__ */ jsx23("span", { className: "rs-review-detail-icon rs-review-detail-icon--square", children: /* @__PURE__ */ jsx23("img", { src: onrampMethodIcon, alt: "" }) })
           ] })
         ] }),
         amountPaid && /* @__PURE__ */ jsxs20("div", { className: "rs-review-detail-row", children: [
-          /* @__PURE__ */ jsx22("span", { children: "Amount paid" }),
-          /* @__PURE__ */ jsx22("span", { className: "rs-review-detail-value", children: amountPaid })
+          /* @__PURE__ */ jsx23("span", { children: "Amount paid" }),
+          /* @__PURE__ */ jsx23("span", { className: "rs-review-detail-value", children: amountPaid })
         ] }),
         /* @__PURE__ */ jsxs20("div", { className: "rs-review-detail-row", children: [
-          /* @__PURE__ */ jsx22("span", { children: "Receive" }),
+          /* @__PURE__ */ jsx23("span", { children: "Deposited amount" }),
           /* @__PURE__ */ jsxs20("span", { className: "rs-review-detail-value", children: [
-            /* @__PURE__ */ jsx22("span", { children: depositedAmount }),
-            depositedIcon && /* @__PURE__ */ jsx22("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx22("img", { src: depositedIcon, alt: "" }) })
+            /* @__PURE__ */ jsx23("span", { children: depositedAmount }),
+            depositedSymbol && /* @__PURE__ */ jsx23("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx23(TokenIcon, { symbol: depositedSymbol }) })
           ] })
         ] }),
-        feesTotal != null && /* @__PURE__ */ jsx22(FeesAccordion, { total: feesTotal, rows: feeRows ?? [] })
+        feesTotal != null && /* @__PURE__ */ jsx23(
+          FeesAccordion,
+          {
+            total: feesTotal,
+            rows: feeRows ?? [],
+            tooltip: feesTooltip ?? void 0
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs20("div", { className: "rs-screen-button-row", children: [
-        onNewDeposit && /* @__PURE__ */ jsx22(Button, { variant: "outline", onClick: onNewDeposit, fullWidth: true, children: newLabel }),
-        onClose && /* @__PURE__ */ jsx22(Button, { onClick: onClose, fullWidth: true, children: "Done" })
+        onNewDeposit && /* @__PURE__ */ jsx23(Button, { variant: "outline", onClick: onNewDeposit, fullWidth: true, children: newLabel }),
+        onClose && /* @__PURE__ */ jsx23(Button, { onClick: onClose, fullWidth: true, children: "Done" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx22(PoweredBy, {})
+    /* @__PURE__ */ jsx23(PoweredBy, {})
   ] });
 }
 SwappedReceipt.displayName = "SwappedReceipt";
@@ -2979,8 +3103,10 @@ function getEventSourceDetails(event) {
   return {};
 }
 function asChain(value) {
-  if (typeof value === "string" && value.trim().startsWith("solana")) {
-    return "solana";
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (trimmed.startsWith("solana")) return "solana";
+    if (trimmed.startsWith("hypercore")) return "hypercore";
   }
   return asNumber(value);
 }
@@ -3074,6 +3200,11 @@ function resolveTokenDisplay(token, chain, fallback) {
       if (solanaToken) {
         return { symbol: solanaToken.symbol, decimals: solanaToken.decimals };
       }
+    } else if (chain === "hypercore") {
+      const t = HYPERCORE_SOURCE_TOKENS.find(
+        (x) => x.address.toLowerCase() === token.toLowerCase()
+      );
+      if (t) return { symbol: t.symbol, decimals: t.decimals };
     } else if (EVM_ADDRESS_RE.test(token)) {
       const symbol = getTokenSymbol(token, chain);
       const decimals = findTokenDecimals(token, chain);
@@ -3163,9 +3294,9 @@ function formatReceiveEstimate(params) {
 }
 
 // src/core/useTokenPrices.ts
-import { useEffect as useEffect5, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 function useTokenPrices(service, symbols) {
-  const [prices, setPrices] = useState4({});
+  const [prices, setPrices] = useState5({});
   const symbolsKey = [
     ...new Set(
       symbols.filter((symbol) => Boolean(symbol)).map((symbol) => symbol.toUpperCase())
@@ -3188,7 +3319,7 @@ function useTokenPrices(service, symbols) {
 }
 
 // src/components/steps/ProcessingStep.tsx
-import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 function SuccessBadge() {
   return /* @__PURE__ */ jsxs21(
     "svg",
@@ -3200,7 +3331,7 @@ function SuccessBadge() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "rect",
           {
             width: "40",
@@ -3209,7 +3340,7 @@ function SuccessBadge() {
             fill: "var(--rs-icon-wrapper-bg)"
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "path",
           {
             d: "M28 14L17 25L12 20",
@@ -3234,8 +3365,8 @@ function FailedBadge() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx23("rect", { width: "40", height: "40", rx: "8", fill: "#FB2C36" }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24("rect", { width: "40", height: "40", rx: "8", fill: "#FB2C36" }),
+        /* @__PURE__ */ jsx24(
           "path",
           {
             d: "M26 14L14 26M14 14L26 26",
@@ -3252,6 +3383,8 @@ function FailedBadge() {
 var INITIAL_POLL_INTERVAL = 3e3;
 var MAX_POLL_INTERVAL = 3e4;
 var BACKOFF_MULTIPLIER = 1.5;
+var SWAPPED_RECEIPT_STATUS_RETRY_INTERVAL_MS = 1e3;
+var SWAPPED_FIAT_STATUS_MAX_ATTEMPTS = 12;
 var ESCALATED_DELAY_MS = 10 * 60 * 1e3;
 var SOFT_DELAY_MS = {
   confirming: 90 * 1e3,
@@ -3282,6 +3415,36 @@ function formatPaymentMethod(method) {
   if (PAYMENT_METHOD_LABELS[key]) return PAYMENT_METHOD_LABELS[key];
   return key.replace(/[-_]+/g, " ").split(" ").filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
 }
+function normalizeFeeUsd(value) {
+  return Number.isFinite(value) ? Math.max(0, value) : null;
+}
+function formatUsdFee(value) {
+  return `$${normalizeFeeUsd(value)?.toFixed(2) ?? "0.00"}`;
+}
+function getMarketNetworkFees(breakdown) {
+  if (!breakdown) return null;
+  const gasUsd = normalizeFeeUsd(breakdown.gasUsd);
+  const bridgeUsd = normalizeFeeUsd(breakdown.bridgeUsd);
+  const swapUsd = normalizeFeeUsd(breakdown.swapUsd);
+  if (gasUsd === null || bridgeUsd === null || swapUsd === null) return null;
+  return {
+    marketUsd: bridgeUsd + swapUsd,
+    networkUsd: gasUsd
+  };
+}
+function toSwappedFiatContext(status) {
+  return {
+    orderCrypto: status.orderCrypto,
+    orderCryptoAmount: status.orderCryptoAmount,
+    paidAmountUsd: status.paidAmountUsd,
+    paidAmountEur: status.paidAmountEur,
+    onrampFeeUsd: status.onrampFeeUsd,
+    paymentMethod: status.paymentMethod
+  };
+}
+function hasFiatReceiptPricing(status) {
+  return status.paidAmountUsd != null && status.onrampFeeUsd != null;
+}
 function loadPhaseTimings(txHash) {
   if (typeof window === "undefined") return null;
   try {
@@ -3335,9 +3498,9 @@ function formatTimer(seconds) {
   return `${mins}:${String(secs).padStart(2, "0")}`;
 }
 function TickerChar({ value }) {
-  const [current, setCurrent] = useState5(value);
-  const [previous, setPrevious] = useState5(null);
-  const [animKey, setAnimKey] = useState5(0);
+  const [current, setCurrent] = useState6(value);
+  const [previous, setPrevious] = useState6(null);
+  const [animKey, setAnimKey] = useState6(0);
   useEffect6(() => {
     if (value === current) return;
     setPrevious(current);
@@ -3347,15 +3510,15 @@ function TickerChar({ value }) {
     return () => clearTimeout(timeout);
   }, [value, current]);
   return /* @__PURE__ */ jsxs21("span", { className: "rs-ticker-slot", children: [
-    previous !== null && /* @__PURE__ */ jsx23("span", { className: "rs-ticker-out", children: previous }, `out-${animKey}`),
-    /* @__PURE__ */ jsx23("span", { className: "rs-ticker-in", children: current }, `in-${animKey}`)
+    previous !== null && /* @__PURE__ */ jsx24("span", { className: "rs-ticker-out", children: previous }, `out-${animKey}`),
+    /* @__PURE__ */ jsx24("span", { className: "rs-ticker-in", children: current }, `in-${animKey}`)
   ] });
 }
 function Ticker({ value }) {
-  return /* @__PURE__ */ jsx23("span", { className: "rs-ticker", "aria-label": value, children: value.split("").map((char, index) => (
+  return /* @__PURE__ */ jsx24("span", { className: "rs-ticker", "aria-label": value, children: value.split("").map((char, index) => (
     // Position-stable key so each slot keeps its own animation state.
     // eslint-disable-next-line react/no-array-index-key
-    /* @__PURE__ */ jsx23(TickerChar, { value: char }, index)
+    /* @__PURE__ */ jsx24(TickerChar, { value: char }, index)
   )) });
 }
 function getPhaseStartTime(phaseId, phaseTimings) {
@@ -3455,6 +3618,7 @@ function ProcessingStep({
   uiConfig,
   quotedFeeAmount,
   quotedFeeSymbol,
+  quoteFeeBreakdown,
   balanceAfterUsd,
   isSwappedOrder,
   swappedContext,
@@ -3482,7 +3646,7 @@ function ProcessingStep({
   const onDepositFailedRef = useLatestRef(onDepositFailed);
   const onErrorRef = useLatestRef(onError);
   const initialTerminalEventRef = useRef4(null);
-  const [state, setState] = useState5(() => {
+  const [state, setState] = useState6(() => {
     if (directTransfer) return { type: "complete" };
     const initial = getInitialProcessingState(
       initialEvent,
@@ -3496,8 +3660,8 @@ function ProcessingStep({
     }
     return { type: "processing" };
   });
-  const [elapsedSeconds, setElapsedSeconds] = useState5(0);
-  const [phaseTimings, setPhaseTimings] = useState5(() => {
+  const [elapsedSeconds, setElapsedSeconds] = useState6(0);
+  const [phaseTimings, setPhaseTimings] = useState6(() => {
     const saved = loadPhaseTimings(txHash);
     if (saved) {
       startTimeRef.current = saved.startedAt;
@@ -3505,7 +3669,7 @@ function ProcessingStep({
     }
     return { startedAt: startTimeRef.current };
   });
-  const [hasEscalatedDelay, setHasEscalatedDelay] = useState5(false);
+  const [hasEscalatedDelay, setHasEscalatedDelay] = useState6(false);
   const updatePhaseTimings = useCallback3(
     (updater) => {
       setPhaseTimings((previous) => {
@@ -3609,30 +3773,64 @@ function ProcessingStep({
       (previous) => syncPhaseTimings(previous, state.lastEvent)
     );
   }, [state.lastEvent?.time, state.lastEvent?.type, updatePhaseTimings]);
-  const [swappedFiatContext, setSwappedFiatContext] = useState5(null);
+  const [swappedFiatContext, setSwappedFiatContext] = useState6(null);
   useEffect6(() => {
     let cancelled = false;
-    service.fetchSwappedOrderStatus(smartAccount).then((res) => {
-      if (cancelled || !res) return;
-      if (res.transactionId != null) {
-        if (res.transactionId.toLowerCase() !== txHash.toLowerCase()) return;
-      } else if (!isSwappedOrder || swappedContext?.variant === "connect") {
+    let timeoutId;
+    const isFiatSwappedOrder = isSwappedOrder && swappedContext?.variant === "fiat";
+    const expectedOrderUuid = swappedContext?.expectedOrderUuid ?? null;
+    setSwappedFiatContext(null);
+    if (isFiatSwappedOrder && !expectedOrderUuid) {
+      return () => {
+        cancelled = true;
+      };
+    }
+    let attempts = 0;
+    const matchesCurrentDeposit = (res) => {
+      if (isFiatSwappedOrder) {
+        return res.orderId === expectedOrderUuid;
+      }
+      return res.transactionId != null && res.transactionId.toLowerCase() === txHash.toLowerCase();
+    };
+    const scheduleRetry = () => {
+      if (cancelled || !isFiatSwappedOrder || attempts >= SWAPPED_FIAT_STATUS_MAX_ATTEMPTS) {
         return;
       }
-      setSwappedFiatContext({
-        orderCrypto: res.orderCrypto,
-        orderCryptoAmount: res.orderCryptoAmount,
-        paidAmountUsd: res.paidAmountUsd,
-        paidAmountEur: res.paidAmountEur,
-        onrampFeeUsd: res.onrampFeeUsd,
-        paymentMethod: res.paymentMethod
-      });
-    }).catch(() => {
-    });
+      timeoutId = setTimeout(
+        fetchContext,
+        SWAPPED_RECEIPT_STATUS_RETRY_INTERVAL_MS
+      );
+    };
+    async function fetchContext() {
+      attempts += 1;
+      try {
+        const res = await service.fetchSwappedOrderStatus(smartAccount);
+        if (cancelled) return;
+        if (!res || !matchesCurrentDeposit(res)) {
+          scheduleRetry();
+          return;
+        }
+        setSwappedFiatContext(toSwappedFiatContext(res));
+        if (isFiatSwappedOrder && !hasFiatReceiptPricing(res)) {
+          scheduleRetry();
+        }
+      } catch {
+        scheduleRetry();
+      }
+    }
+    fetchContext();
     return () => {
       cancelled = true;
+      if (timeoutId !== void 0) clearTimeout(timeoutId);
     };
-  }, [service, smartAccount, txHash, isSwappedOrder, swappedContext?.variant]);
+  }, [
+    service,
+    smartAccount,
+    txHash,
+    isSwappedOrder,
+    swappedContext?.variant,
+    swappedContext?.expectedOrderUuid
+  ]);
   useEffect6(() => {
     if (directTransfer) return;
     if (state.type !== "processing") {
@@ -3851,10 +4049,8 @@ function ProcessingStep({
   const delayPhaseId = isProcessing && currentPhaseId && activePhaseElapsedMs >= SOFT_DELAY_MS[currentPhaseId] ? currentPhaseId : void 0;
   void delayPhaseId;
   void hasEscalatedDelay;
-  const targetTokenIcon = getTokenIcon(targetSymbol);
   const sourceChainIcon = getChainIcon(displaySourceChain);
   const targetChainIcon = getChainIcon(targetChain);
-  const sourceTokenIcon = getTokenIcon(sourceSymbol);
   const sourceChainName = getChainName(displaySourceChain);
   const targetChainName = getChainName(targetChain);
   const timerText = formatTimer(elapsedSeconds);
@@ -3863,12 +4059,12 @@ function ProcessingStep({
   const stateTitle = isComplete ? `${flowCapitalized} successful` : isFailed ? `${flowCapitalized} failed` : "Processing...";
   const handleRetry = onRetry ?? onNewDeposit;
   const headerContent = isComplete ? /* @__PURE__ */ jsxs21("div", { className: "rs-body-header", children: [
-    /* @__PURE__ */ jsx23(SuccessBadge, {}),
-    /* @__PURE__ */ jsx23("div", { className: "rs-body-header-text", children: /* @__PURE__ */ jsx23("h2", { className: "rs-body-header-title", children: stateTitle }) })
+    /* @__PURE__ */ jsx24(SuccessBadge, {}),
+    /* @__PURE__ */ jsx24("div", { className: "rs-body-header-text", children: /* @__PURE__ */ jsx24("h2", { className: "rs-body-header-title", children: stateTitle }) })
   ] }) : isFailed ? /* @__PURE__ */ jsxs21("div", { className: "rs-body-header", children: [
-    /* @__PURE__ */ jsx23(FailedBadge, {}),
-    /* @__PURE__ */ jsx23("div", { className: "rs-body-header-text", children: /* @__PURE__ */ jsx23("h2", { className: "rs-body-header-title", children: stateTitle }) })
-  ] }) : /* @__PURE__ */ jsx23(BodyHeader, { icon: /* @__PURE__ */ jsx23(WalletIcon, {}), title: stateTitle });
+    /* @__PURE__ */ jsx24(FailedBadge, {}),
+    /* @__PURE__ */ jsx24("div", { className: "rs-body-header-text", children: /* @__PURE__ */ jsx24("h2", { className: "rs-body-header-title", children: stateTitle }) })
+  ] }) : /* @__PURE__ */ jsx24(BodyHeader, { icon: /* @__PURE__ */ jsx24(WalletIcon, {}), title: stateTitle });
   if (isComplete && isSwappedOrder) {
     const effectivePaymentMethod = swappedContext?.method ?? swappedFiatContext?.paymentMethod ?? null;
     const onrampMethod = effectivePaymentMethod ? formatPaymentMethod(effectivePaymentMethod) : null;
@@ -3880,31 +4076,48 @@ function ProcessingStep({
     const amountPaid = connectPaidAmount ?? (swappedFiatContext?.paidAmountUsd != null ? `$${swappedFiatContext.paidAmountUsd.toFixed(2)}` : null);
     const depositedAmount = receiveDisplay;
     const onrampFeeUsd = swappedFiatContext?.onrampFeeUsd ?? null;
-    const networkFeeUsd = quotedFeeAmount !== void 0 && Number.isFinite(Number(quotedFeeAmount)) ? Number(quotedFeeAmount) : null;
+    const quoteFees = getMarketNetworkFees(quoteFeeBreakdown);
+    const fallbackNetworkFeeUsd = quoteFees === null && quotedFeeAmount !== void 0 && Number.isFinite(Number(quotedFeeAmount)) ? Number(quotedFeeAmount) : null;
+    const marketFeeUsd = quoteFees?.marketUsd ?? null;
+    const networkFeeUsd = quoteFees?.networkUsd ?? fallbackNetworkFeeUsd;
+    const sponsoredFeeTooltip = "This fee is sponsored for this deposit.";
+    const feesTooltip = feeSponsored ? "On-ramp fees are charged by the payment provider. Market and network fees are sponsored for this deposit." : "Fees include on-ramp, market, and network costs for this deposit.";
     const feeRows = [];
     if (onrampFeeUsd != null) {
       feeRows.push({
         label: "On-ramp fee",
-        value: `$${onrampFeeUsd.toFixed(2)}`
+        value: formatUsdFee(onrampFeeUsd)
+      });
+    }
+    if (marketFeeUsd != null) {
+      feeRows.push({
+        label: "Market fee",
+        value: formatUsdFee(marketFeeUsd),
+        strike: feeSponsored,
+        tooltip: feeSponsored ? sponsoredFeeTooltip : void 0
       });
     }
     if (networkFeeUsd != null) {
       feeRows.push({
         label: "Network fee",
-        value: `$${networkFeeUsd.toFixed(2)}`
+        value: formatUsdFee(networkFeeUsd),
+        strike: feeSponsored,
+        tooltip: feeSponsored ? sponsoredFeeTooltip : void 0
       });
     }
-    const feesTotal = feeRows.length > 0 ? `$${((onrampFeeUsd ?? 0) + (networkFeeUsd ?? 0)).toFixed(2)}` : null;
-    return /* @__PURE__ */ jsx23(
+    const chargeableQuoteFeeUsd = feeSponsored ? 0 : (marketFeeUsd ?? 0) + (networkFeeUsd ?? 0);
+    const feesTotal = feeRows.length > 0 ? formatUsdFee((onrampFeeUsd ?? 0) + chargeableQuoteFeeUsd) : null;
+    return /* @__PURE__ */ jsx24(
       SwappedReceipt,
       {
         onrampMethod,
         onrampMethodIcon,
         amountPaid,
         depositedAmount,
-        depositedIcon: targetTokenIcon,
+        depositedSymbol: targetSymbol,
         feesTotal,
         feeRows,
+        feesTooltip,
         newLabel: `New ${flowNoun}`,
         onNewDeposit,
         onClose
@@ -3916,11 +4129,11 @@ function ProcessingStep({
       headerContent,
       /* @__PURE__ */ jsxs21("div", { className: "rs-review-details", children: [
         /* @__PURE__ */ jsxs21("div", { className: "rs-review-detail-row", children: [
-          /* @__PURE__ */ jsx23("span", { children: "Source chain" }),
+          /* @__PURE__ */ jsx24("span", { children: "Source chain" }),
           /* @__PURE__ */ jsxs21("span", { className: "rs-review-detail-value", children: [
-            /* @__PURE__ */ jsx23("span", { children: sourceChainName }),
-            sourceChainIcon && /* @__PURE__ */ jsx23("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx23("img", { src: sourceChainIcon, alt: "" }) }),
-            sourceExplorerUrl && /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24("span", { children: sourceChainName }),
+            sourceChainIcon && /* @__PURE__ */ jsx24("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx24("img", { src: sourceChainIcon, alt: "" }) }),
+            sourceExplorerUrl && /* @__PURE__ */ jsx24(
               "a",
               {
                 href: sourceExplorerUrl,
@@ -3928,17 +4141,17 @@ function ProcessingStep({
                 rel: "noopener noreferrer",
                 className: "rs-review-detail-link",
                 "aria-label": "View source transaction",
-                children: /* @__PURE__ */ jsx23(ExternalLinkIcon, {})
+                children: /* @__PURE__ */ jsx24(ExternalLinkIcon, {})
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ jsxs21("div", { className: "rs-review-detail-row", children: [
-          /* @__PURE__ */ jsx23("span", { children: "Destination chain" }),
+          /* @__PURE__ */ jsx24("span", { children: "Destination chain" }),
           /* @__PURE__ */ jsxs21("span", { className: "rs-review-detail-value", children: [
-            /* @__PURE__ */ jsx23("span", { children: targetChainName }),
-            targetChainIcon && /* @__PURE__ */ jsx23("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx23("img", { src: targetChainIcon, alt: "" }) }),
-            destExplorerUrl && /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24("span", { children: targetChainName }),
+            targetChainIcon && /* @__PURE__ */ jsx24("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx24("img", { src: targetChainIcon, alt: "" }) }),
+            destExplorerUrl && /* @__PURE__ */ jsx24(
               "a",
               {
                 href: destExplorerUrl,
@@ -3946,18 +4159,18 @@ function ProcessingStep({
                 rel: "noopener noreferrer",
                 className: "rs-review-detail-link",
                 "aria-label": "View destination transaction",
-                children: /* @__PURE__ */ jsx23(ExternalLinkIcon, {})
+                children: /* @__PURE__ */ jsx24(ExternalLinkIcon, {})
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ jsxs21("div", { className: "rs-review-detail-row", children: [
-          /* @__PURE__ */ jsx23("span", { children: isProcessing ? "Time elapsed" : "Total time" }),
-          /* @__PURE__ */ jsx23("span", { className: "rs-review-detail-value", children: /* @__PURE__ */ jsx23(Ticker, { value: timerText }) })
+          /* @__PURE__ */ jsx24("span", { children: isProcessing ? "Time elapsed" : "Total time" }),
+          /* @__PURE__ */ jsx24("span", { className: "rs-review-detail-value", children: /* @__PURE__ */ jsx24(Ticker, { value: timerText }) })
         ] }),
-        isSwappedOrder ? /* @__PURE__ */ jsxs21(Fragment4, { children: [
+        isSwappedOrder ? /* @__PURE__ */ jsxs21(Fragment5, { children: [
           swappedFiatContext?.paidAmountUsd != null && /* @__PURE__ */ jsxs21("div", { className: "rs-review-detail-row", children: [
-            /* @__PURE__ */ jsx23("span", { children: "You pay" }),
+            /* @__PURE__ */ jsx24("span", { children: "You pay" }),
             /* @__PURE__ */ jsxs21("span", { className: "rs-review-detail-value", children: [
               "$",
               swappedFiatContext.paidAmountUsd.toFixed(2),
@@ -3969,50 +4182,50 @@ function ProcessingStep({
             ] })
           ] }),
           swappedFiatContext?.onrampFeeUsd != null && /* @__PURE__ */ jsxs21("div", { className: "rs-review-detail-row", children: [
-            /* @__PURE__ */ jsx23("span", { children: "On-ramp fee" }),
+            /* @__PURE__ */ jsx24("span", { children: "On-ramp fee" }),
             /* @__PURE__ */ jsxs21("span", { className: "rs-review-detail-value", children: [
               "$",
               swappedFiatContext.onrampFeeUsd.toFixed(2)
             ] })
           ] }),
           formattedBridgingCost && /* @__PURE__ */ jsxs21("div", { className: "rs-review-detail-row", children: [
-            /* @__PURE__ */ jsx23("span", { children: "Bridging cost" }),
+            /* @__PURE__ */ jsx24("span", { children: "Bridging cost" }),
             /* @__PURE__ */ jsxs21("span", { className: "rs-review-detail-value", children: [
               /* @__PURE__ */ jsxs21("span", { children: [
                 formattedBridgingCost,
                 " ",
                 sourceSymbol
               ] }),
-              sourceTokenIcon && /* @__PURE__ */ jsx23("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx23("img", { src: sourceTokenIcon, alt: "" }) })
+              /* @__PURE__ */ jsx24("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx24(TokenIcon, { symbol: sourceSymbol }) })
             ] })
           ] })
         ] }) : /* @__PURE__ */ jsxs21("div", { className: "rs-review-detail-row", children: [
-          /* @__PURE__ */ jsx23("span", { children: isProcessing ? "You send" : "You sent" }),
+          /* @__PURE__ */ jsx24("span", { children: isProcessing ? "You send" : "You sent" }),
           /* @__PURE__ */ jsxs21("span", { className: "rs-review-detail-value", children: [
             /* @__PURE__ */ jsxs21("span", { children: [
               formattedSentAmount,
               " ",
               sourceSymbol
             ] }),
-            sourceTokenIcon && /* @__PURE__ */ jsx23("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx23("img", { src: sourceTokenIcon, alt: "" }) })
+            /* @__PURE__ */ jsx24("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx24(TokenIcon, { symbol: sourceSymbol }) })
           ] })
         ] }),
         /* @__PURE__ */ jsxs21("div", { className: "rs-review-detail-row", children: [
-          /* @__PURE__ */ jsx23("span", { children: isProcessing ? "Receive" : "Received" }),
+          /* @__PURE__ */ jsx24("span", { children: isProcessing ? "Receive" : "Received" }),
           /* @__PURE__ */ jsxs21("span", { className: "rs-review-detail-value", children: [
-            /* @__PURE__ */ jsx23("span", { children: receiveDisplay }),
-            targetTokenIcon && /* @__PURE__ */ jsx23("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx23("img", { src: targetTokenIcon, alt: "" }) })
+            /* @__PURE__ */ jsx24("span", { children: receiveDisplay }),
+            /* @__PURE__ */ jsx24("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx24(TokenIcon, { symbol: targetSymbol }) })
           ] })
         ] }),
         isFailed && balanceAfterUsd !== void 0 && /* @__PURE__ */ jsxs21("div", { className: "rs-review-detail-row", children: [
-          /* @__PURE__ */ jsx23("span", { children: "Balance" }),
+          /* @__PURE__ */ jsx24("span", { children: "Balance" }),
           /* @__PURE__ */ jsxs21("span", { className: "rs-review-detail-value", children: [
             "$",
             balanceAfterUsd.toFixed(2)
           ] })
         ] }),
         isSwappedOrder ? quotedFeeAmount !== void 0 && /* @__PURE__ */ jsxs21("div", { className: "rs-review-detail-row", children: [
-          /* @__PURE__ */ jsx23("span", { children: "Fees" }),
+          /* @__PURE__ */ jsx24("span", { children: "Fees" }),
           /* @__PURE__ */ jsxs21("span", { className: "rs-review-detail-value", children: [
             /* @__PURE__ */ jsxs21(
               "span",
@@ -4025,12 +4238,12 @@ function ProcessingStep({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx23(Tooltip, { content: feeTooltip, children: /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24(Tooltip, { content: feeTooltip, children: /* @__PURE__ */ jsx24(
               "span",
               {
                 className: "rs-review-detail-info",
                 "aria-label": "Fee info",
-                children: /* @__PURE__ */ jsx23(InfoIcon, {})
+                children: /* @__PURE__ */ jsx24(InfoIcon, {})
               }
             ) })
           ] })
@@ -4038,7 +4251,7 @@ function ProcessingStep({
           const feeValue = quotedFeeAmount ?? formattedBridgingCost;
           if (feeValue === void 0) return null;
           return /* @__PURE__ */ jsxs21("div", { className: "rs-review-detail-row", children: [
-            /* @__PURE__ */ jsx23("span", { children: "Fees" }),
+            /* @__PURE__ */ jsx24("span", { children: "Fees" }),
             /* @__PURE__ */ jsxs21("span", { className: "rs-review-detail-value", children: [
               /* @__PURE__ */ jsxs21(
                 "span",
@@ -4051,20 +4264,20 @@ function ProcessingStep({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx23(Tooltip, { content: feeTooltip, children: /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(Tooltip, { content: feeTooltip, children: /* @__PURE__ */ jsx24(
                 "span",
                 {
                   className: "rs-review-detail-info",
                   "aria-label": "Fee info",
-                  children: /* @__PURE__ */ jsx23(InfoIcon, {})
+                  children: /* @__PURE__ */ jsx24(InfoIcon, {})
                 }
               ) })
             ] })
           ] });
         })()
       ] }),
-      isFailed && failureMessage && /* @__PURE__ */ jsx23(Callout, { variant: "error", children: failureMessage }),
-      isProcessing && /* @__PURE__ */ jsx23(
+      isFailed && failureMessage && /* @__PURE__ */ jsx24(Callout, { variant: "error", children: failureMessage }),
+      isProcessing && /* @__PURE__ */ jsx24(
         Button,
         {
           fullWidth: true,
@@ -4079,14 +4292,14 @@ function ProcessingStep({
           "New ",
           flowNoun
         ] }),
-        onClose && /* @__PURE__ */ jsx23(Button, { onClick: onClose, fullWidth: true, children: "Done" })
+        onClose && /* @__PURE__ */ jsx24(Button, { onClick: onClose, fullWidth: true, children: "Done" })
       ] }),
       isFailed && /* @__PURE__ */ jsxs21("div", { className: "rs-screen-button-row", children: [
-        onClose && /* @__PURE__ */ jsx23(Button, { variant: "outline", onClick: onClose, fullWidth: true, children: "Cancel" }),
-        handleRetry && /* @__PURE__ */ jsx23(Button, { onClick: handleRetry, fullWidth: true, children: "Try again" })
+        onClose && /* @__PURE__ */ jsx24(Button, { variant: "outline", onClick: onClose, fullWidth: true, children: "Cancel" }),
+        handleRetry && /* @__PURE__ */ jsx24(Button, { onClick: handleRetry, fullWidth: true, children: "Try again" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx23(PoweredBy, {})
+    /* @__PURE__ */ jsx24(PoweredBy, {})
   ] });
 }
 
@@ -4168,6 +4381,7 @@ export {
   ConnectStep,
   useLatestRef,
   Button,
+  TokenIcon,
   debugLog,
   debugError,
   getAssetId,