kaleido-ui 0.1.60 → 0.1.62

package/dist/web/index.cjs

@@ -1822,12 +1822,14 @@ function AssetCard({
   balanceVisible = true,
   accentColor,
   status,
+  isYielding,
   onClick,
   className
 }) {
   const shown = balanceVisible ? displayBalance : "\u2022\u2022\u2022\u2022\u2022\u2022";
   const displayShown = balanceVisible ? formatDisplayAmountText(displayBalance) : shown;
   const [hovered, setHovered] = (0, import_react4.useState)(false);
+  const showYield = isYielding ?? ["USDB"].includes(ticker.toUpperCase());
   const gradientStyle = accentColor ? { background: `linear-gradient(135deg, var(--card) 30%, ${accentColor}${hovered ? "77" : "55"} 75%, ${accentColor}${hovered ? "dd" : "b3"} 100%)`, transition: "background 0.3s ease" } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
@@ -1879,7 +1881,26 @@ function AssetCard({
                 children: displayShown
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mt-0.5 truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-end gap-1 mt-0.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker }),
+              showYield && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { title: "Yield Generating Asset", className: "text-success/90 flex items-center justify-center bg-success/10 rounded-full p-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "w-3 h-3",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" })
+                  ]
+                }
+              ) })
+            ] }),
             status && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StatusBadge, { status, className: "mt-2" })
           ] })
         ] })
@@ -2551,11 +2572,14 @@ function AccountStatusTabs({
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "mt-5 text-sm leading-relaxed text-muted-foreground", children: selectedAccount.detail }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-5", children: [
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-icon-xxs font-black uppercase tracking-[0.18em] text-white/45", children: "Capabilities" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mt-3 flex flex-wrap gap-2", children: selectedAccount.capabilityBullets.map((capability) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mt-3 flex flex-wrap gap-2", children: selectedAccount.capabilityBullets.map((capability) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
               "span",
               {
-                className: "rounded-full border bg-white/[0.05] px-2.5 py-1 text-xxs font-medium text-white/65",
-                children: capability
+                className: "inline-flex items-center gap-1.5 rounded-full border bg-white/[0.05] px-2.5 py-1 text-xxs font-medium text-white/70",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "size-1.5 rounded-full bg-primary/70" }),
+                  capability
+                ]
               },
               capability
             )) })
@@ -8092,9 +8116,14 @@ function DepositPreGeneration({
   generateInvoice,
   needsColorableUtxos = false,
   onOpenCreateUtxos,
-  showReceiveSummary = true
+  showReceiveSummary = true,
+  isNewRgbAsset = false,
+  newAssetId = "",
+  setNewAssetId,
+  colorableUtxoCount
 }) {
   const method = METHOD_META2[currentMethod];
+  const isRgbOnchain = network === "onchain" && !isBtc;
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "space-y-3", children: [
     showReceiveSummary && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "rounded-2xl border border-white/8 bg-white/4 p-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Receive Summary" }),
@@ -8144,16 +8173,33 @@ function DepositPreGeneration({
         ] })
       ] })
     ] }),
-    network === "onchain" && !isBtc && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "space-y-2 rounded-xl border bg-card p-3", children: [
+    isRgbOnchain && isNewRgbAsset && setNewAssetId && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "RGB Asset ID - Optional" }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        "input",
+        {
+          type: "text",
+          value: newAssetId,
+          onChange: (event) => setNewAssetId(event.target.value),
+          placeholder: "rgb:... (leave empty for any asset)",
+          spellCheck: false,
+          autoCapitalize: "off",
+          className: "w-full rounded-xl border bg-white/5 px-3 py-2.5 font-mono text-sm text-white transition-all placeholder:text-white/20 focus:border-primary/50 focus:outline-none"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "text-xxs text-white/35", children: "Enter a specific asset ID to receive it, or leave empty to accept any RGB asset to this invoice." })
+    ] }),
+    isRgbOnchain && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "space-y-2.5 rounded-xl border bg-card p-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("h4", { className: "text-xs font-bold text-white", children: "Receive with Privacy" }),
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "mt-0.5 text-xxs text-muted-foreground", children: usePrivacy ? "Blinded UTXO - enhanced privacy" : "Witness address - less private" })
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("h4", { className: "text-xs font-bold text-white", children: usePrivacy ? "Blinded receive" : "Witness receive" }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "mt-0.5 text-xxs text-muted-foreground", children: usePrivacy ? "Private - recommended" : "Simpler - less private" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "button",
           {
             type: "button",
+            "aria-label": "Toggle blinded (private) receive",
             className: cn(
               "relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full border shadow-inner transition-colors",
               usePrivacy ? "bg-primary" : "bg-white/10"
@@ -8171,7 +8217,21 @@ function DepositPreGeneration({
           }
         )
       ] }),
