kaleido-ui 0.1.31 → 0.1.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/web/index.cjs +219 -198
  2. package/dist/web/index.d.cts +14 -2
  3. package/dist/web/index.d.ts +14 -2
  4. package/dist/web/index.js +219 -198
  5. package/package.json +1 -1
package/dist/web/index.cjs CHANGED
@@ -2321,7 +2321,9 @@ function FilterDropdown({
2321
2321
  options,
2322
2322
  onChange,
2323
2323
  clusterMax = 3,
2324
- className
2324
+ className,
2325
+ compact = false,
2326
+ hideLabel = false
2325
2327
  }) {
2326
2328
  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
2327
2329
  const selected = options.find((option) => option.id === value) ?? options[0];
@@ -2335,16 +2337,19 @@ function FilterDropdown({
2335
2337
  {
2336
2338
  type: "button",
2337
2339
  onClick: () => setIsOpen(!isOpen),
2340
+ "aria-label": hideLabel ? label : void 0,
2338
2341
  className: cn(
2339
- "flex w-full items-center justify-between gap-1.5 rounded-2xl px-2.5 py-2 leading-none outline-none transition-all",
2342
+ "flex w-full items-center justify-between rounded-2xl leading-none outline-none transition-all",
2343
+ compact ? "gap-1 px-2 py-1.5" : "gap-1.5 px-2.5 py-2",
2340
2344
  isFiltered ? "bg-white/[0.13] shadow-inner" : "bg-white/[0.09] backdrop-blur-md hover:bg-white/[0.13]"
2341
2345
  ),
2342
2346
  children: [
2343
- /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
2347
+ !hideLabel && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
2344
2348
  "span",
2345
2349
  {
2346
2350
  className: cn(
2347
- "shrink-0 text-mini font-bold uppercase tracking-wider",
2351
+ "shrink-0 font-bold uppercase tracking-wider",
2352
+ compact ? "text-xxs" : "text-mini",
2348
2353
  isFiltered ? "text-muted-foreground" : "text-white/45"
2349
2354
  ),
2350
2355
  children: label
@@ -2490,10 +2495,7 @@ function getAccountNetworkUi(network) {
2490
2495
  }
2491
2496
  function AccountHeaderIcons({ accountId }) {
2492
2497
  if (accountId === "RGB") {
2493
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex -space-x-1", children: [
2494
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "flex size-10 items-center justify-center rounded-full bg-network-bitcoin/15 shadow-inner", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: "/icons/lightning/lightning.svg", alt: "Lightning", className: "size-5 object-contain" }) }),
2495
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "flex size-10 items-center justify-center rounded-full bg-primary/15 shadow-inner", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: "/icons/rgb/rgb-logo.svg", alt: "RGB", className: "size-5 object-contain" }) })
2496
- ] });
2498
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "flex size-10 items-center justify-center rounded-full bg-primary/15 shadow-inner", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: "/icons/rgb/rgb-logo.svg", alt: "RGB", className: "size-5 object-contain" }) });
2497
2499
  }
