@rhinestone/deposit-modal 0.2.4 → 0.3.0-alpha.0

package/dist/{chunk-WNFGZS56.mjs → chunk-UIHAYD7J.mjs}

@@ -4,11 +4,12 @@ import {
   getChainIcon,
   getChainName,
   getExplorerTxUrl,
+  getSupportedChainIds,
   getTokenAddress,
   getTokenDecimalsByAddress,
   getTokenIcon,
   getTokenSymbol
-} from "./chunk-WHW3ZMOT.mjs";
+} from "./chunk-EEHUOFIW.mjs";
 
 // src/components/ui/Modal.tsx
 import {
@@ -141,6 +142,46 @@ function Modal({
 }
 Modal.displayName = "Modal";
 
+// src/components/ui/Icons.tsx
+import {
+  Wallet,
+  ExternalLink,
+  Coins,
+  Check,
+  ChevronRight,
+  ChevronLeft,
+  ChevronDown,
+  X,
+  HandCoins,
+  History,
+  Info,
+  Copy,
+  ArrowRight,
+  AlertTriangle,
+  Percent,
+  Clock,
+  CirclePlus,
+  CircleArrowOutUpLeft
+} from "lucide-react";
+var WalletIcon = Wallet;
+var ExternalLinkIcon = ExternalLink;
+var CheckIcon = Check;
+var ChevronRightIcon = ChevronRight;
+var ChevronLeftIcon = ChevronLeft;
+var ChevronDownIcon = ChevronDown;
+var CloseIcon = X;
+var HandCoinsIcon = HandCoins;
+var CoinsIcon = Coins;
+var HistoryIcon = History;
+var InfoIcon = Info;
+var CopyIcon = Copy;
+var ArrowRightIcon = ArrowRight;
+var AlertTriangleIcon = AlertTriangle;
+var PercentIcon = Percent;
+var ClockIcon = Clock;
+var PlusCircleIcon = CirclePlus;
+var CircleArrowOutUpLeftIcon = CircleArrowOutUpLeft;
+
 // src/core/debug.ts
 function truncateString(value, max = 240) {
   if (value.length <= max) return value;
@@ -214,6 +255,48 @@ function isSolanaCaip2(value) {
   return typeof value === "string" && value.startsWith("solana:");
 }
 
+// src/core/deposit-asset-helpers.ts
+function getAssetId(asset) {
+  return `${asset.chainId}:${asset.token.toLowerCase()}`;
+}
+function isEvmAddress(value) {
+  return /^0x[a-fA-F0-9]{40}$/.test(value);
+}
+function portfolioTokenToAsset(token) {
+  if (typeof token.chainId !== "number") return null;
+  if (!isEvmAddress(token.address)) return null;
+  return {
+    id: getAssetId({ chainId: token.chainId, token: token.address }),
+    chainId: token.chainId,
+    token: token.address,
+    symbol: token.symbol,
+    name: token.name,
+    decimals: token.decimals,
+    balance: token.balance,
+    balanceUsd: token.balanceUsd
+  };
+}
+function safeBigInt(value) {
+  if (!value) return BigInt(0);
+  try {
+    return BigInt(value);
+  } catch {
+    return BigInt(0);
+  }
+}
+function portfolioToAssets(tokens) {
+  return tokens.map(portfolioTokenToAsset).filter((token) => token !== null).sort((a, b) => {
+    const balanceA = safeBigInt(a.balance);
+    const balanceB = safeBigInt(b.balance);
+    if (balanceB > balanceA) return 1;
+    if (balanceB < balanceA) return -1;
+    return 0;
+  });
+}
+function isNativeAsset(asset) {
+  return asset.token.toLowerCase() === "0x0000000000000000000000000000000000000000";
+}
+
 // src/core/deposit-service.ts
 function depositRowToEvent(row) {
   const status = row.status;
@@ -359,6 +442,25 @@ function createDepositService(baseUrl, options) {
     if (value.length <= 20) return value;
     return `${value.slice(0, 10)}...${value.slice(-8)}`;
   }
+  const PORTFOLIO_CACHE_TTL_MS = 3e4;
+  const portfolioCache = /* @__PURE__ */ new Map();
+  function cachedPortfolio(key, fetcher) {
+    const now = Date.now();
+    const entry = portfolioCache.get(key);
+    if (entry && entry.expiresAt > now) {
+      debugLog(debug, scope, "portfolio:cache-hit", { key });
+      return entry.promise;
+    }
+    const promise = fetcher().catch((err) => {
+      portfolioCache.delete(key);
+      throw err;
+    });
+    portfolioCache.set(key, {
+      promise,
+      expiresAt: now + PORTFOLIO_CACHE_TTL_MS
+    });
+    return promise;
+  }
   return {
     async setupAccount(params) {
       const url = apiUrl("/setup-account");
@@ -443,78 +545,82 @@ function createDepositService(baseUrl, options) {
       return result;
     },
     async fetchPortfolio(address) {
-      const url = apiUrl(`/portfolio/${address}`);
-      debugLog(debug, scope, "fetchPortfolio:request", { url, address });
-      const response = await fetch(url, {
-        method: "GET",
-        headers: { "Content-Type": "application/json" }
+      return cachedPortfolio(`evm:${address.toLowerCase()}`, async () => {
+        const url = apiUrl(`/portfolio/${address}`);
+        debugLog(debug, scope, "fetchPortfolio:request", { url, address });
+        const response = await fetch(url, {
+          method: "GET",
+          headers: { "Content-Type": "application/json" }
+        });
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({ error: "Unknown error" }));
+          debugError(
+            debug,
+            scope,
+            "fetchPortfolio:failed",
+            error,
+            { status: response.status, address }
+          );
+          throw new Error(
+            error.error || `Portfolio fetch failed: ${response.status}`
+          );
+        }
+        const data = await response.json();
+        const direct = normalizeDirectPortfolio(data);
+        if (direct.tokens.length > 0) {
+          debugLog(debug, scope, "fetchPortfolio:success", {
+            address,
+            source: "direct",
+            tokenCount: direct.tokens.length,
+            totalUsd: direct.totalUsd
+          });
+          return direct;
+        }
+        const portfolioData = extractOrchestratorPortfolio(data);
+        if (portfolioData) {
+          const normalized = normalizeOrchestratorPortfolio(portfolioData);
+          debugLog(debug, scope, "fetchPortfolio:success", {
+            address,
+            source: "orchestrator",
+            tokenCount: normalized.tokens.length,
+            totalUsd: normalized.totalUsd
+          });
+          return normalized;
+        }
+        debugLog(debug, scope, "fetchPortfolio:empty", { address });
+        return { tokens: [], totalUsd: 0 };
       });
-      if (!response.ok) {
-        const error = await response.json().catch(() => ({ error: "Unknown error" }));
-        debugError(
-          debug,
-          scope,
-          "fetchPortfolio:failed",
-          error,
-          { status: response.status, address }
-        );
-        throw new Error(
-          error.error || `Portfolio fetch failed: ${response.status}`
-        );
-      }
-      const data = await response.json();
-      const direct = normalizeDirectPortfolio(data);
-      if (direct.tokens.length > 0) {
-        debugLog(debug, scope, "fetchPortfolio:success", {
-          address,
-          source: "direct",
-          tokenCount: direct.tokens.length,
-          totalUsd: direct.totalUsd
+    },
+    async fetchSolanaPortfolio(address) {
+      return cachedPortfolio(`sol:${address}`, async () => {
+        const url = apiUrl(`/portfolio/solana/${address}`);
+        debugLog(debug, scope, "fetchSolanaPortfolio:request", { url, address });
+        const response = await fetch(url, {
+          method: "GET",
+          headers: { "Content-Type": "application/json" }
         });
-        return direct;
-      }
-      const portfolioData = extractOrchestratorPortfolio(data);
-      if (portfolioData) {
-        const normalized = normalizeOrchestratorPortfolio(portfolioData);
-        debugLog(debug, scope, "fetchPortfolio:success", {
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({ error: "Unknown error" }));
+          debugError(
+            debug,
+            scope,
+            "fetchSolanaPortfolio:failed",
+            error,
+            { status: response.status, address }
+          );
+          throw new Error(
+            error.error || `Solana portfolio fetch failed: ${response.status}`
+          );
+        }
+        const data = await response.json();
+        const normalized = normalizeDirectPortfolio(data);
+        debugLog(debug, scope, "fetchSolanaPortfolio:success", {
           address,
-          source: "orchestrator",
           tokenCount: normalized.tokens.length,
           totalUsd: normalized.totalUsd
         });
         return normalized;
-      }
-      debugLog(debug, scope, "fetchPortfolio:empty", { address });
-      return { tokens: [], totalUsd: 0 };
-    },
-    async fetchSolanaPortfolio(address) {
-      const url = apiUrl(`/portfolio/solana/${address}`);
-      debugLog(debug, scope, "fetchSolanaPortfolio:request", { url, address });
-      const response = await fetch(url, {
-        method: "GET",
-        headers: { "Content-Type": "application/json" }
       });
-      if (!response.ok) {
-        const error = await response.json().catch(() => ({ error: "Unknown error" }));
-        debugError(
-          debug,
-          scope,
-          "fetchSolanaPortfolio:failed",
-          error,
-          { status: response.status, address }
-        );
-        throw new Error(
-          error.error || `Solana portfolio fetch failed: ${response.status}`
-        );
-      }
-      const data = await response.json();
-      const normalized = normalizeDirectPortfolio(data);
-      debugLog(debug, scope, "fetchSolanaPortfolio:success", {
-        address,
-        tokenCount: normalized.tokens.length,
-        totalUsd: normalized.totalUsd
-      });
-      return normalized;
     },
     async checkAccount(address) {
       const url = apiUrl(`/check/${address}`);
@@ -857,111 +963,6 @@ function extractNumericString(data, key) {
   const parsed = Number(value);
   return Number.isFinite(parsed) ? parsed : null;
 }
-function getAssetId(asset) {
-  return `${asset.chainId}:${asset.token.toLowerCase()}`;
-}
-function isEvmAddress(value) {
-  return /^0x[a-fA-F0-9]{40}$/.test(value);
-}
-function portfolioTokenToAsset(token) {
-  if (typeof token.chainId !== "number") return null;
-  if (!isEvmAddress(token.address)) return null;
-  return {
-    id: getAssetId({ chainId: token.chainId, token: token.address }),
-    chainId: token.chainId,
-    token: token.address,
-    symbol: token.symbol,
-    name: token.name,
-    decimals: token.decimals,
-    balance: token.balance,
-    balanceUsd: token.balanceUsd
-  };
-}
-function portfolioToAssets(tokens) {
-  return tokens.map(portfolioTokenToAsset).filter((token) => token !== null).sort((a, b) => {
-    const balanceA = safeBigInt(a.balance);
-    const balanceB = safeBigInt(b.balance);
-    if (balanceB > balanceA) return 1;
-    if (balanceB < balanceA) return -1;
-    return 0;
-  });
-}
-function safeBigInt(value) {
-  if (!value) return BigInt(0);
-  try {
-    return BigInt(value);
-  } catch {
-    return BigInt(0);
-  }
-}
-function isNativeAsset(asset) {
-  return asset.token.toLowerCase() === "0x0000000000000000000000000000000000000000";
-}
-
-// src/core/formatters.ts
-var currencyFormatter = new Intl.NumberFormat("en-US", {
-  style: "currency",
-  currency: "USD",
-  maximumFractionDigits: 2
-});
-var tokenFormatter = new Intl.NumberFormat("en-US", {
-  maximumFractionDigits: 6
-});
-function formatUserError(raw) {
-  const lower = raw.toLowerCase();
-  if (lower.includes("user rejected") || lower.includes("user denied")) {
-    return "Transaction cancelled";
-  }
-  if (lower.includes("insufficient funds")) {
-    return "Insufficient funds for this transaction";
-  }
-  if (lower.includes("nonce too low") || lower.includes("nonce too high")) {
-    return "Transaction conflict \u2014 please try again";
-  }
-  if (lower.includes("execution reverted")) {
-    return "Transaction would fail on-chain";
-  }
-  if (lower.includes("timed out") || lower.includes("took too long")) {
-    return "Request timed out \u2014 please try again";
-  }
-  if (lower.includes("econnrefused") || lower.includes("econnreset") || lower.includes("enotfound") || lower.includes("fetch failed")) {
-    return "Service unavailable \u2014 please try again";
-  }
-  if (lower.includes("recent blockhash") || lower.includes("latest blockhash")) {
-    return "Solana RPC unavailable \u2014 please retry";
-  }
-  if (lower.includes("network") || lower.includes("disconnected")) {
-    return "Network error \u2014 check your connection";
-  }
-  if (lower.includes("rate limit") || lower.includes("429")) {
-    return "Rate limited \u2014 please try again shortly";
-  }
-  let cleaned = raw;
-  const stripMarkers = [
-    "\n\nRequest Arguments:",
-    "\nRaw Call Arguments:",
-    "\nRequest body:",
-    "\nContract Call:",
-    "\nDocs:",
-    "\nDetails:",
-    "\nVersion:",
-    "\nURL:"
-  ];
-  for (const marker of stripMarkers) {
-    const idx = cleaned.indexOf(marker);
-    if (idx !== -1) {
-      cleaned = cleaned.slice(0, idx).trim();
-    }
-  }
-  cleaned = cleaned.replace(/https?:\/\/\S+/g, "").trim();
-  if (cleaned.length === 0) {
-    return "An unexpected error occurred";
-  }
-  if (cleaned.length > 120) {
-    return cleaned.slice(0, 120) + "...";
-  }
-  return cleaned;
-}
 
 // src/core/useLatestRef.ts
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
@@ -986,14 +987,100 @@ function setVar(targets, prop, value) {
     el.style.setProperty(prop, value);
   }
 }
+function clearVar(targets, prop) {
+  for (const el of targets) {
+    el.style.removeProperty(prop);
+  }
+}
+function normalizeHex(input) {
+  const v = input.trim().replace(/^#/, "");
+  if (/^[0-9a-fA-F]{3}$/.test(v)) {
+    return v.split("").map((c) => c + c).join("").toLowerCase();
+  }
+  if (/^[0-9a-fA-F]{6}$/.test(v)) return v.toLowerCase();
+  return null;
+}
+function hexToHsl(hex) {
+  const normalized = normalizeHex(hex);
+  if (!normalized) return null;
+  const r = parseInt(normalized.slice(0, 2), 16) / 255;
+  const g = parseInt(normalized.slice(2, 4), 16) / 255;
+  const b = parseInt(normalized.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h *= 60;
+  }
+  return { h, s: s * 100, l: l * 100 };
+}
+var clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+var hsl = ({ h, s, l }) => `hsl(${h.toFixed(1)} ${clamp(s, 0, 100).toFixed(1)}% ${clamp(l, 0, 100).toFixed(1)}%)`;
+function deriveCustomPrimary(baseHex) {
+  const base = hexToHsl(baseHex);
+  if (!base) return null;
+  const { h, s, l } = base;
+  const direction = l < 25 ? 1 : -1;
+  const hoverL = clamp(l + 8 * direction, 4, 96);
+  const activeL = clamp(l + 14 * direction, 2, 98);
+  const disabledBg = {
+    h,
+    s: clamp(s * 0.25, 0, 20),
+    l: clamp(l > 75 ? l - 15 : 88, 12, 92)
+  };
+  const disabledFg = {
+    h,
+    s: clamp(s * 0.35, 0, 25),
+    l: clamp(l > 75 ? 35 : 45, 30, 60)
+  };
+  const norm = normalizeHex(baseHex);
+  const ch = (i) => {
+    const v = parseInt(norm.slice(i, i + 2), 16) / 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  };
+  const y = 0.2126 * ch(0) + 0.7152 * ch(2) + 0.0722 * ch(4);
+  const foreground = y > 0.45 ? "#18181b" : "#fafafa";
+  return {
+    base: hsl({ h, s, l }),
+    hover: hsl({ h, s, l: hoverL }),
+    active: hsl({ h, s, l: activeL }),
+    disabledBg: hsl(disabledBg),
+    disabledFg: hsl(disabledFg),
+    foreground
+  };
+}
+var CUSTOM_PRIMARY_VARS = [
+  "--rs-primary",
+  "--rs-primary-hover",
+  "--rs-primary-active",
+  "--rs-primary-disabled-bg",
+  "--rs-primary-disabled-fg",
+  "--rs-primary-foreground",
+  "--rs-border-accent"
+];
 function applyTheme(element, theme) {
   if (!element) return;
   const parent = element.parentElement;
   const targets = parent?.classList.contains("rs-modal-content") ? [element, parent] : [element];
   if (theme?.mode) {
-    element.setAttribute("data-theme", theme.mode);
+    for (const t of targets) t.setAttribute("data-theme", theme.mode);
   } else {
-    element.removeAttribute("data-theme");
+    for (const t of targets) t.removeAttribute("data-theme");
   }
   if (theme?.fontColor) {
     setVar(targets, "--rs-foreground", theme.fontColor);
@@ -1002,15 +1089,33 @@ function applyTheme(element, theme) {
     setVar(targets, "--rs-icon", theme.iconColor);
   }
   if (theme?.ctaColor) {
-    setVar(targets, "--rs-primary", theme.ctaColor);
-    setVar(targets, "--rs-border-accent", theme.ctaColor);
-    setVar(
-      targets,
-      "--rs-primary-hover",
-      theme.ctaHoverColor ?? theme.ctaColor
-    );
-  } else if (theme?.ctaHoverColor) {
-    setVar(targets, "--rs-primary-hover", theme.ctaHoverColor);
+    const derived = deriveCustomPrimary(theme.ctaColor);
+    if (derived) {
+      setVar(targets, "--rs-primary", derived.base);
+      setVar(
+        targets,
+        "--rs-primary-hover",
+        theme.ctaHoverColor ?? derived.hover
+      );
+      setVar(targets, "--rs-primary-active", derived.active);
+      setVar(targets, "--rs-primary-disabled-bg", derived.disabledBg);
+      setVar(targets, "--rs-primary-disabled-fg", derived.disabledFg);
+      setVar(targets, "--rs-primary-foreground", derived.foreground);
+      setVar(targets, "--rs-border-accent", derived.base);
+    } else {
+      setVar(targets, "--rs-primary", theme.ctaColor);
+      setVar(targets, "--rs-border-accent", theme.ctaColor);
+      setVar(
+        targets,
+        "--rs-primary-hover",
+        theme.ctaHoverColor ?? theme.ctaColor
+      );
+    }
+  } else {
+    for (const v of CUSTOM_PRIMARY_VARS) clearVar(targets, v);
+    if (theme?.ctaHoverColor) {
+      setVar(targets, "--rs-primary-hover", theme.ctaHoverColor);
+    }
   }
   if (theme?.borderColor) {
     setVar(targets, "--rs-border", theme.borderColor);
@@ -1028,355 +1133,494 @@ function applyTheme(element, theme) {
   }
 }
 
-// src/components/ui/Spinner.tsx
+// src/components/ui/BodyHeader.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function Spinner({ className }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className: `rs-spinner ${className || ""}`,
-      fill: "none",
-      viewBox: "0 0 20 21",
-      children: [
-        /* @__PURE__ */ jsx2(
+function BodyHeader({
+  icon,
+  title,
+  subtitle,
+  variant = "default"
+}) {
+  const iconClasses = [
+    "rs-body-header-icon",
+    variant === "success" ? "rs-body-header-icon--success" : "",
+    variant === "error" ? "rs-body-header-icon--error" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: "rs-body-header", children: [
+    /* @__PURE__ */ jsx2("div", { className: iconClasses, children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "rs-body-header-text", children: [
+      /* @__PURE__ */ jsx2("h2", { className: "rs-body-header-title", children: title }),
+      subtitle && /* @__PURE__ */ jsx2("p", { className: "rs-body-header-subtitle", children: subtitle })
+    ] })
+  ] });
+}
+BodyHeader.displayName = "BodyHeader";
+
+// src/components/ui/PoweredBy.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var rhinestoneLogo = /* @__PURE__ */ jsxs2(
+  "svg",
+  {
+    className: "rs-powered-by-logo",
+    viewBox: "0 0 72 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxs2("g", { fill: "currentColor", clipPath: "url(#rs-pb-clip)", children: [
+        /* @__PURE__ */ jsx3(
           "path",
           {
-            d: "M10 0.5C8.02219 0.5 6.08879 1.08649 4.4443 2.1853C2.79981 3.28412 1.51809 4.8459 0.761209 6.67316C0.00433288 8.50043 -0.1937 10.5111 0.192152 12.4509C0.578004 14.3907 1.53041 16.1725 2.92894 17.5711C4.32746 18.9696 6.10929 19.922 8.0491 20.3078C9.98891 20.6937 11.9996 20.4957 13.8268 19.7388C15.6541 18.9819 17.2159 17.7002 18.3147 16.0557C19.4135 14.4112 20 12.4778 20 10.5C20 7.84783 18.9464 5.3043 17.0711 3.42893C15.1957 1.55357 12.6522 0.5 10 0.5ZM10 17.7727C8.56159 17.7727 7.15549 17.3462 5.95949 16.547C4.7635 15.7479 3.83134 14.6121 3.28088 13.2831C2.73042 11.9542 2.5864 10.4919 2.86702 9.08116C3.14764 7.67039 3.8403 6.37451 4.85741 5.3574C5.87452 4.3403 7.17039 3.64764 8.58116 3.36702C9.99193 3.0864 11.4542 3.23042 12.7832 3.78088C14.1121 4.33133 15.2479 5.26349 16.0471 6.45949C16.8462 7.65548 17.2727 9.06159 17.2727 10.5C17.2727 12.4288 16.5065 14.2787 15.1426 15.6426C13.7787 17.0065 11.9288 17.7727 10 17.7727Z",
-            fill: "currentColor",
-            opacity: 0.3
+            opacity: "0.5",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M10.48 14.82a4.3 4.3 0 0 1-2.9 1 4.3 4.3 0 0 1-2.4-1 25 25 0 0 1-2.08-1.95l-.13-.13c-.78-.78-1.46-1.46-1.94-2.08a4.3 4.3 0 0 1-1-2.9c.05-.96.48-1.72 1-2.4a25 25 0 0 1 1.94-2.08l.07-.06.06-.07a25 25 0 0 1 2.08-1.94 4.3 4.3 0 0 1 2.9-1c.96.05 1.73.48 2.4 1 .62.49 1.3 1.17 2.08 1.94l.13.13c.77.78 1.46 1.46 1.94 2.09a4.3 4.3 0 0 1 1 2.9 4.3 4.3 0 0 1-1 2.39c-.48.62-1.17 1.3-1.94 2.08l-.07.07-.06.06c-.78.78-1.46 1.46-2.08 1.94m-8.9-6.63c.07 1.02.9 1.86 2.56 3.52s2.5 2.5 3.53 2.56h.32c1.03-.06 1.86-.9 3.53-2.56s2.5-2.5 2.56-3.52v-.33c-.07-1.03-.9-1.86-2.56-3.52-1.67-1.67-2.5-2.5-3.53-2.56h-.32c-1.03.06-1.86.89-3.53 2.56-1.66 1.66-2.5 2.5-2.56 3.52z"
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3("path", { d: "M3.66 8.01q.02-.27.28-.35a4.6 4.6 0 0 0 2.53-1.48q.72-.8 1-2.05a.4.4 0 0 1 .36-.29c.17 0 .32.12.36.29a4.6 4.6 0 0 0 1.47 2.52c.55.49 1.21.8 2.06 1a.4.4 0 0 1 .28.36.4.4 0 0 1-.28.36 4.6 4.6 0 0 0-2.53 1.47 4.6 4.6 0 0 0-1 2.06.4.4 0 0 1-.36.28.4.4 0 0 1-.36-.28A4.6 4.6 0 0 0 6 9.38a4.6 4.6 0 0 0-2.06-1.01.4.4 0 0 1-.28-.36m26.46-3.44c0 .51.38.87.96.87s.95-.36.95-.87c0-.52-.37-.86-.95-.86s-.96.34-.96.86m.2 1.44v5.33h1.53V6.01zm-4.4 5.33h-1.55V3.88h1.54v2.98c.25-.5.8-1.01 1.6-1.01 1.29 0 1.87.83 1.87 2.28v3.21h-1.54V8.3c0-.77-.34-1.16-.92-1.16-.67 0-1 .53-1 1.3zm-4.45 0h-1.54V6.01h1.54l-.27 1.22a.1.1 0 0 0 .02.1.1.1 0 0 0 .1.04q.09 0 .1-.09c.24-.84.93-1.36 1.64-1.36q.4.01.57.05v1.42l-.67-.04c-.67 0-1.5.31-1.5 2zm13 0h-1.55V6.01h1.54l-.02.9a1.8 1.8 0 0 1 1.61-1.06c1.3 0 1.88.83 1.88 2.28v3.21H36.4V8.3c0-.77-.35-1.16-.93-1.16-.67 0-1 .53-1 1.3z" }),
+        /* @__PURE__ */ jsx3(
           "path",
           {
-            d: "M10 3.22767C11.7423 3.22846 13.4276 3.8412 14.7556 4.95667C16.0837 6.07214 16.9681 7.61784 17.2512 9.31825C17.3012 9.64364 17.4662 9.94096 17.7169 10.1573C17.9677 10.3737 18.2878 10.4951 18.6205 10.5C18.8211 10.5001 19.0193 10.457 19.2012 10.3735C19.3832 10.2901 19.5445 10.1684 19.674 10.017C19.8036 9.86549 19.8981 9.68789 19.9511 9.49656C20.004 9.30523 20.0141 9.10478 19.9807 8.90918C19.5986 6.56305 18.3843 4.42821 16.5554 2.88726C14.7265 1.34631 12.4025 0.5 10 0.5C7.59751 0.5 5.27354 1.34631 3.44461 2.88726C1.61569 4.42821 0.401366 6.56305 0.0192815 8.90918C-0.0141442 9.10478 -0.00402016 9.30523 0.0489472 9.49656C0.101914 9.68789 0.196449 9.86549 0.325956 10.017C0.455463 10.1684 0.616823 10.2901 0.798778 10.3735C0.980732 10.457 1.1789 10.5001 1.37945 10.5C1.71216 10.4951 2.03235 10.3737 2.28307 10.1573C2.5338 9.94096 2.69883 9.64364 2.74882 9.31825C3.03193 7.61784 3.91633 6.07214 5.24436 4.95667C6.57239 3.8412 8.25775 3.22846 10 3.22767Z",
-            fill: "currentColor"
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M38.74 8.69c0 1.63 1.01 2.82 2.7 2.82 1.51 0 2.32-.82 2.55-1.73l-1.43-.26c-.1.37-.47.82-1.12.82-.67 0-1.23-.6-1.24-1.31H44q.05-.19.06-.56a2.55 2.55 0 0 0-2.6-2.63c-1.5 0-2.72 1.2-2.72 2.85m3.82-.58h-2.3a1.2 1.2 0 0 1 1.18-1.13c.6 0 1.14.45 1.12 1.13"
           }
-        )
-      ]
-    }
-  );
-}
-
-// src/components/ui/Button.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function Button({
-  children,
-  variant = "accent",
-  size = "default",
-  loading = false,
-  fullWidth = false,
-  disabled,
-  className = "",
-  ...props
+        ),
+        /* @__PURE__ */ jsx3("path", { d: "M47.1 11.51c-1.2 0-2.33-.41-2.55-1.65l1.43-.21q.27.8 1.1.79c.5 0 .77-.24.77-.55 0-.27-.2-.45-.75-.55l-.5-.1c-1.1-.24-1.77-.74-1.77-1.63 0-1.06.91-1.78 2.25-1.78 1.26 0 2.2.59 2.32 1.68l-1.41.22c-.07-.52-.43-.82-.91-.82-.5 0-.75.26-.75.57 0 .25.17.42.63.51l.5.1c1.28.26 1.94.77 1.94 1.75 0 1.01-1.03 1.66-2.3 1.66" }),
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M54.44 8.68c0 1.53 1.08 2.83 2.78 2.83s2.79-1.3 2.79-2.83c0-1.55-1.1-2.84-2.79-2.84-1.7 0-2.78 1.29-2.78 2.84m4.02 0c0 .98-.59 1.45-1.24 1.45-.64 0-1.23-.47-1.23-1.45 0-.97.59-1.47 1.23-1.47.65 0 1.24.48 1.24 1.47"
+          }
+        ),
+        /* @__PURE__ */ jsx3("path", { d: "M62.4 11.34h-1.53V6.01h1.54l-.02.9a1.8 1.8 0 0 1 1.6-1.06c1.3 0 1.89.83 1.89 2.28v3.21h-1.54V8.3c0-.77-.34-1.16-.93-1.16-.66 0-1 .53-1 1.3z" }),
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M66.68 8.69c0 1.63 1.02 2.82 2.71 2.82 1.51 0 2.31-.82 2.55-1.73l-1.44-.26c-.1.37-.47.82-1.12.82-.67 0-1.23-.6-1.24-1.31h3.8q.06-.19.06-.56a2.55 2.55 0 0 0-2.6-2.63c-1.5 0-2.72 1.2-2.72 2.85m3.82-.58h-2.3a1.2 1.2 0 0 1 1.18-1.13c.6 0 1.15.45 1.12 1.13"
+          }
+        ),
+        /* @__PURE__ */ jsx3("path", { d: "M52.44 9.05V7.26h1.53V6h-1.53V4.42h-1.53V6h-1.1v1.26h1.1v1.85l.02.49a1.9 1.9 0 0 0 1.67 1.67c.22.03.47.03.62.03h.65V9.87h-.61c-.4 0-.59 0-.7-.12-.12-.11-.12-.3-.12-.64z" })
+      ] }),
+      /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsx3("clipPath", { id: "rs-pb-clip", children: /* @__PURE__ */ jsx3("path", { fill: "#fff", d: "M0 0h72v16H0z" }) }) })
+    ]
+  }
+);
+function PoweredBy() {
+  return /* @__PURE__ */ jsxs2("div", { className: "rs-powered-by", "aria-label": "Powered by Rhinestone", children: [
+    /* @__PURE__ */ jsx3("span", { children: "Powered by" }),
+    /* @__PURE__ */ jsx3(
+      "a",
+      {
+        className: "rs-powered-by-link",
+        href: "https://www.rhinestone.dev",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: rhinestoneLogo
+      }
+    )
+  ] });
+}
+PoweredBy.displayName = "PoweredBy";
+
+// src/components/ui/ListRow.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ListRow({
+  leading,
+  leadingMedia,
+  title,
+  subtitle,
+  meta,
+  trailing,
+  className = "",
+  ...props
 }) {
-  const classes = [
-    "rs-button",
-    `rs-button--${variant}`,
-    `rs-button--size-${size}`,
-    fullWidth ? "rs-button--full-width" : "",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "button",
     {
-      className: classes,
-      disabled: disabled || loading,
-      "aria-busy": loading || void 0,
+      type: "button",
+      className: `rs-list-row ${className}`.trim(),
       ...props,
       children: [
-        /* @__PURE__ */ jsx3("span", { className: loading ? "rs-button__content--hidden" : "", children }),
-        loading && /* @__PURE__ */ jsx3("span", { className: "rs-button__spinner", children: /* @__PURE__ */ jsx3(Spinner, { className: "rs-spinner--sm" }) })
+        leadingMedia ? /* @__PURE__ */ jsx4("span", { className: "rs-list-row-leading rs-list-row-leading--media", children: /* @__PURE__ */ jsx4("img", { src: leadingMedia, alt: "" }) }) : leading ? /* @__PURE__ */ jsx4("span", { className: "rs-list-row-leading", children: leading }) : null,
+        /* @__PURE__ */ jsxs3("div", { className: "rs-list-row-body", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "rs-list-row-text", children: [
+            /* @__PURE__ */ jsx4("span", { className: "rs-list-row-title", children: title }),
+            subtitle && /* @__PURE__ */ jsx4("span", { className: "rs-list-row-subtitle", children: subtitle })
+          ] }),
+          meta && /* @__PURE__ */ jsx4("div", { className: "rs-list-row-meta", children: meta })
+        ] }),
+        /* @__PURE__ */ jsx4("span", { className: "rs-list-row-chevron", children: trailing ?? /* @__PURE__ */ jsx4(ChevronRightIcon, {}) })
       ]
     }
   );
 }
