kaleido-ui 0.1.72 → 0.1.73

package/dist/web/index.cjs

@@ -2245,7 +2245,7 @@ var LOGO_PATHS = /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runti
   ),
   /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M274.479 0.104797H411.786L274.533 137.411H137.226L274.479 0.104797Z", fill: "#17B581" })
 ] });
-function QrCode({ value, size = 160, className }) {
+function QrCode({ value, size = 160, className, tone = "onLight" }) {
   const svgContent = (0, import_react6.useMemo)(() => {
     if (!value) return null;
     const matrix = (0, import_qr.default)(value, "raw", { ecc: "medium", border: 0 });
@@ -2253,8 +2253,8 @@ function QrCode({ value, size = 160, className }) {
     const moduleSize = 10;
     const quietZone = moduleSize * 2;
     const svgSize = n * moduleSize + quietZone * 2;
-    const fg = "#040404";
-    const bg = "#ffffff";
+    const fg = tone === "onDark" ? "#ffffff" : "#040404";
+    const bg = tone === "onDark" ? "transparent" : "#ffffff";
     const logoModules = Math.ceil(n * 0.2);
     const logoZoneSize = logoModules % 2 === 0 ? logoModules + 1 : logoModules;
     const elements = [];
@@ -2308,7 +2308,7 @@ function QrCode({ value, size = 160, className }) {
         children: elements
       }
     );
-  }, [value]);
+  }, [value, tone]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className, style: { width: size, height: size }, children: svgContent });
 }
 
@@ -7179,7 +7179,7 @@ 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: "link" })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "material-symbols-outlined text-icon-xs leading-none", children: "currency_bitcoin" })
   },
   lightning: {
     label: "Lightning",
@@ -7591,13 +7591,13 @@ function DepositNetworkDefaultModal({
 }
 
 // src/web/components/btc-unified-receive.tsx
+var import_react16 = require("react");
 var import_jsx_runtime76 = require("react/jsx-runtime");
 function formatSatsForRow(value) {
   if (!value || value <= 0 || !Number.isFinite(value)) return null;
   return `${value.toLocaleString("en-US")} sats`;
 }
 function BtcUnifiedReceive({
-  btcSelectedAccount,
   accountReceiveResult,
   invoiceStatus,
   isInvoicePending,
@@ -7612,66 +7612,56 @@ function BtcUnifiedReceive({
   setAmount,
   setInvoiceStatus,
   setAccountReceiveResult,
-  handleDone,
-  showRegenerate = true
+  showRegenerate = true,
+  description,
+  onDescriptionChange
 }) {
-  const accountNetwork = btcSelectedAccount === "SPARK" ? "spark" : btcSelectedAccount === "ARKADE" ? "arkade" : "onchain";
-  const qrNetwork = NETWORK_CONFIG[accountNetwork];
+  const [showEdit, setShowEdit] = (0, import_react16.useState)(false);
+  const isQrCopied = copied === accountReceiveResult.qrValue;
+  const handleNewAddress = () => {
+    setAddress("");
+    setAmount("");
+    setInvoiceStatus(null);
+    setAccountReceiveResult(null);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex flex-col gap-1.5 rounded-xl border border-white/8 bg-white/3 p-2.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Amount (optional)" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-        "input",
-        {
-          type: "text",
-          value: amount,
-          onChange: handleAmountChange,
-          placeholder: "Any amount",
-          className: "w-full rounded-lg border bg-white/5 px-3 py-1.5 font-mono text-xs font-bold text-white transition-all placeholder:text-white/25 focus:border-primary/40 focus:outline-none",
-          inputMode: "decimal"
-        }
-      ),
-      amount && loading && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("p", { className: "flex items-center gap-1 text-xxs text-warning/70", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "material-symbols-outlined animate-spin text-icon-xxs", children: "progress_activity" }),
-        "Updating invoice..."
-      ] })
-    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
-        "div",
-        {
-          className: cn(
-            "relative flex flex-col items-center rounded-2xl border-2 bg-white p-2 transition-all",
-            qrNetwork.qrBorder
-          ),
-          style: qrNetwork.qrGlow,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(QrCode, { value: accountReceiveResult.qrValue, size: 200 }),
-            isInvoicePaid && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PaidOverlay, {})
-          ]
-        }
-      ),
-      (() => {
-        const isQrCopied = copied === accountReceiveResult.qrValue;
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
-          "button",
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "relative flex flex-col items-center p-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(QrCode, { value: accountReceiveResult.qrValue, size: 200, tone: "onDark" }),
+        isInvoicePaid && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PaidOverlay, {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex items-center justify-center gap-2.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          Button,
           {
-            type: "button",
-            className: cn(
-              "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
-              isQrCopied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
-            ),
-            onClick: (event) => {
-              event.stopPropagation();
-              void copyToClipboard(accountReceiveResult.qrValue);
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { name: isQrCopied ? "check" : "content_copy", size: "xs" }),
-              isQrCopied ? "Copied" : `Copy ${accountReceiveResult.qrLabel}`
-            ]
+            variant: "surface",
+            size: "icon-xl",
+            "aria-label": `Copy ${accountReceiveResult.qrLabel}`,
+            onClick: () => void copyToClipboard(accountReceiveResult.qrValue),
+            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { name: isQrCopied ? "check" : "content_copy", size: "lg" })
           }
-        );
-      })()
+        ),
+        showRegenerate && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          Button,
+          {
+            variant: "surface",
+            size: "icon-xl",
+            "aria-label": "New address",
+            onClick: handleNewAddress,
+            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { name: "refresh", size: "lg" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          Button,
+          {
+            variant: "surface",
+            size: "icon-xl",
+            "aria-label": "Edit amount and description",
+            onClick: () => setShowEdit(true),
+            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { name: "edit", size: "lg" })
+          }
+        )
+      ] })
     ] }),
     invoiceStatus && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       InvoiceStatusBanner,
