kaleido-ui 0.1.10 → 0.1.12

package/dist/web/index.cjs

@@ -5402,7 +5402,9 @@ function DepositPreGeneration({
   amount,
   handleAmountChange,
   getUnitLabel,
-  generateInvoice
+  generateInvoice,
+  needsColorableUtxos = false,
+  onOpenCreateUtxos
 }) {
   const method = METHOD_META2[currentMethod];
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "space-y-3", children: [
@@ -5507,18 +5509,41 @@ function DepositPreGeneration({
         }
       )
     ] }),
-    !isAutoGenerate && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button, { variant: "cta", size: "cta", onClick: generateInvoice, disabled: loading, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
+    needsColorableUtxos && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(AlertBanner, { variant: "warning", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "mb-0.5 text-xs font-bold text-warning", children: "Colorable UTXOs Required" }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-tiny text-warning/70", children: "To receive RGB assets on-chain you need at least one uncolored UTXO. Create some now and the invoice will be generated automatically." })
+    ] }),
+    !isAutoGenerate && (needsColorableUtxos && onOpenCreateUtxos ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button, { variant: "cta", size: "cta", onClick: onOpenCreateUtxos, disabled: loading, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "material-symbols-outlined text-icon-md", children: "add_circle" }),
+      "Create Colorable UTXOs"
+    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button, { variant: "cta", size: "cta", onClick: generateInvoice, disabled: loading, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "material-symbols-outlined animate-spin text-icon-md", children: "progress_activity" }),
       "Generating..."
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "material-symbols-outlined text-icon-md", children: "qr_code_2" }),
       "Generate Address"