-      !usePrivacy && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "rounded-lg border border-warning/15 bg-warning/5 px-2.5 py-1.5 text-xxs text-warning/80", children: "Sender needs to add sats to create a new UTXO for you." })
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "text-tiny leading-relaxed text-white/45", children: usePrivacy ? "Blinded: the sender never sees which UTXO you receive into. Spends one of your colorable UTXOs as the receiving slot." : "Witness: the sender creates the receiving UTXO for you. No colorable UTXO needed, but the sender sees the receiving output." }),
+      usePrivacy && colorableUtxoCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-between rounded-lg border px-2.5 py-1.5 text-xxs",
+            colorableUtxoCount > 0 ? "border-success/20 bg-success/5 text-success/80" : "border-warning/20 bg-warning/5 text-warning/80"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "font-medium", children: "Available colorable UTXOs" }),
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "font-mono font-bold", children: colorableUtxoCount })
+          ]
+        }
+      ),
+      usePrivacy && colorableUtxoCount === 0 && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "text-tiny text-warning/70", children: "None available \u2014 create a colorable UTXO below to receive privately, or switch off privacy to use a witness receive." })
     ] }),
     network === "onchain" && !isBtc && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "space-y-1.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center justify-between", children: [
@@ -8201,7 +8261,7 @@ function DepositPreGeneration({
       /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "mb-0.5 text-xs font-bold text-warning", children: "Colorable UTXOs Required" }),
       /* @__PURE__ */ (0, import_jsx_runtime78.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_runtime78.jsx)(Button, { variant: "cta", size: "cta", onClick: onOpenCreateUtxos, disabled: loading, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
+    !isAutoGenerate && ((needsColorableUtxos || isRgbOnchain && usePrivacy && colorableUtxoCount === 0) && onOpenCreateUtxos ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Button, { variant: "cta", size: "cta", onClick: onOpenCreateUtxos, disabled: loading, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "material-symbols-outlined text-icon-md", children: "add_circle" }),
       "Create Colorable UTXOs"
     ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Button, { variant: "cta", size: "cta", onClick: generateInvoice, disabled: loading, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
@@ -8217,6 +8277,11 @@ function DepositPreGeneration({
 // src/web/components/deposit-asset-selection.tsx
 var import_react16 = require("react");
 var import_jsx_runtime79 = require("react/jsx-runtime");
+var ADD_ASSET_SUBTITLE = {
+  RGB: "RGB asset on Bitcoin",
+  SPARK: "Spark-native asset",
+  ARKADE: "Arkade-native asset"
+};
 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" },
@@ -8254,6 +8319,7 @@ function DepositAssetSelection({
   const noResults = filteredAssets.length === 0 && !!searchQuery;
   const isSearching = !!searchQuery;
   const [assetsExpanded, setAssetsExpanded] = (0, import_react16.useState)(false);
+  const [showAddAssetModal, setShowAddAssetModal] = (0, import_react16.useState)(false);
   (0, import_react16.useEffect)(() => {
     if (isSearching) setAssetsExpanded(true);
   }, [isSearching]);
@@ -8433,71 +8499,60 @@ function DepositAssetSelection({
           ]
         }
       ) }),
-      !searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "space-y-2 pt-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "px-1", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-xxs font-bold uppercase tracking-[0.18em] text-white/35", children: "New Asset" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-          "div",
+      !searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+        "button",
+        {
+          type: "button",
+          "data-testid": "deposit-add-asset",
+          onClick: () => setShowAddAssetModal(true),
+          className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 p-3 transition-all hover:border-border hover:bg-accent",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/15", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { name: "add", size: "md", className: "text-primary" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex-1 text-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-sm font-semibold text-white transition-colors group-hover:text-primary", children: "Add an asset" }),
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("p", { className: "text-xxs leading-tight text-white/40", children: [
+                "Receive a new ",
+                newAssetOptions.map((o) => o.ticker).join(", "),
+                " asset"
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "material-symbols-outlined text-lg text-white/30 transition-colors group-hover:text-primary", children: "arrow_forward" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      BottomSheet,
+      {
+        open: showAddAssetModal,
+        title: "Add an asset",
+        onClose: () => setShowAddAssetModal(false),
+        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "space-y-2", children: newAssetOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+          "button",
           {
+            type: "button",
+            "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
             className: cn(
-              "grid gap-2",
-              newAssetOptions.length === 1 ? "grid-cols-1" : newAssetOptions.length === 2 ? "grid-cols-2" : "grid-cols-3"
+              "group flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left transition-all",
+              option.idleClass
             ),
-            children: newAssetOptions.map((option) => {
-              const active = isNewAsset && newAssetAccount === option.account;
-              return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
-                "button",
-                {
-                  type: "button",
-                  "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
-                  className: cn(
-                    "group flex min-h-[112px] flex-col items-center justify-center rounded-2xl px-3 py-3.5 text-center text-sm transition-all",
-                    active ? option.activeClass : option.idleClass
-                  ),
-                  onClick: () => handleAddNewAsset(option.account),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "relative", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(AssetIcon, { ticker: option.ticker, size: 40 }),
-                      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { name: "add", size: "xs", className: "text-background" }) })
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-                      "div",
-                      {
-                        className: cn(
-                          "text-sm font-bold tracking-wide",
-                          active ? "text-white" : "text-white group-hover:opacity-90",
-                          !active && option.titleHoverClass
-                        ),
-                        children: option.title
-                      }
-                    ) })
-                  ]
-                },
-                option.account
-              );
-            })
-          }
-        )
-      ] })
-    ] }),
-    isNewAsset && newAssetAccount === "RGB" && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex-shrink-0 px-5 pb-3 animate-in fade-in slide-in-from-bottom-2 duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "space-y-2 rounded-2xl border border-network-arkade/20 bg-network-arkade/5 p-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-tiny leading-relaxed text-network-arkade/80", children: "Leave empty to receive any RGB asset, or enter a specific asset ID." }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-          "input",
-          {
-            className: "w-full rounded-xl border bg-white/5 px-3 py-2 font-mono text-sm text-white transition-all placeholder:text-white/25 focus:border-network-arkade/40 focus:outline-none",
-            onChange: (event) => setNewAssetId(event.target.value),
-            placeholder: "Asset ID (optional)",
-            type: "text",
-            value: newAssetId
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex-shrink-0 px-5 pb-5 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(Button, { variant: "cta", size: "cta", onClick: handleContinueToGenerate, children: [
-        "Continue with New Asset",
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "material-symbols-outlined text-icon-xl font-bold", children: "arrow_forward" })
-      ] }) })
-    ] })
+            onClick: () => {
+              setShowAddAssetModal(false);
+              handleAddNewAsset(option.account);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(AssetIcon, { ticker: option.ticker, size: 36, className: "flex-shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: cn("text-sm font-bold tracking-wide text-white", option.titleHoverClass), children: option.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "mt-0.5 text-xxs text-white/40", children: ADD_ASSET_SUBTITLE[option.account] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { name: "add", size: "sm", className: "text-white/30 transition-colors group-hover:text-white/60" })
+            ]
+          },
+          option.account
+        )) })
+      }
+    )
   ] });
 }
 

