kaleido-ui 0.1.42 → 0.1.44

package/dist/web/index.cjs

@@ -154,6 +154,7 @@ __export(web_exports, {
   WithdrawSuccess: () => WithdrawSuccess,
   buttonVariants: () => buttonVariants,
   cn: () => cn,
+  formatDisplayAmountText: () => formatDisplayAmountText,
   getAccountNetworkLabel: () => getAccountNetworkLabel,
   getAccountNetworkUi: () => getAccountNetworkUi,
   getAccountStatusUi: () => getAccountStatusUi,
@@ -173,6 +174,30 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
+// src/web/utils/amount-display.ts
+var NUMBER_RE = /^(-?\d[\d,]*)(?:\.(\d+))?$/;
+function formatDisplayAmountText(value, options = {}) {
+  if (value === null || value === void 0 || value === "") return "";
+  const unit = options.unit ?? "token";
+  const raw = typeof value === "number" ? String(value) : value.trim();
+  const suffixMatch = raw.match(/(\s+[A-Za-z][\w.-]*)$/u);
+  const suffix = suffixMatch?.[1] ?? "";
+  const detectedUnit = suffix.trim() === "BTC" ? "BTC" : suffix.trim() === "sats" ? "sats" : suffix.trim() === "mBTC" ? "mBTC" : unit;
+  const maxDecimals = detectedUnit === "sats" ? 0 : detectedUnit === "BTC" ? 8 : detectedUnit === "mBTC" ? 5 : options.maxDecimals ?? 6;
+  const numeric = suffix ? raw.slice(0, -suffix.length) : raw;
+  const match = numeric.match(NUMBER_RE);
+  if (!match) return raw;
+  const num = parseFloat(numeric.replace(/,/g, ""));
+  if (!Number.isFinite(num)) return raw;
+  const factor = Math.pow(10, maxDecimals);
+  const rounded = Math.round(num * factor) / factor;
+  const formatted = rounded.toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: maxDecimals
+  });
+  return `${formatted}${suffix}`;
+}
+
 // src/web/primitives/button.tsx
 var React = __toESM(require("react"), 1);
 var import_react_slot = require("@radix-ui/react-slot");
@@ -1598,13 +1623,19 @@ function NetworkBadge({
     backgroundColor: `var(${chipVar})`,
     color: `var(${textVar})`
   };
-  const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    "span",
+  const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "svg",
     {
-      className: cn("material-symbols-outlined leading-none", className2),
-      style: { fontSize: size === "sm" ? 12 : size === "lg" ? 24 : 16 },
+      viewBox: "0 0 47.5 47.5",
+      fill: "currentColor",
       "aria-hidden": true,
-      children: "link"
+      width: "1em",
+      height: "1em",
+      className: cn("inline-block shrink-0", className2),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { transform: "matrix(1.25 0 0 -1.25 0 47.5)", d: "m16 28 6 6s6 6 12 0 0-12 0-12l-8-8s-6-6-12 0c-1.125 1.125-1.822 2.62-1.822 2.62l3.353 3.348S15.396 18.604 17 17c0 0 3-3 6 0l8 8s3 3 0 6-6 0-6 0l-3.729-3.729s-1.854 1.521-5.646.354L16 28Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { transform: "matrix(1.25 0 0 -1.25 0 47.5)", d: "m21.845 10-6-6s-6-6-12 0 0 12 0 12l8 8s6 6 12 0c1.125-1.125 1.822-2.62 1.822-2.62l-3.353-3.349s.135 1.365-1.469 2.969c0 0-3 3-6 0l-8-8s-3-3 0-6 6 0 6 0l3.729 3.729s1.854-1.52 5.646-.354L21.845 10Z" })
+      ]
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "img",
@@ -1778,6 +1809,7 @@ function AssetCard({
   className
 }) {
   const shown = balanceVisible ? displayBalance : "\u2022\u2022\u2022\u2022\u2022\u2022";
+  const displayShown = balanceVisible ? formatDisplayAmountText(displayBalance) : shown;
   const [hovered, setHovered] = (0, import_react4.useState)(false);
   const gradientStyle = accentColor ? { background: `linear-gradient(135deg, var(--card) 30%, ${accentColor}${hovered ? "77" : "55"} 75%, ${accentColor}${hovered ? "dd" : "b3"} 100%)`, transition: "background 0.3s ease" } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
@@ -1795,8 +1827,8 @@ function AssetCard({
       onMouseLeave: () => setHovered(false),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between relative z-10", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative z-10 flex min-w-0 items-center justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               AssetIcon,
               {
@@ -1806,23 +1838,31 @@ function AssetCard({
                 className: "group-hover:scale-105 transition-transform"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
               /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "span",
                 {
                   className: cn(
-                    "font-bold text-base leading-tight tracking-wide text-foreground",
+                    "max-w-full truncate font-bold text-base leading-tight tracking-wide text-foreground",
                     onClick && "transition-colors"
                   ),
+                  title: name,
                   children: name
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-nowrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(NetworkBadge, { network, size: "sm" }, network)) })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "text-right", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "font-bold text-lg tracking-tight text-foreground group-hover:opacity-90 transition-colors", children: shown }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-tiny text-muted-foreground font-medium tracking-wide uppercase mt-0.5", children: ticker })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "min-w-0 max-w-[45%] text-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              "p",
+              {
+                className: "max-w-full truncate font-bold text-lg tabular-nums tracking-tight text-foreground transition-colors group-hover:opacity-90",
+                title: shown,
+                children: displayShown
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mt-0.5 truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker })
           ] })
         ] })
       ]