-    ] }) })
+    ] }) }))
   ] });
 }
 
 // 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 +5564,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 +5686,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",
         {
@@ -5846,7 +5902,9 @@ function DepositInvoiceGeneration({
   arkSubMode,
   setArkSubMode,
   btcSelectedAccount,
-  gen
+  gen,
+  needsColorableUtxos,
+  onOpenCreateUtxos
 }) {
   const {
     amount,
@@ -6067,7 +6125,9 @@ function DepositInvoiceGeneration({
         amount,
         handleAmountChange,
         getUnitLabel,
-        generateInvoice
+        generateInvoice,
+        needsColorableUtxos,
+        onOpenCreateUtxos
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       DepositGeneratedView,

package/dist/web/index.d.cts

@@ -1163,14 +1163,25 @@ interface DepositPreGenerationProps {
     handleAmountChange: (event: ChangeEvent<HTMLInputElement>) => void;
     getUnitLabel: () => string;
     generateInvoice: () => Promise<void>;
+    /**
+     * RGB on-chain only: true when the user needs to create at least one
+     * uncolored UTXO before an invoice can be generated.
+     */
+    needsColorableUtxos?: boolean;
+    /** Invoked by the inline "Create Colorable UTXOs" CTA. */
+    onOpenCreateUtxos?: () => void;
 }
-declare function DepositPreGeneration({ selectedAsset, isBtc, network, net, selectedAccount, currentMethod, channelsLoading, showChannelWarning, showLiquidityWarning, isAutoGenerate, loading, usePrivacy, setUsePrivacy, amount, handleAmountChange, getUnitLabel, generateInvoice, }: DepositPreGenerationProps): react_jsx_runtime.JSX.Element;
+declare function DepositPreGeneration({ selectedAsset, isBtc, network, net, selectedAccount, currentMethod, channelsLoading, showChannelWarning, showLiquidityWarning, isAutoGenerate, loading, usePrivacy, setUsePrivacy, amount, handleAmountChange, getUnitLabel, generateInvoice, needsColorableUtxos, onOpenCreateUtxos, }: DepositPreGenerationProps): react_jsx_runtime.JSX.Element;
 
 interface DepositSelectionAsset {
     asset_id: string;
     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;
@@ -1242,8 +1253,15 @@ interface DepositInvoiceGenerationProps {
     setArkSubMode: (mode: 'ark' | 'boarding') => void;
     btcSelectedAccount: DepositAccountId;
     gen: DepositGenerationController;
+    /**
+     * RGB on-chain only: when true, the pre-generation step shows a warning
+     * banner and swaps the Generate CTA for "Create Colorable UTXOs". Wire
+     * `onOpenCreateUtxos` to open your own RGB UTXO creation modal.
+     */
+    needsColorableUtxos?: boolean;
+    onOpenCreateUtxos?: () => void;
 }
-declare function DepositInvoiceGeneration({ handleBack, handleDone, selectedAsset, selectedAssetId, isNewAsset, channelsLoading, channels, network, setNetwork, isLightningAvailable, isRgbConnected, isSparkConnected, isArkadeConnected, isSparkLightning, maxDepositAmount, usePrivacy, setUsePrivacy, walletChoice, setWalletChoice, arkSubMode, setArkSubMode, btcSelectedAccount, gen, }: DepositInvoiceGenerationProps): react_jsx_runtime.JSX.Element;
+declare function DepositInvoiceGeneration({ handleBack, handleDone, selectedAsset, selectedAssetId, isNewAsset, channelsLoading, channels, network, setNetwork, isLightningAvailable, isRgbConnected, isSparkConnected, isArkadeConnected, isSparkLightning, maxDepositAmount, usePrivacy, setUsePrivacy, walletChoice, setWalletChoice, arkSubMode, setArkSubMode, btcSelectedAccount, gen, needsColorableUtxos, onOpenCreateUtxos, }: DepositInvoiceGenerationProps): react_jsx_runtime.JSX.Element;
 
 type ToasterToast = ToastProps & {
     id: string;

package/dist/web/index.d.ts

@@ -1163,14 +1163,25 @@ interface DepositPreGenerationProps {
     handleAmountChange: (event: ChangeEvent<HTMLInputElement>) => void;
     getUnitLabel: () => string;
     generateInvoice: () => Promise<void>;
+    /**
+     * RGB on-chain only: true when the user needs to create at least one
+     * uncolored UTXO before an invoice can be generated.
+     */
+    needsColorableUtxos?: boolean;
+    /** Invoked by the inline "Create Colorable UTXOs" CTA. */
+    onOpenCreateUtxos?: () => void;
 }
-declare function DepositPreGeneration({ selectedAsset, isBtc, network, net, selectedAccount, currentMethod, channelsLoading, showChannelWarning, showLiquidityWarning, isAutoGenerate, loading, usePrivacy, setUsePrivacy, amount, handleAmountChange, getUnitLabel, generateInvoice, }: DepositPreGenerationProps): react_jsx_runtime.JSX.Element;
+declare function DepositPreGeneration({ selectedAsset, isBtc, network, net, selectedAccount, currentMethod, channelsLoading, showChannelWarning, showLiquidityWarning, isAutoGenerate, loading, usePrivacy, setUsePrivacy, amount, handleAmountChange, getUnitLabel, generateInvoice, needsColorableUtxos, onOpenCreateUtxos, }: DepositPreGenerationProps): react_jsx_runtime.JSX.Element;
 
 interface DepositSelectionAsset {
     asset_id: string;
     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;
@@ -1242,8 +1253,15 @@ interface DepositInvoiceGenerationProps {
     setArkSubMode: (mode: 'ark' | 'boarding') => void;
     btcSelectedAccount: DepositAccountId;
     gen: DepositGenerationController;
+    /**
+     * RGB on-chain only: when true, the pre-generation step shows a warning
+     * banner and swaps the Generate CTA for "Create Colorable UTXOs". Wire
+     * `onOpenCreateUtxos` to open your own RGB UTXO creation modal.
+     */
+    needsColorableUtxos?: boolean;
+    onOpenCreateUtxos?: () => void;
 }
-declare function DepositInvoiceGeneration({ handleBack, handleDone, selectedAsset, selectedAssetId, isNewAsset, channelsLoading, channels, network, setNetwork, isLightningAvailable, isRgbConnected, isSparkConnected, isArkadeConnected, isSparkLightning, maxDepositAmount, usePrivacy, setUsePrivacy, walletChoice, setWalletChoice, arkSubMode, setArkSubMode, btcSelectedAccount, gen, }: DepositInvoiceGenerationProps): react_jsx_runtime.JSX.Element;
+declare function DepositInvoiceGeneration({ handleBack, handleDone, selectedAsset, selectedAssetId, isNewAsset, channelsLoading, channels, network, setNetwork, isLightningAvailable, isRgbConnected, isSparkConnected, isArkadeConnected, isSparkLightning, maxDepositAmount, usePrivacy, setUsePrivacy, walletChoice, setWalletChoice, arkSubMode, setArkSubMode, btcSelectedAccount, gen, needsColorableUtxos, onOpenCreateUtxos, }: DepositInvoiceGenerationProps): react_jsx_runtime.JSX.Element;
 
 type ToasterToast = ToastProps & {
     id: string;

package/dist/web/index.js

@@ -5247,7 +5247,9 @@ function DepositPreGeneration({
   amount,
   handleAmountChange,
   getUnitLabel,
-  generateInvoice
+  generateInvoice,
+  needsColorableUtxos = false,
+  onOpenCreateUtxos
 }) {
   const method = METHOD_META2[currentMethod];
   return /* @__PURE__ */ jsxs44("div", { className: "space-y-3", children: [
@@ -5352,18 +5354,41 @@ function DepositPreGeneration({
         }
       )
     ] }),
-    !isAutoGenerate && /* @__PURE__ */ jsx57(Button, { variant: "cta", size: "cta", onClick: generateInvoice, disabled: loading, children: loading ? /* @__PURE__ */ jsxs44("span", { className: "flex items-center justify-center gap-2", children: [
+    needsColorableUtxos && /* @__PURE__ */ jsxs44(AlertBanner, { variant: "warning", children: [
+      /* @__PURE__ */ jsx57("p", { className: "mb-0.5 text-xs font-bold text-warning", children: "Colorable UTXOs Required" }),
+      /* @__PURE__ */ jsx57("p", { className: "text-tiny text-warning/70", children: "To receive RGB assets on-chain you need at least one uncolored UTXO. Create some now and the invoice will be generated automatically." })
+    ] }),
+    !isAutoGenerate && (needsColorableUtxos && onOpenCreateUtxos ? /* @__PURE__ */ jsx57(Button, { variant: "cta", size: "cta", onClick: onOpenCreateUtxos, disabled: loading, children: /* @__PURE__ */ jsxs44("span", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx57("span", { className: "material-symbols-outlined text-icon-md", children: "add_circle" }),
+      "Create Colorable UTXOs"
+    ] }) }) : /* @__PURE__ */ jsx57(Button, { variant: "cta", size: "cta", onClick: generateInvoice, disabled: loading, children: loading ? /* @__PURE__ */ jsxs44("span", { className: "flex items-center justify-center gap-2", children: [
       /* @__PURE__ */ jsx57("span", { className: "material-symbols-outlined animate-spin text-icon-md", children: "progress_activity" }),
       "Generating..."
     ] }) : /* @__PURE__ */ jsxs44("span", { className: "flex items-center justify-center gap-2", children: [
       /* @__PURE__ */ jsx57("span", { className: "material-symbols-outlined text-icon-md", children: "qr_code_2" }),
       "Generate Address"
-    ] }) })
+    ] }) }))
   ] });
 }
 
 // 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 +5409,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 +5531,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",
         {
@@ -5691,7 +5747,9 @@ function DepositInvoiceGeneration({
   arkSubMode,
   setArkSubMode,
   btcSelectedAccount,
-  gen
+  gen,
+  needsColorableUtxos,
+  onOpenCreateUtxos
 }) {
   const {
     amount,
@@ -5912,7 +5970,9 @@ function DepositInvoiceGeneration({
         amount,
         handleAmountChange,
         getUnitLabel,
-        generateInvoice
+        generateInvoice,
+        needsColorableUtxos,
+        onOpenCreateUtxos
       }
     ) : /* @__PURE__ */ jsx59(
       DepositGeneratedView,

package/package.json

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