-Button.displayName = "Button";
+ListRow.displayName = "ListRow";
 
-// src/components/ui/Icons.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function WalletIcon() {
-  return /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx4(
-      "rect",
+// src/components/ui/WalletBadgeIcons.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var RabbyIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsxs4("g", { clipPath: "url(#rs-rabby-clip)", children: [
+    /* @__PURE__ */ jsx5(
+      "mask",
+      {
+        id: "rs-rabby-mask",
+        style: { maskType: "luminance" },
+        maskUnits: "userSpaceOnUse",
+        x: "0",
+        y: "0",
+        width: "20",
+        height: "20",
+        children: /* @__PURE__ */ jsx5(
+          "path",
+          {
+            d: "M20 10C20 4.47688 15.5231 0 10 0C4.47688 0 0 4.47688 0 10C0 15.5231 4.47688 20 10 20C15.5231 20 20 15.5231 20 10Z",
+            fill: "white"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs4("g", { mask: "url(#rs-rabby-mask)", children: [
+      /* @__PURE__ */ jsx5(
+        "path",
+        {
+          d: "M20 10C20 4.47688 15.5231 0 10 0C4.47688 0 0 4.47688 0 10C0 15.5231 4.47688 20 10 20C15.5231 20 20 15.5231 20 10Z",
+          fill: "#7084FF"
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "path",
+        {
+          d: "M17.2515 10.8675C17.8265 9.57871 14.9847 5.97871 12.2697 4.47934C10.5584 3.31684 8.77529 3.47684 8.41404 3.98684C7.62154 5.10684 11.039 6.05559 13.3234 7.16184C12.8322 7.37621 12.3697 7.76059 12.0972 8.25184C11.2453 7.31871 9.37529 6.51434 7.18154 7.16246C5.70279 7.59871 4.47404 8.62684 3.99904 10.18C3.85708 10.1175 3.70178 10.0914 3.5472 10.1041C3.39262 10.1168 3.24365 10.1678 3.11376 10.2526C2.98388 10.3373 2.87719 10.4532 2.80336 10.5896C2.72952 10.726 2.69088 10.8786 2.69092 11.0337C2.69092 11.55 3.10717 11.9681 3.62154 11.9681C3.71654 11.9681 4.01467 11.9037 4.01467 11.9037L8.77529 11.9387C6.87154 14.9687 5.36654 15.4118 5.36654 15.9368C5.36654 16.4618 6.80654 16.32 7.34717 16.1243C9.93467 15.1868 12.714 12.2675 13.1909 11.4268C15.1934 11.6775 16.8765 11.7075 17.2515 10.8675Z",
+          fill: "url(#rs-rabby-grad0)"
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M13.3147 7.15865L13.3216 7.16177C13.4279 7.1199 13.4104 6.96302 13.3816 6.8399C13.3147 6.55615 12.161 5.41365 11.0779 4.90177C9.60224 4.20427 8.51536 4.2399 8.35474 4.56177C8.65474 5.18052 10.0485 5.76052 11.5047 6.3674C12.1235 6.6249 12.7529 6.88677 13.3147 7.15865Z",
+          fill: "url(#rs-rabby-grad1)"
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M11.4522 13.3856C11.1193 13.26 10.7791 13.1548 10.4335 13.0706C10.8422 12.3369 10.9278 11.2506 10.5416 10.5644C10.0003 9.60001 9.32033 9.08688 7.73971 9.08688C6.87096 9.08688 4.53096 9.38063 4.48971 11.3406C4.48471 11.5456 4.4895 11.7346 4.50408 11.9075L8.77721 11.9388C8.20096 12.8556 7.66158 13.5363 7.18908 14.0531C7.75596 14.1994 8.22408 14.3219 8.65408 14.4344C9.06158 14.5406 9.43471 14.6381 9.82471 14.7381C10.4141 14.3069 10.9685 13.8381 11.4522 13.3856Z",
+          fill: "url(#rs-rabby-grad2)"
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "path",
+        {
+          d: "M3.94351 11.7048C4.11789 13.1936 4.96101 13.7773 6.68476 13.9498C8.40851 14.1223 9.39664 14.0067 10.7123 14.1273C11.8116 14.2273 12.7929 14.7898 13.1573 14.5954C13.4848 14.4204 13.301 13.7892 12.8629 13.3836C12.2941 12.8586 11.5079 12.4936 10.1241 12.3642C10.3998 11.6061 10.3223 10.5436 9.89414 9.96543C9.27476 9.1298 8.13164 8.7523 6.68476 8.9173C5.17226 9.0898 3.72414 9.83605 3.94351 11.7048Z",
+          fill: "url(#rs-rabby-grad3)"
+        }
+      )
+    ] })
+  ] }),
+  /* @__PURE__ */ jsxs4("defs", { children: [
+    /* @__PURE__ */ jsxs4(
+      "linearGradient",
       {
-        x: "3",
-        y: "6",
-        width: "18",
-        height: "13",
-        rx: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
+        id: "rs-rabby-grad0",
+        x1: "7.00904",
+        y1: "9.72621",
+        x2: "17.1328",
+        y2: "12.5875",
+        gradientUnits: "userSpaceOnUse",
+        children: [
+          /* @__PURE__ */ jsx5("stop", { stopColor: "white" }),
+          /* @__PURE__ */ jsx5("stop", { offset: "1", stopColor: "white" })
+        ]
       }
     ),
-    /* @__PURE__ */ jsx4(
-      "path",
+    /* @__PURE__ */ jsxs4(
+      "linearGradient",
       {
-        d: "M16 12.5a1 1 0 100-2 1 1 0 000 2z",
-        fill: "currentColor",
-        stroke: "none"
+        id: "rs-rabby-grad1",
+        x1: "15.4216",
+        y1: "9.5324",
+        x2: "8.09661",
+        y2: "2.21365",
+        gradientUnits: "userSpaceOnUse",
+        children: [
+          /* @__PURE__ */ jsx5("stop", { stopColor: "#8697FF" }),
+          /* @__PURE__ */ jsx5("stop", { offset: "1", stopColor: "#8697FF", stopOpacity: "0" })
+        ]
       }
     ),
-    /* @__PURE__ */ jsx4("path", { d: "M3 10h18", strokeLinecap: "round" })
-  ] });
-}
-function ExternalLinkIcon() {
-  return /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx4(
-      "path",
+    /* @__PURE__ */ jsxs4(
+      "linearGradient",
       {
-        d: "M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
+        id: "rs-rabby-grad2",
+        x1: "11.6553",
+        y1: "13.6413",
+        x2: "4.63033",
+        y2: "9.61626",
+        gradientUnits: "userSpaceOnUse",
+        children: [
+          /* @__PURE__ */ jsx5("stop", { stopColor: "#8697FF" }),
+          /* @__PURE__ */ jsx5("stop", { offset: "1", stopColor: "#8697FF", stopOpacity: "0" })
+        ]
       }
     ),
-    /* @__PURE__ */ jsx4("path", { d: "M15 3h6v6", strokeLinecap: "round", strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx4("path", { d: "M10 14L21 3", strokeLinecap: "round", strokeLinejoin: "round" })
-  ] });
-}
-function TransferIcon() {
-  return /* @__PURE__ */ jsx4("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs4(
+      "linearGradient",
+      {
+        id: "rs-rabby-grad3",
+        x1: "7.61476",
+        y1: "9.64918",
+        x2: "12.3748",
+        y2: "15.6773",
+        gradientUnits: "userSpaceOnUse",
+        children: [
+          /* @__PURE__ */ jsx5("stop", { stopColor: "white" }),
+          /* @__PURE__ */ jsx5("stop", { offset: "0.984", stopColor: "#D1D8FF" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx5("clipPath", { id: "rs-rabby-clip", children: /* @__PURE__ */ jsx5("rect", { width: "20", height: "20", fill: "white" }) })
+  ] })
+] });
+var PhantomIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx5(
     "path",
     {
-      d: "M6.18056 9.99924H10V13.8187M3.13264 9.99924H3.125M6.95208 13.8187H6.94444M10.0076 16.8742H10M16.8826 9.99924H16.875M3.125 13.8187H4.27083M12.6736 9.99924H14.2014M3.125 16.8742H6.94444M10 2.36035V6.94369M14.2778 16.8742H15.6528C16.0806 16.8742 16.2945 16.8742 16.4579 16.791C16.6016 16.7177 16.7185 16.6009 16.7917 16.4572C16.875 16.2937 16.875 16.0798 16.875 15.652V14.277C16.875 13.8492 16.875 13.6353 16.7917 13.4719C16.7185 13.3282 16.6016 13.2113 16.4579 13.1381C16.2945 13.0548 16.0806 13.0548 15.6528 13.0548H14.2778C13.85 13.0548 13.6361 13.0548 13.4726 13.1381C13.3289 13.2113 13.2121 13.3282 13.1388 13.4719C13.0556 13.6353 13.0556 13.8492 13.0556 14.277V15.652C13.0556 16.0798 13.0556 16.2937 13.1388 16.4572C13.2121 16.6009 13.3289 16.7177 13.4726 16.791C13.6361 16.8742 13.85 16.8742 14.2778 16.8742ZM14.2778 6.94369H15.6528C16.0806 6.94369 16.2945 6.94369 16.4579 6.86043C16.6016 6.78719 16.7185 6.67033 16.7917 6.52659C16.875 6.36319 16.875 6.14928 16.875 5.72146V4.34646C16.875 3.91864 16.875 3.70474 16.7917 3.54133C16.7185 3.3976 16.6016 3.28074 16.4579 3.2075C16.2945 3.12424 16.0806 3.12424 15.6528 3.12424H14.2778C13.85 3.12424 13.6361 3.12424 13.4726 3.2075C13.3289 3.28074 13.2121 3.3976 13.1388 3.54133C13.0556 3.70474 13.0556 3.91864 13.0556 4.34646V5.72146C13.0556 6.14928 13.0556 6.36319 13.1388 6.52659C13.2121 6.67033 13.3289 6.78719 13.4726 6.86043C13.6361 6.94369 13.85 6.94369 14.2778 6.94369ZM4.34722 6.94369H5.72222C6.15004 6.94369 6.36395 6.94369 6.52735 6.86043C6.67109 6.78719 6.78795 6.67033 6.86119 6.52659C6.94444 6.36319 6.94444 6.14928 6.94444 5.72146V4.34646C6.94444 3.91864 6.94444 3.70474 6.86119 3.54133C6.78795 3.3976 6.67109 3.28074 6.52735 3.2075C6.36395 3.12424 6.15004 3.12424 5.72222 3.12424H4.34722C3.9194 3.12424 3.7055 3.12424 3.54209 3.2075C3.39836 3.28074 3.2815 3.3976 3.20826 3.54133C3.125 3.70474 3.125 3.91864 3.125 4.34646V5.72146C3.125 6.14928 3.125 6.36319 3.20826 6.52659C3.2815 6.67033 3.39836 6.78719 3.54209 6.86043C3.7055 6.94369 3.9194 6.94369 4.34722 6.94369Z",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+      d: "M15.1852 0H4.81481C2.15567 0 0 2.15567 0 4.81481V15.1852C0 17.8443 2.15567 20 4.81481 20H15.1852C17.8443 20 20 17.8443 20 15.1852V4.81481C20 2.15567 17.8443 0 15.1852 0Z",
+      fill: "#AB9FF2"
     }
-  ) });
-}
-function CheckIcon() {
-  return /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx4(
+  ),
+  /* @__PURE__ */ jsx5(
     "path",
     {
-      d: "M5 13l4 4L19 7",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M8.61617 12.9486C7.77876 14.2315 6.37579 15.855 4.50894 15.855C3.62635 15.855 2.77783 15.4917 2.77783 13.9136C2.77783 9.89449 8.26542 3.67264 13.3569 3.67264C16.2534 3.67264 17.4075 5.68227 17.4075 7.9643C17.4075 10.8936 15.5067 14.2428 13.6171 14.2428C13.0175 14.2428 12.7232 13.9136 12.7232 13.3913C12.7232 13.255 12.7459 13.1075 12.7912 12.9486C12.1462 14.0499 10.9015 15.0717 9.73617 15.0717C8.88765 15.0717 8.45765 14.538 8.45765 13.7887C8.45765 13.5162 8.51431 13.2325 8.61617 12.9486ZM15.4958 7.88486C15.4958 8.54986 15.1032 8.88245 14.6643 8.88245C14.2189 8.88245 13.8332 8.54986 13.8332 7.88486C13.8332 7.21986 14.2189 6.88745 14.6645 6.88745C15.1034 6.88745 15.4958 7.22004 15.4958 7.88486ZM13.0017 7.88486C13.0017 8.54986 12.6095 8.88245 12.1706 8.88245C11.7251 8.88245 11.3393 8.54986 11.3393 7.88505C11.3393 7.22005 11.7251 6.88745 12.1706 6.88745C12.6095 6.88745 13.0017 7.22005 13.0017 7.88505",
+      fill: "#FFFDF8"
     }
-  ) });
-}
-function ChevronRightIcon() {
-  return /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx4(
+  )
+] });
+var WalletConnectIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx5("rect", { width: "20", height: "20", rx: "2.5", fill: "#3B99FC" }),
+  /* @__PURE__ */ jsx5(
     "path",
     {
-      d: "M9 5l7 7-7 7",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+      d: "M6.18 7.96a5.36 5.36 0 0 1 7.64 0l.25.26a.26.26 0 0 1 0 .37l-.87.87a.13.13 0 0 1-.19 0l-.35-.35a3.74 3.74 0 0 0-5.32 0l-.38.37a.13.13 0 0 1-.19 0l-.86-.86a.26.26 0 0 1 0-.37l.27-.29Zm9.43 1.79.78.78a.26.26 0 0 1 0 .37l-3.54 3.54a.26.26 0 0 1-.37 0l-2.51-2.5a.07.07 0 0 0-.09 0l-2.51 2.5a.26.26 0 0 1-.37 0L3.46 10.9a.26.26 0 0 1 0-.37l.78-.78a.26.26 0 0 1 .37 0l2.5 2.5a.07.07 0 0 0 .1 0L9.72 9.75a.26.26 0 0 1 .37 0l2.5 2.5a.07.07 0 0 0 .1 0l2.5-2.5a.26.26 0 0 1 .37 0Z",
+      fill: "#fff"
     }
-  ) });
-}
+  )
+] });
+var EthBadgeIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx5(
+    "path",
+    {
+      d: "M9.99987 19.9319C15.4852 19.9319 19.9319 15.4852 19.9319 9.9999C19.9319 4.51461 15.4852 0.0679016 9.99987 0.0679016C4.51458 0.0679016 0.0678711 4.51461 0.0678711 9.9999C0.0678711 15.4852 4.51458 19.9319 9.99987 19.9319Z",
+      fill: "#E3E3E3"
+    }
+  ),
+  /* @__PURE__ */ jsx5("path", { d: "M10.0073 2.18121L14.6948 9.99371L10.0247 7.98052L10.0073 2.18121Z", fill: "#2F3030" }),
+  /* @__PURE__ */ jsx5("path", { d: "M5.31982 9.99371L9.98998 2.18121L10.0073 7.98052L5.31982 9.99371Z", fill: "#828384" }),
+  /* @__PURE__ */ jsx5("path", { d: "M9.98998 12.8062L5.31982 10.047L10.0073 8.11871L9.98998 12.8062Z", fill: "#343535" }),
+  /* @__PURE__ */ jsx5("path", { d: "M14.6948 10.047L10.0247 8.11871L10.0073 12.8062L14.6948 10.047Z", fill: "#131313" }),
+  /* @__PURE__ */ jsx5("path", { d: "M10.0073 14.0046L14.6948 11.2437L10.0073 17.8062V14.0046Z", fill: "#2F3030" }),
+  /* @__PURE__ */ jsx5("path", { d: "M10.0073 14.0046L5.31982 11.2437L10.0073 17.8062V14.0046Z", fill: "#828384" })
+] });
+var SolBadgeIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx5("rect", { width: "20", height: "20", rx: "10", fill: "#0C0C0C" }),
+  /* @__PURE__ */ jsx5(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M4.62391 9.04404H13.8799C13.9959 9.04404 14.1039 9.08804 14.1839 9.17204L15.6479 10.644C15.9199 10.916 15.7279 11.38 15.3439 11.38H6.08791C5.97191 11.38 5.86391 11.336 5.78391 11.252L4.31991 9.78004C4.04791 9.51203 4.23991 9.04404 4.62391 9.04404ZM4.31591 7.09204L5.77991 5.62003C5.86391 5.53603 5.97191 5.49203 6.08391 5.49203H15.3359C15.7199 5.49203 15.9159 5.95603 15.6399 6.22803L14.1799 7.70003C14.0999 7.78403 13.9879 7.82803 13.8759 7.82803H4.62391C4.23991 7.82803 4.04791 7.36404 4.31591 7.09204ZM15.6439 13.34L14.1799 14.816C14.0999 14.896 13.9879 14.944 13.8759 14.944H4.62391C4.23991 14.944 4.04791 14.48 4.31591 14.208L5.77991 12.732C5.86391 12.652 5.97191 12.604 6.08391 12.604H15.3359C15.7239 12.6 15.9199 13.064 15.6439 13.34Z",
+      fill: "url(#rs-sol-badge-grad)"
+    }
+  ),
+  /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs4(
+    "linearGradient",
+    {
+      id: "rs-sol-badge-grad",
+      x1: "4.85031",
+      y1: "15.3466",
+      x2: "15.1135",
+      y2: "5.08343",
+      gradientUnits: "userSpaceOnUse",
+      children: [
+        /* @__PURE__ */ jsx5("stop", { stopColor: "#CB4EE8" }),
+        /* @__PURE__ */ jsx5("stop", { offset: "1", stopColor: "#10F4B1" })
+      ]
+    }
+  ) })
+] });
+var BaseBadgeIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "20", height: "20", viewBox: "0 0 111 111", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx5("circle", { cx: "55.5", cy: "55.5", r: "55.5", fill: "#0052FF" }),
+  /* @__PURE__ */ jsx5(
+    "path",
+    {
+      d: "M54.921 93.4c20.942 0 37.92-16.978 37.92-37.921S75.863 17.558 54.92 17.558c-19.498 0-35.57 14.725-37.655 33.647h49.82v5.548h-49.82C19.351 75.675 35.423 93.4 54.921 93.4z",
+      fill: "#fff"
+    }
+  )
+] });
+var walletBadge = /* @__PURE__ */ jsxs4("span", { className: "rs-list-row-meta-icons", children: [
+  /* @__PURE__ */ jsx5("span", { children: /* @__PURE__ */ jsx5(RabbyIcon, {}) }),
+  /* @__PURE__ */ jsx5("span", { children: /* @__PURE__ */ jsx5(PhantomIcon, {}) }),
+  /* @__PURE__ */ jsx5("span", { children: /* @__PURE__ */ jsx5(WalletConnectIcon, {}) })
+] });
+var chainBadge = /* @__PURE__ */ jsxs4("span", { className: "rs-list-row-meta-icons", children: [
+  /* @__PURE__ */ jsx5("span", { children: /* @__PURE__ */ jsx5(EthBadgeIcon, {}) }),
+  /* @__PURE__ */ jsx5("span", { children: /* @__PURE__ */ jsx5(SolBadgeIcon, {}) }),
+  /* @__PURE__ */ jsx5("span", { children: /* @__PURE__ */ jsx5(BaseBadgeIcon, {}) })
+] });
+function WalletBadgeIcons() {
+  return walletBadge;
+}
+WalletBadgeIcons.displayName = "WalletBadgeIcons";
+function ChainBadgeIcons() {
+  return chainBadge;
+}
+ChainBadgeIcons.displayName = "ChainBadgeIcons";
 
 // src/components/steps/ConnectStep.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-function rowIcon(kind) {