2498
2500
  if (accountId === "SPARK") {
2499
2501
  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "flex size-10 items-center justify-center rounded-full bg-info/10 shadow-inner", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", alt: "Spark", className: "size-5 object-contain" }) });
@@ -2953,209 +2955,228 @@ function BalanceBreakdown({
2953
2955
  btcArkadePending = false,
2954
2956
  onRefresh,
2955
2957
  isRefreshing = false,
2956
- onNavigate
2958
+ onNavigate,
2959
+ compact = false
2957
2960
  }) {
2958
2961
  const [expanded, setExpanded] = (0, import_react10.useState)(false);
2959
2962
  const fiatTotal = formatFiatValue(totalBTC);
2960
- return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative overflow-hidden rounded-3xl bg-card p-5", children: [
2961
- /* @__PURE__ */ (0, import_jsx_runtime34.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-white/[0.04] blur-[60px]" }),
2962
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative z-10 flex items-start justify-between gap-3", children: [
2963
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
2964
- "button",
2965
- {
2966
- onClick: cycle,
2967
- className: "group flex min-w-0 flex-1 flex-col items-start text-left",
2968
- title: `Tap to switch unit (current: ${label})`,
2969
- children: [
2970
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mb-1 text-xxs font-bold uppercase tracking-widest text-white/40", children: "Total Balance" }),
2971
- isLoading ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-1 space-y-2", children: [
2972
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-9 w-36 animate-pulse rounded-lg bg-white/10" }),
2973
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-3 w-20 animate-pulse rounded bg-white/5" })
2974
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
2975
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 max-w-full flex-wrap items-baseline gap-x-2.5 gap-y-1", children: [
2976
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-display font-black leading-[1.1] tracking-tighter text-white drop-shadow-sm transition-all duration-300 group-active:scale-95 group-active:text-primary", children: balanceVisible ? numberOnly(format(totalBTC)) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
2977
- unit !== "fiat" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "inline-block rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-tiny font-bold uppercase tracking-widest text-white/45", children: label }),
2978
- isPartial && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
2963
+ return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `flex flex-col ${compact ? "gap-2" : "gap-3"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
2964
+ "div",
2965
+ {
2966
+ className: `relative overflow-hidden rounded-3xl bg-card ${compact ? "p-3.5" : "p-5"}`,
2967
+ children: [
2968
+ /* @__PURE__ */ (0, import_jsx_runtime34.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-white/[0.04] blur-[60px]" }),
2969
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative z-10 flex items-start justify-between gap-3", children: [
2970
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
2971
+ "button",
2972
+ {
2973
+ onClick: cycle,
2974
+ className: "group flex min-w-0 flex-1 flex-col items-start text-left",
2975
+ title: `Tap to switch unit (current: ${label})`,
2976
+ children: [
2977
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mb-1 text-xxs font-bold uppercase tracking-widest text-white/40", children: "Total Balance" }),
2978
+ isLoading ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-1 space-y-2", children: [
2979
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-9 w-36 animate-pulse rounded-lg bg-white/10" }),
2980
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-3 w-20 animate-pulse rounded bg-white/5" })
2981
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
2982
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 max-w-full flex-wrap items-baseline gap-x-2.5 gap-y-1", children: [
2983
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-display font-black leading-[1.1] tracking-tighter text-white drop-shadow-sm transition-all duration-300 group-active:scale-95 group-active:text-primary", children: balanceVisible ? numberOnly(format(totalBTC)) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
2984
+ unit !== "fiat" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "inline-block rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-tiny font-bold uppercase tracking-widest text-white/45", children: label }),
2985
+ isPartial && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
2986
+ "span",
2987
+ {
2988
+ className: "inline-flex size-4 items-center justify-center rounded-full border bg-white/[0.06]",
2989
+ title: "Loading remaining balances",
2990
+ children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "size-2 animate-spin rounded-full border border-primary/30 border-t-primary" })
2991
+ }
2992
+ )
2993
+ ] }),
2994
+ balanceVisible && unit !== "fiat" && fiatTotal && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mt-1 font-mono text-xs font-medium text-white/45", children: fiatTotal }),
2995
+ balanceVisible && unit === "fiat" && totalBTC > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "mt-1 font-mono text-xs font-medium text-white/45", children: [
2996
+ (totalBTC / 1e8).toFixed(8).replace(/\.?0+$/, ""),
2997
+ "\xA0BTC"
2998
+ ] })
2999
+ ] })
3000
+ ]
3001
+ }
3002
+ ),
3003
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-1 flex shrink-0 items-center gap-1.5", children: [
3004
+ onRefresh && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3005
+ "button",
3006
+ {
3007
+ onClick: onRefresh,
3008
+ disabled: isRefreshing,
3009
+ className: "flex size-7 items-center justify-center rounded-full bg-white/[0.08] transition-all hover:bg-white/[0.12] disabled:opacity-40",
3010
+ title: "Refresh balances",
3011
+ children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
2979
3012
  "span",
2980
3013
  {
2981
- className: "inline-flex size-4 items-center justify-center rounded-full border bg-white/[0.06]",
2982
- title: "Loading remaining balances",
2983
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "size-2 animate-spin rounded-full border border-primary/30 border-t-primary" })
3014
+ className: `material-symbols-outlined text-icon-sm leading-none text-white/60${isRefreshing ? " animate-spin" : ""}`,
3015
+ children: "refresh"
2984
3016
  }
2985
3017
  )
2986
- ] }),
2987
- balanceVisible && unit !== "fiat" && fiatTotal && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mt-1 font-mono text-xs font-medium text-white/45", children: fiatTotal }),
2988
- balanceVisible && unit === "fiat" && totalBTC > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "mt-1 font-mono text-xs font-medium text-white/45", children: [
2989
- (totalBTC / 1e8).toFixed(8).replace(/\.?0+$/, ""),
2990
- "\xA0BTC"
2991
- ] })
2992
- ] })
2993
- ]
2994
- }
2995
- ),
2996
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-1 flex shrink-0 items-center gap-1.5", children: [
2997
- onRefresh && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
2998
- "button",
2999
- {
3000
- onClick: onRefresh,
3001
- disabled: isRefreshing,
3002
- className: "flex size-7 items-center justify-center rounded-full bg-white/[0.08] transition-all hover:bg-white/[0.12] disabled:opacity-40",
3003
- title: "Refresh balances",
3004
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3005
- "span",
3018
+ }
3019
+ ),
3020
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3021
+ "button",
3006
3022
  {
3007
- className: `material-symbols-outlined text-icon-sm leading-none text-white/60${isRefreshing ? " animate-spin" : ""}`,
3008
- children: "refresh"
3023
+ onClick: () => setExpanded(!expanded),
3024
+ className: "flex size-7 items-center justify-center rounded-full bg-white/[0.08] transition-all hover:bg-white/[0.12]",
3025
+ children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3026
+ Icon2,
3027
+ {
3028
+ name: expanded ? "expand_less" : "expand_more",
3029
+ size: "sm",
3030
+ className: "text-white/60"
3031
+ }
3032
+ )
3009
3033
  }
3010
3034
  )
3035
+ ] })
3036
+ ] }),
3037
+ expanded && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
3038
+ "div",
3039
+ {
3040
+ className: `space-y-1 border-t border-white/[0.08] duration-300 animate-in fade-in slide-in-from-top-2 ${compact ? "mt-3 pt-3" : "mt-4 pt-4"}`,
3041
+ children: [
3042
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "Bitcoin" }),
3043
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3044
+ NetworkRow,
3045
+ {
3046
+ icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(OnchainIcon, { className: "text-icon-sm" }),
3047
+ iconColor: "text-network-spark",
3048
+ dotColor: "bg-network-spark",
3049
+ label: "BTC on-chain",
3050
+ sublabel: "Standard Bitcoin balance",
3051
+ amount: btcOnchain,
3052
+ isPending: btcOnchainPending,
3053
+ visible: balanceVisible,
3054
+ format,
3055
+ formatFiat: formatFiatValue
3056
+ }
3057
+ ),
3058
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3059
+ NetworkRow,
3060
+ {
3061
+ icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3062
+ ImageIcon,
3063
+ {
3064
+ src: "/icons/lightning/lightning.svg",
3065
+ alt: "Lightning",
3066
+ className: "size-3.5"
3067
+ }
3068
+ ),
3069
+ iconColor: "text-network-lightning",
3070
+ dotColor: "bg-network-lightning",
3071
+ label: "BTC on RLN",
3072
+ sublabel: "RLN balance",
3073
+ amount: btcLightning,
3074
+ isPending: btcLightningPending,
3075
+ visible: balanceVisible,
3076
+ format,
3077
+ formatFiat: formatFiatValue
3078
+ }
3079
+ ),
3080
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3081
+ NetworkRow,
3082
+ {
3083
+ icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3084
+ ImageIcon,
3085
+ {
3086
+ src: "/icons/spark/Asterisk/Spark Asterisk White.svg",
3087
+ alt: "Spark",
3088
+ className: "size-3.5 opacity-90"
3089
+ }
3090
+ ),
3091
+ iconColor: "",
3092
+ dotColor: "bg-info",
3093
+ label: "BTC on Spark",
3094
+ sublabel: "Spark balance",
3095
+ amount: btcSpark,
3096
+ isPending: btcSparkPending,
3097
+ visible: balanceVisible,
3098
+ format,
3099
+ formatFiat: formatFiatValue
3100
+ }
3101
+ ),
3102
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3103
+ NetworkRow,
3104
+ {
3105
+ icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3106
+ ImageIcon,
3107
+ {
3108
+ src: "/icons/arkade/arkade-icon.svg",
3109
+ alt: "Arkade",
3110
+ className: "size-3.5 rounded-sm"
3111
+ }
3112
+ ),
3113
+ iconColor: "",
3114
+ dotColor: "bg-network-arkade",
3115
+ label: "BTC on Arkade",
3116
+ sublabel: "Arkade balance",
3117
+ amount: btcArkade,
3118
+ isPending: btcArkadePending,
3119
+ visible: balanceVisible,
3120
+ format,
3121
+ formatFiat: formatFiatValue
3122
+ }
3123
+ ),
3124
+ rgbAssets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RgbAssetsBreakdown, { assets: rgbAssets, balanceVisible }),
3125
+ accounts.RGB?.connected && nodeInfo?.pubkey && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-3 border-t border-white/[0.08] pt-4", children: [
3126
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "RLN Details" }),
3127
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
3128
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3129
+ StatusChip,
3130
+ {
3131
+ label: "Node",
3132
+ value: `${nodeInfo.pubkey.slice(0, 8)}...${nodeInfo.pubkey.slice(-6)}`
3133
+ }
3134
+ ),
3135
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StatusChip, { label: "Peers", value: String(nodeInfo.num_peers ?? 0) }),
3136
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StatusChip, { label: "Channels", value: String(nodeInfo.num_channels ?? 0) })
3137
+ ] })
3138
+ ] })
3139
+ ]
3011
3140
  }
3012
3141
  ),
3013
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3014
- "button",
3142
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
3143
+ "div",
3015
3144
  {
3016
- onClick: () => setExpanded(!expanded),
3017
- className: "flex size-7 items-center justify-center rounded-full bg-white/[0.08] transition-all hover:bg-white/[0.12]",
3018
- children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3019
- Icon2,
3020
- {
3021
- name: expanded ? "expand_less" : "expand_more",
3022
- size: "sm",
3023
- className: "text-white/60"
3024
- }
3025
- )
3145
+ className: `relative z-10 flex gap-2.5 border-t border-white/[0.08] ${compact ? "mt-2 pt-2" : "mt-3 pt-3"}`,
3146
+ children: [
3147
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3148
+ ActionTile,
3149
+ {
3150
+ icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "material-symbols-outlined text-icon-lg leading-none", children: "call_received" }),
3151
+ label: "Deposit",
3152
+ onClick: () => onNavigate?.("deposit"),
3153
+ "data-testid": "dashboard-action-deposit"
3154
+ }
3155
+ ),
3156
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3157
+ ActionTile,
3158
+ {
3159
+ icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "material-symbols-outlined text-icon-lg leading-none", children: "swap_horiz" }),
3160
+ label: "Swap",
3161
+ onClick: () => onNavigate?.("swap"),
3162
+ "data-testid": "dashboard-action-swap"
3163
+ }
3164
+ ),
3165
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3166
+ ActionTile,
3167
+ {
3168
+ icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "material-symbols-outlined text-icon-lg leading-none", children: "arrow_outward" }),
3169
+ label: "Withdraw",
3170
+ onClick: () => onNavigate?.("withdraw"),
3171
+ "data-testid": "dashboard-action-withdraw"
3172
+ }
3173
+ )
3174
+ ]
3026
3175
  }
3027
3176
  )
3028
- ] })
3029
- ] }),
3030
- expanded && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-4 space-y-1 border-t border-white/[0.08] pt-4 duration-300 animate-in fade-in slide-in-from-top-2", children: [
3031
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "Bitcoin" }),
3032
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3033
- NetworkRow,
3034
- {
3035
- icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(OnchainIcon, { className: "text-icon-sm" }),
3036
- iconColor: "text-network-spark",
3037
- dotColor: "bg-network-spark",
3038
- label: "BTC on-chain",
3039
- sublabel: "Standard Bitcoin balance",
3040
- amount: btcOnchain,
3041
- isPending: btcOnchainPending,
3042
- visible: balanceVisible,
3043
- format,
3044
- formatFiat: formatFiatValue
3045
- }
3046
- ),
3047
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3048
- NetworkRow,
3049
- {
3050
- icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3051
- ImageIcon,
3052
- {
3053
- src: "/icons/lightning/lightning.svg",
3054
- alt: "Lightning",
3055
- className: "size-3.5"
3056
- }
3057
- ),
3058
- iconColor: "text-network-lightning",
3059
- dotColor: "bg-network-lightning",
3060
- label: "BTC on RLN",
3061
- sublabel: "RLN balance",
3062
- amount: btcLightning,
3063
- isPending: btcLightningPending,
3064
- visible: balanceVisible,
3065
- format,
3066
- formatFiat: formatFiatValue
3067
- }
3068
- ),
3069
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3070
- NetworkRow,
3071
- {
3072
- icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3073
- ImageIcon,
3074
- {
3075
- src: "/icons/spark/Asterisk/Spark Asterisk White.svg",
3076
- alt: "Spark",
3077
- className: "size-3.5 opacity-90"
3078
- }
3079
- ),
3080
- iconColor: "",
3081
- dotColor: "bg-info",
3082
- label: "BTC on Spark",
3083
- sublabel: "Spark balance",
3084
- amount: btcSpark,
3085
- isPending: btcSparkPending,
3086
- visible: balanceVisible,
3087
- format,
3088
- formatFiat: formatFiatValue
3089
- }
3090
- ),
3091
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3092
- NetworkRow,
3093
- {
3094
- icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3095
- ImageIcon,
3096
- {
3097
- src: "/icons/arkade/arkade-icon.svg",
3098
- alt: "Arkade",
3099
- className: "size-3.5 rounded-sm"
3100
- }
3101
- ),
3102
- iconColor: "",
3103
- dotColor: "bg-network-arkade",
3104
- label: "BTC on Arkade",
3105
- sublabel: "Arkade balance",
3106
- amount: btcArkade,
3107
- isPending: btcArkadePending,
3108
- visible: balanceVisible,
3109
- format,
3110
- formatFiat: formatFiatValue
3111
- }
3112
- ),
3113
- rgbAssets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RgbAssetsBreakdown, { assets: rgbAssets, balanceVisible }),
3114
- accounts.RGB?.connected && nodeInfo?.pubkey && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-3 border-t border-white/[0.08] pt-4", children: [
3115
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "RLN Details" }),
3116
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
3117
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3118
- StatusChip,
3119
- {
3120
- label: "Node",
3121
- value: `${nodeInfo.pubkey.slice(0, 8)}...${nodeInfo.pubkey.slice(-6)}`
3122
- }
3123
- ),
3124
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StatusChip, { label: "Peers", value: String(nodeInfo.num_peers ?? 0) }),
3125
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StatusChip, { label: "Channels", value: String(nodeInfo.num_channels ?? 0) })
3126
- ] })
3127
- ] })
3128
- ] }),
3129
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative z-10 mt-3 flex gap-2.5 border-t border-white/[0.08] pt-3", children: [
3130
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3131
- ActionTile,
3132
- {
3133
- icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "material-symbols-outlined text-icon-lg leading-none", children: "call_received" }),
3134
- label: "Deposit",
3135
- onClick: () => onNavigate?.("deposit"),
3136
- "data-testid": "dashboard-action-deposit"
3137
- }
3138
- ),
3139
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3140
- ActionTile,
3141
- {
3142
- icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "material-symbols-outlined text-icon-lg leading-none", children: "swap_horiz" }),
3143
- label: "Swap",
3144
- onClick: () => onNavigate?.("swap"),
3145
- "data-testid": "dashboard-action-swap"
3146
- }
3147
- ),
3148
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
3149
- ActionTile,
3150
- {
3151
- icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "material-symbols-outlined text-icon-lg leading-none", children: "arrow_outward" }),
3152
- label: "Withdraw",
3153
- onClick: () => onNavigate?.("withdraw"),
3154
- "data-testid": "dashboard-action-withdraw"
3155
- }
3156
- )
3157
- ] })
3158
- ] }) });
3177
+ ]
3178
+ }
3179
+ ) });
3159
3180
  }
3160
3181
  function RgbAssetsBreakdown({
3161
3182
  assets,
@@ -4933,7 +4954,7 @@ function RecoveryPhraseCard({
4933
4954
  var import_react13 = require("react");
4934
4955
  var import_jsx_runtime55 = require("react/jsx-runtime");
4935
4956
  var PROTOCOLS = [
4936
- { name: "Bitcoin L1", network: "L1" },
4957
+ { name: "Bitcoin", network: "Bitcoin" },
4937
4958
  { name: "Lightning", network: "LN" },
4938
4959
  { name: "RGB", network: "RGB20" },
4939
4960
  { name: "Spark", network: "Spark" },
@@ -4947,7 +4968,7 @@ var BADGE_SIZE = 32;
4947
4968
  var BADGE_HALF = BADGE_SIZE / 2;
4948
4969
  var N = PROTOCOLS.length;
4949
4970
  var PROTOCOL_COLORS = {
4950
- L1: "#F7931A",
4971
+ Bitcoin: "#F7931A",
4951
4972
  LN: "#fbbf24",
4952
4973
  RGB20: "#EF4444",
4953
4974
  Spark: "#FFFFFF",
package/dist/web/index.d.cts CHANGED
@@ -374,8 +374,18 @@ interface FilterDropdownProps {
374
374
  onChange: (id: string) => void;
375
375
  clusterMax?: number;
376
376
  className?: string;
377
+ /**
378
+ * Tighten paddings and shrink the label so more cluster icons fit
379
+ * horizontally. Useful on narrow popups.
380
+ */
381
+ compact?: boolean;
382
+ /**
383
+ * Hide the label text entirely (kept available via `aria-label`). Combine
384
+ * with `compact` for the densest variant.
385
+ */
386
+ hideLabel?: boolean;
377
387
  }
378
- declare function FilterDropdown({ label, value, options, onChange, clusterMax, className, }: FilterDropdownProps): react_jsx_runtime.JSX.Element;
388
+ declare function FilterDropdown({ label, value, options, onChange, clusterMax, className, compact, hideLabel, }: FilterDropdownProps): react_jsx_runtime.JSX.Element;
379
389
 
380
390
  interface SettingsTileProps {
381
391
  icon: ReactNode;
@@ -575,8 +585,10 @@ interface BalanceBreakdownProps {
575
585
  onRefresh?: () => void;
576
586
  isRefreshing?: boolean;
577
587
  onNavigate?: (view: 'deposit' | 'swap' | 'withdraw') => void;
588
+ /** Reduce vertical padding/margins so the card occupies less of the viewport. */
589
+ compact?: boolean;
578
590
  }
579
- declare function BalanceBreakdown({ btcOnchain, btcLightning, btcSpark, btcArkade, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, onRefresh, isRefreshing, onNavigate, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
591
+ declare function BalanceBreakdown({ btcOnchain, btcLightning, btcSpark, btcArkade, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, onRefresh, isRefreshing, onNavigate, compact, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
580
592
 
581
593
  interface AssetSelectorOption {
582
594
  ticker: string;
package/dist/web/index.d.ts CHANGED
@@ -374,8 +374,18 @@ interface FilterDropdownProps {
374
374
  onChange: (id: string) => void;
375
375
  clusterMax?: number;
376
376
  className?: string;
377
+ /**
378
+ * Tighten paddings and shrink the label so more cluster icons fit
379
+ * horizontally. Useful on narrow popups.
380
+ */
381
+ compact?: boolean;
382
+ /**
383
+ * Hide the label text entirely (kept available via `aria-label`). Combine
384
+ * with `compact` for the densest variant.
385
+ */
386
+ hideLabel?: boolean;
377
387
  }
378
- declare function FilterDropdown({ label, value, options, onChange, clusterMax, className, }: FilterDropdownProps): react_jsx_runtime.JSX.Element;
388
+ declare function FilterDropdown({ label, value, options, onChange, clusterMax, className, compact, hideLabel, }: FilterDropdownProps): react_jsx_runtime.JSX.Element;
379
389
 
380
390
  interface SettingsTileProps {
381
391
  icon: ReactNode;
@@ -575,8 +585,10 @@ interface BalanceBreakdownProps {
575
585
  onRefresh?: () => void;
576
586
  isRefreshing?: boolean;
577
587
  onNavigate?: (view: 'deposit' | 'swap' | 'withdraw') => void;
588
+ /** Reduce vertical padding/margins so the card occupies less of the viewport. */
589
+ compact?: boolean;
578
590
  }
579
- declare function BalanceBreakdown({ btcOnchain, btcLightning, btcSpark, btcArkade, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, onRefresh, isRefreshing, onNavigate, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
591
+ declare function BalanceBreakdown({ btcOnchain, btcLightning, btcSpark, btcArkade, totalBTC, rgbAssets, accounts, nodeInfo, balanceVisible, format, formatFiatValue, unit, label, cycle, isLoading, isPartial, btcOnchainPending, btcLightningPending, btcSparkPending, btcArkadePending, onRefresh, isRefreshing, onNavigate, compact, }: BalanceBreakdownProps): react_jsx_runtime.JSX.Element;
580
592
 
581
593
  interface AssetSelectorOption {
582
594
  ticker: string;
package/dist/web/index.js CHANGED
@@ -2163,7 +2163,9 @@ function FilterDropdown({
2163
2163
  options,
2164
2164
  onChange,
2165
2165
  clusterMax = 3,
2166
- className
2166
+ className,
2167
+ compact = false,
2168
+ hideLabel = false
2167
2169
  }) {
2168
2170
  const [isOpen, setIsOpen] = useState8(false);
2169
2171
  const selected = options.find((option) => option.id === value) ?? options[0];
@@ -2177,16 +2179,19 @@ function FilterDropdown({
2177
2179
  {
2178
2180
  type: "button",
2179
2181
  onClick: () => setIsOpen(!isOpen),
2182
+ "aria-label": hideLabel ? label : void 0,
2180
2183
  className: cn(
2181
- "flex w-full items-center justify-between gap-1.5 rounded-2xl px-2.5 py-2 leading-none outline-none transition-all",
2184
+ "flex w-full items-center justify-between rounded-2xl leading-none outline-none transition-all",
2185
+ compact ? "gap-1 px-2 py-1.5" : "gap-1.5 px-2.5 py-2",
2182
2186
  isFiltered ? "bg-white/[0.13] shadow-inner" : "bg-white/[0.09] backdrop-blur-md hover:bg-white/[0.13]"
2183
2187
  ),
2184
2188
  children: [
2185
- /* @__PURE__ */ jsx29(
2189
+ !hideLabel && /* @__PURE__ */ jsx29(
2186
2190
  "span",
2187
2191
  {
2188
2192
  className: cn(
2189
- "shrink-0 text-mini font-bold uppercase tracking-wider",
2193
+ "shrink-0 font-bold uppercase tracking-wider",
2194
+ compact ? "text-xxs" : "text-mini",
2190
2195
  isFiltered ? "text-muted-foreground" : "text-white/45"
2191
2196
  ),
2192
2197
  children: label
@@ -2332,10 +2337,7 @@ function getAccountNetworkUi(network) {
2332
2337
  }
2333
2338
  function AccountHeaderIcons({ accountId }) {
2334
2339
  if (accountId === "RGB") {
2335
- return /* @__PURE__ */ jsxs18("div", { className: "flex -space-x-1", children: [
2336
- /* @__PURE__ */ jsx31("span", { className: "flex size-10 items-center justify-center rounded-full bg-network-bitcoin/15 shadow-inner", children: /* @__PURE__ */ jsx31("img", { src: "/icons/lightning/lightning.svg", alt: "Lightning", className: "size-5 object-contain" }) }),
2337
- /* @__PURE__ */ jsx31("span", { className: "flex size-10 items-center justify-center rounded-full bg-primary/15 shadow-inner", children: /* @__PURE__ */ jsx31("img", { src: "/icons/rgb/rgb-logo.svg", alt: "RGB", className: "size-5 object-contain" }) })
2338
- ] });
2340
+ return /* @__PURE__ */ jsx31("span", { className: "flex size-10 items-center justify-center rounded-full bg-primary/15 shadow-inner", children: /* @__PURE__ */ jsx31("img", { src: "/icons/rgb/rgb-logo.svg", alt: "RGB", className: "size-5 object-contain" }) });
2339
2341
  }
2340
2342
  if (accountId === "SPARK") {
2341
2343
  return /* @__PURE__ */ jsx31("span", { className: "flex size-10 items-center justify-center rounded-full bg-info/10 shadow-inner", children: /* @__PURE__ */ jsx31("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", alt: "Spark", className: "size-5 object-contain" }) });
@@ -2795,209 +2797,228 @@ function BalanceBreakdown({
2795
2797
  btcArkadePending = false,
2796
2798
  onRefresh,
2797
2799
  isRefreshing = false,
2798
- onNavigate
2800
+ onNavigate,
2801
+ compact = false
2799
2802
  }) {
2800
2803
  const [expanded, setExpanded] = useState10(false);
2801
2804
  const fiatTotal = formatFiatValue(totalBTC);
2802
- return /* @__PURE__ */ jsx34("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsxs21("div", { className: "relative overflow-hidden rounded-3xl bg-card p-5", children: [
2803
- /* @__PURE__ */ jsx34("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-white/[0.04] blur-[60px]" }),
2804
- /* @__PURE__ */ jsxs21("div", { className: "relative z-10 flex items-start justify-between gap-3", children: [
2805
- /* @__PURE__ */ jsxs21(
2806
- "button",
2807
- {
2808
- onClick: cycle,
2809
- className: "group flex min-w-0 flex-1 flex-col items-start text-left",
2810
- title: `Tap to switch unit (current: ${label})`,
2811
- children: [
2812
- /* @__PURE__ */ jsx34("p", { className: "mb-1 text-xxs font-bold uppercase tracking-widest text-white/40", children: "Total Balance" }),
2813
- isLoading ? /* @__PURE__ */ jsxs21("div", { className: "mt-1 space-y-2", children: [
2814
- /* @__PURE__ */ jsx34("div", { className: "h-9 w-36 animate-pulse rounded-lg bg-white/10" }),
2815
- /* @__PURE__ */ jsx34("div", { className: "h-3 w-20 animate-pulse rounded bg-white/5" })
2816
- ] }) : /* @__PURE__ */ jsxs21(Fragment5, { children: [
2817
- /* @__PURE__ */ jsxs21("div", { className: "flex min-w-0 max-w-full flex-wrap items-baseline gap-x-2.5 gap-y-1", children: [
2818
- /* @__PURE__ */ jsx34("span", { className: "text-display font-black leading-[1.1] tracking-tighter text-white drop-shadow-sm transition-all duration-300 group-active:scale-95 group-active:text-primary", children: balanceVisible ? numberOnly(format(totalBTC)) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
2819
- unit !== "fiat" && /* @__PURE__ */ jsx34("span", { className: "inline-block rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-tiny font-bold uppercase tracking-widest text-white/45", children: label }),
2820
- isPartial && /* @__PURE__ */ jsx34(
2805
+ return /* @__PURE__ */ jsx34("div", { className: `flex flex-col ${compact ? "gap-2" : "gap-3"}`, children: /* @__PURE__ */ jsxs21(
2806
+ "div",
2807
+ {
2808
+ className: `relative overflow-hidden rounded-3xl bg-card ${compact ? "p-3.5" : "p-5"}`,
2809
+ children: [
2810
+ /* @__PURE__ */ jsx34("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-white/[0.04] blur-[60px]" }),
2811
+ /* @__PURE__ */ jsxs21("div", { className: "relative z-10 flex items-start justify-between gap-3", children: [
2812
+ /* @__PURE__ */ jsxs21(
2813
+ "button",
2814
+ {
2815
+ onClick: cycle,
2816
+ className: "group flex min-w-0 flex-1 flex-col items-start text-left",
2817
+ title: `Tap to switch unit (current: ${label})`,
2818
+ children: [
2819
+ /* @__PURE__ */ jsx34("p", { className: "mb-1 text-xxs font-bold uppercase tracking-widest text-white/40", children: "Total Balance" }),
2820
+ isLoading ? /* @__PURE__ */ jsxs21("div", { className: "mt-1 space-y-2", children: [
2821
+ /* @__PURE__ */ jsx34("div", { className: "h-9 w-36 animate-pulse rounded-lg bg-white/10" }),
2822
+ /* @__PURE__ */ jsx34("div", { className: "h-3 w-20 animate-pulse rounded bg-white/5" })
2823
+ ] }) : /* @__PURE__ */ jsxs21(Fragment5, { children: [
2824
+ /* @__PURE__ */ jsxs21("div", { className: "flex min-w-0 max-w-full flex-wrap items-baseline gap-x-2.5 gap-y-1", children: [
2825
+ /* @__PURE__ */ jsx34("span", { className: "text-display font-black leading-[1.1] tracking-tighter text-white drop-shadow-sm transition-all duration-300 group-active:scale-95 group-active:text-primary", children: balanceVisible ? numberOnly(format(totalBTC)) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
2826
+ unit !== "fiat" && /* @__PURE__ */ jsx34("span", { className: "inline-block rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-tiny font-bold uppercase tracking-widest text-white/45", children: label }),
2827
+ isPartial && /* @__PURE__ */ jsx34(
2828
+ "span",
2829
+ {
2830
+ className: "inline-flex size-4 items-center justify-center rounded-full border bg-white/[0.06]",
2831
+ title: "Loading remaining balances",
2832
+ children: /* @__PURE__ */ jsx34("span", { className: "size-2 animate-spin rounded-full border border-primary/30 border-t-primary" })
2833
+ }
2834
+ )
2835
+ ] }),
2836
+ balanceVisible && unit !== "fiat" && fiatTotal && /* @__PURE__ */ jsx34("span", { className: "mt-1 font-mono text-xs font-medium text-white/45", children: fiatTotal }),
2837
+ balanceVisible && unit === "fiat" && totalBTC > 0 && /* @__PURE__ */ jsxs21("span", { className: "mt-1 font-mono text-xs font-medium text-white/45", children: [
2838
+ (totalBTC / 1e8).toFixed(8).replace(/\.?0+$/, ""),
2839
+ "\xA0BTC"
2840
+ ] })
2841
+ ] })
2842
+ ]
2843
+ }
2844
+ ),
2845
+ /* @__PURE__ */ jsxs21("div", { className: "mt-1 flex shrink-0 items-center gap-1.5", children: [
2846
+ onRefresh && /* @__PURE__ */ jsx34(
2847
+ "button",
2848
+ {
2849
+ onClick: onRefresh,
2850
+ disabled: isRefreshing,
2851
+ className: "flex size-7 items-center justify-center rounded-full bg-white/[0.08] transition-all hover:bg-white/[0.12] disabled:opacity-40",
2852
+ title: "Refresh balances",
2853
+ children: /* @__PURE__ */ jsx34(
2821
2854
  "span",
2822
2855
  {
2823
- className: "inline-flex size-4 items-center justify-center rounded-full border bg-white/[0.06]",
2824
- title: "Loading remaining balances",
2825
- children: /* @__PURE__ */ jsx34("span", { className: "size-2 animate-spin rounded-full border border-primary/30 border-t-primary" })
2856
+ className: `material-symbols-outlined text-icon-sm leading-none text-white/60${isRefreshing ? " animate-spin" : ""}`,
2857
+ children: "refresh"
2826
2858
  }
2827
2859
  )
2828
- ] }),
2829
- balanceVisible && unit !== "fiat" && fiatTotal && /* @__PURE__ */ jsx34("span", { className: "mt-1 font-mono text-xs font-medium text-white/45", children: fiatTotal }),
2830
- balanceVisible && unit === "fiat" && totalBTC > 0 && /* @__PURE__ */ jsxs21("span", { className: "mt-1 font-mono text-xs font-medium text-white/45", children: [
2831
- (totalBTC / 1e8).toFixed(8).replace(/\.?0+$/, ""),
2832
- "\xA0BTC"
2833
- ] })
2834
- ] })
2835
- ]
2836
- }
2837
- ),
2838
- /* @__PURE__ */ jsxs21("div", { className: "mt-1 flex shrink-0 items-center gap-1.5", children: [
2839
- onRefresh && /* @__PURE__ */ jsx34(
2840
- "button",
2841
- {
2842
- onClick: onRefresh,
2843
- disabled: isRefreshing,
2844
- className: "flex size-7 items-center justify-center rounded-full bg-white/[0.08] transition-all hover:bg-white/[0.12] disabled:opacity-40",
2845
- title: "Refresh balances",
2846
- children: /* @__PURE__ */ jsx34(
2847
- "span",
2860
+ }
2861
+ ),
2862
+ /* @__PURE__ */ jsx34(
2863
+ "button",
2848
2864
  {
2849
- className: `material-symbols-outlined text-icon-sm leading-none text-white/60${isRefreshing ? " animate-spin" : ""}`,
2850
- children: "refresh"
2865
+ onClick: () => setExpanded(!expanded),
2866
+ className: "flex size-7 items-center justify-center rounded-full bg-white/[0.08] transition-all hover:bg-white/[0.12]",
2867
+ children: /* @__PURE__ */ jsx34(
2868
+ Icon2,
2869
+ {
2870
+ name: expanded ? "expand_less" : "expand_more",
2871
+ size: "sm",
2872
+ className: "text-white/60"
2873
+ }
2874
+ )
2851
2875
  }
2852
2876
  )
2877
+ ] })
2878
+ ] }),
2879
+ expanded && /* @__PURE__ */ jsxs21(
2880
+ "div",
2881
+ {
2882
+ className: `space-y-1 border-t border-white/[0.08] duration-300 animate-in fade-in slide-in-from-top-2 ${compact ? "mt-3 pt-3" : "mt-4 pt-4"}`,
2883
+ children: [
2884
+ /* @__PURE__ */ jsx34("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "Bitcoin" }),
2885
+ /* @__PURE__ */ jsx34(
2886
+ NetworkRow,
2887
+ {
2888
+ icon: /* @__PURE__ */ jsx34(OnchainIcon, { className: "text-icon-sm" }),
2889
+ iconColor: "text-network-spark",
2890
+ dotColor: "bg-network-spark",
2891
+ label: "BTC on-chain",
2892
+ sublabel: "Standard Bitcoin balance",
2893
+ amount: btcOnchain,
2894
+ isPending: btcOnchainPending,
2895
+ visible: balanceVisible,
2896
+ format,
2897
+ formatFiat: formatFiatValue
2898
+ }
2899
+ ),
2900
+ /* @__PURE__ */ jsx34(
2901
+ NetworkRow,
2902
+ {
2903
+ icon: /* @__PURE__ */ jsx34(
2904
+ ImageIcon,
2905
+ {
2906
+ src: "/icons/lightning/lightning.svg",
2907
+ alt: "Lightning",
2908
+ className: "size-3.5"
2909
+ }
2910
+ ),
2911
+ iconColor: "text-network-lightning",
2912
+ dotColor: "bg-network-lightning",
2913
+ label: "BTC on RLN",
2914
+ sublabel: "RLN balance",
2915
+ amount: btcLightning,
2916
+ isPending: btcLightningPending,
2917
+ visible: balanceVisible,
2918
+ format,
2919
+ formatFiat: formatFiatValue
2920
+ }
2921
+ ),
2922
+ /* @__PURE__ */ jsx34(
2923
+ NetworkRow,
2924
+ {
2925
+ icon: /* @__PURE__ */ jsx34(
2926
+ ImageIcon,
2927
+ {
2928
+ src: "/icons/spark/Asterisk/Spark Asterisk White.svg",
2929
+ alt: "Spark",
2930
+ className: "size-3.5 opacity-90"
2931
+ }
2932
+ ),
2933
+ iconColor: "",
2934
+ dotColor: "bg-info",
2935
+ label: "BTC on Spark",
2936
+ sublabel: "Spark balance",
2937
+ amount: btcSpark,
2938
+ isPending: btcSparkPending,
2939
+ visible: balanceVisible,
2940
+ format,
2941
+ formatFiat: formatFiatValue
2942
+ }
2943
+ ),
2944
+ /* @__PURE__ */ jsx34(
2945
+ NetworkRow,
2946
+ {
2947
+ icon: /* @__PURE__ */ jsx34(
2948
+ ImageIcon,
2949
+ {
2950
+ src: "/icons/arkade/arkade-icon.svg",
2951
+ alt: "Arkade",
2952
+ className: "size-3.5 rounded-sm"
2953
+ }
2954
+ ),
2955
+ iconColor: "",
2956
+ dotColor: "bg-network-arkade",
2957
+ label: "BTC on Arkade",
2958
+ sublabel: "Arkade balance",
2959
+ amount: btcArkade,
2960
+ isPending: btcArkadePending,
2961
+ visible: balanceVisible,
2962
+ format,
2963
+ formatFiat: formatFiatValue
2964
+ }
2965
+ ),
2966
+ rgbAssets.length > 0 && /* @__PURE__ */ jsx34(RgbAssetsBreakdown, { assets: rgbAssets, balanceVisible }),
2967
+ accounts.RGB?.connected && nodeInfo?.pubkey && /* @__PURE__ */ jsxs21("div", { className: "mt-3 border-t border-white/[0.08] pt-4", children: [
2968
+ /* @__PURE__ */ jsx34("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "RLN Details" }),
2969
+ /* @__PURE__ */ jsxs21("div", { className: "grid grid-cols-3 gap-2", children: [
2970
+ /* @__PURE__ */ jsx34(
2971
+ StatusChip,
2972
+ {
2973
+ label: "Node",
2974
+ value: `${nodeInfo.pubkey.slice(0, 8)}...${nodeInfo.pubkey.slice(-6)}`
2975
+ }
2976
+ ),
2977
+ /* @__PURE__ */ jsx34(StatusChip, { label: "Peers", value: String(nodeInfo.num_peers ?? 0) }),
2978
+ /* @__PURE__ */ jsx34(StatusChip, { label: "Channels", value: String(nodeInfo.num_channels ?? 0) })
2979
+ ] })
2980
+ ] })
2981
+ ]
2853
2982
  }
2854
2983
  ),
2855
- /* @__PURE__ */ jsx34(
2856
- "button",
2984
+ /* @__PURE__ */ jsxs21(
2985
+ "div",
2857
2986
  {
2858
- onClick: () => setExpanded(!expanded),
2859
- className: "flex size-7 items-center justify-center rounded-full bg-white/[0.08] transition-all hover:bg-white/[0.12]",
2860
- children: /* @__PURE__ */ jsx34(
2861
- Icon2,
2862
- {
2863
- name: expanded ? "expand_less" : "expand_more",
2864
- size: "sm",
2865
- className: "text-white/60"
2866
- }
2867
- )
2987
+ className: `relative z-10 flex gap-2.5 border-t border-white/[0.08] ${compact ? "mt-2 pt-2" : "mt-3 pt-3"}`,
2988
+ children: [
2989
+ /* @__PURE__ */ jsx34(
2990
+ ActionTile,
2991
+ {
2992
+ icon: /* @__PURE__ */ jsx34("span", { className: "material-symbols-outlined text-icon-lg leading-none", children: "call_received" }),
2993
+ label: "Deposit",
2994
+ onClick: () => onNavigate?.("deposit"),
2995
+ "data-testid": "dashboard-action-deposit"
2996
+ }
2997
+ ),
2998
+ /* @__PURE__ */ jsx34(
2999
+ ActionTile,
3000
+ {
3001
+ icon: /* @__PURE__ */ jsx34("span", { className: "material-symbols-outlined text-icon-lg leading-none", children: "swap_horiz" }),
3002
+ label: "Swap",
3003
+ onClick: () => onNavigate?.("swap"),
3004
+ "data-testid": "dashboard-action-swap"
3005
+ }
3006
+ ),
3007
+ /* @__PURE__ */ jsx34(
3008
+ ActionTile,
3009
+ {
3010
+ icon: /* @__PURE__ */ jsx34("span", { className: "material-symbols-outlined text-icon-lg leading-none", children: "arrow_outward" }),
3011
+ label: "Withdraw",
3012
+ onClick: () => onNavigate?.("withdraw"),
3013
+ "data-testid": "dashboard-action-withdraw"
3014
+ }
3015
+ )
3016
+ ]
2868
3017
  }
2869
3018
  )
2870
- ] })
2871
- ] }),
2872
- expanded && /* @__PURE__ */ jsxs21("div", { className: "mt-4 space-y-1 border-t border-white/[0.08] pt-4 duration-300 animate-in fade-in slide-in-from-top-2", children: [
2873
- /* @__PURE__ */ jsx34("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "Bitcoin" }),
2874
- /* @__PURE__ */ jsx34(
2875
- NetworkRow,
2876
- {
2877
- icon: /* @__PURE__ */ jsx34(OnchainIcon, { className: "text-icon-sm" }),
2878
- iconColor: "text-network-spark",
2879
- dotColor: "bg-network-spark",
2880
- label: "BTC on-chain",
2881
- sublabel: "Standard Bitcoin balance",
2882
- amount: btcOnchain,
2883
- isPending: btcOnchainPending,
2884
- visible: balanceVisible,
2885
- format,
2886
- formatFiat: formatFiatValue
2887
- }
2888
- ),
2889
- /* @__PURE__ */ jsx34(
2890
- NetworkRow,
2891
- {
2892
- icon: /* @__PURE__ */ jsx34(
2893
- ImageIcon,
2894
- {
2895
- src: "/icons/lightning/lightning.svg",
2896
- alt: "Lightning",
2897
- className: "size-3.5"
2898
- }
2899
- ),
2900
- iconColor: "text-network-lightning",
2901
- dotColor: "bg-network-lightning",
2902
- label: "BTC on RLN",
2903
- sublabel: "RLN balance",
2904
- amount: btcLightning,
2905
- isPending: btcLightningPending,
2906
- visible: balanceVisible,
2907
- format,
2908
- formatFiat: formatFiatValue
2909
- }
2910
- ),
2911
- /* @__PURE__ */ jsx34(
2912
- NetworkRow,
2913
- {
2914
- icon: /* @__PURE__ */ jsx34(
2915
- ImageIcon,
2916
- {
2917
- src: "/icons/spark/Asterisk/Spark Asterisk White.svg",
2918
- alt: "Spark",
2919
- className: "size-3.5 opacity-90"
2920
- }
2921
- ),
2922
- iconColor: "",
2923
- dotColor: "bg-info",
2924
- label: "BTC on Spark",
2925
- sublabel: "Spark balance",
2926
- amount: btcSpark,
2927
- isPending: btcSparkPending,
2928
- visible: balanceVisible,
2929
- format,
2930
- formatFiat: formatFiatValue
2931
- }
2932
- ),
2933
- /* @__PURE__ */ jsx34(
2934
- NetworkRow,
2935
- {
2936
- icon: /* @__PURE__ */ jsx34(
2937
- ImageIcon,
2938
- {
2939
- src: "/icons/arkade/arkade-icon.svg",
2940
- alt: "Arkade",
2941
- className: "size-3.5 rounded-sm"
2942
- }
2943
- ),
2944
- iconColor: "",
2945
- dotColor: "bg-network-arkade",
2946
- label: "BTC on Arkade",
2947
- sublabel: "Arkade balance",
2948
- amount: btcArkade,
2949
- isPending: btcArkadePending,
2950
- visible: balanceVisible,
2951
- format,
2952
- formatFiat: formatFiatValue
2953
- }
2954
- ),
2955
- rgbAssets.length > 0 && /* @__PURE__ */ jsx34(RgbAssetsBreakdown, { assets: rgbAssets, balanceVisible }),
2956
- accounts.RGB?.connected && nodeInfo?.pubkey && /* @__PURE__ */ jsxs21("div", { className: "mt-3 border-t border-white/[0.08] pt-4", children: [
2957
- /* @__PURE__ */ jsx34("p", { className: "mb-3 text-xxs font-bold uppercase tracking-widest text-white/30", children: "RLN Details" }),
2958
- /* @__PURE__ */ jsxs21("div", { className: "grid grid-cols-3 gap-2", children: [
2959
- /* @__PURE__ */ jsx34(
2960
- StatusChip,
2961
- {
2962
- label: "Node",
2963
- value: `${nodeInfo.pubkey.slice(0, 8)}...${nodeInfo.pubkey.slice(-6)}`
2964
- }
2965
- ),
2966
- /* @__PURE__ */ jsx34(StatusChip, { label: "Peers", value: String(nodeInfo.num_peers ?? 0) }),
2967
- /* @__PURE__ */ jsx34(StatusChip, { label: "Channels", value: String(nodeInfo.num_channels ?? 0) })
2968
- ] })
2969
- ] })
2970
- ] }),
2971
- /* @__PURE__ */ jsxs21("div", { className: "relative z-10 mt-3 flex gap-2.5 border-t border-white/[0.08] pt-3", children: [
2972
- /* @__PURE__ */ jsx34(
2973
- ActionTile,
2974
- {
2975
- icon: /* @__PURE__ */ jsx34("span", { className: "material-symbols-outlined text-icon-lg leading-none", children: "call_received" }),
2976
- label: "Deposit",
2977
- onClick: () => onNavigate?.("deposit"),
2978
- "data-testid": "dashboard-action-deposit"
2979
- }
2980
- ),
2981
- /* @__PURE__ */ jsx34(
2982
- ActionTile,
2983
- {
2984
- icon: /* @__PURE__ */ jsx34("span", { className: "material-symbols-outlined text-icon-lg leading-none", children: "swap_horiz" }),
2985
- label: "Swap",
2986
- onClick: () => onNavigate?.("swap"),
2987
- "data-testid": "dashboard-action-swap"
2988
- }
2989
- ),
2990
- /* @__PURE__ */ jsx34(
2991
- ActionTile,
2992
- {
2993
- icon: /* @__PURE__ */ jsx34("span", { className: "material-symbols-outlined text-icon-lg leading-none", children: "arrow_outward" }),
2994
- label: "Withdraw",
2995
- onClick: () => onNavigate?.("withdraw"),
2996
- "data-testid": "dashboard-action-withdraw"
2997
- }
2998
- )
2999
- ] })
3000
- ] }) });
3019
+ ]
3020
+ }
3021
+ ) });
3001
3022
  }
3002
3023
  function RgbAssetsBreakdown({
3003
3024
  assets,
@@ -4775,7 +4796,7 @@ function RecoveryPhraseCard({
4775
4796
  import { useRef as useRef4, useEffect as useEffect7, useState as useState12 } from "react";
4776
4797
  import { Fragment as Fragment12, jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
4777
4798
  var PROTOCOLS = [
4778
- { name: "Bitcoin L1", network: "L1" },
4799
+ { name: "Bitcoin", network: "Bitcoin" },
4779
4800
  { name: "Lightning", network: "LN" },
4780
4801
  { name: "RGB", network: "RGB20" },
4781
4802
  { name: "Spark", network: "Spark" },
@@ -4789,7 +4810,7 @@ var BADGE_SIZE = 32;
4789
4810
  var BADGE_HALF = BADGE_SIZE / 2;
4790
4811
  var N = PROTOCOLS.length;
4791
4812
  var PROTOCOL_COLORS = {
4792
- L1: "#F7931A",
4813
+ Bitcoin: "#F7931A",
4793
4814
  LN: "#fbbf24",
4794
4815
  RGB20: "#EF4444",
4795
4816
  Spark: "#FFFFFF",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.31",
3
+ "version": "0.1.33",
4
4
  "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
5
5
  "license": "MIT",
6
6
  "type": "module",