@@ -2591,7 +2631,7 @@ function InlineSelector({
         ),
         children: [
           renderPanelHeader?.(renderArgs),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "space-y-1", children: options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-white/30", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "max-h-[60vh] space-y-1 overflow-y-auto", children: options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-white/30", children: [
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "search", size: "md", className: "opacity-40" }),
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: "No results" })
           ] }) : options.map((option) => {
@@ -3313,7 +3353,7 @@ function ImageIcon({
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { src, alt, className });
 }
 function numberOnly(formatted) {
-  return formatted.replace(/\u00a0(sats|BTC|mBTC)$/, "").replace(/^\u20bf/, "");
+  return formatted.replace(/[\u00a0 ](sats|BTC|mBTC)$/, "").replace(/^\u20bf/, "");
 }
 function BalanceBreakdown({
   btcOnchain,
@@ -3669,8 +3709,11 @@ function AssetSelector({
   options,
   categories = [],
   defaultActiveCategories,
+  networkFilter,
+  venueFilter,
   disabled,
   disabledTicker,
+  disabledId,
   compact,
   onOpenPanelHeightChange,
   onChange
@@ -3681,21 +3724,29 @@ function AssetSelector({
     defaultActiveCategories ?? categories.map((category) => category.id)
   );
   const selectedKey = selectedId ?? selectedTicker;
-  const selected = options.find((option) => (option.id ?? option.ticker) === selectedKey);
+  const selected = options.find((option) => option.id === selectedKey) ?? options.find((option) => option.ticker === selectedTicker);
+  const selectedOptionId = selected?.id ?? selectedKey;
   const hasCategoryFilters = categories.length > 0;
   const filtered = options.filter((option) => {
     const category = option.category ?? null;
-    const matchesCategory = !hasCategoryFilters || category === null || activeCategories.includes(category) || (option.id ?? option.ticker) === selectedKey || option.ticker === disabledTicker;
-    if (!search) return matchesCategory;
+    const matchesCategory = !hasCategoryFilters || category === null || activeCategories.includes(category);
+    const matchesNetwork = !networkFilter || option.network === networkFilter;
+    const matchesVenue = !venueFilter || option.venue === venueFilter;
+    if (!matchesCategory || !matchesNetwork || !matchesVenue) return false;
+    if (!search) return true;
     const searchValue = search.toLowerCase();
-    const matchesSearch = option.ticker.toLowerCase().includes(searchValue) || (option.name?.toLowerCase().includes(searchValue) ?? false);
-    return matchesCategory && matchesSearch;
+    const matchesSearch = option.ticker.toLowerCase().includes(searchValue) || (option.name?.toLowerCase().includes(searchValue) ?? false) || (option.assetId?.toLowerCase().includes(searchValue) ?? false) || (option.network?.toLowerCase().includes(searchValue) ?? false) || (option.category?.toLowerCase().includes(searchValue) ?? false);
+    return matchesSearch;
+  }).sort((a, b) => {
+    if (a.id === selectedOptionId) return -1;
+    if (b.id === selectedOptionId) return 1;
+    return a.ticker.localeCompare(b.ticker);
   });
   const inlineOptions = filtered.map((option) => ({
     ...option,
-    id: option.id ?? option.ticker,
+    id: option.id,
     label: option.ticker,
-    disabled: option.ticker === disabledTicker
+    disabled: option.id === disabledId || option.ticker === disabledTicker
   }));
   const categoryLabelById = new Map(categories.map((category) => [category.id, category.label]));
   const renderAssetOption = (option, optionSelected, optionDisabled) => {
@@ -3715,7 +3766,14 @@ function AssetSelector({
       ),
       /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-3 text-left", children: [
         /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "min-w-0 flex flex-col leading-tight", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "truncate text-base font-bold tracking-wide text-white", children: option.name ?? option.ticker }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            "span",
+            {
+              className: "max-w-full truncate text-base font-bold tracking-wide text-white",
+              title: option.name ?? option.ticker,
+              children: option.name ?? option.ticker
+            }
+          ),
           option.network && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             NetworkBadge,
             {
@@ -3728,7 +3786,14 @@ function AssetSelector({
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex shrink-0 flex-col items-end gap-0.5", children: [
           optionSelected ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "rounded-full border border-primary/25 bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : optionCategoryLabel && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "rounded-full bg-surface-card px-2 py-0.5 text-tiny font-bold uppercase tracking-wide text-text-dimmed shadow-inner", children: optionCategoryLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-tiny font-medium uppercase tracking-wide text-white/35", children: optionDisabled ? "In use" : option.ticker })
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            "span",
+            {
+              className: "max-w-24 truncate text-tiny font-medium uppercase tracking-wide text-white/35",
+              title: optionDisabled ? "In use" : option.ticker,
+              children: optionDisabled ? "In use" : option.ticker
+            }
+          )
         ] })
       ] })
     ] });