-  if (kind === "connected") return /* @__PURE__ */ jsx5(WalletIcon, {});
-  if (kind === "solana") return /* @__PURE__ */ jsx5(ExternalLinkIcon, {});
-  return /* @__PURE__ */ jsx5(ExternalLinkIcon, {});
+import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function shorten(addr) {
+  return addr.length > 12 ? `${addr.slice(0, 6)}...${addr.slice(-4)}` : addr;
+}
+function renderWalletLeading(option) {
+  if (option.icon) {
+    return /* @__PURE__ */ jsx6(
+      "img",
+      {
+        src: option.icon,
+        alt: "",
+        style: { width: 24, height: 24, borderRadius: 6 }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6(WalletIcon, {});
 }
 function ConnectStep({
   walletOptions,
-  selectedWalletId,
-  onSelectWallet,
+  onConfirmWallet,
   onSelectTransferCrypto,
   onRequestConnect,
   onConnect,
   onDisconnect,
-  onContinue,
-  continueButtonLabel = "Continue",
-  connectButtonLabel = "Connect external wallet"
+  title = "Deposit",
+  subtitle
 }) {
-  const hasWalletOptions = (walletOptions?.length ?? 0) > 0;
-  if (hasWalletOptions) {
-    const hasReownWallet = walletOptions?.some(
-      (option) => option.kind === "external" || option.kind === "solana"
-    ) ?? false;
-    const showConnectDifferentWalletOption = Boolean(onConnect) && !hasReownWallet;
-    return /* @__PURE__ */ jsxs4("div", { className: "rs-step", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "rs-connect-centered rs-connect-centered--wallets", children: [
-        /* @__PURE__ */ jsxs4("div", { className: "rs-connect-wallet-list", children: [
-          walletOptions?.map((option) => {
-            const isSelected = option.id === selectedWalletId;
-            const rawAddress = option.address ?? option.solanaAddress ?? option.id;
-            const shortAddress = rawAddress.length > 12 ? `${rawAddress.slice(0, 6)}...${rawAddress.slice(-4)}` : rawAddress;
-            return /* @__PURE__ */ jsxs4(
-              "button",
-              {
-                type: "button",
-                className: `rs-connect-wallet-row ${isSelected ? "rs-connect-wallet-row--selected" : ""}`,
-                onClick: () => onSelectWallet?.(option.id),
-                children: [
-                  /* @__PURE__ */ jsx5(
-                    "div",
-                    {
-                      className: `rs-connect-wallet-icon ${isSelected ? "rs-connect-wallet-icon--selected" : ""}`,
-                      children: option.icon ? /* @__PURE__ */ jsx5(
-                        "img",
-                        {
-                          src: option.icon,
-                          alt: option.label,
-                          style: { width: 24, height: 24, borderRadius: 6 }
-                        }
-                      ) : rowIcon(option.kind)
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs4("div", { className: "rs-connect-wallet-meta", children: [
-                    /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-label", children: option.label }),
-                    /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-address", children: shortAddress })
-                  ] }),
-                  /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-indicator", children: isSelected ? /* @__PURE__ */ jsx5(CheckIcon, {}) : /* @__PURE__ */ jsx5(ChevronRightIcon, {}) })
-                ]
-              },
-              option.id
-            );
-          }),
-          showConnectDifferentWalletOption && /* @__PURE__ */ jsxs4(
-            "button",
-            {
-              type: "button",
-              className: "rs-connect-wallet-row rs-connect-wallet-row--action",
-              onClick: onConnect,
-              children: [
-                /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-icon rs-connect-wallet-icon--action", children: /* @__PURE__ */ jsx5(ExternalLinkIcon, {}) }),
-                /* @__PURE__ */ jsxs4("div", { className: "rs-connect-wallet-meta", children: [
-                  /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-label", children: "External Wallet" }),
-                  /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-address", children: "Connect different wallet" })
-                ] }),
-                /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-indicator", children: /* @__PURE__ */ jsx5(ChevronRightIcon, {}) })
-              ]
-            }
-          ),
-          onSelectTransferCrypto && /* @__PURE__ */ jsxs4(
-            "button",
-            {
-              type: "button",
-              className: "rs-connect-wallet-row rs-connect-wallet-row--action",
-              onClick: onSelectTransferCrypto,
-              children: [
-                /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-icon rs-connect-wallet-icon--action", children: /* @__PURE__ */ jsx5(TransferIcon, {}) }),
-                /* @__PURE__ */ jsxs4("div", { className: "rs-connect-wallet-meta", children: [
-                  /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-label", children: "Transfer Crypto" }),
-                  /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-address", children: "No limit instant transfer" })
-                ] }),
-                /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-indicator", children: /* @__PURE__ */ jsx5(ChevronRightIcon, {}) })
-              ]
-            }
-          )
-        ] }),
-        (onDisconnect || onConnect) && walletOptions?.some(
-          (option) => option.kind === "external" || option.kind === "solana"
-        ) && /* @__PURE__ */ jsx5(
-          "button",
-          {
-            type: "button",
-            className: "rs-connect-wallet-manage",
-            onClick: onDisconnect ?? onConnect,
-            children: "Disconnect Wallet"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx5("div", { className: "rs-step-footer rs-step-footer--connect-empty", children: /* @__PURE__ */ jsx5(
-        Button,
-        {
-          onClick: onContinue,
-          variant: "accent",
-          fullWidth: true,
-          disabled: !selectedWalletId || !onContinue,
-          children: continueButtonLabel
-        }
-      ) })
-    ] });
-  }
+  const options = walletOptions ?? [];
   const handleConnect = onConnect ?? onRequestConnect;
-  if (onSelectTransferCrypto) {
-    return /* @__PURE__ */ jsx5("div", { className: "rs-step", children: /* @__PURE__ */ jsx5("div", { className: "rs-connect-centered rs-connect-centered--wallets", children: /* @__PURE__ */ jsxs4("div", { className: "rs-connect-wallet-list", children: [
-      /* @__PURE__ */ jsxs4(
-        "button",
+  const hasReownWallet = options.some(
+    (option) => option.kind === "external" || option.kind === "solana"
+  );
+  const extraChainCount = Math.max(0, getSupportedChainIds().length - 3);
+  const chainBadge2 = /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsx6(ChainBadgeIcons, {}),
+    extraChainCount > 0 ? `+${extraChainCount} chains` : "All chains"
+  ] });
+  const defaultSubtitle = onSelectTransferCrypto ? "Add money to your balance" : "Choose a wallet to continue";
+  return /* @__PURE__ */ jsxs5("div", { className: "rs-screen", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "rs-screen-body rs-screen-body--gap-32", children: [
+      /* @__PURE__ */ jsx6(
+        BodyHeader,
         {
-          type: "button",
-          className: "rs-connect-wallet-row rs-connect-wallet-row--action",
-          onClick: onSelectTransferCrypto,
-          children: [
-            /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-icon rs-connect-wallet-icon--action", children: /* @__PURE__ */ jsx5(TransferIcon, {}) }),
-            /* @__PURE__ */ jsxs4("div", { className: "rs-connect-wallet-meta", children: [
-              /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-label", children: "Transfer Crypto" }),
-              /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-address", children: "No limit instant transfer" })
-            ] }),
-            /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-indicator", children: /* @__PURE__ */ jsx5(ChevronRightIcon, {}) })
-          ]
+          icon: /* @__PURE__ */ jsx6(HandCoinsIcon, {}),
+          title,
+          subtitle: subtitle ?? defaultSubtitle
         }
       ),
-      handleConnect && /* @__PURE__ */ jsxs4(
-        "button",
-        {
-          type: "button",
-          className: "rs-connect-wallet-row rs-connect-wallet-row--action",
-          onClick: handleConnect,
-          children: [
-            /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-icon rs-connect-wallet-icon--action", children: /* @__PURE__ */ jsx5(WalletIcon, {}) }),
-            /* @__PURE__ */ jsxs4("div", { className: "rs-connect-wallet-meta", children: [
-              /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-label", children: "Connect Wallet" }),
-              /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-address", children: "Connect your wallet to deposit" })
-            ] }),
-            /* @__PURE__ */ jsx5("div", { className: "rs-connect-wallet-indicator", children: /* @__PURE__ */ jsx5(ChevronRightIcon, {}) })
-          ]
-        }
-      )
-    ] }) }) });
-  }
-  return /* @__PURE__ */ jsxs4("div", { className: "rs-step", children: [
-    /* @__PURE__ */ jsx5("div", { className: "rs-connect-centered rs-connect-centered--minimal", children: /* @__PURE__ */ jsxs4("div", { className: "rs-connect-empty", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "rs-connect-empty-graphic", "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsx5("div", { className: "rs-connect-empty-orbit rs-connect-empty-orbit--outer" }),
-        /* @__PURE__ */ jsx5("div", { className: "rs-connect-empty-orbit rs-connect-empty-orbit--inner" }),
-        /* @__PURE__ */ jsx5("div", { className: "rs-connect-empty-core", children: /* @__PURE__ */ jsxs4(
-          "svg",
+      /* @__PURE__ */ jsxs5("div", { className: "rs-list", children: [
+        onSelectTransferCrypto && /* @__PURE__ */ jsx6(
+          ListRow,
           {
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "1.6",
-            children: [
-              /* @__PURE__ */ jsx5(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M4 8.25A2.25 2.25 0 016.25 6h11.5A2.25 2.25 0 0120 8.25v7.5A2.25 2.25 0 0117.75 18H6.25A2.25 2.25 0 014 15.75v-7.5z"
-                }
-              ),
-              /* @__PURE__ */ jsx5(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M20 10.5h-3.75a2.25 2.25 0 100 4.5H20"
-                }
-              ),
-              /* @__PURE__ */ jsx5("circle", { cx: "16.25", cy: "12.75", r: "0.85", fill: "currentColor" })
-            ]
+            leading: /* @__PURE__ */ jsx6(CoinsIcon, {}),
+            title: "Transfer crypto",
+            subtitle: "Instant - No limit",
+            meta: chainBadge2,
+            onClick: onSelectTransferCrypto
           }
-        ) }),
-        /* @__PURE__ */ jsx5("span", { className: "rs-connect-empty-dot rs-connect-empty-dot--left" }),
-        /* @__PURE__ */ jsx5("span", { className: "rs-connect-empty-dot rs-connect-empty-dot--right" })
-      ] }),
-      /* @__PURE__ */ jsx5("div", { className: "rs-connect-empty-title", children: "No wallet connected" }),
-      /* @__PURE__ */ jsx5("div", { className: "rs-connect-empty-subtitle", children: "Connect an external wallet to continue." })
-    ] }) }),
-    /* @__PURE__ */ jsx5("div", { className: "rs-step-footer rs-step-footer--connect-empty", children: /* @__PURE__ */ jsx5(
-      Button,
+        ),
+        options.map((option) => {
+          const rawAddress = option.address ?? option.solanaAddress ?? option.id;
+          return /* @__PURE__ */ jsx6(
+            ListRow,
+            {
+              leading: renderWalletLeading(option),
+              title: onSelectTransferCrypto ? "External wallet" : option.label,
+              subtitle: shorten(rawAddress),
+              onClick: () => onConfirmWallet?.(option.id)
+            },
+            option.id
+          );
+        }),
+        !hasReownWallet && handleConnect && /* @__PURE__ */ jsx6(
+          ListRow,
+          {
+            leading: /* @__PURE__ */ jsx6(WalletIcon, {}),
+            title: "Connect wallet",
+            subtitle: "Instant - No limit",
+            meta: /* @__PURE__ */ jsxs5(Fragment, { children: [
+              /* @__PURE__ */ jsx6(WalletBadgeIcons, {}),
+              "+100 wallets"
+            ] }),
+            onClick: handleConnect
+          }
+        )
+      ] })
+    ] }),
+    onDisconnect && hasReownWallet && /* @__PURE__ */ jsx6("div", { className: "rs-screen-tight-row", children: /* @__PURE__ */ jsx6(
+      "button",
       {
-        onClick: handleConnect,
-        variant: "accent",
-        fullWidth: true,
-        disabled: !handleConnect,
-        children: connectButtonLabel
+        type: "button",
+        className: "rs-connect-wallet-manage",
+        onClick: onDisconnect,
+        children: "Disconnect wallet"
       }
-    ) })
+    ) }),
+    /* @__PURE__ */ jsx6(PoweredBy, {})
   ] });
 }
 ConnectStep.displayName = "ConnectStep";
 
