kaleido-ui 0.2.2 → 0.2.4

package/dist/web/chunk-JZ3BUM5L.js

@@ -0,0 +1,368 @@
+"use client";
+import {
+  DepositGeneratedView
+} from "./chunk-DH7VXKGM.js";
+import {
+  DepositPreGeneration
+} from "./chunk-27CY5EHL.js";
+import {
+  DepositSuccessScreen
+} from "./chunk-FWOIRFV5.js";
+import {
+  BtcUnifiedReceive
+} from "./chunk-A3TKIXSI.js";
+import {
+  AccountChoiceChip,
+  MethodChoiceChip,
+  NETWORK_CONFIG
+} from "./chunk-GX7GBHJ6.js";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  ArrowBack,
+  ProgressActivity
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/deposit-invoice-generation.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ACCOUNT_TITLES = {
+  RGB: "RGB & Lightning",
+  SPARK: "Spark",
+  ARKADE: "Arkade",
+  LIQUID: "Liquid"
+};
+function getAssetFamily(assetId, ticker) {
+  if (assetId === "BTC") return "BTC";
+  const normalized = (ticker || "").trim().toUpperCase();
+  if (normalized.startsWith("SPARK")) return "SPARK";
+  if (normalized.startsWith("ARK")) return "ARKADE";
+  return "RGB";
+}
+function resolveReceiveAccounts({
+  assetFamily,
+  accounts
+}) {
+  if (assetFamily === "RGB") return accounts.RGB ? ["RGB"] : [];
+  if (assetFamily === "SPARK") return accounts.SPARK ? ["SPARK"] : [];
+  if (assetFamily === "ARKADE") return accounts.ARKADE ? ["ARKADE"] : [];
+  return ["RGB", "SPARK", "ARKADE"].filter((account) => accounts[account]);
+}
+function resolveReceiveMethodOptions({
+  account,
+  assetFamily,
+  accounts,
+  isLightningAvailable
+}) {
+  const options = [];
+  if (account === "RGB") {
+    options.push({ method: "bitcoin_l1", enabled: accounts.RGB });
+    if (assetFamily === "BTC" || assetFamily === "RGB") {
+      options.push({
+        method: "lightning",
+        enabled: accounts.RGB && isLightningAvailable,
+        disabledReason: isLightningAvailable ? void 0 : "unavailable"
+      });
+    }
+  }
+  if (account === "SPARK") {
+    options.push({ method: "spark", enabled: accounts.SPARK });
+  }
+  if (account === "ARKADE") {
+    options.push({ method: "arkade", enabled: accounts.ARKADE });
+    if (assetFamily === "BTC") options.push({ method: "boarding", enabled: accounts.ARKADE });
+  }
+  return options;
+}
+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
+}) {
+  const {
+    amount,
+    address,
+    recipientId,
+    loading,
+    depositDetected,
+    invoiceStatus,
+    isInvoicePending,
+    isInvoicePaid,
+    isInvoiceFailedOrExpired,
+    accountReceiveResult,
+    copied,
+    handleAmountChange,
+    generateInvoice,
+    copyToClipboard,
+    getUnitLabel,
+    setAddress,
+    setRecipientId,
+    setAmount,
+    setInvoiceStatus,
+    setAccountReceiveResult
+  } = gen;
+  const isBtc = selectedAssetId === "BTC";
+  const assetFamily = getAssetFamily(selectedAssetId, selectedAsset?.ticker);
+  const displayTicker = selectedAsset?.ticker ?? (isBtc ? "BTC" : "RGB");
+  const selectedAccount = network === "spark" ? "SPARK" : network === "arkade" ? "ARKADE" : network === "lightning" && isBtc && walletChoice === "SPARK" ? "SPARK" : "RGB";
+  const currentMethod = network === "spark" ? "spark" : network === "arkade" ? arkSubMode === "boarding" ? "boarding" : "arkade" : network === "lightning" ? "lightning" : "bitcoin_l1";
+  const routeAccounts = {
+    RGB: isRgbConnected,
+    SPARK: isSparkConnected,
+    ARKADE: isArkadeConnected,
+    // Liquid isn't offered by kaleido-ui's own DepositInvoiceGeneration; the
+    // KaleidoSwap extension uses its own component for the Liquid receive path.
+    LIQUID: false
+  };
+  const availableAccounts = resolveReceiveAccounts({ assetFamily, accounts: routeAccounts });
+  const methodOptions = resolveReceiveMethodOptions({
+    account: selectedAccount,
+    assetFamily,
+    accounts: routeAccounts,
+    isLightningAvailable
+  });
+  const applyMethodSelection = (account, method) => {
+    if (account === "SPARK") setWalletChoice("SPARK");
+    else if (account === "RGB") setWalletChoice("RGB");
+    switch (method) {
+      case "bitcoin_l1":
+        setNetwork("onchain");
+        setWalletChoice("RGB");
+        break;
+      case "lightning":
+        setNetwork("lightning");
+        setWalletChoice(account === "SPARK" ? "SPARK" : "RGB");
+        break;
+      case "spark":
+        setNetwork("spark");
+        setWalletChoice("SPARK");
+        break;
+      case "arkade":
+        setNetwork("arkade");
+        setArkSubMode("ark");
+        break;
+      case "boarding":
+        setNetwork("arkade");
+        setArkSubMode("boarding");
+        break;
+      case "submarine_swap":
+        setNetwork("lightning");
+        setWalletChoice("RGB");
+        break;
+    }
+  };
+  const handleAccountSelect = (account) => {
+    const nextOptions = resolveReceiveMethodOptions({
+      account,
+      assetFamily,
+      accounts: routeAccounts,
+      isLightningAvailable
+    }).filter((option) => option.enabled).map((option) => option.method);
+    const nextMethod = nextOptions.includes(currentMethod) ? currentMethod : nextOptions[0];
+    if (nextMethod) applyMethodSelection(account, nextMethod);
+  };
+  if (depositDetected) {
+    return /* @__PURE__ */ jsx(
+      DepositSuccessScreen,
+      {
+        handleDone,
+        displayTicker,
+        selectedAsset,
+        network,
+        arkSubMode
+      }
+    );
+  }
+  const net = NETWORK_CONFIG[network];
+  const isAutoGenerate = network === "onchain" && isBtc || network === "spark" || network === "arkade" || network === "lightning";
+  const addressLabel = network === "spark" ? "Spark Address" : network === "arkade" ? arkSubMode === "boarding" ? "Boarding Address" : "Arkade Address" : network === "lightning" ? "Lightning Invoice" : "Deposit Address";
+  const showChannelWarning = selectedAccount === "RGB" && network === "lightning" && !channelsLoading && channels.length === 0 && !isSparkConnected;
+  const showLiquidityWarning = !isSparkLightning && network === "lightning" && maxDepositAmount === 0 && !channelsLoading && !isBtc;
+  const isNewRgbAsset = isNewAsset && assetFamily === "RGB";
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background bg-page-radial pt-16 font-display text-foreground", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-4 top-4 z-30", children: /* @__PURE__ */ jsx(GlyphButton, { icon: ArrowBack, label: "Go back", size: "lg", onClick: handleBack }) }),
+    (() => {
+      const hideDestinationRail = isNewAsset && (network === "spark" || network === "arkade");
+      if (hideDestinationRail) return null;
+      return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 px-4 py-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: "Destination Account" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: availableAccounts.map((account) => /* @__PURE__ */ jsx(
+            AccountChoiceChip,
+            {
+              account,
+              active: isBtc ? btcSelectedAccount === account : selectedAccount === account,
+              onClick: () => {
+                if (isBtc) {
+                  if (account === "SPARK") {
+                    setWalletChoice("SPARK");
+                    setNetwork("spark");
+                  } else if (account === "ARKADE") {
+                    setNetwork("arkade");
+                    setWalletChoice("RGB");
+                  } else {
+                    setWalletChoice("RGB");
+                    setNetwork("onchain");
+                  }
+                } else {
+                  handleAccountSelect(account);
+                }
+              }
+            },
+            account
+          )) })
+        ] }),
+        !isBtc && !(isNewAsset && (network === "spark" || network === "arkade")) && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: "Transfer Method" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: methodOptions.map(({ method, enabled, disabledReason }) => /* @__PURE__ */ jsx(
+            MethodChoiceChip,
+            {
+              method,
+              active: currentMethod === method,
+              enabled,
+              disabledReason,
+              onClick: () => enabled && applyMethodSelection(selectedAccount, method)
+            },
+            method
+          )) })
+        ] })
+      ] }) });
+    })(),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", viewportAs: "main", viewportClassName: "space-y-2.5 px-4 py-2.5", children: isBtc && accountReceiveResult ? /* @__PURE__ */ jsx(
+      BtcUnifiedReceive,
+      {
+        btcSelectedAccount,
+        accountReceiveResult,
+        invoiceStatus,
+        isInvoicePending,
+        isInvoicePaid,
+        isInvoiceFailedOrExpired,
+        amount,
+        handleAmountChange,
+        loading,
+        copied,
+        copyToClipboard,
+        setAddress,
+        setAmount,
+        setInvoiceStatus,
+        setAccountReceiveResult,
+        handleDone
+      }
+    ) : isBtc && !accountReceiveResult && loading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 py-10", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex size-16 items-center justify-center rounded-2xl shadow-raised",
+            NETWORK_CONFIG[btcSelectedAccount === "SPARK" ? "spark" : btcSelectedAccount === "ARKADE" ? "arkade" : "onchain"].bg
+          ),
+          children: /* @__PURE__ */ jsx(
+            IconGlyph,
+            {
+              glyph: ProgressActivity,
+              className: cn(
+                "animate-spin text-icon-4xl",
+                NETWORK_CONFIG[btcSelectedAccount === "SPARK" ? "spark" : btcSelectedAccount === "ARKADE" ? "arkade" : "onchain"].text
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-center", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-caption font-bold text-muted-foreground", children: "Generating addresses..." }),
+        /* @__PURE__ */ jsx("p", { className: "text-caption text-foreground/55", children: ACCOUNT_TITLES[btcSelectedAccount] })
+      ] })
+    ] }) : !address ? /* @__PURE__ */ jsx(
+      DepositPreGeneration,
+      {
+        selectedAsset,
+        isBtc,
+        network,
+        net,
+        selectedAccount,
+        currentMethod,
+        channelsLoading,
+        showChannelWarning,
+        showLiquidityWarning,
+        isAutoGenerate,
+        loading,
+        usePrivacy,
+        setUsePrivacy,
+        amount,
+        handleAmountChange,
+        getUnitLabel,
+        generateInvoice,
+        needsColorableUtxos,
+        onOpenCreateUtxos,
+        showReceiveSummary: !isNewRgbAsset
+      }
+    ) : /* @__PURE__ */ jsx(
+      DepositGeneratedView,
+      {
+        network,
+        net,
+        isBtc,
+        address,
+        addressLabel,
+        recipientId,
+        arkSubMode,
+        invoiceStatus,
+        isInvoicePending,
+        isInvoicePaid,
+        isInvoiceFailedOrExpired,
+        amount,
+        handleAmountChange,
+        loading,
+        copied,
+        copyToClipboard,
+        getUnitLabel,
+        selectedAsset,
+        maxDepositAmount,
+        setAddress,
+        setRecipientId,
+        setAmount,
+        setInvoiceStatus,
+        handleDone,
+        showQrNetworkBadge: false
+      }
+    ) })
+  ] });
+}
+
+export {
+  DepositInvoiceGeneration
+};