@@ -3774,10 +3839,10 @@ function AssetSelector({
             children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
               "div",
               {
-                className: "flex max-h-[85vh] w-full max-w-[26rem] flex-col overflow-hidden rounded-t-3xl border-t border-border bg-popover/95 shadow-popover backdrop-blur-2xl duration-300 animate-in slide-in-from-bottom-8 sm:max-h-[80vh] sm:rounded-3xl sm:border sm:slide-in-from-bottom-0 sm:zoom-in-95",
+                className: "flex max-h-[85vh] w-full max-w-[26rem] flex-col overflow-hidden rounded-t-3xl bg-popover/95 shadow-popover backdrop-blur-2xl duration-300 animate-in slide-in-from-bottom-8 sm:max-h-[80vh] sm:rounded-3xl sm:border sm:slide-in-from-bottom-0 sm:zoom-in-95",
                 onClick: (event) => event.stopPropagation(),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-shrink-0 border-b border-white/[0.08] bg-white/[0.03] px-4 py-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-shrink-0 bg-white/[0.03] px-4 py-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "min-w-0", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: "text-xxs font-bold uppercase tracking-eyebrow-wide text-text-dimmed", children: [
                         label,
@@ -3790,13 +3855,13 @@ function AssetSelector({
                         " available"
                       ] })
                     ] }),
-                    selected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-2.5 py-1", children: [
+                    selected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
                       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-tiny font-semibold text-white", children: selected.ticker }),
                       selected.network && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NetworkBadge, { network: selected.network, showLabel: true, className: "py-[1px]" })
                     ] })
                   ] }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-shrink-0 border-b border-white/[0.08] px-4 py-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-shrink-0 px-4 py-3", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                         Icon,
