kaleido-ui 0.1.61 → 0.1.62

package/dist/web/index.cjs

@@ -8116,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" }),
@@ -8168,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"
@@ -8195,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: [
@@ -8225,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: [
@@ -8516,26 +8552,7 @@ function DepositAssetSelection({
           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" })
-      ] }) })
-    ] })
+    )
   ] });
 }
 

package/dist/web/index.d.cts

@@ -1545,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

@@ -1545,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

@@ -7939,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" }),
@@ -7991,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"
@@ -8018,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: [
@@ -8048,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: [
@@ -8063,7 +8099,7 @@ 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",
@@ -8339,26 +8375,7 @@ function DepositAssetSelection({
           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" })
-      ] }) })
-    ] })
+    )
   ] });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.61",
+  "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",