+// src/components/ui/Spinner.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function Spinner({ className }) {
+  return /* @__PURE__ */ jsxs6(
+    "svg",
+    {
+      className: `rs-spinner ${className || ""}`,
+      fill: "none",
+      viewBox: "0 0 20 21",
+      children: [
+        /* @__PURE__ */ jsx7(
+          "path",
+          {
+            d: "M10 0.5C8.02219 0.5 6.08879 1.08649 4.4443 2.1853C2.79981 3.28412 1.51809 4.8459 0.761209 6.67316C0.00433288 8.50043 -0.1937 10.5111 0.192152 12.4509C0.578004 14.3907 1.53041 16.1725 2.92894 17.5711C4.32746 18.9696 6.10929 19.922 8.0491 20.3078C9.98891 20.6937 11.9996 20.4957 13.8268 19.7388C15.6541 18.9819 17.2159 17.7002 18.3147 16.0557C19.4135 14.4112 20 12.4778 20 10.5C20 7.84783 18.9464 5.3043 17.0711 3.42893C15.1957 1.55357 12.6522 0.5 10 0.5ZM10 17.7727C8.56159 17.7727 7.15549 17.3462 5.95949 16.547C4.7635 15.7479 3.83134 14.6121 3.28088 13.2831C2.73042 11.9542 2.5864 10.4919 2.86702 9.08116C3.14764 7.67039 3.8403 6.37451 4.85741 5.3574C5.87452 4.3403 7.17039 3.64764 8.58116 3.36702C9.99193 3.0864 11.4542 3.23042 12.7832 3.78088C14.1121 4.33133 15.2479 5.26349 16.0471 6.45949C16.8462 7.65548 17.2727 9.06159 17.2727 10.5C17.2727 12.4288 16.5065 14.2787 15.1426 15.6426C13.7787 17.0065 11.9288 17.7727 10 17.7727Z",
+            fill: "currentColor",
+            opacity: 0.3
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "path",
+          {
+            d: "M10 3.22767C11.7423 3.22846 13.4276 3.8412 14.7556 4.95667C16.0837 6.07214 16.9681 7.61784 17.2512 9.31825C17.3012 9.64364 17.4662 9.94096 17.7169 10.1573C17.9677 10.3737 18.2878 10.4951 18.6205 10.5C18.8211 10.5001 19.0193 10.457 19.2012 10.3735C19.3832 10.2901 19.5445 10.1684 19.674 10.017C19.8036 9.86549 19.8981 9.68789 19.9511 9.49656C20.004 9.30523 20.0141 9.10478 19.9807 8.90918C19.5986 6.56305 18.3843 4.42821 16.5554 2.88726C14.7265 1.34631 12.4025 0.5 10 0.5C7.59751 0.5 5.27354 1.34631 3.44461 2.88726C1.61569 4.42821 0.401366 6.56305 0.0192815 8.90918C-0.0141442 9.10478 -0.00402016 9.30523 0.0489472 9.49656C0.101914 9.68789 0.196449 9.86549 0.325956 10.017C0.455463 10.1684 0.616823 10.2901 0.798778 10.3735C0.980732 10.457 1.1789 10.5001 1.37945 10.5C1.71216 10.4951 2.03235 10.3737 2.28307 10.1573C2.5338 9.94096 2.69883 9.64364 2.74882 9.31825C3.03193 7.61784 3.91633 6.07214 5.24436 4.95667C6.57239 3.8412 8.25775 3.22846 10 3.22767Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/core/session-owner.ts
 import { isAddress } from "viem";
 import {
@@ -1426,46 +1670,211 @@ function accountFromPrivateKey(privateKey) {
   return privateKeyToAccount(privateKey);
 }
 
+// src/core/formatters.ts
+var currencyFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  maximumFractionDigits: 2
+});
+var tokenFormatter = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 6
+});
+function formatUserError(raw) {
+  const lower = raw.toLowerCase();
+  if (lower.includes("user rejected") || lower.includes("user denied")) {
+    return "Transaction cancelled";
+  }
+  if (lower.includes("insufficient funds")) {
+    return "Insufficient funds for this transaction";
+  }
+  if (lower.includes("nonce too low") || lower.includes("nonce too high")) {
+    return "Transaction conflict \u2014 please try again";
+  }
+  if (lower.includes("execution reverted")) {
+    return "Transaction would fail on-chain";
+  }
+  if (lower.includes("timed out") || lower.includes("took too long")) {
+    return "Request timed out \u2014 please try again";
+  }
+  if (lower.includes("econnrefused") || lower.includes("econnreset") || lower.includes("enotfound") || lower.includes("fetch failed")) {
+    return "Service unavailable \u2014 please try again";
+  }
+  if (lower.includes("recent blockhash") || lower.includes("latest blockhash")) {
+    return "Solana RPC unavailable \u2014 please retry";
+  }
+  if (lower.includes("network") || lower.includes("disconnected")) {
+    return "Network error \u2014 check your connection";
+  }
+  if (lower.includes("rate limit") || lower.includes("429")) {
+    return "Rate limited \u2014 please try again shortly";
+  }
+  let cleaned = raw;
+  const stripMarkers = [
+    "\n\nRequest Arguments:",
+    "\nRaw Call Arguments:",
+    "\nRequest body:",
+    "\nContract Call:",
+    "\nDocs:",
+    "\nDetails:",
+    "\nVersion:",
+    "\nURL:"
+  ];
+  for (const marker of stripMarkers) {
+    const idx = cleaned.indexOf(marker);
+    if (idx !== -1) {
+      cleaned = cleaned.slice(0, idx).trim();
+    }
+  }
+  cleaned = cleaned.replace(/https?:\/\/\S+/g, "").trim();
+  if (cleaned.length === 0) {
+    return "An unexpected error occurred";
+  }
+  if (cleaned.length > 120) {
+    return cleaned.slice(0, 120) + "...";
+  }
+  return cleaned;
+}
+
 // src/components/steps/ProcessingStep.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState2 } from "react";
 import { formatUnits } from "viem";
 
-// src/components/ui/PoweredBy.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function PoweredBy() {
-  return /* @__PURE__ */ jsxs5("div", { className: "rs-powered-by", children: [
-    /* @__PURE__ */ jsx6(
-      "svg",
-      {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        children: /* @__PURE__ */ jsx6(
-          "path",
+// src/components/ui/Button.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function Button({
+  children,
+  variant = "accent",
+  size = "default",
+  loading = false,
+  loadingText,
+  fullWidth = false,
+  disabled,
+  className = "",
+  ...props
+}) {
+  const classes = [
+    "rs-button",
+    `rs-button--${variant}`,
+    `rs-button--size-${size}`,
+    fullWidth ? "rs-button--full-width" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const showInlineLoadingText = loading && loadingText !== void 0;
+  return /* @__PURE__ */ jsx8(
+    "button",
+    {
+      className: classes,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: showInlineLoadingText ? /* @__PURE__ */ jsxs7("span", { className: "rs-button__loading-row", children: [
+        /* @__PURE__ */ jsx8(Spinner, { className: "rs-spinner--sm" }),
+        /* @__PURE__ */ jsx8("span", { children: loadingText })
+      ] }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx8("span", { className: loading ? "rs-button__content--hidden" : "", children }),
+        loading && /* @__PURE__ */ jsx8("span", { className: "rs-button__spinner", children: /* @__PURE__ */ jsx8(Spinner, { className: "rs-spinner--sm" }) })
+      ] })
+    }
+  );
+}
+Button.displayName = "Button";
+
+// src/components/ui/Tooltip.tsx
+import {
+  useState,
+  useRef as useRef3,
+  useEffect as useEffect3,
+  useCallback as useCallback2
+} from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function Tooltip({ content, children, className }) {
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState(null);
+  const triggerRef = useRef3(null);
+  const bubbleRef = useRef3(null);
+  const updatePosition = useCallback2(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    setPosition({
+      top: rect.top,
+      left: rect.left + rect.width / 2
+    });
+  }, []);
+  useEffect3(() => {
+    if (!open) return;
+    updatePosition();
+    function handleOutside(event) {
+      const target = event.target;
+      if (!target) return;
+      if (triggerRef.current?.contains(target)) return;
+      if (bubbleRef.current?.contains(target)) return;
+      setOpen(false);
+    }
+    function handleKey(event) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", handleOutside);
+    document.addEventListener("touchstart", handleOutside);
+    document.addEventListener("keydown", handleKey);
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      document.removeEventListener("touchstart", handleOutside);
+      document.removeEventListener("keydown", handleKey);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [open, updatePosition]);
+  return /* @__PURE__ */ jsxs8(
+    "span",
+    {
+      ref: triggerRef,
+      className: `rs-tooltip ${className ?? ""}`,
+      onMouseEnter: () => setOpen(true),
+      onMouseLeave: () => setOpen(false),
+      children: [
+        /* @__PURE__ */ jsx9(
+          "span",
           {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            d: "M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
+            className: "rs-tooltip-trigger",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": content,
+            onClick: (event) => {
+              event.stopPropagation();
+              event.preventDefault();
+              setOpen((value) => !value);
+            },
+            onKeyDown: (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                setOpen((value) => !value);
+              }
+            },
+            children
           }
+        ),
+        open && position && typeof document !== "undefined" && createPortal2(
+          /* @__PURE__ */ jsx9(
+            "span",
+            {
+              ref: bubbleRef,
+              className: "rs-tooltip-bubble",
+              role: "tooltip",
+              style: { top: position.top, left: position.left },
+              children: content
+            }
+          ),
+          document.body
         )
-      }
-    ),
-    /* @__PURE__ */ jsxs5("span", { children: [
-      "Powered by",
-      " ",
-      /* @__PURE__ */ jsx6(
-        "a",
-        {
-          href: "https://www.rhinestone.dev",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: "Rhinestone"
-        }
-      )
-    ] })
-  ] });
+      ]
+    }
+  );
 }