package/dist/web/index.d.cts

@@ -230,10 +230,12 @@ interface AssetCardProps {
     accentColor?: string;
     /** Optional state badge for assets that are present but not currently spendable. */
     status?: StatusType;
+    /** Whether the asset is yield generating */
+    isYielding?: boolean;
     onClick?: () => void;
     className?: string;
 }
-declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, status, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
+declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, status, isYielding, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
 
 interface TransactionCardProps {
     /** Direction of the transaction */
@@ -1543,8 +1545,20 @@ interface DepositPreGenerationProps {
     /** Invoked by the inline "Create Colorable UTXOs" CTA. */
     onOpenCreateUtxos?: () => void;
     showReceiveSummary?: boolean;
+    /** RGB-asset receive: render an inline asset-id field (receive a specific asset). */
+    isNewRgbAsset?: boolean;
+    /** Current asset-id value for the inline field. */
+    newAssetId?: string;
+    /** Setter for the inline asset-id field. */
+    setNewAssetId?: (value: string) => void;
+    /**
+     * Number of colorable (uncolored) UTXOs available for a blinded receive.
+     * `undefined` ⇒ unknown/loading; a number drives the availability hint and the
+     * create-UTXO prompt for the privacy (blinded) path.
+     */
+    colorableUtxoCount?: number;
 }
-declare function DepositPreGeneration({ selectedAsset, isBtc, network, net, selectedAccount, currentMethod, channelsLoading, showChannelWarning, showLiquidityWarning, isAutoGenerate, loading, usePrivacy, setUsePrivacy, amount, handleAmountChange, getUnitLabel, generateInvoice, needsColorableUtxos, onOpenCreateUtxos, showReceiveSummary, }: 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, showReceiveSummary, isNewRgbAsset, newAssetId, setNewAssetId, colorableUtxoCount, }: DepositPreGenerationProps): react_jsx_runtime.JSX.Element;
 
 interface DepositSelectionAsset {
     asset_id: string;

package/dist/web/index.d.ts

@@ -230,10 +230,12 @@ interface AssetCardProps {
     accentColor?: string;
     /** Optional state badge for assets that are present but not currently spendable. */
     status?: StatusType;
+    /** Whether the asset is yield generating */
+    isYielding?: boolean;
     onClick?: () => void;
     className?: string;
 }
-declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, status, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
+declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, status, isYielding, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
 
 interface TransactionCardProps {
     /** Direction of the transaction */
@@ -1543,8 +1545,20 @@ interface DepositPreGenerationProps {
     /** Invoked by the inline "Create Colorable UTXOs" CTA. */
     onOpenCreateUtxos?: () => void;
     showReceiveSummary?: boolean;
+    /** RGB-asset receive: render an inline asset-id field (receive a specific asset). */
+    isNewRgbAsset?: boolean;
+    /** Current asset-id value for the inline field. */
+    newAssetId?: string;
+    /** Setter for the inline asset-id field. */
+    setNewAssetId?: (value: string) => void;
+    /**
+     * Number of colorable (uncolored) UTXOs available for a blinded receive.
+     * `undefined` ⇒ unknown/loading; a number drives the availability hint and the
+     * create-UTXO prompt for the privacy (blinded) path.
+     */
+    colorableUtxoCount?: number;
 }
-declare function DepositPreGeneration({ selectedAsset, isBtc, network, net, selectedAccount, currentMethod, channelsLoading, showChannelWarning, showLiquidityWarning, isAutoGenerate, loading, usePrivacy, setUsePrivacy, amount, handleAmountChange, getUnitLabel, generateInvoice, needsColorableUtxos, onOpenCreateUtxos, showReceiveSummary, }: 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, showReceiveSummary, isNewRgbAsset, newAssetId, setNewAssetId, colorableUtxoCount, }: DepositPreGenerationProps): react_jsx_runtime.JSX.Element;
 
 interface DepositSelectionAsset {
     asset_id: string;

package/dist/web/index.js

@@ -1639,12 +1639,14 @@ function AssetCard({
   balanceVisible = true,
   accentColor,
   status,
+  isYielding,
   onClick,
   className
 }) {
   const shown = balanceVisible ? displayBalance : "\u2022\u2022\u2022\u2022\u2022\u2022";
   const displayShown = balanceVisible ? formatDisplayAmountText(displayBalance) : shown;
   const [hovered, setHovered] = useState5(false);
+  const showYield = isYielding ?? ["USDB"].includes(ticker.toUpperCase());
   const gradientStyle = accentColor ? { background: `linear-gradient(135deg, var(--card) 30%, ${accentColor}${hovered ? "77" : "55"} 75%, ${accentColor}${hovered ? "dd" : "b3"} 100%)`, transition: "background 0.3s ease" } : void 0;
   return /* @__PURE__ */ jsxs8(
     "div",
@@ -1696,7 +1698,26 @@ function AssetCard({
                 children: displayShown
               }
             ),
-            /* @__PURE__ */ jsx19("p", { className: "mt-0.5 truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker }),
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-end gap-1 mt-0.5", children: [
+              /* @__PURE__ */ jsx19("p", { className: "truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker }),
+              showYield && /* @__PURE__ */ jsx19("div", { title: "Yield Generating Asset", className: "text-success/90 flex items-center justify-center bg-success/10 rounded-full p-0.5", children: /* @__PURE__ */ jsxs8(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "w-3 h-3",
+                  children: [
+                    /* @__PURE__ */ jsx19("path", { d: "M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" }),
+                    /* @__PURE__ */ jsx19("path", { d: "M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" })
+                  ]
+                }
+              ) })
+            ] }),
             status && /* @__PURE__ */ jsx19(StatusBadge, { status, className: "mt-2" })
           ] })
         ] })
