kaleido-ui 0.1.44 → 0.1.46

package/dist/web/index.cjs

@@ -2631,7 +2631,7 @@ function InlineSelector({
         ),
         children: [
           renderPanelHeader?.(renderArgs),
-          /* @__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)("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)(Icon, { name: "search", size: "md", className: "opacity-40" }),
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: "No results" })
           ] }) : options.map((option) => {
@@ -3379,7 +3379,8 @@ function BalanceBreakdown({
   onRefresh,
   isRefreshing = false,
   onNavigate,
-  compact = false
+  compact = false,
+  tokenValueSats
 }) {
   const [expanded, setExpanded] = (0, import_react10.useState)(false);
   const fiatTotal = formatFiatValue(totalBTC);
@@ -3402,7 +3403,7 @@ function BalanceBreakdown({
                   /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-9 w-36 animate-pulse rounded-lg bg-white/10" }),
                   /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-3 w-20 animate-pulse rounded bg-white/5" })
                 ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex min-w-0 max-w-full flex-wrap items-baseline gap-x-2.5 gap-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex min-w-0 max-w-full flex-wrap items-baseline gap-x-1.5 gap-y-1", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-display font-black leading-[1.1] tracking-tighter text-white drop-shadow-sm transition-all duration-300 group-active:scale-95 group-active:text-primary", children: balanceVisible ? numberOnly(format(totalBTC)) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
                     unit !== "fiat" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "inline-block rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-tiny font-bold uppercase tracking-widest text-white/45", children: label }),
                     isPartial && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -3545,6 +3546,23 @@ function BalanceBreakdown({
                 }
               ),
               rgbAssets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RgbAssetsBreakdown, { assets: rgbAssets, balanceVisible }),
+              tokenValueSats !== void 0 && tokenValueSats > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mt-3 border-t border-white/[0.08] pt-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "Token Holdings" }),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between rounded-xl bg-white/[0.03] px-3 py-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-7 w-0.5 rounded-full bg-success opacity-80" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex size-7 items-center justify-center rounded-lg bg-white/5 text-icon-sm", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "material-symbols-outlined leading-none", style: { fontSize: "inherit" }, children: "payments" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-xs font-semibold leading-tight text-white/80", children: "Stablecoins & Tokens" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mt-0.5 text-xxs font-medium leading-tight text-white/30", children: "Converted value in BTC" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col items-end", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "tabular-nums text-xs font-bold text-white", children: balanceVisible ? format(tokenValueSats) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
+                    balanceVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mt-0.5 font-mono text-xxs text-white/35", children: formatFiatValue(tokenValueSats) })
+                  ] })
+                ] })
+              ] }),
               accounts.RGB?.connected && nodeInfo?.pubkey && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mt-3 border-t border-white/[0.08] pt-4", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "RLN Details" }),
                 /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
@@ -3765,25 +3783,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: "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,
-            {
-              network: option.network,
-              showLabel: true,
-              size: "sm",
-              className: "py-[1px]"
-            }
-          ) })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "min-w-0 flex flex-col leading-tight", children: /* @__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
+          }
+        ) }),
         /* @__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)(
@@ -3857,8 +3864,7 @@ function AssetSelector({
                     ] }),
                     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.jsx)("span", { className: "text-tiny font-semibold text-white", children: selected.ticker })
                     ] })
                   ] }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-shrink-0 px-4 py-3", children: [
@@ -3972,21 +3978,11 @@ function AssetSelector({
       onOpenPanelHeightChange,
       renderTrigger: ({ open: open2 }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "block", children: [
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "mb-1.5 ml-1 block text-xs font-semibold uppercase tracking-wider text-white/40", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex w-full items-center justify-between rounded-xl border bg-card/70 p-3 text-left transition-all duration-200 hover:border-primary/40", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex w-full items-center justify-between rounded-2xl bg-card/70 px-4 py-3 text-left transition-all duration-200 hover:bg-card/90", children: [
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex items-center gap-3", children: selected ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 32 }),
             /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex items-center gap-1.5 text-sm font-semibold text-white", children: [
-                selected.ticker,
-                selected.network && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                  NetworkBadge,
-                  {
-                    network: selected.network,
-                    showLabel: true,
-                    className: "px-1.5 py-0 text-xxs"
-                  }
-                )
-              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-sm font-semibold text-white", children: selected.ticker }),
               /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "mt-0.5 block text-xs text-white/35", children: selected.name })
             ] })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-sm text-white/35", children: "Select asset..." }) }),
@@ -4019,8 +4015,7 @@ function AssetSelector({
           ] }),
           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.jsx)("span", { className: "text-tiny font-semibold text-white", children: selected.ticker })
           ] })
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "px-4 py-3", children: [
@@ -4795,42 +4790,53 @@ function WithdrawAmountInput({
 }) {
   const unitLabel = selectedAssetId === "BTC" ? "sats" : selectedAssetTicker ?? "units";
   const showAmountInput = addressType === "bitcoin" || addressType === "spark" || addressType === "arkade" || addressType === "lightning-address" || addressType === "lnurl-pay" || addressType === "rgb" && !decodedRgbInvoice?.assignment?.value || addressType === "lightning" && !decodedLnInvoice?.amount && !decodedLnInvoice?.asset_amount;
+  const enteredNum = parseFloat(amount.replace(/[^\d.-]/g, "") || "0") || 0;
+  const balanceNum = parseFloat(formattedBalance.replace(/,/g, "") || "0") || 0;
+  const isOverBalance = enteredNum > 0 && balanceNum > 0 && enteredNum > balanceNum;
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-    showAmountInput && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "space-y-2", children: [
+    showAmountInput && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "space-y-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { className: "ml-1 text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "Amount" }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "relative flex flex-col items-center justify-center gap-2 overflow-hidden rounded-3xl border bg-card/90 px-6 py-8 shadow-lg backdrop-blur-2xl transition-all focus-within:border-primary/50", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent to-primary/5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "z-10 flex w-full items-baseline justify-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "overflow-hidden rounded-2xl bg-card/70", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-3 px-4 pt-3.5 pb-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              "input",
+              {
+                type: "text",
+                inputMode: "decimal",
+                className: "w-full bg-transparent text-2xl font-bold text-white outline-none placeholder:text-white/15",
+                placeholder: "0",
+                value: amount,
+                onChange: handleAmountChange
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: unitLabel })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            "input",
+            "button",
             {
-              type: "text",
-              inputMode: "decimal",
-              className: "w-full bg-transparent text-center text-5xl font-bold text-white outline-none placeholder:text-white/10",
-              placeholder: "0",
-              value: amount,
-              onChange: handleAmountChange
+              type: "button",
+              className: "shrink-0 rounded-lg bg-primary/15 px-3 py-1.5 text-xxs font-bold uppercase tracking-wider text-primary transition-colors hover:bg-primary/25",
+              onClick: handleSetMax,
+              children: "Max"
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xl font-medium text-muted-foreground", children: unitLabel })
+          )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "absolute right-4 top-4 rounded-xl border bg-card px-4 py-2 text-xs font-bold uppercase tracking-wider text-primary shadow-inner transition-colors hover:bg-primary/20",
-            onClick: handleSetMax,
-            children: "Max"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("p", { className: "mt-1 px-1 text-right text-xs text-muted-foreground", children: [
-        "Available: ",
-        formattedBalance,
-        " ",
-        unitLabel
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn(
+          "flex items-center justify-between border-t border-white/[0.05] px-4 py-2"
+        ), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xxs text-white/40", children: "Available" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: cn(
+            "tabular-nums text-xxs font-medium",
+            isOverBalance ? "text-danger" : "text-white/55"
+          ), children: [
+            formattedBalance,
+            " ",
+            unitLabel
+          ] })
+        ] })
       ] }),
-      lnurlPayData && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "mt-2 space-y-1 px-1", children: [
+      lnurlPayData && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "space-y-1 px-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
           Math.ceil(lnurlPayData.params.min).toLocaleString(),
           " \u2013",
@@ -5020,9 +5026,25 @@ function RouteChoiceCard({
   route,
   selected,
   recommended,
-  onClick
+  onClick,
+  displayOnly
 }) {
   const { disabled = false, disabledReason, accountIcon, balanceLabel } = route;
+  if (displayOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "rounded-2xl bg-card/50 px-4 py-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
+        accountIcon && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "shrink-0", children: accountIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-sm font-semibold text-white", children: route.accountTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-0.5 text-xs text-white/45", children: route.methodLabel })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint }),
+        balanceLabel && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "font-mono text-xxs text-white/50", children: balanceLabel })
+      ] })
+    ] }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "button",
     {
@@ -5064,33 +5086,22 @@ function WithdrawRouteSelector({
   routes,
   activeRouteAccount,
   recommendedRouteAccount,
-  selectedRouteSummary,
-  selectedAccountTitle,
   onRouteChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("label", { className: "ml-1 text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "Route" }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "ml-1 mt-1 text-xs text-muted-foreground", children: "Choose the account to spend from. The transfer method is derived from the destination you entered." })
-    ] }),
+  const isDisplayOnly = routes.length === 1 && !routes[0].disabled;
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("label", { className: "ml-1 text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "Route" }),
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "space-y-2", children: routes.map((route) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       RouteChoiceCard,
       {
         route,
         selected: activeRouteAccount === route.account,
         recommended: recommendedRouteAccount === route.account,
-        onClick: () => onRouteChange(route.account)
+        onClick: () => onRouteChange(route.account),
+        displayOnly: isDisplayOnly
       },
       route.account
-    )) }),
-    selectedRouteSummary && activeRouteAccount && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "rounded-2xl border bg-white/4 p-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs uppercase tracking-wider text-white/35", children: "Selected path" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs font-bold text-white", children: selectedAccountTitle })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-2 text-sm font-semibold text-white", children: selectedRouteSummary.methodLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: selectedRouteSummary.summary })
-    ] })
+    )) })
   ] });
 }
 
@@ -5115,7 +5126,7 @@ function WithdrawConfirmation({
   amount,
   handleConfirmSend
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "relative min-h-screen bg-background pb-6 pt-16 font-display text-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "absolute left-4 top-4 z-30", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       Button,
       {
@@ -5132,7 +5143,7 @@ function WithdrawConfirmation({
         children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { name: "arrow_back", size: "xl" })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("main", { className: "space-y-6 px-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ScrollArea, { className: "flex-1", viewportClassName: "px-5 pt-16 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("main", { className: "space-y-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col items-center py-6", children: [
         /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "mb-1 text-sm uppercase tracking-wide text-muted-foreground", children: "Sending" }),
         /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h1", { className: "mb-2 text-4xl font-bold", children: displayAmount.toLocaleString() }),
@@ -5213,7 +5224,7 @@ function WithdrawConfirmation({
           ] })
         }
       )
-    ] })
+    ] }) })
   ] });
 }
 
@@ -7632,7 +7643,7 @@ function DepositAssetSelection({
         {
           autoFocus: true,
           "data-testid": "deposit-asset-search",
-          className: "w-full rounded-xl border border-white/8 bg-white/5 py-2.5 pl-10 pr-4 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/40 focus:bg-white/8",
+          className: "w-full rounded-xl border border-transparent bg-white/5 py-2.5 pl-10 pr-4 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/40 focus:bg-white/8",
           onChange: (event) => setSearchQuery(event.target.value),
           placeholder: "Search assets...",
           type: "text",
@@ -7646,15 +7657,15 @@ function DepositAssetSelection({
         {
           type: "button",
           "data-testid": "deposit-asset-btc",
-          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",
+          className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden 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 }),
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(AssetIcon, { ticker: "BTC", size: 40, className: "flex-shrink-0" }),
             /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
               /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: "Bitcoin" }),
               /* @__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.jsxs)("div", { className: "hidden min-w-0 max-w-[42%] flex-shrink flex-wrap justify-end gap-1 min-[380px]:flex", children: [
               /* @__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" }),
@@ -7683,7 +7694,7 @@ function DepositAssetSelection({
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-xxs font-bold uppercase tracking-[0.18em] text-white/55", children: "Your assets" }),
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "rounded-full bg-white/10 px-1.5 py-0.5 text-tiny font-bold text-white/70", children: ownedAssetsCount }),
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "inline-flex size-5 items-center justify-center rounded-full bg-white/10 text-tiny font-bold text-white/70", children: ownedAssetsCount }),
               /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex-1" }),
               !isSearching && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "material-symbols-outlined text-icon-md text-white/40", children: showOwnedAssets ? "expand_less" : "expand_more" })
             ]
@@ -7697,12 +7708,12 @@ function DepositAssetSelection({
             {
               type: "button",
               "data-testid": `deposit-asset-${asset.asset_id}`,
-              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 min-w-0 items-center gap-3 overflow-hidden rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
               onClick: () => onSelectAsset(asset),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(AssetIcon, { ticker: asset.ticker, size: 40, className: "flex-shrink-0" }),
                 /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex min-w-0 items-center gap-1.5", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "truncate font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: asset.ticker }),
                     protocolBadge && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                       "span",

package/dist/web/index.d.cts

@@ -645,8 +645,14 @@ interface BalanceBreakdownProps {
     onNavigate?: (view: 'deposit' | 'swap' | 'withdraw') => void;
     /** Reduce vertical padding/margins so the card occupies less of the viewport. */
     compact?: boolean;
+    /**
+     * Sats-equivalent value of all non-BTC assets with known USD prices
+     * (e.g. stablecoins). Included in totalBTC for the headline; surfaced
+     * separately here so the expanded breakdown can show it as its own row.
+     */
+    tokenValueSats?: number;
 }
-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;
+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, tokenValueSats, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
 
 interface AssetSelectorOption {
     id: string;
@@ -924,7 +930,7 @@ interface WithdrawRouteSelectorProps<TAccount extends string = string> {
     selectedAccountTitle?: string;
     onRouteChange: (account: TAccount) => void;
 }
-declare function WithdrawRouteSelector<TAccount extends string = string>({ routes, activeRouteAccount, recommendedRouteAccount, selectedRouteSummary, selectedAccountTitle, onRouteChange, }: WithdrawRouteSelectorProps<TAccount>): react_jsx_runtime.JSX.Element;
+declare function WithdrawRouteSelector<TAccount extends string = string>({ routes, activeRouteAccount, recommendedRouteAccount, onRouteChange, }: WithdrawRouteSelectorProps<TAccount>): react_jsx_runtime.JSX.Element;
 
 interface WithdrawConfirmationRgbInvoice {
     recipient_type?: string;

package/dist/web/index.d.ts

@@ -645,8 +645,14 @@ interface BalanceBreakdownProps {
     onNavigate?: (view: 'deposit' | 'swap' | 'withdraw') => void;
     /** Reduce vertical padding/margins so the card occupies less of the viewport. */
     compact?: boolean;
+    /**
+     * Sats-equivalent value of all non-BTC assets with known USD prices
+     * (e.g. stablecoins). Included in totalBTC for the headline; surfaced
+     * separately here so the expanded breakdown can show it as its own row.
+     */
+    tokenValueSats?: number;
 }
-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;
+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, tokenValueSats, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
 
 interface AssetSelectorOption {
     id: string;
@@ -924,7 +930,7 @@ interface WithdrawRouteSelectorProps<TAccount extends string = string> {
     selectedAccountTitle?: string;
     onRouteChange: (account: TAccount) => void;
 }
-declare function WithdrawRouteSelector<TAccount extends string = string>({ routes, activeRouteAccount, recommendedRouteAccount, selectedRouteSummary, selectedAccountTitle, onRouteChange, }: WithdrawRouteSelectorProps<TAccount>): react_jsx_runtime.JSX.Element;
+declare function WithdrawRouteSelector<TAccount extends string = string>({ routes, activeRouteAccount, recommendedRouteAccount, onRouteChange, }: WithdrawRouteSelectorProps<TAccount>): react_jsx_runtime.JSX.Element;
 
 interface WithdrawConfirmationRgbInvoice {
     recipient_type?: string;

package/dist/web/index.js

@@ -2470,7 +2470,7 @@ function InlineSelector({
         ),
         children: [
           renderPanelHeader?.(renderArgs),
-          /* @__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("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(Icon, { name: "search", size: "md", className: "opacity-40" }),
             /* @__PURE__ */ jsx29("span", { children: "No results" })
           ] }) : options.map((option) => {
@@ -3218,7 +3218,8 @@ function BalanceBreakdown({
   onRefresh,
   isRefreshing = false,
   onNavigate,
-  compact = false
+  compact = false,
+  tokenValueSats
 }) {
   const [expanded, setExpanded] = useState10(false);
   const fiatTotal = formatFiatValue(totalBTC);
@@ -3241,7 +3242,7 @@ function BalanceBreakdown({
                   /* @__PURE__ */ jsx36("div", { className: "h-9 w-36 animate-pulse rounded-lg bg-white/10" }),
                   /* @__PURE__ */ jsx36("div", { className: "h-3 w-20 animate-pulse rounded bg-white/5" })
                 ] }) : /* @__PURE__ */ jsxs23(Fragment5, { children: [
-                  /* @__PURE__ */ jsxs23("div", { className: "flex min-w-0 max-w-full flex-wrap items-baseline gap-x-2.5 gap-y-1", children: [
+                  /* @__PURE__ */ jsxs23("div", { className: "flex min-w-0 max-w-full flex-wrap items-baseline gap-x-1.5 gap-y-1", children: [
                     /* @__PURE__ */ jsx36("span", { className: "text-display font-black leading-[1.1] tracking-tighter text-white drop-shadow-sm transition-all duration-300 group-active:scale-95 group-active:text-primary", children: balanceVisible ? numberOnly(format(totalBTC)) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
                     unit !== "fiat" && /* @__PURE__ */ jsx36("span", { className: "inline-block rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-tiny font-bold uppercase tracking-widest text-white/45", children: label }),
                     isPartial && /* @__PURE__ */ jsx36(
@@ -3384,6 +3385,23 @@ function BalanceBreakdown({
                 }
               ),
               rgbAssets.length > 0 && /* @__PURE__ */ jsx36(RgbAssetsBreakdown, { assets: rgbAssets, balanceVisible }),
+              tokenValueSats !== void 0 && tokenValueSats > 0 && /* @__PURE__ */ jsxs23("div", { className: "mt-3 border-t border-white/[0.08] pt-4", children: [
+                /* @__PURE__ */ jsx36("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "Token Holdings" }),
+                /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between rounded-xl bg-white/[0.03] px-3 py-2", children: [
+                  /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsx36("div", { className: "h-7 w-0.5 rounded-full bg-success opacity-80" }),
+                    /* @__PURE__ */ jsx36("div", { className: "flex size-7 items-center justify-center rounded-lg bg-white/5 text-icon-sm", children: /* @__PURE__ */ jsx36("span", { className: "material-symbols-outlined leading-none", style: { fontSize: "inherit" }, children: "payments" }) }),
+                    /* @__PURE__ */ jsxs23("div", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ jsx36("span", { className: "text-xs font-semibold leading-tight text-white/80", children: "Stablecoins & Tokens" }),
+                      /* @__PURE__ */ jsx36("span", { className: "mt-0.5 text-xxs font-medium leading-tight text-white/30", children: "Converted value in BTC" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-end", children: [
+                    /* @__PURE__ */ jsx36("span", { className: "tabular-nums text-xs font-bold text-white", children: balanceVisible ? format(tokenValueSats) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
+                    balanceVisible && /* @__PURE__ */ jsx36("span", { className: "mt-0.5 font-mono text-xxs text-white/35", children: formatFiatValue(tokenValueSats) })
+                  ] })
+                ] })
+              ] }),
               accounts.RGB?.connected && nodeInfo?.pubkey && /* @__PURE__ */ jsxs23("div", { className: "mt-3 border-t border-white/[0.08] pt-4", children: [
                 /* @__PURE__ */ jsx36("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "RLN Details" }),
                 /* @__PURE__ */ jsxs23("div", { className: "grid grid-cols-3 gap-2", children: [
@@ -3604,25 +3622,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: "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,
-            {
-              network: option.network,
-              showLabel: true,
-              size: "sm",
-              className: "py-[1px]"
-            }
-          ) })
-        ] }),
+        /* @__PURE__ */ jsx37("span", { className: "min-w-0 flex flex-col leading-tight", children: /* @__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
+          }
+        ) }),
         /* @__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(
@@ -3696,8 +3703,7 @@ function AssetSelector({
                     ] }),
                     selected && /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
                       /* @__PURE__ */ jsx37(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
-                      /* @__PURE__ */ jsx37("span", { className: "text-tiny font-semibold text-white", children: selected.ticker }),
-                      selected.network && /* @__PURE__ */ jsx37(NetworkBadge, { network: selected.network, showLabel: true, className: "py-[1px]" })
+                      /* @__PURE__ */ jsx37("span", { className: "text-tiny font-semibold text-white", children: selected.ticker })
                     ] })
                   ] }) }),
                   /* @__PURE__ */ jsxs24("div", { className: "flex-shrink-0 px-4 py-3", children: [
@@ -3811,21 +3817,11 @@ function AssetSelector({
       onOpenPanelHeightChange,
       renderTrigger: ({ open: open2 }) => /* @__PURE__ */ jsxs24("span", { className: "block", children: [
         /* @__PURE__ */ jsx37("span", { className: "mb-1.5 ml-1 block text-xs font-semibold uppercase tracking-wider text-white/40", children: label }),
-        /* @__PURE__ */ jsxs24("span", { className: "flex w-full items-center justify-between rounded-xl border bg-card/70 p-3 text-left transition-all duration-200 hover:border-primary/40", children: [
+        /* @__PURE__ */ jsxs24("span", { className: "flex w-full items-center justify-between rounded-2xl bg-card/70 px-4 py-3 text-left transition-all duration-200 hover:bg-card/90", children: [
           /* @__PURE__ */ jsx37("span", { className: "flex items-center gap-3", children: selected ? /* @__PURE__ */ jsxs24(Fragment6, { children: [
             /* @__PURE__ */ jsx37(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 32 }),
             /* @__PURE__ */ jsxs24("span", { children: [
-              /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-1.5 text-sm font-semibold text-white", children: [
-                selected.ticker,
-                selected.network && /* @__PURE__ */ jsx37(
-                  NetworkBadge,
-                  {
-                    network: selected.network,
-                    showLabel: true,
-                    className: "px-1.5 py-0 text-xxs"
-                  }
-                )
-              ] }),
+              /* @__PURE__ */ jsx37("span", { className: "text-sm font-semibold text-white", children: selected.ticker }),
               /* @__PURE__ */ jsx37("span", { className: "mt-0.5 block text-xs text-white/35", children: selected.name })
             ] })
           ] }) : /* @__PURE__ */ jsx37("span", { className: "text-sm text-white/35", children: "Select asset..." }) }),
@@ -3858,8 +3854,7 @@ function AssetSelector({
           ] }),
           selected && /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1", children: [
             /* @__PURE__ */ jsx37(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
-            /* @__PURE__ */ jsx37("span", { className: "text-tiny font-semibold text-white", children: selected.ticker }),
-            selected.network && /* @__PURE__ */ jsx37(NetworkBadge, { network: selected.network, showLabel: true, className: "py-[1px]" })
+            /* @__PURE__ */ jsx37("span", { className: "text-tiny font-semibold text-white", children: selected.ticker })
           ] })
         ] }) }),
         /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3", children: [
@@ -4634,42 +4629,53 @@ function WithdrawAmountInput({
 }) {
   const unitLabel = selectedAssetId === "BTC" ? "sats" : selectedAssetTicker ?? "units";
   const showAmountInput = addressType === "bitcoin" || addressType === "spark" || addressType === "arkade" || addressType === "lightning-address" || addressType === "lnurl-pay" || addressType === "rgb" && !decodedRgbInvoice?.assignment?.value || addressType === "lightning" && !decodedLnInvoice?.amount && !decodedLnInvoice?.asset_amount;
+  const enteredNum = parseFloat(amount.replace(/[^\d.-]/g, "") || "0") || 0;
+  const balanceNum = parseFloat(formattedBalance.replace(/,/g, "") || "0") || 0;
+  const isOverBalance = enteredNum > 0 && balanceNum > 0 && enteredNum > balanceNum;
   return /* @__PURE__ */ jsxs33(Fragment9, { children: [
-    showAmountInput && /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
+    showAmountInput && /* @__PURE__ */ jsxs33("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx46("label", { className: "ml-1 text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "Amount" }),
-      /* @__PURE__ */ jsxs33("div", { className: "relative flex flex-col items-center justify-center gap-2 overflow-hidden rounded-3xl border bg-card/90 px-6 py-8 shadow-lg backdrop-blur-2xl transition-all focus-within:border-primary/50", children: [
-        /* @__PURE__ */ jsx46("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent to-primary/5" }),
-        /* @__PURE__ */ jsxs33("div", { className: "z-10 flex w-full items-baseline justify-center gap-2", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "overflow-hidden rounded-2xl bg-card/70", children: [
+        /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3 px-4 pt-3.5 pb-2.5", children: [
+          /* @__PURE__ */ jsxs33("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx46(
+              "input",
+              {
+                type: "text",
+                inputMode: "decimal",
+                className: "w-full bg-transparent text-2xl font-bold text-white outline-none placeholder:text-white/15",
+                placeholder: "0",
+                value: amount,
+                onChange: handleAmountChange
+              }
+            ),
+            /* @__PURE__ */ jsx46("p", { className: "mt-0.5 text-xs text-muted-foreground", children: unitLabel })
+          ] }),
           /* @__PURE__ */ jsx46(
-            "input",
+            "button",
             {
-              type: "text",
-              inputMode: "decimal",
-              className: "w-full bg-transparent text-center text-5xl font-bold text-white outline-none placeholder:text-white/10",
-              placeholder: "0",
-              value: amount,
-              onChange: handleAmountChange
+              type: "button",
+              className: "shrink-0 rounded-lg bg-primary/15 px-3 py-1.5 text-xxs font-bold uppercase tracking-wider text-primary transition-colors hover:bg-primary/25",
+              onClick: handleSetMax,
+              children: "Max"
             }
-          ),
-          /* @__PURE__ */ jsx46("span", { className: "text-xl font-medium text-muted-foreground", children: unitLabel })
+          )
         ] }),
-        /* @__PURE__ */ jsx46(
-          "button",
-          {
-            type: "button",
-            className: "absolute right-4 top-4 rounded-xl border bg-card px-4 py-2 text-xs font-bold uppercase tracking-wider text-primary shadow-inner transition-colors hover:bg-primary/20",
-            onClick: handleSetMax,
-            children: "Max"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs33("p", { className: "mt-1 px-1 text-right text-xs text-muted-foreground", children: [
-        "Available: ",
-        formattedBalance,
-        " ",
-        unitLabel
+        /* @__PURE__ */ jsxs33("div", { className: cn(
+          "flex items-center justify-between border-t border-white/[0.05] px-4 py-2"
+        ), children: [
+          /* @__PURE__ */ jsx46("span", { className: "text-xxs text-white/40", children: "Available" }),
+          /* @__PURE__ */ jsxs33("span", { className: cn(
+            "tabular-nums text-xxs font-medium",
+            isOverBalance ? "text-danger" : "text-white/55"
+          ), children: [
+            formattedBalance,
+            " ",
+            unitLabel
+          ] })
+        ] })
       ] }),
-      lnurlPayData && /* @__PURE__ */ jsxs33("div", { className: "mt-2 space-y-1 px-1", children: [
+      lnurlPayData && /* @__PURE__ */ jsxs33("div", { className: "space-y-1 px-1", children: [
         /* @__PURE__ */ jsxs33("p", { className: "text-xs text-muted-foreground", children: [
           Math.ceil(lnurlPayData.params.min).toLocaleString(),
           " \u2013",
@@ -4859,9 +4865,25 @@ function RouteChoiceCard({
   route,
   selected,
   recommended,
-  onClick
+  onClick,
+  displayOnly
 }) {
   const { disabled = false, disabledReason, accountIcon, balanceLabel } = route;
+  if (displayOnly) {
+    return /* @__PURE__ */ jsx48("div", { className: "rounded-2xl bg-card/50 px-4 py-3.5", children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs35("div", { className: "flex min-w-0 items-center gap-3", children: [
+        accountIcon && /* @__PURE__ */ jsx48("div", { className: "shrink-0", children: accountIcon }),
+        /* @__PURE__ */ jsxs35("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx48("span", { className: "text-sm font-semibold text-white", children: route.accountTitle }),
+          /* @__PURE__ */ jsx48("p", { className: "mt-0.5 text-xs text-white/45", children: route.methodLabel })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs35("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+        /* @__PURE__ */ jsx48("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint }),
+        balanceLabel && /* @__PURE__ */ jsx48("span", { className: "font-mono text-xxs text-white/50", children: balanceLabel })
+      ] })
+    ] }) });
+  }
   return /* @__PURE__ */ jsxs35(
     "button",
     {
@@ -4903,33 +4925,22 @@ function WithdrawRouteSelector({
   routes,
   activeRouteAccount,
   recommendedRouteAccount,
-  selectedRouteSummary,
-  selectedAccountTitle,
   onRouteChange
 }) {
-  return /* @__PURE__ */ jsxs35("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs35("div", { children: [
-      /* @__PURE__ */ jsx48("label", { className: "ml-1 text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "Route" }),
-      /* @__PURE__ */ jsx48("p", { className: "ml-1 mt-1 text-xs text-muted-foreground", children: "Choose the account to spend from. The transfer method is derived from the destination you entered." })
-    ] }),
+  const isDisplayOnly = routes.length === 1 && !routes[0].disabled;
+  return /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx48("label", { className: "ml-1 text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "Route" }),
     /* @__PURE__ */ jsx48("div", { className: "space-y-2", children: routes.map((route) => /* @__PURE__ */ jsx48(
       RouteChoiceCard,
       {
         route,
         selected: activeRouteAccount === route.account,
         recommended: recommendedRouteAccount === route.account,
-        onClick: () => onRouteChange(route.account)
+        onClick: () => onRouteChange(route.account),
+        displayOnly: isDisplayOnly
       },
       route.account
-    )) }),
-    selectedRouteSummary && activeRouteAccount && /* @__PURE__ */ jsxs35("div", { className: "rounded-2xl border bg-white/4 p-4", children: [
-      /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between gap-3", children: [
-        /* @__PURE__ */ jsx48("span", { className: "text-xs uppercase tracking-wider text-white/35", children: "Selected path" }),
-        /* @__PURE__ */ jsx48("span", { className: "text-xs font-bold text-white", children: selectedAccountTitle })
-      ] }),
-      /* @__PURE__ */ jsx48("p", { className: "mt-2 text-sm font-semibold text-white", children: selectedRouteSummary.methodLabel }),
-      /* @__PURE__ */ jsx48("p", { className: "mt-1 text-xs text-muted-foreground", children: selectedRouteSummary.summary })
-    ] })
+    )) })
   ] });
 }
 
@@ -4954,7 +4965,7 @@ function WithdrawConfirmation({
   amount,
   handleConfirmSend
 }) {
-  return /* @__PURE__ */ jsxs36("div", { className: "relative min-h-screen bg-background pb-6 pt-16 font-display text-foreground", children: [
+  return /* @__PURE__ */ jsxs36("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
     /* @__PURE__ */ jsx49("div", { className: "absolute left-4 top-4 z-30", children: /* @__PURE__ */ jsx49(
       Button,
       {
@@ -4971,7 +4982,7 @@ function WithdrawConfirmation({
         children: /* @__PURE__ */ jsx49(Icon, { name: "arrow_back", size: "xl" })
       }
     ) }),
-    /* @__PURE__ */ jsxs36("main", { className: "space-y-6 px-5", children: [
+    /* @__PURE__ */ jsx49(ScrollArea, { className: "flex-1", viewportClassName: "px-5 pt-16 pb-6", children: /* @__PURE__ */ jsxs36("main", { className: "space-y-6", children: [
       /* @__PURE__ */ jsxs36("div", { className: "flex flex-col items-center py-6", children: [
         /* @__PURE__ */ jsx49("p", { className: "mb-1 text-sm uppercase tracking-wide text-muted-foreground", children: "Sending" }),
         /* @__PURE__ */ jsx49("h1", { className: "mb-2 text-4xl font-bold", children: displayAmount.toLocaleString() }),
@@ -5052,7 +5063,7 @@ function WithdrawConfirmation({
           ] })
         }
       )
-    ] })
+    ] }) })
   ] });
 }
 
@@ -7471,7 +7482,7 @@ function DepositAssetSelection({
         {
           autoFocus: true,
           "data-testid": "deposit-asset-search",
-          className: "w-full rounded-xl border border-white/8 bg-white/5 py-2.5 pl-10 pr-4 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/40 focus:bg-white/8",
+          className: "w-full rounded-xl border border-transparent bg-white/5 py-2.5 pl-10 pr-4 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/40 focus:bg-white/8",
           onChange: (event) => setSearchQuery(event.target.value),
           placeholder: "Search assets...",
           type: "text",
@@ -7485,15 +7496,15 @@ function DepositAssetSelection({
         {
           type: "button",
           "data-testid": "deposit-asset-btc",
-          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",
+          className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden rounded-2xl bg-white/3 px-4 py-3 text-sm transition-all hover:bg-accent",
           onClick: () => onSelectAsset(btcAsset),
           children: [
-            /* @__PURE__ */ jsx65(AssetIcon, { ticker: "BTC", size: 40 }),
+            /* @__PURE__ */ jsx65(AssetIcon, { ticker: "BTC", size: 40, className: "flex-shrink-0" }),
             /* @__PURE__ */ jsxs51("div", { className: "min-w-0 flex-1 text-left", children: [
               /* @__PURE__ */ jsx65("div", { className: "font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: "Bitcoin" }),
               /* @__PURE__ */ jsx65("div", { className: "mt-0.5 text-xs text-white/40", children: "Choose destination account next" })
             ] }),
-            /* @__PURE__ */ jsxs51("div", { className: "flex flex-shrink-0 gap-1", children: [
+            /* @__PURE__ */ jsxs51("div", { className: "hidden min-w-0 max-w-[42%] flex-shrink flex-wrap justify-end gap-1 min-[380px]:flex", children: [
               /* @__PURE__ */ jsx65(NetworkBadge, { network: "L1", size: "sm" }),
               /* @__PURE__ */ jsx65(NetworkBadge, { network: "LN", size: "sm" }),
               isSparkConnected && /* @__PURE__ */ jsx65(NetworkBadge, { network: "Spark", size: "sm" }),
@@ -7522,7 +7533,7 @@ function DepositAssetSelection({
             ),
             children: [
               /* @__PURE__ */ jsx65("span", { className: "text-xxs font-bold uppercase tracking-[0.18em] text-white/55", children: "Your assets" }),
-              /* @__PURE__ */ jsx65("span", { className: "rounded-full bg-white/10 px-1.5 py-0.5 text-tiny font-bold text-white/70", children: ownedAssetsCount }),
+              /* @__PURE__ */ jsx65("span", { className: "inline-flex size-5 items-center justify-center rounded-full bg-white/10 text-tiny font-bold text-white/70", children: ownedAssetsCount }),
               /* @__PURE__ */ jsx65("div", { className: "flex-1" }),
               !isSearching && /* @__PURE__ */ jsx65("span", { className: "material-symbols-outlined text-icon-md text-white/40", children: showOwnedAssets ? "expand_less" : "expand_more" })
             ]
@@ -7536,12 +7547,12 @@ function DepositAssetSelection({
             {
               type: "button",
               "data-testid": `deposit-asset-${asset.asset_id}`,
-              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 min-w-0 items-center gap-3 overflow-hidden rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
               onClick: () => onSelectAsset(asset),
               children: [
                 /* @__PURE__ */ jsx65(AssetIcon, { ticker: asset.ticker, size: 40, className: "flex-shrink-0" }),
                 /* @__PURE__ */ jsxs51("div", { className: "min-w-0 flex-1 text-left", children: [
-                  /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsxs51("div", { className: "flex min-w-0 items-center gap-1.5", children: [
                     /* @__PURE__ */ jsx65("span", { className: "truncate font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: asset.ticker }),
                     protocolBadge && /* @__PURE__ */ jsx65(
                       "span",

package/package.json

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