kaleido-ui 0.1.11 → 0.1.13

package/dist/web/index.cjs

@@ -4137,28 +4137,34 @@ function RouteChoiceCard({
   recommended,
   onClick
 }) {
+  const { disabled = false, disabledReason } = route;
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "button",
     {
       type: "button",
       "data-testid": `withdraw-route-${route.account.toLowerCase()}`,
       onClick,
+      disabled,
+      "aria-disabled": disabled,
+      title: disabled ? disabledReason : void 0,
       className: cn(
         "w-full rounded-2xl border p-4 text-left transition-all",
-        selected ? "border-primary/30 bg-primary/10" : "border-border bg-white/4 hover:border-white/20 hover:bg-white/6"
+        disabled ? "cursor-not-allowed border-danger/15 bg-danger/5 opacity-60" : selected ? "border-primary/30 bg-primary/10" : "border-border bg-white/4 hover:border-white/20 hover:bg-white/6"
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
-              recommended && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" })
+              recommended && !disabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" }),
+              disabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "rounded-full border border-danger/20 bg-danger/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-danger", children: "Insufficient" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-1 text-xs text-white/45", children: route.methodLabel })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground", children: route.summary })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground", children: route.summary }),
+        disabled && disabledReason && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-2 text-xxs leading-relaxed text-danger/80", children: disabledReason })
       ]
     }
   );
@@ -5402,7 +5408,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 +5515,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 +5908,9 @@ function DepositInvoiceGeneration({
   arkSubMode,
   setArkSubMode,
   btcSelectedAccount,
-  gen
+  gen,
+  needsColorableUtxos,
+  onOpenCreateUtxos
 }) {
   const {
     amount,
@@ -6114,7 +6131,9 @@ function DepositInvoiceGeneration({
         amount,
         handleAmountChange,
         getUnitLabel,
-        generateInvoice
+        generateInvoice,
+        needsColorableUtxos,
+        onOpenCreateUtxos
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       DepositGeneratedView,

package/dist/web/index.d.cts

@@ -804,6 +804,10 @@ interface WithdrawRouteOption<TAccount extends string = string> {
     accountTitle: string;
     methodLabel: string;
     feeHint: string;
+    /** When true, the route is unavailable (e.g. insufficient liquidity) and not clickable. */
+    disabled?: boolean;
+    /** Short reason shown under the disabled card. Pair with `disabled`. */
+    disabledReason?: string;
 }
 interface WithdrawRouteSummary {
     method: string;
@@ -1163,8 +1167,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 +1257,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

@@ -804,6 +804,10 @@ interface WithdrawRouteOption<TAccount extends string = string> {
     accountTitle: string;
     methodLabel: string;
     feeHint: string;
+    /** When true, the route is unavailable (e.g. insufficient liquidity) and not clickable. */
+    disabled?: boolean;
+    /** Short reason shown under the disabled card. Pair with `disabled`. */
+    disabledReason?: string;
 }
 interface WithdrawRouteSummary {
     method: string;
@@ -1163,8 +1167,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 +1257,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

@@ -3982,28 +3982,34 @@ function RouteChoiceCard({
   recommended,
   onClick
 }) {
+  const { disabled = false, disabledReason } = route;
   return /* @__PURE__ */ jsxs33(
     "button",
     {
       type: "button",
       "data-testid": `withdraw-route-${route.account.toLowerCase()}`,
       onClick,
+      disabled,
+      "aria-disabled": disabled,
+      title: disabled ? disabledReason : void 0,
       className: cn(
         "w-full rounded-2xl border p-4 text-left transition-all",
-        selected ? "border-primary/30 bg-primary/10" : "border-border bg-white/4 hover:border-white/20 hover:bg-white/6"
+        disabled ? "cursor-not-allowed border-danger/15 bg-danger/5 opacity-60" : selected ? "border-primary/30 bg-primary/10" : "border-border bg-white/4 hover:border-white/20 hover:bg-white/6"
       ),
       children: [
         /* @__PURE__ */ jsxs33("div", { className: "flex items-start justify-between gap-3", children: [
           /* @__PURE__ */ jsxs33("div", { children: [
             /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx45("span", { className: "text-sm font-bold text-white", children: route.accountTitle }),
-              recommended && /* @__PURE__ */ jsx45("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" })
+              recommended && !disabled && /* @__PURE__ */ jsx45("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" }),
+              disabled && /* @__PURE__ */ jsx45("span", { className: "rounded-full border border-danger/20 bg-danger/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-danger", children: "Insufficient" })
             ] }),
             /* @__PURE__ */ jsx45("p", { className: "mt-1 text-xs text-white/45", children: route.methodLabel })
           ] }),
           /* @__PURE__ */ jsx45("span", { className: "text-xxs font-bold uppercase tracking-wider text-white/35", children: route.feeHint })
         ] }),
-        /* @__PURE__ */ jsx45("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground", children: route.summary })
+        /* @__PURE__ */ jsx45("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground", children: route.summary }),
+        disabled && disabledReason && /* @__PURE__ */ jsx45("p", { className: "mt-2 text-xxs leading-relaxed text-danger/80", children: disabledReason })
       ]
     }
   );
@@ -5247,7 +5253,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 +5360,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 +5753,9 @@ function DepositInvoiceGeneration({
   arkSubMode,
   setArkSubMode,
   btcSelectedAccount,
-  gen
+  gen,
+  needsColorableUtxos,
+  onOpenCreateUtxos
 }) {
   const {
     amount,
@@ -5959,7 +5976,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.13",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",