@@ -2374,11 +2395,14 @@ function AccountStatusTabs({
           /* @__PURE__ */ jsx28("p", { className: "mt-5 text-sm leading-relaxed text-muted-foreground", children: selectedAccount.detail }),
           /* @__PURE__ */ jsxs15("div", { className: "mt-5", children: [
             /* @__PURE__ */ jsx28("div", { className: "text-icon-xxs font-black uppercase tracking-[0.18em] text-white/45", children: "Capabilities" }),
-            /* @__PURE__ */ jsx28("div", { className: "mt-3 flex flex-wrap gap-2", children: selectedAccount.capabilityBullets.map((capability) => /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx28("div", { className: "mt-3 flex flex-wrap gap-2", children: selectedAccount.capabilityBullets.map((capability) => /* @__PURE__ */ jsxs15(
               "span",
               {
-                className: "rounded-full border bg-white/[0.05] px-2.5 py-1 text-xxs font-medium text-white/65",
-                children: capability
+                className: "inline-flex items-center gap-1.5 rounded-full border bg-white/[0.05] px-2.5 py-1 text-xxs font-medium text-white/70",
+                children: [
+                  /* @__PURE__ */ jsx28("span", { className: "size-1.5 rounded-full bg-primary/70" }),
+                  capability
+                ]
               },
               capability
             )) })
@@ -7915,9 +7939,14 @@ function DepositPreGeneration({
   generateInvoice,
   needsColorableUtxos = false,
   onOpenCreateUtxos,
-  showReceiveSummary = true
+  showReceiveSummary = true,
+  isNewRgbAsset = false,
+  newAssetId = "",
+  setNewAssetId,
+  colorableUtxoCount
 }) {
   const method = METHOD_META2[currentMethod];
+  const isRgbOnchain = network === "onchain" && !isBtc;
   return /* @__PURE__ */ jsxs64("div", { className: "space-y-3", children: [
     showReceiveSummary && /* @__PURE__ */ jsxs64("div", { className: "rounded-2xl border border-white/8 bg-white/4 p-3", children: [
       /* @__PURE__ */ jsx78("p", { className: "text-xxs font-bold uppercase tracking-widest text-white/35", children: "Receive Summary" }),
@@ -7967,16 +7996,33 @@ function DepositPreGeneration({
         ] })
       ] })
     ] }),
-    network === "onchain" && !isBtc && /* @__PURE__ */ jsxs64("div", { className: "space-y-2 rounded-xl border bg-card p-3", children: [
+    isRgbOnchain && isNewRgbAsset && setNewAssetId && /* @__PURE__ */ jsxs64("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx78("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "RGB Asset ID - Optional" }),
+      /* @__PURE__ */ jsx78(
+        "input",
+        {
+          type: "text",
+          value: newAssetId,
+          onChange: (event) => setNewAssetId(event.target.value),
+          placeholder: "rgb:... (leave empty for any asset)",
+          spellCheck: false,
+          autoCapitalize: "off",
+          className: "w-full rounded-xl border bg-white/5 px-3 py-2.5 font-mono text-sm text-white transition-all placeholder:text-white/20 focus:border-primary/50 focus:outline-none"
+        }
+      ),
+      /* @__PURE__ */ jsx78("p", { className: "text-xxs text-white/35", children: "Enter a specific asset ID to receive it, or leave empty to accept any RGB asset to this invoice." })
+    ] }),
+    isRgbOnchain && /* @__PURE__ */ jsxs64("div", { className: "space-y-2.5 rounded-xl border bg-card p-3", children: [
       /* @__PURE__ */ jsxs64("div", { className: "flex items-center justify-between gap-3", children: [
         /* @__PURE__ */ jsxs64("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx78("h4", { className: "text-xs font-bold text-white", children: "Receive with Privacy" }),
-          /* @__PURE__ */ jsx78("p", { className: "mt-0.5 text-xxs text-muted-foreground", children: usePrivacy ? "Blinded UTXO - enhanced privacy" : "Witness address - less private" })
+          /* @__PURE__ */ jsx78("h4", { className: "text-xs font-bold text-white", children: usePrivacy ? "Blinded receive" : "Witness receive" }),
+          /* @__PURE__ */ jsx78("p", { className: "mt-0.5 text-xxs text-muted-foreground", children: usePrivacy ? "Private - recommended" : "Simpler - less private" })
         ] }),
         /* @__PURE__ */ jsx78(
           "button",
           {
             type: "button",
+            "aria-label": "Toggle blinded (private) receive",
             className: cn(
               "relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full border shadow-inner transition-colors",
               usePrivacy ? "bg-primary" : "bg-white/10"
@@ -7994,7 +8040,21 @@ function DepositPreGeneration({
           }
         )
       ] }),
-      !usePrivacy && /* @__PURE__ */ jsx78("p", { className: "rounded-lg border border-warning/15 bg-warning/5 px-2.5 py-1.5 text-xxs text-warning/80", children: "Sender needs to add sats to create a new UTXO for you." })
+      /* @__PURE__ */ jsx78("p", { className: "text-tiny leading-relaxed text-white/45", children: usePrivacy ? "Blinded: the sender never sees which UTXO you receive into. Spends one of your colorable UTXOs as the receiving slot." : "Witness: the sender creates the receiving UTXO for you. No colorable UTXO needed, but the sender sees the receiving output." }),
+      usePrivacy && colorableUtxoCount !== void 0 && /* @__PURE__ */ jsxs64(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-between rounded-lg border px-2.5 py-1.5 text-xxs",
+            colorableUtxoCount > 0 ? "border-success/20 bg-success/5 text-success/80" : "border-warning/20 bg-warning/5 text-warning/80"
+          ),
+          children: [
+            /* @__PURE__ */ jsx78("span", { className: "font-medium", children: "Available colorable UTXOs" }),
+            /* @__PURE__ */ jsx78("span", { className: "font-mono font-bold", children: colorableUtxoCount })
+          ]
+        }
+      ),
+      usePrivacy && colorableUtxoCount === 0 && /* @__PURE__ */ jsx78("p", { className: "text-tiny text-warning/70", children: "None available \u2014 create a colorable UTXO below to receive privately, or switch off privacy to use a witness receive." })
     ] }),
     network === "onchain" && !isBtc && /* @__PURE__ */ jsxs64("div", { className: "space-y-1.5", children: [
       /* @__PURE__ */ jsxs64("div", { className: "flex items-center justify-between", children: [
@@ -8024,7 +8084,7 @@ function DepositPreGeneration({
       /* @__PURE__ */ jsx78("p", { className: "mb-0.5 text-xs font-bold text-warning", children: "Colorable UTXOs Required" }),
       /* @__PURE__ */ jsx78("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__ */ jsx78(Button, { variant: "cta", size: "cta", onClick: onOpenCreateUtxos, disabled: loading, children: /* @__PURE__ */ jsxs64("span", { className: "flex items-center justify-center gap-2", children: [
+    !isAutoGenerate && ((needsColorableUtxos || isRgbOnchain && usePrivacy && colorableUtxoCount === 0) && onOpenCreateUtxos ? /* @__PURE__ */ jsx78(Button, { variant: "cta", size: "cta", onClick: onOpenCreateUtxos, disabled: loading, children: /* @__PURE__ */ jsxs64("span", { className: "flex items-center justify-center gap-2", children: [
       /* @__PURE__ */ jsx78("span", { className: "material-symbols-outlined text-icon-md", children: "add_circle" }),
       "Create Colorable UTXOs"
     ] }) }) : /* @__PURE__ */ jsx78(Button, { variant: "cta", size: "cta", onClick: generateInvoice, disabled: loading, children: loading ? /* @__PURE__ */ jsxs64("span", { className: "flex items-center justify-center gap-2", children: [
@@ -8039,7 +8099,12 @@ function DepositPreGeneration({
 
 // src/web/components/deposit-asset-selection.tsx
 import { useEffect as useEffect10, useState as useState15 } from "react";
-import { Fragment as Fragment16, jsx as jsx79, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs65 } from "react/jsx-runtime";
+var ADD_ASSET_SUBTITLE = {
+  RGB: "RGB asset on Bitcoin",
+  SPARK: "Spark-native asset",
+  ARKADE: "Arkade-native asset"
+};
 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" },
@@ -8077,6 +8142,7 @@ function DepositAssetSelection({
   const noResults = filteredAssets.length === 0 && !!searchQuery;
   const isSearching = !!searchQuery;
   const [assetsExpanded, setAssetsExpanded] = useState15(false);
+  const [showAddAssetModal, setShowAddAssetModal] = useState15(false);
   useEffect10(() => {
     if (isSearching) setAssetsExpanded(true);
   }, [isSearching]);
@@ -8256,71 +8322,60 @@ function DepositAssetSelection({
           ]
         }
       ) }),
-      !searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ jsxs65("div", { className: "space-y-2 pt-2", children: [
-        /* @__PURE__ */ jsx79("div", { className: "px-1", children: /* @__PURE__ */ jsx79("p", { className: "text-xxs font-bold uppercase tracking-[0.18em] text-white/35", children: "New Asset" }) }),
-        /* @__PURE__ */ jsx79(
-          "div",
+      !searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ jsx79("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ jsxs65(
+        "button",
+        {
+          type: "button",
+          "data-testid": "deposit-add-asset",
+          onClick: () => setShowAddAssetModal(true),
+          className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 p-3 transition-all hover:border-border hover:bg-accent",
+          children: [
+            /* @__PURE__ */ jsx79("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/15", children: /* @__PURE__ */ jsx79(Icon, { name: "add", size: "md", className: "text-primary" }) }),
+            /* @__PURE__ */ jsxs65("div", { className: "flex-1 text-left", children: [
+              /* @__PURE__ */ jsx79("p", { className: "text-sm font-semibold text-white transition-colors group-hover:text-primary", children: "Add an asset" }),
+              /* @__PURE__ */ jsxs65("p", { className: "text-xxs leading-tight text-white/40", children: [
+                "Receive a new ",
+                newAssetOptions.map((o) => o.ticker).join(", "),
+                " asset"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx79("span", { className: "material-symbols-outlined text-lg text-white/30 transition-colors group-hover:text-primary", children: "arrow_forward" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx79(
+      BottomSheet,
+      {
+        open: showAddAssetModal,
+        title: "Add an asset",
+        onClose: () => setShowAddAssetModal(false),
+        children: /* @__PURE__ */ jsx79("div", { className: "space-y-2", children: newAssetOptions.map((option) => /* @__PURE__ */ jsxs65(
+          "button",
           {
+            type: "button",
+            "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
             className: cn(
-              "grid gap-2",
-              newAssetOptions.length === 1 ? "grid-cols-1" : newAssetOptions.length === 2 ? "grid-cols-2" : "grid-cols-3"
+              "group flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left transition-all",
+              option.idleClass
             ),
-            children: newAssetOptions.map((option) => {
-              const active = isNewAsset && newAssetAccount === option.account;
-              return /* @__PURE__ */ jsxs65(
-                "button",
-                {
-                  type: "button",
-                  "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
-                  className: cn(
-                    "group flex min-h-[112px] flex-col items-center justify-center rounded-2xl px-3 py-3.5 text-center text-sm transition-all",
-                    active ? option.activeClass : option.idleClass
-                  ),
-                  onClick: () => handleAddNewAsset(option.account),
-                  children: [
-                    /* @__PURE__ */ jsxs65("div", { className: "relative", children: [
-                      /* @__PURE__ */ jsx79(AssetIcon, { ticker: option.ticker, size: 40 }),
-                      /* @__PURE__ */ jsx79("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ jsx79(Icon, { name: "add", size: "xs", className: "text-background" }) })
-                    ] }),
-                    /* @__PURE__ */ jsx79("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ jsx79(
-                      "div",
-                      {
-                        className: cn(
-                          "text-sm font-bold tracking-wide",
-                          active ? "text-white" : "text-white group-hover:opacity-90",
-                          !active && option.titleHoverClass
-                        ),
-                        children: option.title
-                      }
-                    ) })
-                  ]
-                },
-                option.account
-              );
-            })
-          }
-        )
-      ] })
-    ] }),
-    isNewAsset && newAssetAccount === "RGB" && /* @__PURE__ */ jsxs65(Fragment16, { children: [
-      /* @__PURE__ */ jsx79("div", { className: "flex-shrink-0 px-5 pb-3 animate-in fade-in slide-in-from-bottom-2 duration-300", children: /* @__PURE__ */ jsxs65("div", { className: "space-y-2 rounded-2xl border border-network-arkade/20 bg-network-arkade/5 p-3", children: [
-        /* @__PURE__ */ jsx79("p", { className: "text-tiny leading-relaxed text-network-arkade/80", children: "Leave empty to receive any RGB asset, or enter a specific asset ID." }),
-        /* @__PURE__ */ jsx79(
-          "input",
-          {
-            className: "w-full rounded-xl border bg-white/5 px-3 py-2 font-mono text-sm text-white transition-all placeholder:text-white/25 focus:border-network-arkade/40 focus:outline-none",
-            onChange: (event) => setNewAssetId(event.target.value),
-            placeholder: "Asset ID (optional)",
-            type: "text",
-            value: newAssetId
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsx79("div", { className: "flex-shrink-0 px-5 pb-5 pt-2", children: /* @__PURE__ */ jsxs65(Button, { variant: "cta", size: "cta", onClick: handleContinueToGenerate, children: [
-        "Continue with New Asset",
-        /* @__PURE__ */ jsx79("span", { className: "material-symbols-outlined text-icon-xl font-bold", children: "arrow_forward" })
-      ] }) })
-    ] })
+            onClick: () => {
+              setShowAddAssetModal(false);
+              handleAddNewAsset(option.account);
+            },
+            children: [
+              /* @__PURE__ */ jsx79(AssetIcon, { ticker: option.ticker, size: 36, className: "flex-shrink-0" }),
+              /* @__PURE__ */ jsxs65("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx79("div", { className: cn("text-sm font-bold tracking-wide text-white", option.titleHoverClass), children: option.title }),
+                /* @__PURE__ */ jsx79("div", { className: "mt-0.5 text-xxs text-white/40", children: ADD_ASSET_SUBTITLE[option.account] })
+              ] }),
+              /* @__PURE__ */ jsx79(Icon, { name: "add", size: "sm", className: "text-white/30 transition-colors group-hover:text-white/60" })
+            ]
+          },
+          option.account
+        )) })
+      }
+    )
   ] });
 }
 

package/package.json

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