@@ -3819,6 +3884,18 @@ function AssetSelector({
                       )
                     ] }),
                     hasCategoryFilters && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setActiveCategories(categories.map((category) => category.id)),
+                          className: cn(
+                            "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
+                            activeCategories.length === categories.length ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
+                          ),
+                          children: "All"
+                        }
+                      ),
                       categories.map((category) => {
                         const isActive = activeCategories.includes(category.id);
                         return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -3836,28 +3913,20 @@ function AssetSelector({
                           },
                           category.id
                         );
-                      }),
-                      activeCategories.length !== categories.length && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => setActiveCategories(categories.map((category) => category.id)),
-                          className: "ml-auto rounded-full px-2 py-1 text-tiny font-bold uppercase tracking-wide text-white/40 transition-colors hover:text-white/75",
-                          children: "All"
-                        }
-                      )
+                      })
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ScrollArea, { className: "min-h-0", viewportClassName: "px-2 py-2 pb-6", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-white/30", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mx-4 h-px bg-white/[0.06]" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: "max-h-[56vh] px-2 py-2 pb-6", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-white/30", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: "search", size: "md", className: "opacity-40" }),
                     /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { children: [
-                      "No results",
-                      search ? ` for "${search}"` : ""
+                      "No assets match ",
+                      search ? `"${search}"` : "the active filters"
                     ] })
                   ] }) : filtered.map((option) => {
-                    const optionKey = option.id ?? option.ticker;
-                    const optionSelected = optionKey === selectedKey;
-                    const optionDisabled = option.ticker === disabledTicker;
+                    const optionKey = option.id;
+                    const optionSelected = optionKey === selectedOptionId;
+                    const optionDisabled = option.id === disabledId || option.ticker === disabledTicker;
                     return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                       "button",
                       {
@@ -3890,7 +3959,7 @@ function AssetSelector({
     InlineSelector,
     {
       label,
-      value: selectedKey,
+      value: selectedOptionId,
       options: inlineOptions,
       onChange: (ticker) => {
         onChange(ticker);
@@ -3935,7 +4004,7 @@ function AssetSelector({
         ] })
       ] }),
       renderPanelHeader: () => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "border-b border-white/[0.08] bg-white/[0.03] px-4 py-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "bg-white/[0.03] px-4 py-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: "text-xxs font-bold uppercase tracking-eyebrow-wide text-text-dimmed", children: [
               label,
@@ -3948,13 +4017,13 @@ function AssetSelector({
               " available"
             ] })
           ] }),
-          selected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-2.5 py-1", children: [
+          selected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
             /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-tiny font-semibold text-white", children: selected.ticker }),
             selected.network && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NetworkBadge, { network: selected.network, showLabel: true, className: "py-[1px]" })
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "border-b border-white/[0.08] px-4 py-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative", children: [
             /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               Icon,
@@ -3977,6 +4046,18 @@ function AssetSelector({
             )
           ] }),
           hasCategoryFilters && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setActiveCategories(categories.map((category) => category.id)),
+                className: cn(
+                  "rounded-full px-2.5 py-1 text-tiny font-bold uppercase tracking-wide shadow-inner transition-colors",
+                  activeCategories.length === categories.length ? "bg-primary/[0.14] text-primary" : "bg-surface-card text-text-dimmed hover:text-white/75"
+                ),
+                children: "All"
+              }
+            ),
             categories.map((category) => {
               const isActive = activeCategories.includes(category.id);
               return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -3994,16 +4075,7 @@ function AssetSelector({
                 },
                 category.id
               );
-            }),
-            activeCategories.length !== categories.length && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: () => setActiveCategories(categories.map((category) => category.id)),
-                className: "ml-auto rounded-full px-2 py-1 text-tiny font-bold uppercase tracking-wide text-white/40 transition-colors hover:text-white/75",
-                children: "All"
-              }
-            )
+            })
           ] })
         ] })
       ] }),
