kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-V3UI2XX7.js

@@ -0,0 +1,444 @@
+"use client";
+import {
+  ActionTile
+} from "./chunk-YXVOFEDT.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  LiquidNetworkIcon,
+  OnchainNetworkIcon
+} from "./chunk-WBW5E6LC.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  ArrowOutward,
+  CallReceived,
+  ExpandLess,
+  ExpandMore,
+  Payments,
+  Refresh,
+  SwapHoriz
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/balance-breakdown.tsx
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function getRgbBtcBreakdownLabels(accounts) {
+  const rlnConnected = Boolean(accounts.RGB?.connected);
+  const rgbL1Connected = Boolean(accounts.RGB_L1?.connected);
+  const rlnEnabled = rlnConnected || !rgbL1Connected && Boolean(accounts.RGB?.configured);
+  const rgbL1Enabled = rgbL1Connected || !rlnConnected && Boolean(accounts.RGB_L1?.configured);
+  return {
+    onchainLabel: rlnEnabled ? "BTC wallet on RLN" : rgbL1Enabled ? "BTC on RGB L1" : "BTC on-chain",
+    onchainSublabel: rlnEnabled ? "RLN on-chain wallet" : rgbL1Enabled ? "RGB L1 wallet balance" : "Standard Bitcoin balance",
+    showLightning: rlnEnabled,
+    lightningLabel: "BTC channels on RLN",
+    lightningSublabel: "RLN channel balance"
+  };
+}
+function OnchainIcon({ className = "" }) {
+  return /* @__PURE__ */ jsx(OnchainNetworkIcon, { className });
+}
+function ImageIcon({
+  src,
+  alt,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("img", { src, alt, className });
+}
+function numberOnly(formatted) {
+  return formatted.replace(/[\u00a0 ](sats|BTC|mBTC)$/, "").replace(/^\u20bf/, "");
+}
+function BalanceBreakdown({
+  btcOnchain,
+  btcLightning,
+  externalLightningAvailable,
+  btcSpark,
+  btcArkade,
+  btcLiquid = 0,
+  totalBTC,
+  rgbAssets,
+  accounts,
+  nodeInfo,
+  balanceVisible,
+  format,
+  formatFiatValue,
+  unit,
+  label,
+  cycle,
+  isLoading = false,
+  isPartial = false,
+  btcOnchainPending = false,
+  btcLightningPending = false,
+  btcSparkPending = false,
+  btcArkadePending = false,
+  btcLiquidPending = false,
+  onRefresh,
+  isRefreshing = false,
+  onNavigate,
+  actionLabels,
+  compact = false,
+  tokenValueSats
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const fiatTotal = formatFiatValue(totalBTC);
+  const rgbBtcLabels = getRgbBtcBreakdownLabels(accounts);
+  const showLightningRow = externalLightningAvailable ?? rgbBtcLabels.showLightning;
+  const lightningLabel = externalLightningAvailable ? "BTC on Lightning" : rgbBtcLabels.lightningLabel;
+  const lightningSublabel = externalLightningAvailable ? "External channel balance" : rgbBtcLabels.lightningSublabel;
+  return /* @__PURE__ */ jsx("div", { className: `flex flex-col ${compact ? "gap-2" : "gap-3"}`, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "balance-breakdown-card",
+      className: `relative overflow-hidden rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero shadow-card ${compact ? "p-3.5" : "p-5"}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute right-0 top-0 h-48 w-48 -translate-y-1/4 translate-x-1/4 rounded-full bg-secondary/25 blur-[60px] [.light_&]:bg-secondary/8" }),
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 h-40 w-40 -translate-x-1/3 translate-y-1/3 rounded-full bg-primary/10 blur-[60px]" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: cycle,
+              className: "group flex min-w-0 flex-1 flex-col items-start text-left",
+              title: `Tap to switch unit (current: ${label})`,
+              children: [
+                /* @__PURE__ */ jsx("p", { className: cn("mb-1 text-muted-foreground", eyebrow), children: "Total Balance" }),
+                isLoading ? /* @__PURE__ */ jsxs("div", { className: "mt-1 space-y-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "h-9 w-36 animate-pulse rounded-lg bg-foreground/10" }),
+                  /* @__PURE__ */ jsx("div", { className: "h-3 w-20 animate-pulse rounded bg-foreground/5" })
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 max-w-full flex-wrap items-center gap-x-1.5 gap-y-1", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-display font-black leading-[1.1] tracking-tighter tabular-nums text-gradient-brand drop-shadow-sm transition-all duration-300 group-active:scale-95", children: balanceVisible ? numberOnly(format(totalBTC)) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
+                    unit !== "fiat" && /* @__PURE__ */ jsx("span", { className: cn("inline-block rounded-md bg-secondary/15 px-2 py-0.5 text-muted-foreground", eyebrow), children: label }),
+                    isPartial && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "inline-flex size-4 items-center justify-center rounded-full bg-secondary/15",
+                        title: "Loading remaining balances",
+                        children: /* @__PURE__ */ jsx("span", { className: "size-2 animate-spin rounded-full border border-primary/30 border-t-primary" })
+                      }
+                    )
+                  ] }),
+                  balanceVisible && unit !== "fiat" && fiatTotal && /* @__PURE__ */ jsx("span", { className: "mt-1 text-caption font-medium tabular-nums text-foreground/55", children: fiatTotal }),
+                  balanceVisible && unit === "fiat" && totalBTC > 0 && /* @__PURE__ */ jsxs("span", { className: "mt-1 text-caption font-medium tabular-nums text-foreground/55", children: [
+                    (totalBTC / 1e8).toFixed(8).replace(/\.?0+$/, ""),
+                    "\xA0BTC"
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-1 flex shrink-0 items-center gap-1.5", children: [
+            onRefresh && /* @__PURE__ */ jsx(
+              GlyphButton,
+              {
+                label: "Refresh balances",
+                variant: "surface",
+                size: "sm",
+                onClick: onRefresh,
+                disabled: isRefreshing,
+                icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: Refresh, "aria-hidden": "true", className: isRefreshing ? "animate-spin motion-reduce:animate-none" : void 0 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              GlyphButton,
+              {
+                label: expanded ? "Collapse balance breakdown" : "Expand balance breakdown",
+                variant: "surface",
+                size: "sm",
+                "aria-expanded": expanded,
+                onClick: () => setExpanded(!expanded),
+                icon: expanded ? ExpandLess : ExpandMore
+              }
+            )
+          ] })
+        ] }),
+        expanded && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "aria-label": "Bitcoin balance breakdown",
+            className: `space-y-1 duration-300 animate-in fade-in slide-in-from-top-2 ${compact ? "mt-3 pt-3" : "mt-4 pt-4"}`,
+            children: [
+              /* @__PURE__ */ jsx("p", { className: cn("mb-3 text-muted-foreground", eyebrow), children: "Bitcoin" }),
+              /* @__PURE__ */ jsx(
+                NetworkRow,
+                {
+                  icon: /* @__PURE__ */ jsx(OnchainIcon, { className: "text-icon-sm" }),
+                  iconColor: "text-network-spark-fg",
+                  dotColor: "bg-network-spark",
+                  label: rgbBtcLabels.onchainLabel,
+                  sublabel: rgbBtcLabels.onchainSublabel,
+                  amount: btcOnchain,
+                  isPending: btcOnchainPending,
+                  visible: balanceVisible,
+                  format,
+                  formatFiat: formatFiatValue
+                }
+              ),
+              showLightningRow && /* @__PURE__ */ jsx(
+                NetworkRow,
+                {
+                  icon: /* @__PURE__ */ jsx(
+                    ImageIcon,
+                    {
+                      src: "/icons/lightning/lightning.svg",
+                      alt: "Lightning",
+                      className: "size-3.5"
+                    }
+                  ),
+                  iconColor: "text-network-lightning-fg",
+                  dotColor: "bg-network-lightning",
+                  label: lightningLabel,
+                  sublabel: lightningSublabel,
+                  amount: btcLightning,
+                  isPending: btcLightningPending,
+                  visible: balanceVisible,
+                  format,
+                  formatFiat: formatFiatValue,
+                  testId: "balance-breakdown-lightning-source"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NetworkRow,
+                {
+                  icon: /* @__PURE__ */ jsx(
+                    ImageIcon,
+                    {
+                      src: "/icons/spark/Asterisk/Spark Asterisk White.svg",
+                      alt: "Spark",
+                      className: "kui-mono-icon size-3.5 opacity-90"
+                    }
+                  ),
+                  iconColor: "",
+                  dotColor: "bg-info",
+                  label: "BTC on Spark",
+                  sublabel: "Spark balance",
+                  amount: btcSpark,
+                  isPending: btcSparkPending,
+                  visible: balanceVisible,
+                  format,
+                  formatFiat: formatFiatValue
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NetworkRow,
+                {
+                  icon: /* @__PURE__ */ jsx(
+                    ImageIcon,
+                    {
+                      src: "/icons/arkade/arkade-icon.svg",
+                      alt: "Arkade",
+                      className: "size-3.5 rounded-sm"
+                    }
+                  ),
+                  iconColor: "",
+                  dotColor: "bg-network-arkade",
+                  label: "BTC on Arkade",
+                  sublabel: "Arkade balance",
+                  amount: btcArkade,
+                  isPending: btcArkadePending,
+                  visible: balanceVisible,
+                  format,
+                  formatFiat: formatFiatValue
+                }
+              ),
+              (btcLiquid > 0 || btcLiquidPending) && /* @__PURE__ */ jsx(
+                NetworkRow,
+                {
+                  icon: /* @__PURE__ */ jsx(LiquidNetworkIcon, { className: "size-3.5" }),
+                  iconColor: "",
+                  dotColor: "bg-network-liquid",
+                  label: "BTC on Liquid",
+                  sublabel: "Liquid L-BTC balance",
+                  amount: btcLiquid,
+                  isPending: btcLiquidPending,
+                  visible: balanceVisible,
+                  format,
+                  formatFiat: formatFiatValue
+                }
+              ),
+              rgbAssets.length > 0 && /* @__PURE__ */ jsx(RgbAssetsBreakdown, { assets: rgbAssets, balanceVisible }),
+              tokenValueSats !== void 0 && tokenValueSats > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-1", children: [
+                /* @__PURE__ */ jsx("p", { className: cn("mb-3 text-muted-foreground", eyebrow), children: "Token Holdings" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-xl kui-well px-3 py-2 shadow-raised", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsx("div", { className: "h-7 w-0.5 rounded-full bg-success opacity-80" }),
+                    /* @__PURE__ */ jsx("div", { className: "flex size-7 items-center justify-center rounded-lg bg-secondary/15 text-icon-sm text-secondary-content", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Payments }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-caption font-semibold leading-tight text-foreground/80", children: "Stablecoins & Tokens" }),
+                      /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xxs font-medium leading-tight text-foreground/55", children: "Converted value in BTC" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
+                    /* @__PURE__ */ jsx("span", { className: "tabular-nums text-caption font-bold text-foreground", children: balanceVisible ? format(tokenValueSats) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
+                    balanceVisible && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xxs tabular-nums text-foreground/55", children: formatFiatValue(tokenValueSats) })
+                  ] })
+                ] })
+              ] }),
+              accounts.RGB?.connected && nodeInfo?.pubkey && /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-1", children: [
+                /* @__PURE__ */ jsx("p", { className: cn("mb-3 text-muted-foreground", eyebrow), children: "RLN Details" }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    StatusChip,
+                    {
+                      label: "Node",
+                      value: `${nodeInfo.pubkey.slice(0, 8)}...${nodeInfo.pubkey.slice(-6)}`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(StatusChip, { label: "Peers", value: String(nodeInfo.num_peers ?? 0) }),
+                  /* @__PURE__ */ jsx(StatusChip, { label: "Channels", value: String(nodeInfo.num_channels ?? 0) })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `relative z-10 flex gap-2.5 ${compact ? "mt-2 pt-2" : "mt-3 pt-3"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                ActionTile,
+                {
+                  icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: CallReceived, className: "text-icon-sm" }),
+                  label: actionLabels?.receive ?? "Deposit",
+                  onClick: () => onNavigate?.("deposit"),
+                  "data-testid": "dashboard-action-deposit"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ActionTile,
+                {
+                  icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: SwapHoriz, className: "text-icon-sm" }),
+                  label: "Swap",
+                  onClick: () => onNavigate?.("swap"),
+                  "data-testid": "dashboard-action-swap"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ActionTile,
+                {
+                  icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: ArrowOutward, className: "text-icon-sm" }),
+                  label: actionLabels?.send ?? "Withdraw",
+                  onClick: () => onNavigate?.("withdraw"),
+                  "data-testid": "dashboard-action-withdraw"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+function RgbAssetsBreakdown({
+  assets,
+  balanceVisible
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-1", children: [
+    /* @__PURE__ */ jsx("p", { className: cn("mb-3 text-muted-foreground", eyebrow), children: "RGB Assets" }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: assets.map((asset) => {
+      const bal = asset.balance ?? {};
+      const onChain = Number(bal.future || 0);
+      const offChain = Number(bal.offchain_outbound || 0);
+      const total = onChain + offChain;
+      const precision = asset.precision || 0;
+      const formatRgb = (value) => (value / Math.pow(10, precision)).toFixed(precision);
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between py-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex size-5 items-center justify-center overflow-hidden rounded bg-network-rgb/10", children: /* @__PURE__ */ jsx("img", { src: "/icons/rgb/rgb-logo.svg", alt: "RGB", className: "size-3.5 object-contain" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-caption font-semibold text-foreground/90", children: asset.ticker }),
+            /* @__PURE__ */ jsx("span", { className: "max-w-[90px] truncate text-xxs text-foreground/55", children: asset.name })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end text-right", children: [
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums text-body font-bold text-foreground", children: balanceVisible ? formatRgb(total) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
+          balanceVisible && (onChain > 0 || offChain > 0) && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-1 text-xxs text-foreground/55", children: [
+            onChain > 0 && /* @__PURE__ */ jsxs("span", { className: "text-network-spark-fg/80", children: [
+              formatRgb(onChain),
+              " on-chain"
+            ] }),
+            onChain > 0 && offChain > 0 && /* @__PURE__ */ jsx("span", { className: "text-foreground/20", children: "|" }),
+            offChain > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-network-lightning-fg/80", children: [
+              formatRgb(offChain),
+              /* @__PURE__ */ jsx(
+                ImageIcon,
+                {
+                  src: "/icons/lightning/lightning.svg",
+                  alt: "",
+                  className: "size-2.5"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] }, asset.asset_id);
+    }) })
+  ] });
+}
+function StatusChip({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl kui-well px-3 py-2", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", eyebrow), children: label }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 truncate text-caption font-semibold text-foreground/80", children: value })
+  ] });
+}
+function NetworkRow({
+  icon,
+  iconColor,
+  dotColor,
+  label,
+  sublabel,
+  amount,
+  isPending = false,
+  visible,
+  format,
+  formatFiat,
+  testId
+}) {
+  const fiat = formatFiat(amount);
+  const isEmpty = amount === 0 && !isPending;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": testId,
+      className: `flex items-center justify-between rounded-xl px-3 py-2 transition-colors ${isEmpty ? "opacity-35" : "bg-muted/40 shadow-raised hover-gradient-violet"}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: `h-7 w-0.5 rounded-full ${dotColor} opacity-80` }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `flex size-7 items-center justify-center rounded-lg bg-secondary/15 text-icon-sm ${iconColor}`,
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-caption font-semibold leading-tight text-foreground/80", children: label }),
+            /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xxs font-medium leading-tight text-foreground/55", children: sublabel })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col items-end", children: isPending ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-3.5 w-12 animate-pulse rounded bg-foreground/10" }),
+          /* @__PURE__ */ jsx("span", { className: "inline-flex size-3 items-center justify-center rounded-full bg-secondary/15", children: /* @__PURE__ */ jsx("span", { className: "size-1.5 animate-spin rounded-full border border-primary/30 border-t-primary" }) })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums text-caption font-bold text-foreground", children: visible ? format(amount) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
+          fiat && visible && !isEmpty && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xxs tabular-nums text-foreground/55", children: fiat })
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  getRgbBtcBreakdownLabels,
+  BalanceBreakdown
+};