kaleido-ui 0.1.10 → 0.1.11

package/dist/web/index.cjs

@@ -5518,7 +5518,23 @@ function DepositPreGeneration({
 }
 
 // src/web/components/deposit-asset-selection.tsx
+var import_react14 = require("react");
 var import_jsx_runtime58 = require("react/jsx-runtime");
+var PROTOCOL_BADGE = {
+  RGB: { label: "RGB", className: "bg-network-rgb-chip text-network-rgb-text" },
+  SPARK: { label: "Spark", className: "bg-network-spark-chip text-network-spark-text" },
+  ARKADE: { label: "Arkade", className: "bg-network-arkade-chip text-network-arkade-text" }
+};
+function formatAssetBalance(asset) {
+  const raw = asset.balance ?? 0;
+  if (raw === 0) return "0";
+  const precision = asset.precision ?? 0;
+  const value = raw / Math.pow(10, precision);
+  return value.toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: Math.min(precision, 8)
+  });
+}
 function NetBadge({ icon, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: cn("inline-flex items-center justify-center rounded border px-1.5 py-0.5", className), children: icon });
 }
@@ -5539,8 +5555,15 @@ function DepositAssetSelection({
   isArkadeConnected
 }) {
   const btcAsset = filteredAssets.find((asset) => asset.ticker === "BTC");
-  const rgbAssets = filteredAssets.filter((asset) => asset.ticker !== "BTC");
+  const ownedAssets = filteredAssets.filter((asset) => asset.ticker !== "BTC").slice().sort((a, b) => (b.balance ?? 0) - (a.balance ?? 0));
+  const ownedAssetsCount = ownedAssets.length;
   const noResults = filteredAssets.length === 0 && !!searchQuery;
+  const isSearching = !!searchQuery;
+  const [assetsExpanded, setAssetsExpanded] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
+    if (isSearching) setAssetsExpanded(true);
+  }, [isSearching]);
+  const showOwnedAssets = isSearching ? true : assetsExpanded;
   const newAssetOptions = [
     {
       account: "RGB",
@@ -5654,42 +5677,66 @@ function DepositAssetSelection({
         'No assets match "',
         searchQuery,
         '"'
-      ] }) : rgbAssets.map((asset) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
-        "button",
-        {
-          type: "button",
-          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",
-          onClick: () => onSelectAsset(asset),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative flex-shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AssetIcon, { ticker: asset.ticker, size: 40 }),
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full border bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("img", { src: "/icons/rgb/rgb-logo.svg", className: "block h-2.5 w-2.5 object-contain", alt: "RGB" }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: asset.ticker }),
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mt-0.5 truncate text-xs text-white/40", children: asset.name ?? "RGB Asset" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-shrink-0 gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-                NetBadge,
-                {
-                  className: "border-network-bitcoin/20 bg-network-bitcoin/15",
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "material-symbols-outlined leading-none text-network-bitcoin", style: { fontSize: 10 }, children: "link" })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-                NetBadge,
-                {
-                  className: "border-warning/20 bg-warning/15",
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("img", { src: "/icons/lightning/lightning.svg", className: "h-2.5 w-2.5", alt: "" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-md text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
-          ]
-        },
-        asset.asset_id
-      )),
+      ] }) : ownedAssetsCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "space-y-1.5 pt-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+          "button",
+          {
+            type: "button",
+            "data-testid": "deposit-toggle-owned-assets",
+            onClick: () => !isSearching && setAssetsExpanded((value) => !value),
+            disabled: isSearching,
+            className: cn(
+              "flex w-full items-center gap-2 rounded-2xl border px-4 py-2.5 transition-all",
+              showOwnedAssets ? "border-white/10 bg-white/4" : "border-white/8 bg-white/3 hover:border-border hover:bg-accent",
+              isSearching && "cursor-default"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-xxs font-bold uppercase tracking-[0.18em] text-white/55", children: "Your assets" }),
+              /* @__PURE__ */ (0, import_jsx_runtime58.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_runtime58.jsx)("div", { className: "flex-1" }),
+              !isSearching && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "material-symbols-outlined text-icon-md text-white/40", children: showOwnedAssets ? "expand_less" : "expand_more" })
+            ]
+          }
+        ),
+        showOwnedAssets && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "space-y-1.5 duration-200 animate-in fade-in slide-in-from-top-1", children: ownedAssets.map((asset) => {
+          const protocolBadge = asset.accountId ? PROTOCOL_BADGE[asset.accountId] : null;
+          const balance = asset.balance ?? 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+            "button",
+            {
+              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",
+              onClick: () => onSelectAsset(asset),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AssetIcon, { ticker: asset.ticker, size: 40, className: "flex-shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime58.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_runtime58.jsx)(
+                      "span",
+                      {
+                        className: cn(
+                          "shrink-0 rounded-full px-1.5 py-0.5 text-tiny font-bold uppercase tracking-wider",
+                          protocolBadge.className
+                        ),
+                        children: protocolBadge.label
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mt-0.5 truncate text-xs text-white/40", children: asset.name ?? "Asset" })
+                ] }),
+                balance > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-shrink-0 text-right", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "font-mono text-xs font-bold text-white", children: formatAssetBalance(asset) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mt-0.5 text-tiny uppercase tracking-wider text-white/35", children: asset.ticker })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-sm text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
+              ]
+            },
+            asset.asset_id
+          );
+        }) })
+      ] }) : null,
       !searchQuery && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
         "button",
         {

package/dist/web/index.d.cts

@@ -1171,6 +1171,10 @@ interface DepositSelectionAsset {
     ticker: string;
     name?: string;
     precision?: number;
+    /** Account/protocol the asset lives on — drives the protocol badge in "Your assets". */
+    accountId?: DepositAccountId;
+    /** Spendable balance in raw (smallest) units; used for sorting and the right-aligned amount. */
+    balance?: number;
 }
 interface DepositAssetSelectionProps<TView extends string = string> {
     setCurrentView: (view: TView) => void;

package/dist/web/index.d.ts

@@ -1171,6 +1171,10 @@ interface DepositSelectionAsset {
     ticker: string;
     name?: string;
     precision?: number;
+    /** Account/protocol the asset lives on — drives the protocol badge in "Your assets". */
+    accountId?: DepositAccountId;
+    /** Spendable balance in raw (smallest) units; used for sorting and the right-aligned amount. */
+    balance?: number;
 }
 interface DepositAssetSelectionProps<TView extends string = string> {
     setCurrentView: (view: TView) => void;

package/dist/web/index.js

@@ -5363,7 +5363,23 @@ function DepositPreGeneration({
 }
 
 // src/web/components/deposit-asset-selection.tsx
+import { useEffect as useEffect7, useState as useState13 } from "react";
 import { Fragment as Fragment13, jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
+var PROTOCOL_BADGE = {
+  RGB: { label: "RGB", className: "bg-network-rgb-chip text-network-rgb-text" },
+  SPARK: { label: "Spark", className: "bg-network-spark-chip text-network-spark-text" },
+  ARKADE: { label: "Arkade", className: "bg-network-arkade-chip text-network-arkade-text" }
+};
+function formatAssetBalance(asset) {
+  const raw = asset.balance ?? 0;
+  if (raw === 0) return "0";
+  const precision = asset.precision ?? 0;
+  const value = raw / Math.pow(10, precision);
+  return value.toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: Math.min(precision, 8)
+  });
+}
 function NetBadge({ icon, className }) {
   return /* @__PURE__ */ jsx58("span", { className: cn("inline-flex items-center justify-center rounded border px-1.5 py-0.5", className), children: icon });
 }
@@ -5384,8 +5400,15 @@ function DepositAssetSelection({
   isArkadeConnected
 }) {
   const btcAsset = filteredAssets.find((asset) => asset.ticker === "BTC");
-  const rgbAssets = filteredAssets.filter((asset) => asset.ticker !== "BTC");
+  const ownedAssets = filteredAssets.filter((asset) => asset.ticker !== "BTC").slice().sort((a, b) => (b.balance ?? 0) - (a.balance ?? 0));
+  const ownedAssetsCount = ownedAssets.length;
   const noResults = filteredAssets.length === 0 && !!searchQuery;
+  const isSearching = !!searchQuery;
+  const [assetsExpanded, setAssetsExpanded] = useState13(false);
+  useEffect7(() => {
+    if (isSearching) setAssetsExpanded(true);
+  }, [isSearching]);
+  const showOwnedAssets = isSearching ? true : assetsExpanded;
   const newAssetOptions = [
     {
       account: "RGB",
@@ -5499,42 +5522,66 @@ function DepositAssetSelection({
         'No assets match "',
         searchQuery,
         '"'
-      ] }) : rgbAssets.map((asset) => /* @__PURE__ */ jsxs45(
-        "button",
-        {
-          type: "button",
-          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",
-          onClick: () => onSelectAsset(asset),
-          children: [
-            /* @__PURE__ */ jsxs45("div", { className: "relative flex-shrink-0", children: [
-              /* @__PURE__ */ jsx58(AssetIcon, { ticker: asset.ticker, size: 40 }),
-              /* @__PURE__ */ jsx58("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full border bg-card", children: /* @__PURE__ */ jsx58("img", { src: "/icons/rgb/rgb-logo.svg", className: "block h-2.5 w-2.5 object-contain", alt: "RGB" }) })
-            ] }),
-            /* @__PURE__ */ jsxs45("div", { className: "min-w-0 flex-1 text-left", children: [
-              /* @__PURE__ */ jsx58("div", { className: "font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: asset.ticker }),
-              /* @__PURE__ */ jsx58("div", { className: "mt-0.5 truncate text-xs text-white/40", children: asset.name ?? "RGB Asset" })
-            ] }),
-            /* @__PURE__ */ jsxs45("div", { className: "flex flex-shrink-0 gap-1", children: [
-              /* @__PURE__ */ jsx58(
-                NetBadge,
-                {
-                  className: "border-network-bitcoin/20 bg-network-bitcoin/15",
-                  icon: /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined leading-none text-network-bitcoin", style: { fontSize: 10 }, children: "link" })
-                }
-              ),
-              /* @__PURE__ */ jsx58(
-                NetBadge,
-                {
-                  className: "border-warning/20 bg-warning/15",
-                  icon: /* @__PURE__ */ jsx58("img", { src: "/icons/lightning/lightning.svg", className: "h-2.5 w-2.5", alt: "" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-md text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
-          ]
-        },
-        asset.asset_id
-      )),
+      ] }) : ownedAssetsCount > 0 ? /* @__PURE__ */ jsxs45("div", { className: "space-y-1.5 pt-1", children: [
+        /* @__PURE__ */ jsxs45(
+          "button",
+          {
+            type: "button",
+            "data-testid": "deposit-toggle-owned-assets",
+            onClick: () => !isSearching && setAssetsExpanded((value) => !value),
+            disabled: isSearching,
+            className: cn(
+              "flex w-full items-center gap-2 rounded-2xl border px-4 py-2.5 transition-all",
+              showOwnedAssets ? "border-white/10 bg-white/4" : "border-white/8 bg-white/3 hover:border-border hover:bg-accent",
+              isSearching && "cursor-default"
+            ),
+            children: [
+              /* @__PURE__ */ jsx58("span", { className: "text-xxs font-bold uppercase tracking-[0.18em] text-white/55", children: "Your assets" }),
+              /* @__PURE__ */ jsx58("span", { className: "rounded-full bg-white/10 px-1.5 py-0.5 text-tiny font-bold text-white/70", children: ownedAssetsCount }),
+              /* @__PURE__ */ jsx58("div", { className: "flex-1" }),
+              !isSearching && /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined text-icon-md text-white/40", children: showOwnedAssets ? "expand_less" : "expand_more" })
+            ]
+          }
+        ),
+        showOwnedAssets && /* @__PURE__ */ jsx58("div", { className: "space-y-1.5 duration-200 animate-in fade-in slide-in-from-top-1", children: ownedAssets.map((asset) => {
+          const protocolBadge = asset.accountId ? PROTOCOL_BADGE[asset.accountId] : null;
+          const balance = asset.balance ?? 0;
+          return /* @__PURE__ */ jsxs45(
+            "button",
+            {
+              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",
+              onClick: () => onSelectAsset(asset),
+              children: [
+                /* @__PURE__ */ jsx58(AssetIcon, { ticker: asset.ticker, size: 40, className: "flex-shrink-0" }),
+                /* @__PURE__ */ jsxs45("div", { className: "min-w-0 flex-1 text-left", children: [
+                  /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx58("span", { className: "truncate font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: asset.ticker }),
+                    protocolBadge && /* @__PURE__ */ jsx58(
+                      "span",
+                      {
+                        className: cn(
+                          "shrink-0 rounded-full px-1.5 py-0.5 text-tiny font-bold uppercase tracking-wider",
+                          protocolBadge.className
+                        ),
+                        children: protocolBadge.label
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx58("div", { className: "mt-0.5 truncate text-xs text-white/40", children: asset.name ?? "Asset" })
+                ] }),
+                balance > 0 && /* @__PURE__ */ jsxs45("div", { className: "flex-shrink-0 text-right", children: [
+                  /* @__PURE__ */ jsx58("div", { className: "font-mono text-xs font-bold text-white", children: formatAssetBalance(asset) }),
+                  /* @__PURE__ */ jsx58("div", { className: "mt-0.5 text-tiny uppercase tracking-wider text-white/35", children: asset.ticker })
+                ] }),
+                /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-sm text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
+              ]
+            },
+            asset.asset_id
+          );
+        }) })
+      ] }) : null,
       !searchQuery && /* @__PURE__ */ jsx58("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ jsxs45(
         "button",
         {

package/package.json

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