package/dist/web/chunk-KIMWCG5N.js

@@ -0,0 +1,108 @@
+"use client";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Check,
+  Refresh
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/read-status.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RefreshButton({ onRefresh, isRefreshing = false, label = "Refresh", className }) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      "data-slot": "refresh-button",
+      "aria-busy": isRefreshing || void 0,
+      className,
+      onClick: () => {
+        if (!isRefreshing) onRefresh();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          IconGlyph,
+          {
+            glyph: Refresh,
+            className: cn("text-icon-md", isRefreshing && "animate-spin motion-reduce:animate-none")
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+var READ_STATUS_UPDATED_MS = 2e3;
+function ReadStatus({
+  reads,
+  formatTime,
+  lastUpdateLabel = "Last update:",
+  updatedLabel = "Updated",
+  staleLabel = "Could not refresh. Showing the previous read.",
+  refreshLabel,
+  updatedAnnouncement = (time) => `Updated. Last update: ${time}`,
+  updatedMarkMs = READ_STATUS_UPDATED_MS,
+  className
+}) {
+  const fetching = reads.some((read) => read.isFetching);
+  const landed = reads.every((read) => read.data !== void 0);
+  const lastRead = landed && reads.length > 0 ? Math.min(...reads.map((read) => read.dataUpdatedAt)) : void 0;
+  const previous = reads.some((read) => read.data !== void 0 && read.isError);
+  const [updated, setUpdated] = useState(false);
+  const [announcement, setAnnouncement] = useState("");
+  const requested = useRef(false);
+  const wasFetching = useRef(fetching);
+  useEffect(() => {
+    const finished = wasFetching.current && !fetching;
+    wasFetching.current = fetching;
+    if (!finished) return;
+    if (previous) {
+      if (requested.current) setAnnouncement(staleLabel);
+      requested.current = false;
+      return;
+    }
+    if (lastRead === void 0) return;
+    if (requested.current) setAnnouncement(updatedAnnouncement(formatTime(lastRead)));
+    requested.current = false;
+    setUpdated(true);
+  }, [fetching, previous, lastRead, staleLabel, updatedAnnouncement, formatTime]);
+  useEffect(() => {
+    if (!updated) return;
+    const timer = window.setTimeout(() => setUpdated(false), updatedMarkMs);
+    return () => window.clearTimeout(timer);
+  }, [updated, updatedMarkMs]);
+  const refresh = () => {
+    requested.current = true;
+    setAnnouncement("");
+    for (const read of reads) void read.refetch();
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "read-status", className: cn("flex flex-wrap items-center gap-x-3 gap-y-1", className), children: [
+    /* @__PURE__ */ jsxs("p", { className: "m-0 text-caption tabular-nums text-muted-foreground", children: [
+      previous && /* @__PURE__ */ jsx("span", { className: "mr-2 text-warning-fg", children: staleLabel }),
+      lastUpdateLabel,
+      " ",
+      lastRead === void 0 ? "\u2014" : formatTime(lastRead),
+      updated && /* @__PURE__ */ jsxs("span", { className: "ml-2 inline-flex items-center gap-1 text-success-fg", children: [
+        /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: "text-icon-xs" }),
+        updatedLabel
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(RefreshButton, { onRefresh: refresh, isRefreshing: fetching, label: refreshLabel }),
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: announcement })
+  ] });
+}
+
+export {
+  RefreshButton,
+  READ_STATUS_UPDATED_MS,
+  ReadStatus
+};

package/dist/web/chunk-L2UPQLY7.js

@@ -0,0 +1,43 @@
+"use client";
+import {
+  CopyButton
+} from "./chunk-QCQRA6L5.js";
+import {
+  HorizontalScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/code-block.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CodeBlock({ code, label = "code", language, className }) {
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      "data-slot": "code-block",
+      "aria-label": label,
+      className: cn("relative m-0 min-w-0 overflow-hidden rounded-xl bg-muted/60 shadow-inner ring-1 ring-inset ring-secondary/15", className),
+      children: [
+        language && /* @__PURE__ */ jsx("figcaption", { className: cn("px-4 pt-3 text-muted-foreground", eyebrow), children: language }),
+        /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsx(CopyButton, { value: code, label }) }),
+        /* @__PURE__ */ jsx(
+          HorizontalScrollArea,
+          {
+            className: "my-4 ml-4 mr-12",
+            viewportAs: "pre",
+            viewportClassName: "m-0 pb-3 font-mono text-caption text-foreground",
+            children: /* @__PURE__ */ jsx("code", { children: code })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  CodeBlock
+};

package/dist/web/chunk-LFAORJQK.js

@@ -0,0 +1,81 @@
+"use client";
+import {
+  PageHeader
+} from "./chunk-62HIDJCD.js";
+import {
+  FadeOverlay
+} from "./chunk-A3XHFJ6J.js";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/extension-page-frame.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ExtensionPageFrame({
+  children,
+  header,
+  title,
+  subtitle,
+  left,
+  right,
+  onBack,
+  backLabel,
+  titleAlign,
+  bottomNav,
+  bottomFade = Boolean(bottomNav),
+  scroll = true,
+  viewportAs = "main",
+  className,
+  contentClassName,
+  viewportClassName,
+  fadeClassName
+}) {
+  const renderedHeader = header ?? (title || subtitle || left || right || onBack ? /* @__PURE__ */ jsx(
+    PageHeader,
+    {
+      title,
+      subtitle,
+      left,
+      right,
+      onBack,
+      backLabel,
+      titleAlign
+    }
+  ) : null);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex h-screen flex-col overflow-hidden bg-background bg-page-radial font-display text-foreground",
+        className
+      ),
+      children: [
+        renderedHeader,
+        scroll ? /* @__PURE__ */ jsx(
+          ScrollArea,
+          {
+            className: cn("flex-1", contentClassName),
+            viewportAs,
+            viewportClassName,
+            children
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1", contentClassName), children }),
+        bottomNav,
+        bottomFade && /* @__PURE__ */ jsx(
+          FadeOverlay,
+          {
+            heightClassName: "h-20",
+            className: cn("fixed inset-x-0 bottom-0 z-20", fadeClassName)
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  ExtensionPageFrame
+};

package/dist/web/chunk-LOGZGZWN.js

@@ -0,0 +1 @@
+"use client";

package/dist/web/chunk-LPDB7EHH.js

@@ -0,0 +1,65 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/status-badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function StatusBadge({ status, className }) {
+  const config = {
+    success: {
+      color: "text-brand",
+      bg: "bg-primary/10",
+      icon: "check_circle",
+      label: "Success"
+    },
+    completed: {
+      color: "text-brand",
+      bg: "bg-primary/10",
+      icon: "check_circle",
+      label: "Completed"
+    },
+    pending: {
+      color: "text-warning-fg",
+      bg: "bg-warning/10",
+      icon: "schedule",
+      label: "Pending"
+    },
+    failed: {
+      color: "text-danger-fg",
+      bg: "bg-danger/10",
+      icon: "error",
+      label: "Failed"
+    },
+    error: {
+      color: "text-danger-fg",
+      bg: "bg-danger/10",
+      icon: "error",
+      label: "Error"
+    }
+  };
+  const { color, bg, icon, label } = config[status];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "status-badge",
+      className: cn(
+        "inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full font-medium text-caption",
+        bg,
+        color,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-icon-sm translate-y-px" }),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+
+export {
+  StatusBadge
+};