@@ -4020,6 +4092,8 @@ var PERCENTAGES = [25, 50, 75, 100];
 function SwapInputCard({
   fromTicker,
   toTicker,
+  fromSelectedId,
+  toSelectedId,
   fromInput,
   fromOptions,
   toOptions,
@@ -4031,9 +4105,11 @@ function SwapInputCard({
   selectedPercentage = null,
   percentageDisabled = false,
   fromUnitLabel,
+  fromDisplayUnit,
   fromUnitIsToggle = false,
   receiveAmount,
   receiveUnitLabel,
+  receiveDisplayUnit,
   isLoadingQuote = false,
   quoteError,
   quoteRateText,
@@ -4055,6 +4131,15 @@ function SwapInputCard({
   onFlip,
   onSubmit
 }) {
+  const availableDisplayText = formatDisplayAmountText(availableText, {
+    unit: fromDisplayUnit
+  });
+  const maxDisplayText = maxText ? formatDisplayAmountText(maxText, {
+    unit: fromDisplayUnit
+  }) : void 0;
+  const receiveDisplayText = receiveAmount ? formatDisplayAmountText(receiveAmount, {
+    unit: receiveDisplayUnit
+  }) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative mb-3 flex flex-col rounded-3xl bg-white/[0.03] shadow-2xl shadow-black/40 backdrop-blur-2xl transition-all duration-300", children: [
       /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "p-3.5 pb-4", children: [
@@ -4085,23 +4170,25 @@ function SwapInputCard({
               compact: true,
               label: "From",
               selectedTicker: fromTicker,
+              selectedId: fromSelectedId,
               options: fromOptions,
               categories,
               defaultActiveCategories,
-              disabledTicker: toTicker,
+              disabledId: toSelectedId,
               onChange: onFromTickerChange
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "min-w-0 flex-1 text-right", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "min-w-0 flex-1 overflow-hidden text-right", children: [
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "input",
               {
                 type: "text",
                 inputMode: "decimal",
                 value: fromInput,
+                maxLength: 24,
                 onChange: (event) => onFromInputChange(event.target.value),
                 placeholder: "0",
-                className: "w-full border-none bg-transparent text-right text-2xl font-bold text-white placeholder:text-white/15 focus:outline-none"
+                className: "w-full min-w-0 border-none bg-transparent text-right text-2xl font-bold tabular-nums text-white placeholder:text-white/15 focus:outline-none"
               }
             ),
             fromUnitIsToggle && onToggleFromUnit ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -4116,7 +4203,14 @@ function SwapInputCard({
             ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: fromUnitLabel })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "mt-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-xxs font-medium text-white/60", children: showMaxText && maxText ? `Max: ${maxText}` : `Available: ${availableText}` }) })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "mt-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          "p",
+          {
+            className: "min-w-0 max-w-full truncate text-xxs font-medium tabular-nums text-white/60",
+            title: showMaxText && maxText ? `Max: ${maxText}` : `Available: ${availableText}`,
+            children: showMaxText && maxDisplayText ? `Max: ${maxDisplayText}` : `Available: ${availableDisplayText}`
+          }
+        ) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "relative mx-6 flex h-px items-center justify-center bg-white/[0.08]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "absolute flex h-11 w-11 items-center justify-center rounded-full bg-card shadow-lg shadow-black/35", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "button",
@@ -4137,15 +4231,23 @@ function SwapInputCard({
               compact: true,
               label: "To",
               selectedTicker: toTicker,
+              selectedId: toSelectedId,
               options: toOptions,
               categories,
               defaultActiveCategories,
-              disabledTicker: fromTicker,
+              disabledId: fromSelectedId,
               onChange: onToTickerChange
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "min-w-0 flex-1 text-right", children: [
-            isLoadingQuote ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ml-auto h-8 w-28 animate-pulse rounded-lg bg-white/10" }) : receiveAmount ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-2xl font-bold text-primary", children: receiveAmount }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-2xl font-bold text-white/15", children: "-" }),
+            isLoadingQuote ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ml-auto h-8 w-28 animate-pulse rounded-lg bg-white/10" }) : receiveAmount ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              "span",
+              {
+                className: "block max-w-full truncate text-2xl font-bold tabular-nums text-primary",
+                title: receiveAmount,
+                children: receiveDisplayText
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-2xl font-bold text-white/15", children: "-" }),
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: receiveUnitLabel || toTicker || "-" })
           ] })
         ] })
