kaleido-ui 0.1.42 → 0.1.43

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,29 @@ 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 maxDecimals = unit === "sats" ? 0 : unit === "BTC" ? 8 : unit === "mBTC" ? 5 : options.maxDecimals ?? 6;
+  const raw = typeof value === "number" ? String(value) : value.trim();
+  const suffixMatch = raw.match(/(\s+[A-Za-z][\w.-]*)$/u);
+  const suffix = suffixMatch?.[1] ?? "";
+  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");
@@ -1778,6 +1802,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 +1820,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 +1831,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 +2624,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) => {
@@ -3669,8 +3702,11 @@ function AssetSelector({
   options,
   categories = [],
   defaultActiveCategories,
+  networkFilter,
+  venueFilter,
   disabled,
   disabledTicker,
+  disabledId,
   compact,
   onOpenPanelHeightChange,
   onChange
@@ -3681,21 +3717,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 +3759,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 +3779,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
+            }
+          )
         ] })
       ] })
     ] });
@@ -3819,6 +3877,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 +3906,19 @@ 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)(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 +3951,7 @@ function AssetSelector({
     InlineSelector,
     {
       label,
-      value: selectedKey,
+      value: selectedOptionId,
       options: inlineOptions,
       onChange: (ticker) => {
         onChange(ticker);
@@ -3977,6 +4038,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 +4067,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 +4084,8 @@ var PERCENTAGES = [25, 50, 75, 100];
 function SwapInputCard({
   fromTicker,
   toTicker,
+  fromSelectedId,
+  toSelectedId,
   fromInput,
   fromOptions,
   toOptions,
@@ -4031,9 +4097,11 @@ function SwapInputCard({
   selectedPercentage = null,
   percentageDisabled = false,
   fromUnitLabel,
+  fromDisplayUnit,
   fromUnitIsToggle = false,
   receiveAmount,
   receiveUnitLabel,
+  receiveDisplayUnit,
   isLoadingQuote = false,
   quoteError,
   quoteRateText,
@@ -4055,6 +4123,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 +4162,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 +4195,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 +4223,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 || "-" })
           ] })
         ] })
@@ -8185,6 +8279,7 @@ function DepositInvoiceGeneration({
   WithdrawSuccess,
   buttonVariants,
   cn,
+  formatDisplayAmountText,
   getAccountNetworkLabel,
   getAccountNetworkUi,
   getAccountStatusUi,

package/dist/web/index.d.cts

@@ -12,6 +12,13 @@ import * as ToastPrimitives from '@radix-ui/react-toast';
 
 declare function cn(...inputs: ClassValue[]): string;
 
+type AmountDisplayUnit = 'token' | 'sats' | 'BTC' | 'mBTC';
+interface AmountDisplayOptions {
+    unit?: AmountDisplayUnit;
+    maxDecimals?: number;
+}
+declare function formatDisplayAmountText(value: string | number | null | undefined, options?: AmountDisplayOptions): string;
+
 declare const buttonVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "glow" | "surface" | "cta" | "cta-gradient" | "danger-subtle" | "hyperlink" | "h1" | "h2" | "h3" | null | undefined;
     size?: "default" | "cta" | "xs" | "sm" | "lg" | "xl" | "cta-lg" | "icon" | "icon-lg" | "icon-xl" | null | undefined;
@@ -642,11 +649,14 @@ interface BalanceBreakdownProps {
 declare function BalanceBreakdown({ btcOnchain, btcLightning, btcSpark, btcArkade, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, onRefresh, isRefreshing, onNavigate, compact, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
 
 interface AssetSelectorOption {
-    id?: string;
+    id: string;
     ticker: string;
     name?: string;
     icon?: string;
     network?: NetworkType;
+    protocol?: string;
+    venue?: string;
+    assetId?: string;
     category?: string | null;
     categoryLabel?: string;
 }
@@ -661,17 +671,22 @@ interface AssetSelectorProps {
     options: AssetSelectorOption[];
     categories?: AssetSelectorCategory[];
     defaultActiveCategories?: string[];
+    networkFilter?: NetworkType | null;
+    venueFilter?: string | null;
     disabled?: boolean;
     disabledTicker?: string;
+    disabledId?: string;
     compact?: boolean;
     onOpenPanelHeightChange?: (height: number) => void;
     onChange: (id: string) => void;
 }
-declare function AssetSelector({ label, selectedTicker, selectedId, options, categories, defaultActiveCategories, disabled, disabledTicker, compact, onOpenPanelHeightChange, onChange, }: AssetSelectorProps): react_jsx_runtime.JSX.Element;
+declare function AssetSelector({ label, selectedTicker, selectedId, options, categories, defaultActiveCategories, networkFilter, venueFilter, disabled, disabledTicker, disabledId, compact, onOpenPanelHeightChange, onChange, }: AssetSelectorProps): react_jsx_runtime.JSX.Element;
 
 interface SwapInputCardProps {
     fromTicker: string;
     toTicker: string;
+    fromSelectedId?: string;
+    toSelectedId?: string;
     fromInput: string;
     fromOptions: AssetSelectorOption[];
     toOptions: AssetSelectorOption[];
@@ -683,9 +698,11 @@ interface SwapInputCardProps {
     selectedPercentage?: number | null;
     percentageDisabled?: boolean;
     fromUnitLabel: string;
+    fromDisplayUnit?: AmountDisplayUnit;
     fromUnitIsToggle?: boolean;
     receiveAmount?: string | null;
     receiveUnitLabel?: string;
+    receiveDisplayUnit?: AmountDisplayUnit;
     isLoadingQuote?: boolean;
     quoteError?: string | null;
     quoteRateText?: string | null;
@@ -709,7 +726,7 @@ interface SwapInputCardProps {
     onFlip: () => void;
     onSubmit: () => void;
 }
-declare function SwapInputCard({ fromTicker, toTicker, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, fromUnitLabel, fromUnitIsToggle, receiveAmount, receiveUnitLabel, isLoadingQuote, quoteError, quoteRateText, quoteVenueText, quoteVenueTone, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
+declare function SwapInputCard({ fromTicker, toTicker, fromSelectedId, toSelectedId, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, fromUnitLabel, fromDisplayUnit, fromUnitIsToggle, receiveAmount, receiveUnitLabel, receiveDisplayUnit, isLoadingQuote, quoteError, quoteRateText, quoteVenueText, quoteVenueTone, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
 
 interface ActivityListItem<TData = unknown> {
     id: string;
@@ -1466,4 +1483,4 @@ declare function getFallbackAssetIconUrl(seed: string): string;
  */
 declare function useAssetIcon(ticker: string, cdnBaseUrl?: string): string;
 
-export { AccountCapabilitiesCard, type AccountCapabilitiesCardProps, AccountChoiceChip, AccountHeaderIcons, AccountInfoGrid, AccountNetworkNotice, AccountNetworkPicker, AccountNetworkSelector, AccountNotice, type AccountSettingsNetwork, type AccountSettingsProtocol, AccountSettingsRow, AccountSettingsShell, AccountStatusPills, type AccountStatusTabItem, AccountStatusTabs, type AccountStatusTabsProps, ActionTile, type ActionTileProps, ActivityDetailRow, type ActivityDetailRowProps, ActivityFilterBar, type ActivityFilterBarProps, ActivityList, type ActivityListItem, type ActivityListProps, type ActivityNetworkFilterOption, type ActivityNetworkFilterValue, ActivityNetworkFilters, type ActivityNetworkFiltersProps, type ActivityStatusOption, type ActivityTypeTabCounts, type ActivityTypeTabValue, ActivityTypeTabs, AlertBanner, AppIcon, type AppIconName, type AppIconProps, ArkadeNetworkIcon, AssetCard, type AssetCardProps, AssetIcon, AssetSelector, type AssetSelectorCategory, type AssetSelectorOption, type AssetSelectorProps, BalanceBreakdown, type BalanceBreakdownAccounts, type BalanceBreakdownAsset, type BalanceBreakdownNodeInfo, type BalanceBreakdownProps, BottomNav, type BottomNavItem, type BottomNavProps, BtcUnifiedReceive, type BtcUnifiedReceiveAddress, type BtcUnifiedReceiveProps, type BtcUnifiedReceiveResult, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CopyIcon, type DepositAccountId, DepositAssetSelection, type DepositAssetSelectionProps, type DepositGeneratedAsset, DepositGeneratedView, type DepositGeneratedViewProps, type DepositGenerationController, type DepositInvoiceAsset, DepositInvoiceGeneration, type DepositInvoiceGenerationProps, type DepositNetworkConfigEntry, DepositNetworkDefaultModal, type DepositNetworkDefaultModalProps, type DepositNetworkKey, type DepositNetworkOption, DepositPreGeneration, type DepositPreGenerationAsset, type DepositPreGenerationProps, type DepositSelectionAsset, DepositSuccessScreen, type DepositSuccessScreenProps, type DepositTransferMethod, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotPagination, type DotPaginationProps, type DotTone, ErrorBoundary, ErrorCard, type ErrorCardProps, ExpandIcon, FadeOverlay, type FadeOverlayProps, FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, HeadlineGradient, type HeadlineGradientProps, Icon, type IconName, type IconProps, Icons, InlineAction, InlineSelector, type InlineSelectorOption, type InlineSelectorProps, Input, type InputProps, InvoiceStatusBanner, KaleidoScopeHeroAnimation, type KaleidoScopeHeroAnimationProps, Label, LightningNetworkIcon, LoadingCard, type LoadingCardProps, MethodChoiceChip, MobileHeroAnimation, type MobileHeroAnimationProps, NETWORK_CONFIG, NetworkBadge, type NetworkBadgeProps, type NetworkIconProps, NetworkInfoDisclosure, NetworkStatusChip, type NetworkStatusChipProps, type NetworkType, NumberInput, type NumberInputProps, OptionSelector, type OptionSelectorOption, type OptionSelectorProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, PaidOverlay, QrCode, type QrCodeProps, RecoveryPhraseCard, type RecoveryPhraseCardProps, ScrollArea, type ScrollAreaProps, SectionLabel, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SettingItem, SettingsActionButton, SettingsStatusPanel, SettingsTile, type SettingsTileProps, SparkNetworkIcon, StatusBadge, type StatusType, SwapInputCard, type SwapInputCardProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, TransactionCard, type TransactionCardProps, TransferRouteCard, WalletAssetList, type WalletAssetListEmptyState, type WalletAssetListItem, type WalletAssetListProps, type WithdrawAddressType, WithdrawAmountInput, type WithdrawAmountInputProps, WithdrawConfirmation, type WithdrawConfirmationProps, type WithdrawConfirmationRgbInvoice, type WithdrawDecodedLnInvoice, type WithdrawDecodedRgbInvoice, WithdrawDestinationInput, type WithdrawDestinationInputProps, type WithdrawInvoiceAsset, WithdrawInvoiceInfo, type WithdrawInvoiceInfoLnInvoice, type WithdrawInvoiceInfoProps, type WithdrawInvoiceInfoRgbInvoice, type WithdrawLnurlPayData, type WithdrawRouteOption, WithdrawRouteSelector, type WithdrawRouteSelectorProps, type WithdrawRouteSummary, WithdrawSuccess, type WithdrawSuccessProps, buttonVariants, cn, getAccountNetworkLabel, getAccountNetworkUi, getAccountStatusUi, getActivityNetworkFilterIcon, getAssetIconUrl, getFallbackAssetIconUrl, toast, useAssetIcon, useToast };
+export { AccountCapabilitiesCard, type AccountCapabilitiesCardProps, AccountChoiceChip, AccountHeaderIcons, AccountInfoGrid, AccountNetworkNotice, AccountNetworkPicker, AccountNetworkSelector, AccountNotice, type AccountSettingsNetwork, type AccountSettingsProtocol, AccountSettingsRow, AccountSettingsShell, AccountStatusPills, type AccountStatusTabItem, AccountStatusTabs, type AccountStatusTabsProps, ActionTile, type ActionTileProps, ActivityDetailRow, type ActivityDetailRowProps, ActivityFilterBar, type ActivityFilterBarProps, ActivityList, type ActivityListItem, type ActivityListProps, type ActivityNetworkFilterOption, type ActivityNetworkFilterValue, ActivityNetworkFilters, type ActivityNetworkFiltersProps, type ActivityStatusOption, type ActivityTypeTabCounts, type ActivityTypeTabValue, ActivityTypeTabs, AlertBanner, type AmountDisplayOptions, type AmountDisplayUnit, AppIcon, type AppIconName, type AppIconProps, ArkadeNetworkIcon, AssetCard, type AssetCardProps, AssetIcon, AssetSelector, type AssetSelectorCategory, type AssetSelectorOption, type AssetSelectorProps, BalanceBreakdown, type BalanceBreakdownAccounts, type BalanceBreakdownAsset, type BalanceBreakdownNodeInfo, type BalanceBreakdownProps, BottomNav, type BottomNavItem, type BottomNavProps, BtcUnifiedReceive, type BtcUnifiedReceiveAddress, type BtcUnifiedReceiveProps, type BtcUnifiedReceiveResult, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CopyIcon, type DepositAccountId, DepositAssetSelection, type DepositAssetSelectionProps, type DepositGeneratedAsset, DepositGeneratedView, type DepositGeneratedViewProps, type DepositGenerationController, type DepositInvoiceAsset, DepositInvoiceGeneration, type DepositInvoiceGenerationProps, type DepositNetworkConfigEntry, DepositNetworkDefaultModal, type DepositNetworkDefaultModalProps, type DepositNetworkKey, type DepositNetworkOption, DepositPreGeneration, type DepositPreGenerationAsset, type DepositPreGenerationProps, type DepositSelectionAsset, DepositSuccessScreen, type DepositSuccessScreenProps, type DepositTransferMethod, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotPagination, type DotPaginationProps, type DotTone, ErrorBoundary, ErrorCard, type ErrorCardProps, ExpandIcon, FadeOverlay, type FadeOverlayProps, FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, HeadlineGradient, type HeadlineGradientProps, Icon, type IconName, type IconProps, Icons, InlineAction, InlineSelector, type InlineSelectorOption, type InlineSelectorProps, Input, type InputProps, InvoiceStatusBanner, KaleidoScopeHeroAnimation, type KaleidoScopeHeroAnimationProps, Label, LightningNetworkIcon, LoadingCard, type LoadingCardProps, MethodChoiceChip, MobileHeroAnimation, type MobileHeroAnimationProps, NETWORK_CONFIG, NetworkBadge, type NetworkBadgeProps, type NetworkIconProps, NetworkInfoDisclosure, NetworkStatusChip, type NetworkStatusChipProps, type NetworkType, NumberInput, type NumberInputProps, OptionSelector, type OptionSelectorOption, type OptionSelectorProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, PaidOverlay, QrCode, type QrCodeProps, RecoveryPhraseCard, type RecoveryPhraseCardProps, ScrollArea, type ScrollAreaProps, SectionLabel, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SettingItem, SettingsActionButton, SettingsStatusPanel, SettingsTile, type SettingsTileProps, SparkNetworkIcon, StatusBadge, type StatusType, SwapInputCard, type SwapInputCardProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, TransactionCard, type TransactionCardProps, TransferRouteCard, WalletAssetList, type WalletAssetListEmptyState, type WalletAssetListItem, type WalletAssetListProps, type WithdrawAddressType, WithdrawAmountInput, type WithdrawAmountInputProps, WithdrawConfirmation, type WithdrawConfirmationProps, type WithdrawConfirmationRgbInvoice, type WithdrawDecodedLnInvoice, type WithdrawDecodedRgbInvoice, WithdrawDestinationInput, type WithdrawDestinationInputProps, type WithdrawInvoiceAsset, WithdrawInvoiceInfo, type WithdrawInvoiceInfoLnInvoice, type WithdrawInvoiceInfoProps, type WithdrawInvoiceInfoRgbInvoice, type WithdrawLnurlPayData, type WithdrawRouteOption, WithdrawRouteSelector, type WithdrawRouteSelectorProps, type WithdrawRouteSummary, WithdrawSuccess, type WithdrawSuccessProps, buttonVariants, cn, formatDisplayAmountText, getAccountNetworkLabel, getAccountNetworkUi, getAccountStatusUi, getActivityNetworkFilterIcon, getAssetIconUrl, getFallbackAssetIconUrl, toast, useAssetIcon, useToast };

package/dist/web/index.d.ts

@@ -12,6 +12,13 @@ import * as ToastPrimitives from '@radix-ui/react-toast';
 
 declare function cn(...inputs: ClassValue[]): string;
 
+type AmountDisplayUnit = 'token' | 'sats' | 'BTC' | 'mBTC';
+interface AmountDisplayOptions {
+    unit?: AmountDisplayUnit;
+    maxDecimals?: number;
+}
+declare function formatDisplayAmountText(value: string | number | null | undefined, options?: AmountDisplayOptions): string;
+
 declare const buttonVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "glow" | "surface" | "cta" | "cta-gradient" | "danger-subtle" | "hyperlink" | "h1" | "h2" | "h3" | null | undefined;
     size?: "default" | "cta" | "xs" | "sm" | "lg" | "xl" | "cta-lg" | "icon" | "icon-lg" | "icon-xl" | null | undefined;
@@ -642,11 +649,14 @@ interface BalanceBreakdownProps {
 declare function BalanceBreakdown({ btcOnchain, btcLightning, btcSpark, btcArkade, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, onRefresh, isRefreshing, onNavigate, compact, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
 
 interface AssetSelectorOption {
-    id?: string;
+    id: string;
     ticker: string;
     name?: string;
     icon?: string;
     network?: NetworkType;
+    protocol?: string;
+    venue?: string;
+    assetId?: string;
     category?: string | null;
     categoryLabel?: string;
 }
@@ -661,17 +671,22 @@ interface AssetSelectorProps {
     options: AssetSelectorOption[];
     categories?: AssetSelectorCategory[];
     defaultActiveCategories?: string[];
+    networkFilter?: NetworkType | null;
+    venueFilter?: string | null;
     disabled?: boolean;
     disabledTicker?: string;
+    disabledId?: string;
     compact?: boolean;
     onOpenPanelHeightChange?: (height: number) => void;
     onChange: (id: string) => void;
 }
-declare function AssetSelector({ label, selectedTicker, selectedId, options, categories, defaultActiveCategories, disabled, disabledTicker, compact, onOpenPanelHeightChange, onChange, }: AssetSelectorProps): react_jsx_runtime.JSX.Element;
+declare function AssetSelector({ label, selectedTicker, selectedId, options, categories, defaultActiveCategories, networkFilter, venueFilter, disabled, disabledTicker, disabledId, compact, onOpenPanelHeightChange, onChange, }: AssetSelectorProps): react_jsx_runtime.JSX.Element;
 
 interface SwapInputCardProps {
     fromTicker: string;
     toTicker: string;
+    fromSelectedId?: string;
+    toSelectedId?: string;
     fromInput: string;
     fromOptions: AssetSelectorOption[];
     toOptions: AssetSelectorOption[];
@@ -683,9 +698,11 @@ interface SwapInputCardProps {
     selectedPercentage?: number | null;
     percentageDisabled?: boolean;
     fromUnitLabel: string;
+    fromDisplayUnit?: AmountDisplayUnit;
     fromUnitIsToggle?: boolean;
     receiveAmount?: string | null;
     receiveUnitLabel?: string;
+    receiveDisplayUnit?: AmountDisplayUnit;
     isLoadingQuote?: boolean;
     quoteError?: string | null;
     quoteRateText?: string | null;
@@ -709,7 +726,7 @@ interface SwapInputCardProps {
     onFlip: () => void;
     onSubmit: () => void;
 }
-declare function SwapInputCard({ fromTicker, toTicker, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, fromUnitLabel, fromUnitIsToggle, receiveAmount, receiveUnitLabel, isLoadingQuote, quoteError, quoteRateText, quoteVenueText, quoteVenueTone, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
+declare function SwapInputCard({ fromTicker, toTicker, fromSelectedId, toSelectedId, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, fromUnitLabel, fromDisplayUnit, fromUnitIsToggle, receiveAmount, receiveUnitLabel, receiveDisplayUnit, isLoadingQuote, quoteError, quoteRateText, quoteVenueText, quoteVenueTone, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
 
 interface ActivityListItem<TData = unknown> {
     id: string;
@@ -1466,4 +1483,4 @@ declare function getFallbackAssetIconUrl(seed: string): string;
  */
 declare function useAssetIcon(ticker: string, cdnBaseUrl?: string): string;
 
-export { AccountCapabilitiesCard, type AccountCapabilitiesCardProps, AccountChoiceChip, AccountHeaderIcons, AccountInfoGrid, AccountNetworkNotice, AccountNetworkPicker, AccountNetworkSelector, AccountNotice, type AccountSettingsNetwork, type AccountSettingsProtocol, AccountSettingsRow, AccountSettingsShell, AccountStatusPills, type AccountStatusTabItem, AccountStatusTabs, type AccountStatusTabsProps, ActionTile, type ActionTileProps, ActivityDetailRow, type ActivityDetailRowProps, ActivityFilterBar, type ActivityFilterBarProps, ActivityList, type ActivityListItem, type ActivityListProps, type ActivityNetworkFilterOption, type ActivityNetworkFilterValue, ActivityNetworkFilters, type ActivityNetworkFiltersProps, type ActivityStatusOption, type ActivityTypeTabCounts, type ActivityTypeTabValue, ActivityTypeTabs, AlertBanner, AppIcon, type AppIconName, type AppIconProps, ArkadeNetworkIcon, AssetCard, type AssetCardProps, AssetIcon, AssetSelector, type AssetSelectorCategory, type AssetSelectorOption, type AssetSelectorProps, BalanceBreakdown, type BalanceBreakdownAccounts, type BalanceBreakdownAsset, type BalanceBreakdownNodeInfo, type BalanceBreakdownProps, BottomNav, type BottomNavItem, type BottomNavProps, BtcUnifiedReceive, type BtcUnifiedReceiveAddress, type BtcUnifiedReceiveProps, type BtcUnifiedReceiveResult, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CopyIcon, type DepositAccountId, DepositAssetSelection, type DepositAssetSelectionProps, type DepositGeneratedAsset, DepositGeneratedView, type DepositGeneratedViewProps, type DepositGenerationController, type DepositInvoiceAsset, DepositInvoiceGeneration, type DepositInvoiceGenerationProps, type DepositNetworkConfigEntry, DepositNetworkDefaultModal, type DepositNetworkDefaultModalProps, type DepositNetworkKey, type DepositNetworkOption, DepositPreGeneration, type DepositPreGenerationAsset, type DepositPreGenerationProps, type DepositSelectionAsset, DepositSuccessScreen, type DepositSuccessScreenProps, type DepositTransferMethod, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotPagination, type DotPaginationProps, type DotTone, ErrorBoundary, ErrorCard, type ErrorCardProps, ExpandIcon, FadeOverlay, type FadeOverlayProps, FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, HeadlineGradient, type HeadlineGradientProps, Icon, type IconName, type IconProps, Icons, InlineAction, InlineSelector, type InlineSelectorOption, type InlineSelectorProps, Input, type InputProps, InvoiceStatusBanner, KaleidoScopeHeroAnimation, type KaleidoScopeHeroAnimationProps, Label, LightningNetworkIcon, LoadingCard, type LoadingCardProps, MethodChoiceChip, MobileHeroAnimation, type MobileHeroAnimationProps, NETWORK_CONFIG, NetworkBadge, type NetworkBadgeProps, type NetworkIconProps, NetworkInfoDisclosure, NetworkStatusChip, type NetworkStatusChipProps, type NetworkType, NumberInput, type NumberInputProps, OptionSelector, type OptionSelectorOption, type OptionSelectorProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, PaidOverlay, QrCode, type QrCodeProps, RecoveryPhraseCard, type RecoveryPhraseCardProps, ScrollArea, type ScrollAreaProps, SectionLabel, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SettingItem, SettingsActionButton, SettingsStatusPanel, SettingsTile, type SettingsTileProps, SparkNetworkIcon, StatusBadge, type StatusType, SwapInputCard, type SwapInputCardProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, TransactionCard, type TransactionCardProps, TransferRouteCard, WalletAssetList, type WalletAssetListEmptyState, type WalletAssetListItem, type WalletAssetListProps, type WithdrawAddressType, WithdrawAmountInput, type WithdrawAmountInputProps, WithdrawConfirmation, type WithdrawConfirmationProps, type WithdrawConfirmationRgbInvoice, type WithdrawDecodedLnInvoice, type WithdrawDecodedRgbInvoice, WithdrawDestinationInput, type WithdrawDestinationInputProps, type WithdrawInvoiceAsset, WithdrawInvoiceInfo, type WithdrawInvoiceInfoLnInvoice, type WithdrawInvoiceInfoProps, type WithdrawInvoiceInfoRgbInvoice, type WithdrawLnurlPayData, type WithdrawRouteOption, WithdrawRouteSelector, type WithdrawRouteSelectorProps, type WithdrawRouteSummary, WithdrawSuccess, type WithdrawSuccessProps, buttonVariants, cn, getAccountNetworkLabel, getAccountNetworkUi, getAccountStatusUi, getActivityNetworkFilterIcon, getAssetIconUrl, getFallbackAssetIconUrl, toast, useAssetIcon, useToast };
+export { AccountCapabilitiesCard, type AccountCapabilitiesCardProps, AccountChoiceChip, AccountHeaderIcons, AccountInfoGrid, AccountNetworkNotice, AccountNetworkPicker, AccountNetworkSelector, AccountNotice, type AccountSettingsNetwork, type AccountSettingsProtocol, AccountSettingsRow, AccountSettingsShell, AccountStatusPills, type AccountStatusTabItem, AccountStatusTabs, type AccountStatusTabsProps, ActionTile, type ActionTileProps, ActivityDetailRow, type ActivityDetailRowProps, ActivityFilterBar, type ActivityFilterBarProps, ActivityList, type ActivityListItem, type ActivityListProps, type ActivityNetworkFilterOption, type ActivityNetworkFilterValue, ActivityNetworkFilters, type ActivityNetworkFiltersProps, type ActivityStatusOption, type ActivityTypeTabCounts, type ActivityTypeTabValue, ActivityTypeTabs, AlertBanner, type AmountDisplayOptions, type AmountDisplayUnit, AppIcon, type AppIconName, type AppIconProps, ArkadeNetworkIcon, AssetCard, type AssetCardProps, AssetIcon, AssetSelector, type AssetSelectorCategory, type AssetSelectorOption, type AssetSelectorProps, BalanceBreakdown, type BalanceBreakdownAccounts, type BalanceBreakdownAsset, type BalanceBreakdownNodeInfo, type BalanceBreakdownProps, BottomNav, type BottomNavItem, type BottomNavProps, BtcUnifiedReceive, type BtcUnifiedReceiveAddress, type BtcUnifiedReceiveProps, type BtcUnifiedReceiveResult, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CopyIcon, type DepositAccountId, DepositAssetSelection, type DepositAssetSelectionProps, type DepositGeneratedAsset, DepositGeneratedView, type DepositGeneratedViewProps, type DepositGenerationController, type DepositInvoiceAsset, DepositInvoiceGeneration, type DepositInvoiceGenerationProps, type DepositNetworkConfigEntry, DepositNetworkDefaultModal, type DepositNetworkDefaultModalProps, type DepositNetworkKey, type DepositNetworkOption, DepositPreGeneration, type DepositPreGenerationAsset, type DepositPreGenerationProps, type DepositSelectionAsset, DepositSuccessScreen, type DepositSuccessScreenProps, type DepositTransferMethod, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotPagination, type DotPaginationProps, type DotTone, ErrorBoundary, ErrorCard, type ErrorCardProps, ExpandIcon, FadeOverlay, type FadeOverlayProps, FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, HeadlineGradient, type HeadlineGradientProps, Icon, type IconName, type IconProps, Icons, InlineAction, InlineSelector, type InlineSelectorOption, type InlineSelectorProps, Input, type InputProps, InvoiceStatusBanner, KaleidoScopeHeroAnimation, type KaleidoScopeHeroAnimationProps, Label, LightningNetworkIcon, LoadingCard, type LoadingCardProps, MethodChoiceChip, MobileHeroAnimation, type MobileHeroAnimationProps, NETWORK_CONFIG, NetworkBadge, type NetworkBadgeProps, type NetworkIconProps, NetworkInfoDisclosure, NetworkStatusChip, type NetworkStatusChipProps, type NetworkType, NumberInput, type NumberInputProps, OptionSelector, type OptionSelectorOption, type OptionSelectorProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, PaidOverlay, QrCode, type QrCodeProps, RecoveryPhraseCard, type RecoveryPhraseCardProps, ScrollArea, type ScrollAreaProps, SectionLabel, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SettingItem, SettingsActionButton, SettingsStatusPanel, SettingsTile, type SettingsTileProps, SparkNetworkIcon, StatusBadge, type StatusType, SwapInputCard, type SwapInputCardProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, TransactionCard, type TransactionCardProps, TransferRouteCard, WalletAssetList, type WalletAssetListEmptyState, type WalletAssetListItem, type WalletAssetListProps, type WithdrawAddressType, WithdrawAmountInput, type WithdrawAmountInputProps, WithdrawConfirmation, type WithdrawConfirmationProps, type WithdrawConfirmationRgbInvoice, type WithdrawDecodedLnInvoice, type WithdrawDecodedRgbInvoice, WithdrawDestinationInput, type WithdrawDestinationInputProps, type WithdrawInvoiceAsset, WithdrawInvoiceInfo, type WithdrawInvoiceInfoLnInvoice, type WithdrawInvoiceInfoProps, type WithdrawInvoiceInfoRgbInvoice, type WithdrawLnurlPayData, type WithdrawRouteOption, WithdrawRouteSelector, type WithdrawRouteSelectorProps, type WithdrawRouteSummary, WithdrawSuccess, type WithdrawSuccessProps, buttonVariants, cn, formatDisplayAmountText, getAccountNetworkLabel, getAccountNetworkUi, getAccountStatusUi, getActivityNetworkFilterIcon, getAssetIconUrl, getFallbackAssetIconUrl, toast, useAssetIcon, useToast };

package/dist/web/index.js

@@ -7,6 +7,29 @@ function cn(...inputs) {
   return twMerge(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 maxDecimals = unit === "sats" ? 0 : unit === "BTC" ? 8 : unit === "mBTC" ? 5 : options.maxDecimals ?? 6;
+  const raw = typeof value === "number" ? String(value) : value.trim();
+  const suffixMatch = raw.match(/(\s+[A-Za-z][\w.-]*)$/u);
+  const suffix = suffixMatch?.[1] ?? "";
+  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
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
@@ -1612,6 +1635,7 @@ function AssetCard({
   className
 }) {
   const shown = balanceVisible ? displayBalance : "\u2022\u2022\u2022\u2022\u2022\u2022";
+  const displayShown = balanceVisible ? formatDisplayAmountText(displayBalance) : shown;
   const [hovered, setHovered] = useState5(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__ */ jsxs8(
@@ -1629,8 +1653,8 @@ function AssetCard({
       onMouseLeave: () => setHovered(false),
       children: [
         /* @__PURE__ */ jsx19("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__ */ jsxs8("div", { className: "flex items-center justify-between relative z-10", children: [
-          /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "relative z-10 flex min-w-0 items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 items-center gap-3", children: [
             /* @__PURE__ */ jsx19(
               AssetIcon,
               {
@@ -1640,23 +1664,31 @@ function AssetCard({
                 className: "group-hover:scale-105 transition-transform"
               }
             ),
-            /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-col", children: [
               /* @__PURE__ */ jsx19(
                 "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__ */ jsx19("div", { className: "flex flex-nowrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ jsx19(NetworkBadge, { network, size: "sm" }, network)) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs8("div", { className: "text-right", children: [
-            /* @__PURE__ */ jsx19("p", { className: "font-bold text-lg tracking-tight text-foreground group-hover:opacity-90 transition-colors", children: shown }),
-            /* @__PURE__ */ jsx19("p", { className: "text-tiny text-muted-foreground font-medium tracking-wide uppercase mt-0.5", children: ticker })
+          /* @__PURE__ */ jsxs8("div", { className: "min-w-0 max-w-[45%] text-right", children: [
+            /* @__PURE__ */ jsx19(
+              "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__ */ jsx19("p", { className: "mt-0.5 truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker })
           ] })
         ] })
       ]
@@ -2431,7 +2463,7 @@ function InlineSelector({
         ),
         children: [
           renderPanelHeader?.(renderArgs),
-          /* @__PURE__ */ jsx29("div", { className: "space-y-1", children: options.length === 0 ? /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-white/30", children: [
+          /* @__PURE__ */ jsx29("div", { className: "max-h-[60vh] space-y-1 overflow-y-auto", children: options.length === 0 ? /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-white/30", children: [
             /* @__PURE__ */ jsx29(Icon, { name: "search", size: "md", className: "opacity-40" }),
             /* @__PURE__ */ jsx29("span", { children: "No results" })
           ] }) : options.map((option) => {
@@ -3509,8 +3541,11 @@ function AssetSelector({
   options,
   categories = [],
   defaultActiveCategories,
+  networkFilter,
+  venueFilter,
   disabled,
   disabledTicker,
+  disabledId,
   compact,
   onOpenPanelHeightChange,
   onChange
@@ -3521,21 +3556,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) => {
@@ -3555,7 +3598,14 @@ function AssetSelector({
       ),
       /* @__PURE__ */ jsxs24("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-3 text-left", children: [
         /* @__PURE__ */ jsxs24("span", { className: "min-w-0 flex flex-col leading-tight", children: [
-          /* @__PURE__ */ jsx37("span", { className: "truncate text-base font-bold tracking-wide text-white", children: option.name ?? option.ticker }),
+          /* @__PURE__ */ jsx37(
+            "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__ */ jsx37("span", { className: "mt-1", children: /* @__PURE__ */ jsx37(
             NetworkBadge,
             {
@@ -3568,7 +3618,14 @@ function AssetSelector({
         ] }),
         /* @__PURE__ */ jsxs24("span", { className: "flex shrink-0 flex-col items-end gap-0.5", children: [
           optionSelected ? /* @__PURE__ */ jsx37("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__ */ jsx37("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__ */ jsx37("span", { className: "text-tiny font-medium uppercase tracking-wide text-white/35", children: optionDisabled ? "In use" : option.ticker })
+          /* @__PURE__ */ jsx37(
+            "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
+            }
+          )
         ] })
       ] })
     ] });
@@ -3659,6 +3716,18 @@ function AssetSelector({
                       )
                     ] }),
                     hasCategoryFilters && /* @__PURE__ */ jsxs24("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsx37(
+                        "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__ */ jsx37(
@@ -3676,28 +3745,19 @@ function AssetSelector({
                           },
                           category.id
                         );
-                      }),
-                      activeCategories.length !== categories.length && /* @__PURE__ */ jsx37(
-                        "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__ */ jsx37(ScrollArea, { className: "min-h-0", viewportClassName: "px-2 py-2 pb-6", children: filtered.length === 0 ? /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-white/30", children: [
+                  /* @__PURE__ */ jsx37(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: "max-h-[56vh] px-2 py-2 pb-6", children: filtered.length === 0 ? /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-sm text-white/30", children: [
                     /* @__PURE__ */ jsx37(Icon, { name: "search", size: "md", className: "opacity-40" }),
                     /* @__PURE__ */ jsxs24("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__ */ jsx37(
                       "button",
                       {
@@ -3730,7 +3790,7 @@ function AssetSelector({
     InlineSelector,
     {
       label,
-      value: selectedKey,
+      value: selectedOptionId,
       options: inlineOptions,
       onChange: (ticker) => {
         onChange(ticker);
@@ -3817,6 +3877,18 @@ function AssetSelector({
             )
           ] }),
           hasCategoryFilters && /* @__PURE__ */ jsxs24("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx37(
+              "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__ */ jsx37(
@@ -3834,16 +3906,7 @@ function AssetSelector({
                 },
                 category.id
               );
-            }),
-            activeCategories.length !== categories.length && /* @__PURE__ */ jsx37(
-              "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"
-              }
-            )
+            })
           ] })
         ] })
       ] }),
@@ -3860,6 +3923,8 @@ var PERCENTAGES = [25, 50, 75, 100];
 function SwapInputCard({
   fromTicker,
   toTicker,
+  fromSelectedId,
+  toSelectedId,
   fromInput,
   fromOptions,
   toOptions,
@@ -3871,9 +3936,11 @@ function SwapInputCard({
   selectedPercentage = null,
   percentageDisabled = false,
   fromUnitLabel,
+  fromDisplayUnit,
   fromUnitIsToggle = false,
   receiveAmount,
   receiveUnitLabel,
+  receiveDisplayUnit,
   isLoadingQuote = false,
   quoteError,
   quoteRateText,
@@ -3895,6 +3962,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__ */ jsxs25(Fragment7, { children: [
     /* @__PURE__ */ jsxs25("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__ */ jsxs25("div", { className: "p-3.5 pb-4", children: [
@@ -3925,23 +4001,25 @@ function SwapInputCard({
               compact: true,
               label: "From",
               selectedTicker: fromTicker,
+              selectedId: fromSelectedId,
               options: fromOptions,
               categories,
               defaultActiveCategories,
-              disabledTicker: toTicker,
+              disabledId: toSelectedId,
               onChange: onFromTickerChange
             }
           ),
-          /* @__PURE__ */ jsxs25("div", { className: "min-w-0 flex-1 text-right", children: [
+          /* @__PURE__ */ jsxs25("div", { className: "min-w-0 flex-1 overflow-hidden text-right", children: [
             /* @__PURE__ */ jsx38(
               "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__ */ jsx38(
@@ -3956,7 +4034,14 @@ function SwapInputCard({
             ) : /* @__PURE__ */ jsx38("p", { className: "mt-0.5 text-xs text-muted-foreground", children: fromUnitLabel })
           ] })
         ] }),
-        /* @__PURE__ */ jsx38("div", { className: "mt-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ jsx38("p", { className: "text-xxs font-medium text-white/60", children: showMaxText && maxText ? `Max: ${maxText}` : `Available: ${availableText}` }) })
+        /* @__PURE__ */ jsx38("div", { className: "mt-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ jsx38(
+          "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__ */ jsx38("div", { className: "relative mx-6 flex h-px items-center justify-center bg-white/[0.08]", children: /* @__PURE__ */ jsx38("span", { className: "absolute flex h-11 w-11 items-center justify-center rounded-full bg-card shadow-lg shadow-black/35", children: /* @__PURE__ */ jsx38(
         "button",
@@ -3977,15 +4062,23 @@ function SwapInputCard({
               compact: true,
               label: "To",
               selectedTicker: toTicker,
+              selectedId: toSelectedId,
               options: toOptions,
               categories,
               defaultActiveCategories,
-              disabledTicker: fromTicker,
+              disabledId: fromSelectedId,
               onChange: onToTickerChange
             }
           ),
           /* @__PURE__ */ jsxs25("div", { className: "min-w-0 flex-1 text-right", children: [
-            isLoadingQuote ? /* @__PURE__ */ jsx38("div", { className: "ml-auto h-8 w-28 animate-pulse rounded-lg bg-white/10" }) : receiveAmount ? /* @__PURE__ */ jsx38("span", { className: "text-2xl font-bold text-primary", children: receiveAmount }) : /* @__PURE__ */ jsx38("span", { className: "text-2xl font-bold text-white/15", children: "-" }),
+            isLoadingQuote ? /* @__PURE__ */ jsx38("div", { className: "ml-auto h-8 w-28 animate-pulse rounded-lg bg-white/10" }) : receiveAmount ? /* @__PURE__ */ jsx38(
+              "span",
+              {
+                className: "block max-w-full truncate text-2xl font-bold tabular-nums text-primary",
+                title: receiveAmount,
+                children: receiveDisplayText
+              }
+            ) : /* @__PURE__ */ jsx38("span", { className: "text-2xl font-bold text-white/15", children: "-" }),
             /* @__PURE__ */ jsx38("p", { className: "mt-0.5 text-xs text-muted-foreground", children: receiveUnitLabel || toTicker || "-" })
           ] })
         ] })
@@ -8024,6 +8117,7 @@ export {
   WithdrawSuccess,
   buttonVariants,
   cn,
+  formatDisplayAmountText,
   getAccountNetworkLabel,
   getAccountNetworkUi,
   getAccountStatusUi,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",