+Tooltip.displayName = "Tooltip";
 
 // src/core/webhook.ts
 function isRecord(value) {
@@ -1553,7 +1962,7 @@ function txRefsMatch(a, b) {
 }
 
 // src/components/steps/ProcessingStep.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var INITIAL_POLL_INTERVAL = 3e3;
 var MAX_POLL_INTERVAL = 3e4;
 var BACKOFF_MULTIPLIER = 1.5;
@@ -1586,9 +1995,6 @@ function savePhaseTimings(txHash, timings) {
   } catch {
   }
 }
-function truncateHash(hash) {
-  return `${hash.slice(0, 10)}...${hash.slice(-8)}`;
-}
 function isEventForTx(event, txHash) {
   const eventTxHash = getEventTxHash(event);
   if (!eventTxHash) return false;
@@ -1695,16 +2101,22 @@ function ProcessingStep({
   flowLabel = "deposit",
   debug,
   targetToken,
+  uiConfig,
+  estimatedTime = "< 1 min",
+  quotedFeeAmount = "0.1",
+  quotedFeeSymbol,
+  balanceAfterUsd,
   onClose,
   onNewDeposit,
+  onRetry,
   onDepositComplete,
   onDepositFailed,
   onError
 }) {
-  const startTimeRef = useRef3(Date.now());
-  const pollIntervalRef = useRef3(INITIAL_POLL_INTERVAL);
-  const pollTimeoutRef = useRef3(null);
-  const escalatedDelayRef = useRef3(false);
+  const startTimeRef = useRef4(Date.now());
+  const pollIntervalRef = useRef4(INITIAL_POLL_INTERVAL);
+  const pollTimeoutRef = useRef4(null);
+  const escalatedDelayRef = useRef4(false);
   const processingContextRef = useLatestRef({
     amount,
     sourceChain,
@@ -1717,11 +2129,11 @@ function ProcessingStep({
   const onDepositCompleteRef = useLatestRef(onDepositComplete);
   const onDepositFailedRef = useLatestRef(onDepositFailed);
   const onErrorRef = useLatestRef(onError);
-  const [state, setState] = useState(
+  const [state, setState] = useState2(
     directTransfer ? { type: "complete" } : { type: "processing" }
   );
-  const [elapsedSeconds, setElapsedSeconds] = useState(0);
-  const [phaseTimings, setPhaseTimings] = useState(() => {
+  const [elapsedSeconds, setElapsedSeconds] = useState2(0);
+  const [phaseTimings, setPhaseTimings] = useState2(() => {
     const saved = loadPhaseTimings(txHash);
     if (saved) {
       startTimeRef.current = saved.startedAt;
@@ -1729,8 +2141,8 @@ function ProcessingStep({
     }
     return { startedAt: startTimeRef.current };
   });
-  const [hasEscalatedDelay, setHasEscalatedDelay] = useState(false);
-  useEffect3(() => {
+  const [hasEscalatedDelay, setHasEscalatedDelay] = useState2(false);
+  useEffect4(() => {
     if (!directTransfer) return;
     const completedAt = Date.now();
     setPhaseTimings({
@@ -1758,7 +2170,7 @@ function ProcessingStep({
     processingContextRef,
     txHash
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (directTransfer || state.type !== "processing") return;
     const updateElapsed = () => {
       setElapsedSeconds(
@@ -1769,7 +2181,7 @@ function ProcessingStep({
     const intervalId = setInterval(updateElapsed, 1e3);
     return () => clearInterval(intervalId);
   }, [directTransfer, state.type]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (state.type === "processing") return;
     const endedAt = state.type === "complete" ? phaseTimings.completedAt ?? Date.now() : Date.now();
     setElapsedSeconds(Math.floor((endedAt - startTimeRef.current) / 1e3));
@@ -1777,14 +2189,14 @@ function ProcessingStep({
       (previous) => previous.endedAt !== void 0 ? previous : { ...previous, endedAt }
     );
   }, [phaseTimings.completedAt, state.type]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!state.lastEvent) return;
     setPhaseTimings((previous) => syncPhaseTimings(previous, state.lastEvent));
   }, [state.lastEvent?.time, state.lastEvent?.type]);
-  useEffect3(() => {
+  useEffect4(() => {
     savePhaseTimings(txHash, phaseTimings);
   }, [txHash, phaseTimings]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (directTransfer) return;
     if (state.type !== "processing") {
       pollIntervalRef.current = INITIAL_POLL_INTERVAL;
@@ -1956,7 +2368,7 @@ function ProcessingStep({
     state.type,
     txHash
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (directTransfer || state.type !== "processing") return;
     const timeoutId = setTimeout(() => {
       if (escalatedDelayRef.current) return;
@@ -1982,13 +2394,11 @@ function ProcessingStep({
   const flowCapitalized = flowLabel === "withdraw" ? "Withdrawal" : "Deposit";
   const isPostBridgeSwapEvent = lastEvent?.type === "post-bridge-swap-complete" || lastEvent?.type === "post-bridge-swap-failed";
   const destinationTxHash = isPostBridgeSwapEvent ? lastEvent?.data?.swap?.transactionHash || null : lastEvent?.data?.destination?.transactionHash || null;
-  const bridgeTxHash = isPostBridgeSwapEvent ? lastEvent?.data?.bridge?.transactionHash || null : null;
   const sourceDetails = getEventSourceDetails(lastEvent);
   const displaySourceChain = sourceDetails.chainId ?? sourceChain;
   const displaySourceToken = sourceDetails.token ?? sourceToken;
   const displayAmount = sourceDetails.amount ?? amount;
   const sourceExplorerUrl = getExplorerTxUrl(displaySourceChain, txHash);
-  const bridgeExplorerUrl = bridgeTxHash ? getExplorerTxUrl(targetChain, bridgeTxHash) : null;
   const destExplorerUrl = destinationTxHash ? getExplorerTxUrl(targetChain, destinationTxHash) : null;
   const isEvmSourceToken = /^0x[a-fA-F0-9]{40}$/.test(displaySourceToken);
   const sourceSymbol = displaySourceChain === "solana" ? providedSourceSymbol ?? "SOL" : isEvmSourceToken ? getTokenSymbol(displaySourceToken, displaySourceChain) : providedSourceSymbol ?? "Token";
@@ -2012,278 +2422,145 @@ function ProcessingStep({
   const activePhaseStartedAt = currentPhaseId ? getPhaseStartTime(currentPhaseId, phaseTimings) : void 0;
   const activePhaseElapsedMs = isProcessing && activePhaseStartedAt !== void 0 ? timelineNowMs - activePhaseStartedAt : 0;
   const delayPhaseId = isProcessing && currentPhaseId && activePhaseElapsedMs >= SOFT_DELAY_MS[currentPhaseId] ? currentPhaseId : void 0;
-  const headerTitle = isFailed ? `${flowCapitalized} could not be completed` : isComplete ? isEarlyComplete ? `${flowCapitalized} confirmed` : `${flowCapitalized} successful` : delayPhaseId === "received" ? "Bridge pending" : delayPhaseId === "bridging" ? "Bridge delayed" : delayPhaseId === "confirming" ? `Confirming ${flowNoun}` : `Submitting transaction...`;
-  const headerDescription = isFailed ? failureMessage ?? "The transfer could not be completed." : isComplete ? directTransfer ? "Your transfer is complete." : isEarlyComplete ? "The bridge has started. Funds will arrive shortly." : "Your funds were successfully deposited." : delayPhaseId === "received" ? "Funds are in. We are still waiting for the bridge transaction to begin." : delayPhaseId === "bridging" ? "The bridge has started but settlement is taking longer than expected." : delayPhaseId === "confirming" ? "The source transaction has not been picked up yet, but we are still polling automatically." : state.lastEvent?.type === "deposit-received" ? "Transfer received. Preparing bridge execution." : state.lastEvent?.type === "bridge-started" ? `Bridge started. Sending funds to ${getChainName(targetChain)}.` : "Filling your transaction on the blockchain.";
-  const showAlert = !isFailed && (delayPhaseId !== void 0 || hasEscalatedDelay);
-  const alertMessage = hasEscalatedDelay ? "Taking longer than expected. You can close this window \u2014 processing continues in the background." : "This step is slower than usual but still processing.";
-  const fillStatus = isComplete ? "Successful" : isFailed ? "Failed" : "Processing";
-  const fillStatusClass = isComplete ? "rs-card-value--success" : isFailed ? "rs-card-value--error" : "";
-  const [detailsExpanded, setDetailsExpanded] = useState(false);
-  const txLinkIcon = /* @__PURE__ */ jsx7("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx7(
-    "path",
-    {
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      d: "M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+  void delayPhaseId;
+  void hasEscalatedDelay;
+  const targetSymbol = (() => {
+    if (typeof targetToken === "string" && /^0x[a-fA-F0-9]{40}$/.test(targetToken)) {
+      return getTokenSymbol(targetToken, targetChain);
     }
-  ) });
-  return /* @__PURE__ */ jsxs6("div", { className: "rs-step", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "rs-step-header--centered", children: [
-      isFailed ? /* @__PURE__ */ jsx7("div", { className: "rs-failed-badge", children: /* @__PURE__ */ jsxs6(
-        "svg",
+    return providedSourceSymbol ?? "USDC";
+  })();
+  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 totalTimeText = formatElapsedTime(elapsedSeconds);
+  const feeSymbol = quotedFeeSymbol ?? sourceSymbol;
+  const feeSponsored = uiConfig?.feeSponsored ?? false;
+  const feeTooltip = uiConfig?.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__ */ jsx10(CheckIcon, {}) : isFailed ? /* @__PURE__ */ jsx10(CloseIcon, {}) : /* @__PURE__ */ jsx10(WalletIcon, {});
+  const handleRetry = onRetry ?? onNewDeposit;
+  return /* @__PURE__ */ jsxs9("div", { className: "rs-screen", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "rs-screen-body rs-screen-body--gap-32", children: [
+      /* @__PURE__ */ jsx10(
+        BodyHeader,
         {
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          children: [
-            /* @__PURE__ */ jsx7(
-              "path",
+          variant: stateVariant,
+          icon: stateIcon,
+          title: stateTitle
+        }
+      ),
+      /* @__PURE__ */ jsxs9("div", { className: "rs-amount-details", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "rs-amount-detail-row", children: [
+          /* @__PURE__ */ jsx10("span", { children: "Source chain" }),
+          /* @__PURE__ */ jsxs9("span", { className: "rs-amount-detail-value", children: [
+            /* @__PURE__ */ jsx10("span", { children: sourceChainName }),
+            sourceChainIcon && /* @__PURE__ */ jsx10("span", { className: "rs-amount-detail-icon", children: /* @__PURE__ */ jsx10("img", { src: sourceChainIcon, alt: "" }) }),
+            sourceExplorerUrl && /* @__PURE__ */ jsx10(
+              "a",
               {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                d: "M12 9v3.75m0 3.75h.008v.008H12v-.008z"
+                href: sourceExplorerUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "rs-amount-detail-link",
+                "aria-label": "View source transaction",
+                children: /* @__PURE__ */ jsx10(ExternalLinkIcon, {})
               }
-            ),
-            /* @__PURE__ */ jsx7(
-              "path",
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "rs-amount-detail-row", children: [
+          /* @__PURE__ */ jsx10("span", { children: "Destination chain" }),
+          /* @__PURE__ */ jsxs9("span", { className: "rs-amount-detail-value", children: [
+            /* @__PURE__ */ jsx10("span", { children: targetChainName }),
+            targetChainIcon && /* @__PURE__ */ jsx10("span", { className: "rs-amount-detail-icon", children: /* @__PURE__ */ jsx10("img", { src: targetChainIcon, alt: "" }) }),
+            destExplorerUrl && /* @__PURE__ */ jsx10(
+              "a",
               {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                d: "M10.29 3.86L1.82 18a2.25 2.25 0 001.93 3.37h16.5A2.25 2.25 0 0022.18 18L13.71 3.86a2.25 2.25 0 00-3.42 0z"
+                href: destExplorerUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "rs-amount-detail-link",
+                "aria-label": "View destination transaction",
+                children: /* @__PURE__ */ jsx10(ExternalLinkIcon, {})
               }
             )
-          ]
-        }
-      ) }) : isComplete ? /* @__PURE__ */ jsx7("div", { className: "rs-success-badge", children: /* @__PURE__ */ jsx7(
-        "svg",
-        {
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2.5",
-          children: /* @__PURE__ */ jsx7(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              d: "M5 12l5 5L20 7"
-            }
-          )
-        }
-      ) }) : /* @__PURE__ */ jsx7("div", { className: "rs-processing-badge", children: /* @__PURE__ */ jsx7(Spinner, {}) }),
-      /* @__PURE__ */ jsx7("div", { className: "rs-step-title", children: headerTitle }),
-      /* @__PURE__ */ jsx7("div", { className: "rs-step-description rs-text-secondary", children: headerDescription })
-    ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "rs-step-body rs-space-y-3", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "rs-card", children: [
-        /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Fill status" }),
-          /* @__PURE__ */ jsx7("span", { className: `rs-card-value ${fillStatusClass}`, children: fillStatus })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Total time" }),
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-value", children: formatElapsedTime(elapsedSeconds) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "rs-card", children: [
-        /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Source" }),
-          /* @__PURE__ */ jsxs6(
-            "span",
-            {
-              className: "rs-card-value",
-              style: { display: "flex", alignItems: "center", gap: 6 },
-              children: [
-                getChainIcon(displaySourceChain) && /* @__PURE__ */ jsx7(
-                  "img",
-                  {
-                    src: getChainIcon(displaySourceChain),
-                    alt: "",
-                    style: { width: 16, height: 16, borderRadius: 3 }
-                  }
-                ),
-                getChainName(displaySourceChain),
-                sourceExplorerUrl && /* @__PURE__ */ jsx7(
-                  "a",
-                  {
-                    href: sourceExplorerUrl,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    className: "rs-card-external-link",
-                    children: txLinkIcon
-                  }
-                )
-              ]
-            }
-          )
+        /* @__PURE__ */ jsxs9("div", { className: "rs-amount-detail-row", children: [
+          /* @__PURE__ */ jsx10("span", { children: isProcessing ? "Estimated time" : "Total time" }),
+          /* @__PURE__ */ jsx10("span", { className: "rs-amount-detail-value", children: isProcessing ? estimatedTime : totalTimeText })
         ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Destination" }),
-          /* @__PURE__ */ jsxs6(
-            "span",
-            {
-              className: "rs-card-value",
-              style: { display: "flex", alignItems: "center", gap: 6 },
-              children: [
-                getChainIcon(targetChain) && /* @__PURE__ */ jsx7(
-                  "img",
-                  {
-                    src: getChainIcon(targetChain),
-                    alt: "",
-                    style: { width: 16, height: 16, borderRadius: 3 }
-                  }
-                ),
-                getChainName(targetChain),
-                destExplorerUrl && /* @__PURE__ */ jsx7(
-                  "a",
-                  {
-                    href: destExplorerUrl,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    className: "rs-card-external-link",
-                    children: txLinkIcon
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx7("div", { className: "rs-card", children: /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-        /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "You receive" }),
-        /* @__PURE__ */ jsxs6(
-          "span",
-          {
-            className: "rs-card-value",
-            style: { display: "flex", alignItems: "center", gap: 6 },
-            children: [
-              getTokenIcon(sourceSymbol) && /* @__PURE__ */ jsx7(
-                "img",
-                {
-                  src: getTokenIcon(sourceSymbol),
-                  alt: "",
-                  style: { width: 16, height: 16, borderRadius: "50%" }
-                }
-              ),
+        /* @__PURE__ */ jsxs9("div", { className: "rs-amount-detail-row", children: [
+          /* @__PURE__ */ jsx10("span", { children: "You send" }),
+          /* @__PURE__ */ jsxs9("span", { className: "rs-amount-detail-value", children: [
+            /* @__PURE__ */ jsxs9("span", { children: [
               formattedReceivedAmount,
               " ",
               sourceSymbol
-            ]
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsxs6(
-        "button",
-        {
-          type: "button",
-          className: `rs-details-toggle ${detailsExpanded ? "rs-details-toggle--open" : ""}`,
-          onClick: () => setDetailsExpanded(!detailsExpanded),
-          children: [
-            detailsExpanded ? "Less details" : "More details",
-            /* @__PURE__ */ jsx7(
-              "svg",
-              {
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                children: /* @__PURE__ */ jsx7(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
-                  }
-                )
-              }
-            )
-          ]
-        }
-      ),
-      detailsExpanded && /* @__PURE__ */ jsxs6("div", { className: "rs-card", children: [
-        /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Source tx" }),
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-value", children: sourceExplorerUrl ? /* @__PURE__ */ jsxs6(
-            "a",
-            {
-              href: sourceExplorerUrl,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "rs-card-external-link",
-              style: { gap: 4, fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 },
-              children: [
-                truncateHash(txHash),
-                txLinkIcon
-              ]
-            }
-          ) : /* @__PURE__ */ jsx7("span", { style: { fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 }, children: truncateHash(txHash) }) })
+            ] }),
+            sourceTokenIcon && /* @__PURE__ */ jsx10("span", { className: "rs-amount-detail-icon", children: /* @__PURE__ */ jsx10("img", { src: sourceTokenIcon, alt: "" }) })
+          ] })
         ] }),
-        bridgeTxHash && /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: "Bridge tx" }),
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-value", children: bridgeExplorerUrl ? /* @__PURE__ */ jsxs6(
-            "a",
-            {
-              href: bridgeExplorerUrl,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "rs-card-external-link",
-              style: { gap: 4, fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 },
-              children: [
-                truncateHash(bridgeTxHash),
-                txLinkIcon
-              ]
-            }
-          ) : /* @__PURE__ */ jsx7("span", { style: { fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 }, children: truncateHash(bridgeTxHash) }) })
+        /* @__PURE__ */ jsxs9("div", { className: "rs-amount-detail-row", children: [
+          /* @__PURE__ */ jsx10("span", { children: "Receive" }),
+          /* @__PURE__ */ jsxs9("span", { className: "rs-amount-detail-value", children: [
+            /* @__PURE__ */ jsxs9("span", { children: [
+              "~",
+              formattedReceivedAmount,
+              " ",
+              targetSymbol
+            ] }),
+            targetTokenIcon && /* @__PURE__ */ jsx10("span", { className: "rs-amount-detail-icon", children: /* @__PURE__ */ jsx10("img", { src: targetTokenIcon, alt: "" }) })
+          ] })
         ] }),
-        destinationTxHash && /* @__PURE__ */ jsxs6("div", { className: "rs-card-row", children: [
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-label", children: bridgeTxHash ? "Swap tx" : "Destination tx" }),
-          /* @__PURE__ */ jsx7("span", { className: "rs-card-value", children: destExplorerUrl ? /* @__PURE__ */ jsxs6(
-            "a",
-            {
-              href: destExplorerUrl,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "rs-card-external-link",
-              style: { gap: 4, fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 },
-              children: [
-                truncateHash(destinationTxHash),
-                txLinkIcon
-              ]
-            }
-          ) : /* @__PURE__ */ jsx7("span", { style: { fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 12 }, children: truncateHash(destinationTxHash) }) })
-        ] })
-      ] }),
-      showAlert && /* @__PURE__ */ jsxs6("div", { className: "rs-alert rs-alert--warning", children: [
-        /* @__PURE__ */ jsx7(
-          "svg",
-          {
-            className: "rs-alert-icon",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            children: /* @__PURE__ */ jsx7(
-              "path",
+        isFailed && balanceAfterUsd !== void 0 && /* @__PURE__ */ jsxs9("div", { className: "rs-amount-detail-row", children: [
+          /* @__PURE__ */ jsx10("span", { children: "Balance" }),
+          /* @__PURE__ */ jsxs9("span", { className: "rs-amount-detail-value", children: [
+            "$",
+            balanceAfterUsd.toFixed(2)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "rs-amount-detail-row", children: [
+          /* @__PURE__ */ jsx10("span", { children: "Fees" }),
+          /* @__PURE__ */ jsxs9("span", { className: "rs-amount-detail-value", children: [
+            /* @__PURE__ */ jsxs9(
+              "span",
               {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                style: feeSponsored ? { textDecoration: "line-through" } : void 0,
+                children: [
+                  quotedFeeAmount,
+                  " ",
+                  feeSymbol
+                ]
               }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx7("p", { className: "rs-alert-text", children: alertMessage })
-      ] })
-    ] }),
-    (isComplete || isFailed) && /* @__PURE__ */ jsxs6("div", { className: "rs-step-footer", style: { gap: 8, display: "flex" }, children: [
-      /* @__PURE__ */ jsx7(Button, { variant: "outline", onClick: onClose, fullWidth: true, children: "Close" }),
-      onNewDeposit && /* @__PURE__ */ jsxs6(Button, { onClick: onNewDeposit, fullWidth: true, children: [
-        "New ",
-        flowNoun
+            ),
+            /* @__PURE__ */ jsx10(Tooltip, { content: feeTooltip, children: /* @__PURE__ */ jsx10("span", { className: "rs-amount-detail-info", "aria-label": "Fee info", children: /* @__PURE__ */ jsx10(InfoIcon, {}) }) })
+          ] })
+        ] })
+      ] }),
+      isFailed && failureMessage && /* @__PURE__ */ jsxs9("div", { className: "rs-amount-error", role: "alert", children: [
+        /* @__PURE__ */ jsx10(AlertTriangleIcon, { style: { width: 16, height: 16, flexShrink: 0 } }),
+        /* @__PURE__ */ jsx10("span", { children: failureMessage })
+      ] }),
+      isProcessing && /* @__PURE__ */ jsx10(Button, { fullWidth: true, disabled: true, loading: true, children: "Submitting transaction..." }),
+      isComplete && /* @__PURE__ */ jsxs9("div", { className: "rs-screen-button-row", children: [
+        onNewDeposit && /* @__PURE__ */ jsxs9(Button, { variant: "outline", onClick: onNewDeposit, fullWidth: true, children: [
+          "New ",
+          flowNoun
+        ] }),
+        onClose && /* @__PURE__ */ jsx10(Button, { onClick: onClose, fullWidth: true, children: "Done" })
+      ] }),
+      isFailed && /* @__PURE__ */ jsxs9("div", { className: "rs-screen-button-row", children: [
+        onClose && /* @__PURE__ */ jsx10(Button, { variant: "outline", onClick: onClose, fullWidth: true, children: "Cancel" }),
+        handleRetry && /* @__PURE__ */ jsx10(Button, { onClick: handleRetry, fullWidth: true, children: "Try again" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx7(PoweredBy, {})
+    /* @__PURE__ */ jsx10(PoweredBy, {})
   ] });
 }
 
@@ -2305,27 +2582,45 @@ function getPublicClient(chainId) {
 
 export {
   Modal,
+  WalletIcon,
+  ExternalLinkIcon,
+  CheckIcon,
+  ChevronLeftIcon,
+  ChevronDownIcon,
+  CloseIcon,
+  CoinsIcon,
+  HistoryIcon,
+  InfoIcon,
+  CopyIcon,
+  ArrowRightIcon,
+  AlertTriangleIcon,
+  PercentIcon,
+  ClockIcon,
+  PlusCircleIcon,
+  CircleArrowOutUpLeftIcon,
+  BodyHeader,
+  PoweredBy,
+  ConnectStep,
   Spinner,
   Button,
-  ConnectStep,
   debugLog,
   debugError,
   toEvmCaip2,
   parseEvmChainId,
   isSolanaCaip2,
-  buildSessionDetails,
-  createDepositService,
   getAssetId,
   portfolioToAssets,
   isNativeAsset,
+  buildSessionDetails,
+  createDepositService,
   loadSessionOwnerFromStorage,
   saveSessionOwnerToStorage,
   createSessionOwnerKey,
   accountFromPrivateKey,
-  PoweredBy,
   currencyFormatter,
   tokenFormatter,
   formatUserError,
+  Tooltip,
   getEventTxHash,
   isDepositEvent,
   txRefsMatch,