@@ -7690,9 +7680,8 @@ function BtcUnifiedReceive({
           "div",
           {
             className: cn(
-              "group flex cursor-pointer items-center gap-2 rounded-xl border bg-white/3 px-2.5 py-1.5",
-              "transition-all hover:bg-white/6 active:scale-[0.98]",
-              network.border
+              "group flex cursor-pointer items-center gap-2 rounded-xl bg-white/3 px-2.5 py-1.5",
+              "transition-all hover:bg-white/6 active:scale-[0.98]"
             ),
             style: { borderLeftWidth: 3, borderLeftColor: network.color },
             onClick: () => void copyToClipboard(address.value),
@@ -7716,36 +7705,48 @@ function BtcUnifiedReceive({
       })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-      NetworkInfoDisclosure,
+      BottomSheet,
       {
-        networks: Array.from(
-          new Set(accountReceiveResult.addresses.map((address) => address.network))
-        )
+        open: showEdit,
+        title: "Edit request",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { name: "edit", size: "md" }),
+        onClose: () => setShowEdit(false),
+        children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Amount (optional)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+              "input",
+              {
+                type: "text",
+                value: amount,
+                onChange: handleAmountChange,
+                placeholder: "Any amount",
+                className: "w-full rounded-xl bg-white/5 px-3 py-2.5 font-mono text-sm font-bold text-white shadow-inner transition-all placeholder:text-white/25 focus:outline focus:outline-2 focus:outline-primary/40",
+                inputMode: "decimal"
+              }
+            ),
+            amount && loading && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("p", { className: "flex items-center gap-1 text-xxs text-warning/70", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "material-symbols-outlined animate-spin text-icon-xxs", children: "progress_activity" }),
+              "Updating invoice..."
+            ] })
+          ] }),
+          onDescriptionChange && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Description (optional)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+              "input",
+              {
+                type: "text",
+                value: description ?? "",
+                onChange: (event) => onDescriptionChange(event.target.value),
+                placeholder: "What's this for?",
+                className: "w-full rounded-xl bg-white/5 px-3 py-2.5 text-sm text-white shadow-inner transition-all placeholder:text-white/25 focus:outline focus:outline-2 focus:outline-primary/40"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Button, { variant: "cta", className: "w-full", onClick: () => setShowEdit(false), children: "Done" })
+        ] })
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex gap-2.5 pt-1", children: [
-      showRegenerate && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            setAddress("");
-            setAmount("");
-            setInvoiceStatus(null);
-            setAccountReceiveResult(null);
-          },
-          className: "flex flex-1 items-center justify-center gap-1.5 rounded-xl border py-3 text-xs font-bold text-muted-foreground transition-all hover:border-border hover:bg-accent hover:text-white active:scale-[0.98]",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "material-symbols-outlined text-icon-sm", children: "refresh" }),
-            "New Address"
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Button, { variant: "cta", onClick: handleDone, className: showRegenerate ? void 0 : "flex-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "material-symbols-outlined text-icon-sm", children: "check" }),
-        "Done"
-      ] })
-    ] })
+    )
   ] });
 }
 