@@ -4262,7 +4364,7 @@ function LoadingCard({ message = "Loading...", className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "mb-4 size-12 animate-spin rounded-full border-2 border-primary/20 border-t-primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "mb-4 size-12 animate-spin rounded-full border-4 border-primary/20 border-t-primary" }),
         /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-sm", children: message })
       ]
     }
@@ -7441,9 +7543,6 @@ function formatAssetBalance(asset) {
     maximumFractionDigits: Math.min(precision, 8)
   });
 }
-function NetBadge({ icon, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: cn("inline-flex items-center justify-center rounded border px-1.5 py-0.5", className), children: icon });
-}
 function DepositAssetSelection({
   setCurrentView,
   isNewAsset,
@@ -7547,7 +7646,7 @@ function DepositAssetSelection({
         {
           type: "button",
           "data-testid": "deposit-asset-btc",
-          className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
+          className: "group flex w-full items-center gap-3 rounded-2xl bg-white/3 px-4 py-3 text-sm transition-all hover:bg-accent",
           onClick: () => onSelectAsset(btcAsset),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(AssetIcon, { ticker: "BTC", size: 40 }),
@@ -7556,34 +7655,10 @@ function DepositAssetSelection({
               /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "mt-0.5 text-xs text-white/40", children: "Choose destination account next" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-shrink-0 gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                NetBadge,
-                {
-                  className: "border-network-bitcoin/20 bg-network-bitcoin/15",
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "material-symbols-outlined leading-none text-network-bitcoin", style: { fontSize: 10 }, children: "link" })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                NetBadge,
-                {
-                  className: "border-warning/20 bg-warning/15",
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("img", { src: "/icons/lightning/lightning.svg", className: "h-2.5 w-2.5", alt: "" })
-                }
-              ),
-              isSparkConnected && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                NetBadge,
-                {
-                  className: "border-info/20 bg-info/15",
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", className: "h-2.5 w-2.5", alt: "Spark" })
-                }
-              ),
-              isArkadeConnected && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                NetBadge,
-                {
-                  className: "border-network-arkade/20 bg-network-arkade/15",
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("img", { src: "/icons/arkade/arkade-icon.svg", className: "h-2.5 w-2.5 rounded-sm", alt: "Arkade" })
-                }
-              )
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(NetworkBadge, { network: "L1", size: "sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(NetworkBadge, { network: "LN", size: "sm" }),
+              isSparkConnected && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(NetworkBadge, { network: "Spark", size: "sm" }),
+              isArkadeConnected && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(NetworkBadge, { network: "Arkade", size: "sm" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-md text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
           ]
@@ -7602,8 +7677,8 @@ function DepositAssetSelection({
             onClick: () => !isSearching && setAssetsExpanded((value) => !value),
             disabled: isSearching,
             className: cn(
-              "flex w-full items-center gap-2 rounded-2xl border px-4 py-2.5 transition-all",
-              showOwnedAssets ? "border-white/10 bg-white/4" : "border-white/8 bg-white/3 hover:border-border hover:bg-accent",
+              "flex w-full items-center gap-2 rounded-2xl px-4 py-2.5 transition-all",
+              showOwnedAssets ? "bg-white/4" : "bg-white/3 hover:bg-accent",
               isSearching && "cursor-default"
             ),
             children: [
@@ -8185,6 +8260,7 @@ function DepositInvoiceGeneration({
   WithdrawSuccess,
   buttonVariants,
   cn,
+  formatDisplayAmountText,
   getAccountNetworkLabel,
   getAccountNetworkUi,
   getAccountStatusUi,