kaleido-ui 0.1.74 → 0.1.76

package/dist/web/index.cjs

@@ -4765,9 +4765,17 @@ function WithdrawAmountInput({
   feeRate,
   setFeeRate,
   feeRates,
+  feeRateMode,
+  setFeeRateMode,
+  customFeeRate,
+  setCustomFeeRate,
+  effectiveFeeRateSatPerVb,
+  estimatedFee,
   donation,
   setDonation
 }) {
+  const customFeeEnabled = typeof setFeeRateMode === "function";
+  const activeFeeMode = feeRateMode ?? feeRate;
   const unitLabel = selectedAssetId === "BTC" ? "sats" : selectedAssetTicker ?? "units";
   const showAmountInput = addressType === "bitcoin" || addressType === "spark" || addressType === "arkade" || addressType === "lightning-address" || addressType === "lnurl-pay" || addressType === "rgb" && !decodedRgbInvoice?.assignment?.value || addressType === "lightning" && !decodedLnInvoice?.amount && !decodedLnInvoice?.asset_amount;
   const enteredNum = parseFloat(amount.replace(/[^\d.-]/g, "") || "0") || 0;
@@ -4846,7 +4854,58 @@ function WithdrawAmountInput({
     ] }),
     (addressType === "bitcoin" || addressType === "rgb") && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "space-y-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { className: "ml-1 text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "Fee Rate" }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "grid grid-cols-3 gap-3", children: ["slow", "normal", "fast"].map((rate) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      customFeeEnabled ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "grid grid-cols-4 gap-2", children: ["slow", "normal", "fast", "custom"].map((mode) => {
+          const selected = activeFeeMode === mode;
+          return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setFeeRateMode?.(mode);
+                if (mode !== "custom") setFeeRate(mode);
+              },
+              className: `group relative overflow-hidden rounded-xl border px-2 py-3 shadow-sm transition-all active:scale-[0.98] ${selected ? "border-primary/40 bg-primary/10" : "border-border bg-card/40 hover:border-primary/40"}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                  "span",
+                  {
+                    className: `block text-xs font-bold capitalize ${selected ? "text-primary" : "text-muted-foreground group-hover:text-primary"}`,
+                    children: mode
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                  "span",
+                  {
+                    className: `mt-0.5 block text-xxs font-medium ${selected ? "text-primary/70" : "text-white/40 group-hover:text-white/70"}`,
+                    children: mode === "custom" ? "sat/vB" : `${feeRates[mode]} sat/vB`
+                  }
+                )
+              ]
+            },
+            mode
+          );
+        }) }),
+        activeFeeMode === "custom" && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          "input",
+          {
+            type: "text",
+            inputMode: "decimal",
+            placeholder: `${feeRates[feeRate]} (${feeRate})`,
+            value: customFeeRate ?? "",
+            onChange: (event) => setCustomFeeRate?.(event.target.value.replace(/[^\d.]/g, "")),
+            className: "w-full rounded-xl bg-card px-4 py-3 text-sm text-white shadow-inner transition-all focus:outline focus:outline-2 focus:outline-primary/50"
+          }
+        ),
+        typeof estimatedFee === "number" && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("p", { className: "ml-1 text-xs text-muted-foreground", children: [
+          "Using ",
+          effectiveFeeRateSatPerVb,
+          " sat/vB \xB7 ~",
+          estimatedFee.toLocaleString(),
+          " ",
+          "sats est. fee"
+        ] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "grid grid-cols-3 gap-3", children: ["slow", "normal", "fast"].map((rate) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
         "button",
         {
           type: "button",
@@ -7208,7 +7267,10 @@ var NETWORK_CONFIG = {
     border: "border-network-bitcoin/40",
     qrBorder: "border-network-bitcoin/30",
     qrGlow: qrGlowStyle(colors.network.bitcoin),
-    icon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "material-symbols-outlined text-icon-xs leading-none", children: "currency_bitcoin" })
+    // On-chain uses a chain-link glyph rather than the ₿ coin — the coin reads
+    // as "the BTC asset", whereas this row is specifically the *on-chain* (L1)
+    // receive rail alongside Lightning/Spark/Arkade, so a chain mark disambiguates.
+    icon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "material-symbols-outlined text-icon-xs leading-none", children: "link" })
   },
   lightning: {
     label: "Lightning",

package/dist/web/index.d.cts

@@ -886,10 +886,23 @@ interface WithdrawAmountInputProps {
         normal: number;
         fast: number;
     };
+    /**
+     * Optional custom fee-rate mode. When `setFeeRateMode` is provided the fee
+     * selector gains a fourth "Custom" option with a sat/vB input; otherwise it
+     * renders the plain slow/normal/fast presets (backward compatible).
+     */
+    feeRateMode?: 'slow' | 'normal' | 'fast' | 'custom';
+    setFeeRateMode?: (mode: 'slow' | 'normal' | 'fast' | 'custom') => void;
+    customFeeRate?: string;
+    setCustomFeeRate?: (value: string) => void;
+    /** Resolved sat/vB actually used (preset or custom), for the estimate line. */
+    effectiveFeeRateSatPerVb?: number;
+    /** Estimated total fee in sats, for the estimate line. */
+    estimatedFee?: number;
     donation: boolean;
     setDonation: (value: boolean) => void;
 }
-declare function WithdrawAmountInput({ addressType, amount, handleAmountChange, handleSetMax, selectedAssetId, selectedAssetTicker, formattedBalance, decodedLnInvoice, decodedRgbInvoice, lnurlPayData, witnessAmountSat, setWitnessAmountSat, feeRate, setFeeRate, feeRates, donation, setDonation, }: WithdrawAmountInputProps): react_jsx_runtime.JSX.Element;
+declare function WithdrawAmountInput({ addressType, amount, handleAmountChange, handleSetMax, selectedAssetId, selectedAssetTicker, formattedBalance, decodedLnInvoice, decodedRgbInvoice, lnurlPayData, witnessAmountSat, setWitnessAmountSat, feeRate, setFeeRate, feeRates, feeRateMode, setFeeRateMode, customFeeRate, setCustomFeeRate, effectiveFeeRateSatPerVb, estimatedFee, donation, setDonation, }: WithdrawAmountInputProps): react_jsx_runtime.JSX.Element;
 
 interface WithdrawInvoiceAsset {
     asset_id: string;

package/dist/web/index.d.ts

@@ -886,10 +886,23 @@ interface WithdrawAmountInputProps {
         normal: number;
         fast: number;
     };
+    /**
+     * Optional custom fee-rate mode. When `setFeeRateMode` is provided the fee
+     * selector gains a fourth "Custom" option with a sat/vB input; otherwise it
+     * renders the plain slow/normal/fast presets (backward compatible).
+     */
+    feeRateMode?: 'slow' | 'normal' | 'fast' | 'custom';
+    setFeeRateMode?: (mode: 'slow' | 'normal' | 'fast' | 'custom') => void;
+    customFeeRate?: string;
+    setCustomFeeRate?: (value: string) => void;
+    /** Resolved sat/vB actually used (preset or custom), for the estimate line. */
+    effectiveFeeRateSatPerVb?: number;
+    /** Estimated total fee in sats, for the estimate line. */
+    estimatedFee?: number;
     donation: boolean;
     setDonation: (value: boolean) => void;
 }
-declare function WithdrawAmountInput({ addressType, amount, handleAmountChange, handleSetMax, selectedAssetId, selectedAssetTicker, formattedBalance, decodedLnInvoice, decodedRgbInvoice, lnurlPayData, witnessAmountSat, setWitnessAmountSat, feeRate, setFeeRate, feeRates, donation, setDonation, }: WithdrawAmountInputProps): react_jsx_runtime.JSX.Element;
+declare function WithdrawAmountInput({ addressType, amount, handleAmountChange, handleSetMax, selectedAssetId, selectedAssetTicker, formattedBalance, decodedLnInvoice, decodedRgbInvoice, lnurlPayData, witnessAmountSat, setWitnessAmountSat, feeRate, setFeeRate, feeRates, feeRateMode, setFeeRateMode, customFeeRate, setCustomFeeRate, effectiveFeeRateSatPerVb, estimatedFee, donation, setDonation, }: WithdrawAmountInputProps): react_jsx_runtime.JSX.Element;
 
 interface WithdrawInvoiceAsset {
     asset_id: string;

package/dist/web/index.js

@@ -4587,9 +4587,17 @@ function WithdrawAmountInput({
   feeRate,
   setFeeRate,
   feeRates,
+  feeRateMode,
+  setFeeRateMode,
+  customFeeRate,
+  setCustomFeeRate,
+  effectiveFeeRateSatPerVb,
+  estimatedFee,
   donation,
   setDonation
 }) {
+  const customFeeEnabled = typeof setFeeRateMode === "function";
+  const activeFeeMode = feeRateMode ?? feeRate;
   const unitLabel = selectedAssetId === "BTC" ? "sats" : selectedAssetTicker ?? "units";
   const showAmountInput = addressType === "bitcoin" || addressType === "spark" || addressType === "arkade" || addressType === "lightning-address" || addressType === "lnurl-pay" || addressType === "rgb" && !decodedRgbInvoice?.assignment?.value || addressType === "lightning" && !decodedLnInvoice?.amount && !decodedLnInvoice?.asset_amount;
   const enteredNum = parseFloat(amount.replace(/[^\d.-]/g, "") || "0") || 0;
@@ -4668,7 +4676,58 @@ function WithdrawAmountInput({
     ] }),
     (addressType === "bitcoin" || addressType === "rgb") && /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx46("label", { className: "ml-1 text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "Fee Rate" }),
-      /* @__PURE__ */ jsx46("div", { className: "grid grid-cols-3 gap-3", children: ["slow", "normal", "fast"].map((rate) => /* @__PURE__ */ jsxs33(
+      customFeeEnabled ? /* @__PURE__ */ jsxs33(Fragment9, { children: [
+        /* @__PURE__ */ jsx46("div", { className: "grid grid-cols-4 gap-2", children: ["slow", "normal", "fast", "custom"].map((mode) => {
+          const selected = activeFeeMode === mode;
+          return /* @__PURE__ */ jsxs33(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setFeeRateMode?.(mode);
+                if (mode !== "custom") setFeeRate(mode);
+              },
+              className: `group relative overflow-hidden rounded-xl border px-2 py-3 shadow-sm transition-all active:scale-[0.98] ${selected ? "border-primary/40 bg-primary/10" : "border-border bg-card/40 hover:border-primary/40"}`,
+              children: [
+                /* @__PURE__ */ jsx46(
+                  "span",
+                  {
+                    className: `block text-xs font-bold capitalize ${selected ? "text-primary" : "text-muted-foreground group-hover:text-primary"}`,
+                    children: mode
+                  }
+                ),
+                /* @__PURE__ */ jsx46(
+                  "span",
+                  {
+                    className: `mt-0.5 block text-xxs font-medium ${selected ? "text-primary/70" : "text-white/40 group-hover:text-white/70"}`,
+                    children: mode === "custom" ? "sat/vB" : `${feeRates[mode]} sat/vB`
+                  }
+                )
+              ]
+            },
+            mode
+          );
+        }) }),
+        activeFeeMode === "custom" && /* @__PURE__ */ jsx46(
+          "input",
+          {
+            type: "text",
+            inputMode: "decimal",
+            placeholder: `${feeRates[feeRate]} (${feeRate})`,
+            value: customFeeRate ?? "",
+            onChange: (event) => setCustomFeeRate?.(event.target.value.replace(/[^\d.]/g, "")),
+            className: "w-full rounded-xl bg-card px-4 py-3 text-sm text-white shadow-inner transition-all focus:outline focus:outline-2 focus:outline-primary/50"
+          }
+        ),
+        typeof estimatedFee === "number" && /* @__PURE__ */ jsxs33("p", { className: "ml-1 text-xs text-muted-foreground", children: [
+          "Using ",
+          effectiveFeeRateSatPerVb,
+          " sat/vB \xB7 ~",
+          estimatedFee.toLocaleString(),
+          " ",
+          "sats est. fee"
+        ] })
+      ] }) : /* @__PURE__ */ jsx46("div", { className: "grid grid-cols-3 gap-3", children: ["slow", "normal", "fast"].map((rate) => /* @__PURE__ */ jsxs33(
         "button",
         {
           type: "button",
@@ -7030,7 +7089,10 @@ var NETWORK_CONFIG = {
     border: "border-network-bitcoin/40",
     qrBorder: "border-network-bitcoin/30",
     qrGlow: qrGlowStyle(colors.network.bitcoin),
-    icon: /* @__PURE__ */ jsx73("span", { className: "material-symbols-outlined text-icon-xs leading-none", children: "currency_bitcoin" })
+    // On-chain uses a chain-link glyph rather than the ₿ coin — the coin reads
+    // as "the BTC asset", whereas this row is specifically the *on-chain* (L1)
+    // receive rail alongside Lightning/Spark/Arkade, so a chain mark disambiguates.
+    icon: /* @__PURE__ */ jsx73("span", { className: "material-symbols-outlined text-icon-xs leading-none", children: "link" })
   },
   lightning: {
     label: "Lightning",

package/package.json

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