@@ -8167,7 +8168,7 @@ function DepositPreGeneration({
 }
 
 // src/web/components/deposit-asset-selection.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var ADD_ASSET_SUBTITLE = {
   RGB: "RGB asset on Bitcoin",
@@ -8210,9 +8211,9 @@ function DepositAssetSelection({
   const ownedAssetsCount = ownedAssets.length;
   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)(() => {
+  const [assetsExpanded, setAssetsExpanded] = (0, import_react17.useState)(false);
+  const [showAddAssetModal, setShowAddAssetModal] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
     if (isSearching) setAssetsExpanded(true);
   }, [isSearching]);
   const showOwnedAssets = isSearching ? true : assetsExpanded;

package/dist/web/index.d.cts

@@ -334,8 +334,14 @@ interface QrCodeProps {
     value: string;
     size?: number;
     className?: string;
+    /**
+     * 'onLight' (default) renders dark modules on a white card — use inside a
+     * white container. 'onDark' renders white modules on a transparent
+     * background so the QR sits directly on the app background.
+     */
+    tone?: 'onLight' | 'onDark';
 }
-declare function QrCode({ value, size, className }: QrCodeProps): react_jsx_runtime.JSX.Element;
+declare function QrCode({ value, size, className, tone }: QrCodeProps): react_jsx_runtime.JSX.Element;
 
 interface BottomNavItem<TValue extends string = string> {
     id: TValue;
@@ -1468,8 +1474,12 @@ interface BtcUnifiedReceiveProps {
      * button leads to a half-initialised state).
      */
     showRegenerate?: boolean;
+    /** Optional request description/memo, edited alongside the amount in the
+     * Edit modal. When omitted the description field is hidden. */
+    description?: string;
+    onDescriptionChange?: (value: string) => void;
 }
-declare function BtcUnifiedReceive({ btcSelectedAccount, accountReceiveResult, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, setAddress, setAmount, setInvoiceStatus, setAccountReceiveResult, handleDone, showRegenerate, }: BtcUnifiedReceiveProps): react_jsx_runtime.JSX.Element;
+declare function BtcUnifiedReceive({ accountReceiveResult, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, setAddress, setAmount, setInvoiceStatus, setAccountReceiveResult, showRegenerate, description, onDescriptionChange, }: BtcUnifiedReceiveProps): react_jsx_runtime.JSX.Element;
 
 interface DepositGeneratedAsset {
     ticker?: string;

package/dist/web/index.d.ts

@@ -334,8 +334,14 @@ interface QrCodeProps {
     value: string;
     size?: number;
     className?: string;
+    /**
+     * 'onLight' (default) renders dark modules on a white card — use inside a
+     * white container. 'onDark' renders white modules on a transparent
+     * background so the QR sits directly on the app background.
+     */
+    tone?: 'onLight' | 'onDark';
 }
-declare function QrCode({ value, size, className }: QrCodeProps): react_jsx_runtime.JSX.Element;
+declare function QrCode({ value, size, className, tone }: QrCodeProps): react_jsx_runtime.JSX.Element;
 
 interface BottomNavItem<TValue extends string = string> {
     id: TValue;
@@ -1468,8 +1474,12 @@ interface BtcUnifiedReceiveProps {
      * button leads to a half-initialised state).
      */
     showRegenerate?: boolean;
+    /** Optional request description/memo, edited alongside the amount in the
+     * Edit modal. When omitted the description field is hidden. */
+    description?: string;
+    onDescriptionChange?: (value: string) => void;
 }
-declare function BtcUnifiedReceive({ btcSelectedAccount, accountReceiveResult, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, setAddress, setAmount, setInvoiceStatus, setAccountReceiveResult, handleDone, showRegenerate, }: BtcUnifiedReceiveProps): react_jsx_runtime.JSX.Element;
+declare function BtcUnifiedReceive({ accountReceiveResult, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, setAddress, setAmount, setInvoiceStatus, setAccountReceiveResult, showRegenerate, description, onDescriptionChange, }: BtcUnifiedReceiveProps): react_jsx_runtime.JSX.Element;
 
 interface DepositGeneratedAsset {
     ticker?: string;

package/dist/web/index.js

@@ -2067,7 +2067,7 @@ var LOGO_PATHS = /* @__PURE__ */ jsxs13(Fragment, { children: [
   ),
   /* @__PURE__ */ jsx26("path", { d: "M274.479 0.104797H411.786L274.533 137.411H137.226L274.479 0.104797Z", fill: "#17B581" })
 ] });
-function QrCode({ value, size = 160, className }) {
+function QrCode({ value, size = 160, className, tone = "onLight" }) {
   const svgContent = useMemo(() => {
     if (!value) return null;
     const matrix = encodeQR(value, "raw", { ecc: "medium", border: 0 });
@@ -2075,8 +2075,8 @@ function QrCode({ value, size = 160, className }) {
     const moduleSize = 10;
     const quietZone = moduleSize * 2;
     const svgSize = n * moduleSize + quietZone * 2;
-    const fg = "#040404";
-    const bg = "#ffffff";
+    const fg = tone === "onDark" ? "#ffffff" : "#040404";
+    const bg = tone === "onDark" ? "transparent" : "#ffffff";
     const logoModules = Math.ceil(n * 0.2);
     const logoZoneSize = logoModules % 2 === 0 ? logoModules + 1 : logoModules;
     const elements = [];
@@ -2130,7 +2130,7 @@ function QrCode({ value, size = 160, className }) {
         children: elements
       }
     );
-  }, [value]);
+  }, [value, tone]);
   return /* @__PURE__ */ jsx26("div", { className, style: { width: size, height: size }, children: svgContent });
 }
 
@@ -7001,7 +7001,7 @@ 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: "link" })
+    icon: /* @__PURE__ */ jsx73("span", { className: "material-symbols-outlined text-icon-xs leading-none", children: "currency_bitcoin" })
   },
   lightning: {
     label: "Lightning",
@@ -7413,13 +7413,13 @@ function DepositNetworkDefaultModal({
 }
 
 // src/web/components/btc-unified-receive.tsx
+import { useState as useState15 } from "react";
 import { jsx as jsx76, jsxs as jsxs62 } from "react/jsx-runtime";
 function formatSatsForRow(value) {
   if (!value || value <= 0 || !Number.isFinite(value)) return null;
   return `${value.toLocaleString("en-US")} sats`;
 }
 function BtcUnifiedReceive({
-  btcSelectedAccount,
   accountReceiveResult,
   invoiceStatus,
   isInvoicePending,
@@ -7434,66 +7434,56 @@ function BtcUnifiedReceive({
   setAmount,
   setInvoiceStatus,
   setAccountReceiveResult,
-  handleDone,
-  showRegenerate = true
+  showRegenerate = true,
+  description,
+  onDescriptionChange
 }) {
-  const accountNetwork = btcSelectedAccount === "SPARK" ? "spark" : btcSelectedAccount === "ARKADE" ? "arkade" : "onchain";
-  const qrNetwork = NETWORK_CONFIG[accountNetwork];
+  const [showEdit, setShowEdit] = useState15(false);
+  const isQrCopied = copied === accountReceiveResult.qrValue;
+  const handleNewAddress = () => {
+    setAddress("");
+    setAmount("");
+    setInvoiceStatus(null);
+    setAccountReceiveResult(null);
+  };
   return /* @__PURE__ */ jsxs62("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
-    /* @__PURE__ */ jsxs62("div", { className: "flex flex-col gap-1.5 rounded-xl border border-white/8 bg-white/3 p-2.5", children: [
-      /* @__PURE__ */ jsx76("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ jsx76("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Amount (optional)" }) }),
-      /* @__PURE__ */ jsx76(
-        "input",
-        {
-          type: "text",
-          value: amount,
-          onChange: handleAmountChange,
-          placeholder: "Any amount",
-          className: "w-full rounded-lg border bg-white/5 px-3 py-1.5 font-mono text-xs font-bold text-white transition-all placeholder:text-white/25 focus:border-primary/40 focus:outline-none",
-          inputMode: "decimal"
-        }
-      ),
-      amount && loading && /* @__PURE__ */ jsxs62("p", { className: "flex items-center gap-1 text-xxs text-warning/70", children: [
-        /* @__PURE__ */ jsx76("span", { className: "material-symbols-outlined animate-spin text-icon-xxs", children: "progress_activity" }),
-        "Updating invoice..."
-      ] })
-    ] }),
     /* @__PURE__ */ jsxs62("div", { className: "flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ jsxs62(
-        "div",
-        {
-          className: cn(
-            "relative flex flex-col items-center rounded-2xl border-2 bg-white p-2 transition-all",
-            qrNetwork.qrBorder
-          ),
-          style: qrNetwork.qrGlow,
-          children: [
-            /* @__PURE__ */ jsx76(QrCode, { value: accountReceiveResult.qrValue, size: 200 }),
-            isInvoicePaid && /* @__PURE__ */ jsx76(PaidOverlay, {})
-          ]
-        }
-      ),
-      (() => {
-        const isQrCopied = copied === accountReceiveResult.qrValue;
-        return /* @__PURE__ */ jsxs62(
-          "button",
+      /* @__PURE__ */ jsxs62("div", { className: "relative flex flex-col items-center p-2", children: [
+        /* @__PURE__ */ jsx76(QrCode, { value: accountReceiveResult.qrValue, size: 200, tone: "onDark" }),
+        isInvoicePaid && /* @__PURE__ */ jsx76(PaidOverlay, {})
+      ] }),
+      /* @__PURE__ */ jsxs62("div", { className: "flex items-center justify-center gap-2.5", children: [
+        /* @__PURE__ */ jsx76(
+          Button,
           {
-            type: "button",
-            className: cn(
-              "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
-              isQrCopied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
-            ),
-            onClick: (event) => {
-              event.stopPropagation();
-              void copyToClipboard(accountReceiveResult.qrValue);
-            },
-            children: [
-              /* @__PURE__ */ jsx76(Icon, { name: isQrCopied ? "check" : "content_copy", size: "xs" }),
-              isQrCopied ? "Copied" : `Copy ${accountReceiveResult.qrLabel}`
-            ]
+            variant: "surface",
+            size: "icon-xl",
+            "aria-label": `Copy ${accountReceiveResult.qrLabel}`,
+            onClick: () => void copyToClipboard(accountReceiveResult.qrValue),
+            children: /* @__PURE__ */ jsx76(Icon, { name: isQrCopied ? "check" : "content_copy", size: "lg" })
           }
-        );
-      })()
+        ),
+        showRegenerate && /* @__PURE__ */ jsx76(
+          Button,
+          {
+            variant: "surface",
+            size: "icon-xl",
+            "aria-label": "New address",
+            onClick: handleNewAddress,
+            children: /* @__PURE__ */ jsx76(Icon, { name: "refresh", size: "lg" })
+          }
+        ),
+        /* @__PURE__ */ jsx76(
+          Button,
+          {
+            variant: "surface",
+            size: "icon-xl",
+            "aria-label": "Edit amount and description",
+            onClick: () => setShowEdit(true),
+            children: /* @__PURE__ */ jsx76(Icon, { name: "edit", size: "lg" })
+          }
+        )
+      ] })
     ] }),
     invoiceStatus && /* @__PURE__ */ jsx76(
       InvoiceStatusBanner,
@@ -7512,9 +7502,8 @@ function BtcUnifiedReceive({
           "div",
           {
             className: cn(
-              "group flex cursor-pointer items-center gap-2 rounded-xl border bg-white/3 px-2.5 py-1.5",
-              "transition-all hover:bg-white/6 active:scale-[0.98]",
-              network.border
+              "group flex cursor-pointer items-center gap-2 rounded-xl bg-white/3 px-2.5 py-1.5",
+              "transition-all hover:bg-white/6 active:scale-[0.98]"
             ),
             style: { borderLeftWidth: 3, borderLeftColor: network.color },
             onClick: () => void copyToClipboard(address.value),
@@ -7538,36 +7527,48 @@ function BtcUnifiedReceive({
       })
     ] }),
     /* @__PURE__ */ jsx76(
-      NetworkInfoDisclosure,
+      BottomSheet,
       {
-        networks: Array.from(
-          new Set(accountReceiveResult.addresses.map((address) => address.network))
-        )
+        open: showEdit,
+        title: "Edit request",
+        icon: /* @__PURE__ */ jsx76(Icon, { name: "edit", size: "md" }),
+        onClose: () => setShowEdit(false),
+        children: /* @__PURE__ */ jsxs62("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs62("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsx76("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Amount (optional)" }),
+            /* @__PURE__ */ jsx76(
+              "input",
+              {
+                type: "text",
+                value: amount,
+                onChange: handleAmountChange,
+                placeholder: "Any amount",
+                className: "w-full rounded-xl bg-white/5 px-3 py-2.5 font-mono text-sm font-bold text-white shadow-inner transition-all placeholder:text-white/25 focus:outline focus:outline-2 focus:outline-primary/40",
+                inputMode: "decimal"
+              }
+            ),
+            amount && loading && /* @__PURE__ */ jsxs62("p", { className: "flex items-center gap-1 text-xxs text-warning/70", children: [
+              /* @__PURE__ */ jsx76("span", { className: "material-symbols-outlined animate-spin text-icon-xxs", children: "progress_activity" }),
+              "Updating invoice..."
+            ] })
+          ] }),
+          onDescriptionChange && /* @__PURE__ */ jsxs62("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsx76("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Description (optional)" }),
+            /* @__PURE__ */ jsx76(
+              "input",
+              {
+                type: "text",
+                value: description ?? "",
+                onChange: (event) => onDescriptionChange(event.target.value),
+                placeholder: "What's this for?",
+                className: "w-full rounded-xl bg-white/5 px-3 py-2.5 text-sm text-white shadow-inner transition-all placeholder:text-white/25 focus:outline focus:outline-2 focus:outline-primary/40"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx76(Button, { variant: "cta", className: "w-full", onClick: () => setShowEdit(false), children: "Done" })
+        ] })
       }
-    ),
-    /* @__PURE__ */ jsxs62("div", { className: "flex gap-2.5 pt-1", children: [
-      showRegenerate && /* @__PURE__ */ jsxs62(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            setAddress("");
-            setAmount("");
-            setInvoiceStatus(null);
-            setAccountReceiveResult(null);
-          },
-          className: "flex flex-1 items-center justify-center gap-1.5 rounded-xl border py-3 text-xs font-bold text-muted-foreground transition-all hover:border-border hover:bg-accent hover:text-white active:scale-[0.98]",
-          children: [
-            /* @__PURE__ */ jsx76("span", { className: "material-symbols-outlined text-icon-sm", children: "refresh" }),
-            "New Address"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs62(Button, { variant: "cta", onClick: handleDone, className: showRegenerate ? void 0 : "flex-1", children: [
-        /* @__PURE__ */ jsx76("span", { className: "material-symbols-outlined text-icon-sm", children: "check" }),
-        "Done"
-      ] })
-    ] })
+    )
   ] });
 }
 
@@ -7989,7 +7990,7 @@ function DepositPreGeneration({
 }
 
 // src/web/components/deposit-asset-selection.tsx
-import { useEffect as useEffect10, useState as useState15 } from "react";
+import { useEffect as useEffect10, useState as useState16 } from "react";
 import { jsx as jsx79, jsxs as jsxs65 } from "react/jsx-runtime";
 var ADD_ASSET_SUBTITLE = {
   RGB: "RGB asset on Bitcoin",
@@ -8032,8 +8033,8 @@ function DepositAssetSelection({
   const ownedAssetsCount = ownedAssets.length;
   const noResults = filteredAssets.length === 0 && !!searchQuery;
   const isSearching = !!searchQuery;
-  const [assetsExpanded, setAssetsExpanded] = useState15(false);
-  const [showAddAssetModal, setShowAddAssetModal] = useState15(false);
+  const [assetsExpanded, setAssetsExpanded] = useState16(false);
+  const [showAddAssetModal, setShowAddAssetModal] = useState16(false);
   useEffect10(() => {
     if (isSearching) setAssetsExpanded(true);
   }, [isSearching]);

package/package.json

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