kaleido-ui 0.1.11 → 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,13 +5509,20 @@ 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"
-    ] }) })
+    ] }) }))
   ] });
 }
 
@@ -5893,7 +5902,9 @@ function DepositInvoiceGeneration({
   arkSubMode,
   setArkSubMode,
   btcSelectedAccount,
-  gen
+  gen,
+  needsColorableUtxos,
+  onOpenCreateUtxos
 }) {
   const {
     amount,
@@ -6114,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,8 +1163,15 @@ 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;
@@ -1246,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,8 +1163,15 @@ 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;
@@ -1246,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,13 +5354,20 @@ 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"
-    ] }) })
+    ] }) }))
   ] });
 }
 
@@ -5738,7 +5747,9 @@ function DepositInvoiceGeneration({
   arkSubMode,
   setArkSubMode,
   btcSelectedAccount,
-  gen
+  gen,
+  needsColorableUtxos,
+  onOpenCreateUtxos
 }) {
   const {
     amount,
@@ -5959,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.11",
+  "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",