kaleido-ui 0.1.9 → 0.1.11

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 +107 -56
  2. package/dist/web/index.d.cts +7 -1
  3. package/dist/web/index.d.ts +7 -1
  4. package/dist/web/index.js +107 -56
  5. package/package.json +1 -1
package/dist/web/index.cjs CHANGED
@@ -1141,6 +1141,22 @@ function NetworkBadge({
1141
1141
  const content = children ?? (shouldShowLabel ? label : null);
1142
1142
  const chipSize = size === "sm" ? "size-6" : "size-8";
1143
1143
  const imageSize = size === "sm" ? "size-3.5" : "size-icon-lg";
1144
+ const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1145
+ "span",
1146
+ {
1147
+ className: cn("material-symbols-outlined leading-none", color, className2),
1148
+ style: { fontSize: size === "sm" ? 12 : 16 },
1149
+ "aria-hidden": true,
1150
+ children: "link"
1151
+ }
1152
+ ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1153
+ "img",
1154
+ {
1155
+ src: icon,
1156
+ alt: network,
1157
+ className: cn(className2, "object-contain", defaultIconClassName, iconClassName)
1158
+ }
1159
+ );
1144
1160
  if (!content) {
1145
1161
  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1146
1162
  "span",
@@ -1151,14 +1167,7 @@ function NetworkBadge({
1151
1167
  iconBg,
1152
1168
  className
1153
1169
  ),
1154
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1155
- "img",
1156
- {
1157
- src: icon,
1158
- alt: network,
1159
- className: cn(imageSize, "object-contain", defaultIconClassName, iconClassName)
1160
- }
1161
- )
1170
+ children: renderGlyph(imageSize)
1162
1171
  }
1163
1172
  );
1164
1173
  }
@@ -1173,14 +1182,7 @@ function NetworkBadge({
1173
1182
  className
1174
1183
  ),
1175
1184
  children: [
1176
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1177
- "img",
1178
- {
1179
- src: icon,
1180
- alt: network,
1181
- className: cn(size === "sm" ? "size-3" : "size-3.5", "object-contain", defaultIconClassName, iconClassName)
1182
- }
1183
- ),
1185
+ renderGlyph(size === "sm" ? "size-3" : "size-3.5"),
1184
1186
  content
1185
1187
  ]
1186
1188
  }
@@ -1359,7 +1361,7 @@ function AssetCard({
1359
1361
  children: name
1360
1362
  }
1361
1363
  ),
1362
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-wrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NetworkBadge, { network, showLabel: true, size: "sm" }, network)) })
1364
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-nowrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NetworkBadge, { network, size: "sm" }, network)) })
1363
1365
  ] })
1364
1366
  ] }),
1365
1367
  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-right", children: [
@@ -2371,7 +2373,8 @@ function AccountSettingsShell({
2371
2373
  accountId,
2372
2374
  title,
2373
2375
  subtitle,
2374
- children
2376
+ children,
2377
+ onBack
2375
2378
  }) {
2376
2379
  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "min-h-screen bg-background pb-28 font-display text-foreground", children: [
2377
2380
  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -2381,6 +2384,7 @@ function AccountSettingsShell({
2381
2384
  subtitle,
2382
2385
  titleAlign: "start",
2383
2386
  left: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AccountHeaderIcons, { accountId }),
2387
+ onBack,
2384
2388
  className: "px-5 py-4"
2385
2389
  }
2386
2390
  ),
@@ -5514,7 +5518,23 @@ function DepositPreGeneration({
5514
5518
  }
5515
5519
 
5516
5520
  // src/web/components/deposit-asset-selection.tsx
5521
+ var import_react14 = require("react");
5517
5522
  var import_jsx_runtime58 = require("react/jsx-runtime");
5523
+ var PROTOCOL_BADGE = {
5524
+ RGB: { label: "RGB", className: "bg-network-rgb-chip text-network-rgb-text" },
5525
+ SPARK: { label: "Spark", className: "bg-network-spark-chip text-network-spark-text" },
5526
+ ARKADE: { label: "Arkade", className: "bg-network-arkade-chip text-network-arkade-text" }
5527
+ };
5528
+ function formatAssetBalance(asset) {
5529
+ const raw = asset.balance ?? 0;
5530
+ if (raw === 0) return "0";
5531
+ const precision = asset.precision ?? 0;
5532
+ const value = raw / Math.pow(10, precision);
5533
+ return value.toLocaleString("en-US", {
5534
+ minimumFractionDigits: 0,
5535
+ maximumFractionDigits: Math.min(precision, 8)
5536
+ });
5537
+ }
5518
5538
  function NetBadge({ icon, className }) {
5519
5539
  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: cn("inline-flex items-center justify-center rounded border px-1.5 py-0.5", className), children: icon });
5520
5540
  }
@@ -5535,8 +5555,15 @@ function DepositAssetSelection({
5535
5555
  isArkadeConnected
5536
5556
  }) {
5537
5557
  const btcAsset = filteredAssets.find((asset) => asset.ticker === "BTC");
5538
- const rgbAssets = filteredAssets.filter((asset) => asset.ticker !== "BTC");
5558
+ const ownedAssets = filteredAssets.filter((asset) => asset.ticker !== "BTC").slice().sort((a, b) => (b.balance ?? 0) - (a.balance ?? 0));
5559
+ const ownedAssetsCount = ownedAssets.length;
5539
5560
  const noResults = filteredAssets.length === 0 && !!searchQuery;
5561
+ const isSearching = !!searchQuery;
5562
+ const [assetsExpanded, setAssetsExpanded] = (0, import_react14.useState)(false);
5563
+ (0, import_react14.useEffect)(() => {
5564
+ if (isSearching) setAssetsExpanded(true);
5565
+ }, [isSearching]);
5566
+ const showOwnedAssets = isSearching ? true : assetsExpanded;
5540
5567
  const newAssetOptions = [
5541
5568
  {
5542
5569
  account: "RGB",
@@ -5650,42 +5677,66 @@ function DepositAssetSelection({
5650
5677
  'No assets match "',
5651
5678
  searchQuery,
5652
5679
  '"'
5653
- ] }) : rgbAssets.map((asset) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
5654
- "button",
5655
- {
5656
- type: "button",
5657
- className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
5658
- onClick: () => onSelectAsset(asset),
5659
- children: [
5660
- /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative flex-shrink-0", children: [
5661
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AssetIcon, { ticker: asset.ticker, size: 40 }),
5662
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full border bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("img", { src: "/icons/rgb/rgb-logo.svg", className: "block h-2.5 w-2.5 object-contain", alt: "RGB" }) })
5663
- ] }),
5664
- /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
5665
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: asset.ticker }),
5666
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mt-0.5 truncate text-xs text-white/40", children: asset.name ?? "RGB Asset" })
5667
- ] }),
5668
- /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-shrink-0 gap-1", children: [
5669
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5670
- NetBadge,
5671
- {
5672
- className: "border-network-bitcoin/20 bg-network-bitcoin/15",
5673
- icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "material-symbols-outlined leading-none text-network-bitcoin", style: { fontSize: 10 }, children: "link" })
5674
- }
5675
- ),
5676
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5677
- NetBadge,
5678
- {
5679
- className: "border-warning/20 bg-warning/15",
5680
- icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("img", { src: "/icons/lightning/lightning.svg", className: "h-2.5 w-2.5", alt: "" })
5681
- }
5682
- )
5683
- ] }),
5684
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-md text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
5685
- ]
5686
- },
5687
- asset.asset_id
5688
- )),
5680
+ ] }) : ownedAssetsCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "space-y-1.5 pt-1", children: [
5681
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
5682
+ "button",
5683
+ {
5684
+ type: "button",
5685
+ "data-testid": "deposit-toggle-owned-assets",
5686
+ onClick: () => !isSearching && setAssetsExpanded((value) => !value),
5687
+ disabled: isSearching,
5688
+ className: cn(
5689
+ "flex w-full items-center gap-2 rounded-2xl border px-4 py-2.5 transition-all",
5690
+ showOwnedAssets ? "border-white/10 bg-white/4" : "border-white/8 bg-white/3 hover:border-border hover:bg-accent",
5691
+ isSearching && "cursor-default"
5692
+ ),
5693
+ children: [
5694
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-xxs font-bold uppercase tracking-[0.18em] text-white/55", children: "Your assets" }),
5695
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "rounded-full bg-white/10 px-1.5 py-0.5 text-tiny font-bold text-white/70", children: ownedAssetsCount }),
5696
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex-1" }),
5697
+ !isSearching && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "material-symbols-outlined text-icon-md text-white/40", children: showOwnedAssets ? "expand_less" : "expand_more" })
5698
+ ]
5699
+ }
5700
+ ),
5701
+ showOwnedAssets && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "space-y-1.5 duration-200 animate-in fade-in slide-in-from-top-1", children: ownedAssets.map((asset) => {
5702
+ const protocolBadge = asset.accountId ? PROTOCOL_BADGE[asset.accountId] : null;
5703
+ const balance = asset.balance ?? 0;
5704
+ return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
5705
+ "button",
5706
+ {
5707
+ type: "button",
5708
+ "data-testid": `deposit-asset-${asset.asset_id}`,
5709
+ className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
5710
+ onClick: () => onSelectAsset(asset),
5711
+ children: [
5712
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AssetIcon, { ticker: asset.ticker, size: 40, className: "flex-shrink-0" }),
5713
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "min-w-0 flex-1 text-left", children: [
5714
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-1.5", children: [
5715
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "truncate font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: asset.ticker }),
5716
+ protocolBadge && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5717
+ "span",
5718
+ {
5719
+ className: cn(
5720
+ "shrink-0 rounded-full px-1.5 py-0.5 text-tiny font-bold uppercase tracking-wider",
5721
+ protocolBadge.className
5722
+ ),
5723
+ children: protocolBadge.label
5724
+ }
5725
+ )
5726
+ ] }),
5727
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mt-0.5 truncate text-xs text-white/40", children: asset.name ?? "Asset" })
5728
+ ] }),
5729
+ balance > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-shrink-0 text-right", children: [
5730
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "font-mono text-xs font-bold text-white", children: formatAssetBalance(asset) }),
5731
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mt-0.5 text-tiny uppercase tracking-wider text-white/35", children: asset.ticker })
5732
+ ] }),
5733
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-sm text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
5734
+ ]
5735
+ },
5736
+ asset.asset_id
5737
+ );
5738
+ }) })
5739
+ ] }) : null,
5689
5740
  !searchQuery && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
5690
5741
  "button",
5691
5742
  {
@@ -5726,7 +5777,7 @@ function DepositAssetSelection({
5726
5777
  children: [
5727
5778
  /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative", children: [
5728
5779
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AssetIcon, { ticker: option.ticker, size: 40 }),
5729
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: active ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon2, { name: "check", size: "xs", className: "text-background" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon2, { name: "add", size: "xs", className: "text-background" }) })
5780
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon2, { name: "add", size: "xs", className: "text-background" }) })
5730
5781
  ] }),
5731
5782
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5732
5783
  "div",
package/dist/web/index.d.cts CHANGED
@@ -426,11 +426,13 @@ declare function AccountNetworkPicker({ accountId, current, onSave, }: {
426
426
  current: AccountSettingsNetwork;
427
427
  onSave: (network: AccountSettingsNetwork) => Promise<unknown>;
428
428
  }): react_jsx_runtime.JSX.Element;
429
- declare function AccountSettingsShell({ accountId, title, subtitle, children, }: {
429
+ declare function AccountSettingsShell({ accountId, title, subtitle, children, onBack, }: {
430
430
  accountId: AccountSettingsProtocol;
431
431
  title: string;
432
432
  subtitle: string;
433
433
  children: ReactNode;
434
+ /** Optional back callback — if provided, renders a back button inline with the title. */
435
+ onBack?: () => void;
434
436
  }): react_jsx_runtime.JSX.Element;
435
437
  declare function AccountInfoGrid({ items }: {
436
438
  items: Array<{
@@ -1169,6 +1171,10 @@ interface DepositSelectionAsset {
1169
1171
  ticker: string;
1170
1172
  name?: string;
1171
1173
  precision?: number;
1174
+ /** Account/protocol the asset lives on — drives the protocol badge in "Your assets". */
1175
+ accountId?: DepositAccountId;
1176
+ /** Spendable balance in raw (smallest) units; used for sorting and the right-aligned amount. */
1177
+ balance?: number;
1172
1178
  }
1173
1179
  interface DepositAssetSelectionProps<TView extends string = string> {
1174
1180
  setCurrentView: (view: TView) => void;
package/dist/web/index.d.ts CHANGED
@@ -426,11 +426,13 @@ declare function AccountNetworkPicker({ accountId, current, onSave, }: {
426
426
  current: AccountSettingsNetwork;
427
427
  onSave: (network: AccountSettingsNetwork) => Promise<unknown>;
428
428
  }): react_jsx_runtime.JSX.Element;
429
- declare function AccountSettingsShell({ accountId, title, subtitle, children, }: {
429
+ declare function AccountSettingsShell({ accountId, title, subtitle, children, onBack, }: {
430
430
  accountId: AccountSettingsProtocol;
431
431
  title: string;
432
432
  subtitle: string;
433
433
  children: ReactNode;
434
+ /** Optional back callback — if provided, renders a back button inline with the title. */
435
+ onBack?: () => void;
434
436
  }): react_jsx_runtime.JSX.Element;
435
437
  declare function AccountInfoGrid({ items }: {
436
438
  items: Array<{
@@ -1169,6 +1171,10 @@ interface DepositSelectionAsset {
1169
1171
  ticker: string;
1170
1172
  name?: string;
1171
1173
  precision?: number;
1174
+ /** Account/protocol the asset lives on — drives the protocol badge in "Your assets". */
1175
+ accountId?: DepositAccountId;
1176
+ /** Spendable balance in raw (smallest) units; used for sorting and the right-aligned amount. */
1177
+ balance?: number;
1172
1178
  }
1173
1179
  interface DepositAssetSelectionProps<TView extends string = string> {
1174
1180
  setCurrentView: (view: TView) => void;
package/dist/web/index.js CHANGED
@@ -980,6 +980,22 @@ function NetworkBadge({
980
980
  const content = children ?? (shouldShowLabel ? label : null);
981
981
  const chipSize = size === "sm" ? "size-6" : "size-8";
982
982
  const imageSize = size === "sm" ? "size-3.5" : "size-icon-lg";
983
+ const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ jsx15(
984
+ "span",
985
+ {
986
+ className: cn("material-symbols-outlined leading-none", color, className2),
987
+ style: { fontSize: size === "sm" ? 12 : 16 },
988
+ "aria-hidden": true,
989
+ children: "link"
990
+ }
991
+ ) : /* @__PURE__ */ jsx15(
992
+ "img",
993
+ {
994
+ src: icon,
995
+ alt: network,
996
+ className: cn(className2, "object-contain", defaultIconClassName, iconClassName)
997
+ }
998
+ );
983
999
  if (!content) {
984
1000
  return /* @__PURE__ */ jsx15(
985
1001
  "span",
@@ -990,14 +1006,7 @@ function NetworkBadge({
990
1006
  iconBg,
991
1007
  className
992
1008
  ),
993
- children: /* @__PURE__ */ jsx15(
994
- "img",
995
- {
996
- src: icon,
997
- alt: network,
998
- className: cn(imageSize, "object-contain", defaultIconClassName, iconClassName)
999
- }
1000
- )
1009
+ children: renderGlyph(imageSize)
1001
1010
  }
1002
1011
  );
1003
1012
  }
@@ -1012,14 +1021,7 @@ function NetworkBadge({
1012
1021
  className
1013
1022
  ),
1014
1023
  children: [
1015
- /* @__PURE__ */ jsx15(
1016
- "img",
1017
- {
1018
- src: icon,
1019
- alt: network,
1020
- className: cn(size === "sm" ? "size-3" : "size-3.5", "object-contain", defaultIconClassName, iconClassName)
1021
- }
1022
- ),
1024
+ renderGlyph(size === "sm" ? "size-3" : "size-3.5"),
1023
1025
  content
1024
1026
  ]
1025
1027
  }
@@ -1198,7 +1200,7 @@ function AssetCard({
1198
1200
  children: name
1199
1201
  }
1200
1202
  ),
1201
- /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ jsx17(NetworkBadge, { network, showLabel: true, size: "sm" }, network)) })
1203
+ /* @__PURE__ */ jsx17("div", { className: "flex flex-nowrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ jsx17(NetworkBadge, { network, size: "sm" }, network)) })
1202
1204
  ] })
1203
1205
  ] }),
1204
1206
  /* @__PURE__ */ jsxs7("div", { className: "text-right", children: [
@@ -2216,7 +2218,8 @@ function AccountSettingsShell({
2216
2218
  accountId,
2217
2219
  title,
2218
2220
  subtitle,
2219
- children
2221
+ children,
2222
+ onBack
2220
2223
  }) {
2221
2224
  return /* @__PURE__ */ jsxs18("div", { className: "min-h-screen bg-background pb-28 font-display text-foreground", children: [
2222
2225
  /* @__PURE__ */ jsx30(
@@ -2226,6 +2229,7 @@ function AccountSettingsShell({
2226
2229
  subtitle,
2227
2230
  titleAlign: "start",
2228
2231
  left: /* @__PURE__ */ jsx30(AccountHeaderIcons, { accountId }),
2232
+ onBack,
2229
2233
  className: "px-5 py-4"
2230
2234
  }
2231
2235
  ),
@@ -5359,7 +5363,23 @@ function DepositPreGeneration({
5359
5363
  }
5360
5364
 
5361
5365
  // src/web/components/deposit-asset-selection.tsx
5366
+ import { useEffect as useEffect7, useState as useState13 } from "react";
5362
5367
  import { Fragment as Fragment13, jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
5368
+ var PROTOCOL_BADGE = {
5369
+ RGB: { label: "RGB", className: "bg-network-rgb-chip text-network-rgb-text" },
5370
+ SPARK: { label: "Spark", className: "bg-network-spark-chip text-network-spark-text" },
5371
+ ARKADE: { label: "Arkade", className: "bg-network-arkade-chip text-network-arkade-text" }
5372
+ };
5373
+ function formatAssetBalance(asset) {
5374
+ const raw = asset.balance ?? 0;
5375
+ if (raw === 0) return "0";
5376
+ const precision = asset.precision ?? 0;
5377
+ const value = raw / Math.pow(10, precision);
5378
+ return value.toLocaleString("en-US", {
5379
+ minimumFractionDigits: 0,
5380
+ maximumFractionDigits: Math.min(precision, 8)
5381
+ });
5382
+ }
5363
5383
  function NetBadge({ icon, className }) {
5364
5384
  return /* @__PURE__ */ jsx58("span", { className: cn("inline-flex items-center justify-center rounded border px-1.5 py-0.5", className), children: icon });
5365
5385
  }
@@ -5380,8 +5400,15 @@ function DepositAssetSelection({
5380
5400
  isArkadeConnected
5381
5401
  }) {
5382
5402
  const btcAsset = filteredAssets.find((asset) => asset.ticker === "BTC");
5383
- const rgbAssets = filteredAssets.filter((asset) => asset.ticker !== "BTC");
5403
+ const ownedAssets = filteredAssets.filter((asset) => asset.ticker !== "BTC").slice().sort((a, b) => (b.balance ?? 0) - (a.balance ?? 0));
5404
+ const ownedAssetsCount = ownedAssets.length;
5384
5405
  const noResults = filteredAssets.length === 0 && !!searchQuery;
5406
+ const isSearching = !!searchQuery;
5407
+ const [assetsExpanded, setAssetsExpanded] = useState13(false);
5408
+ useEffect7(() => {
5409
+ if (isSearching) setAssetsExpanded(true);
5410
+ }, [isSearching]);
5411
+ const showOwnedAssets = isSearching ? true : assetsExpanded;
5385
5412
  const newAssetOptions = [
5386
5413
  {
5387
5414
  account: "RGB",
@@ -5495,42 +5522,66 @@ function DepositAssetSelection({
5495
5522
  'No assets match "',
5496
5523
  searchQuery,
5497
5524
  '"'
5498
- ] }) : rgbAssets.map((asset) => /* @__PURE__ */ jsxs45(
5499
- "button",
5500
- {
5501
- type: "button",
5502
- className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
5503
- onClick: () => onSelectAsset(asset),
5504
- children: [
5505
- /* @__PURE__ */ jsxs45("div", { className: "relative flex-shrink-0", children: [
5506
- /* @__PURE__ */ jsx58(AssetIcon, { ticker: asset.ticker, size: 40 }),
5507
- /* @__PURE__ */ jsx58("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full border bg-card", children: /* @__PURE__ */ jsx58("img", { src: "/icons/rgb/rgb-logo.svg", className: "block h-2.5 w-2.5 object-contain", alt: "RGB" }) })
5508
- ] }),
5509
- /* @__PURE__ */ jsxs45("div", { className: "min-w-0 flex-1 text-left", children: [
5510
- /* @__PURE__ */ jsx58("div", { className: "font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: asset.ticker }),
5511
- /* @__PURE__ */ jsx58("div", { className: "mt-0.5 truncate text-xs text-white/40", children: asset.name ?? "RGB Asset" })
5512
- ] }),
5513
- /* @__PURE__ */ jsxs45("div", { className: "flex flex-shrink-0 gap-1", children: [
5514
- /* @__PURE__ */ jsx58(
5515
- NetBadge,
5516
- {
5517
- className: "border-network-bitcoin/20 bg-network-bitcoin/15",
5518
- icon: /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined leading-none text-network-bitcoin", style: { fontSize: 10 }, children: "link" })
5519
- }
5520
- ),
5521
- /* @__PURE__ */ jsx58(
5522
- NetBadge,
5523
- {
5524
- className: "border-warning/20 bg-warning/15",
5525
- icon: /* @__PURE__ */ jsx58("img", { src: "/icons/lightning/lightning.svg", className: "h-2.5 w-2.5", alt: "" })
5526
- }
5527
- )
5528
- ] }),
5529
- /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-md text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
5530
- ]
5531
- },
5532
- asset.asset_id
5533
- )),
5525
+ ] }) : ownedAssetsCount > 0 ? /* @__PURE__ */ jsxs45("div", { className: "space-y-1.5 pt-1", children: [
5526
+ /* @__PURE__ */ jsxs45(
5527
+ "button",
5528
+ {
5529
+ type: "button",
5530
+ "data-testid": "deposit-toggle-owned-assets",
5531
+ onClick: () => !isSearching && setAssetsExpanded((value) => !value),
5532
+ disabled: isSearching,
5533
+ className: cn(
5534
+ "flex w-full items-center gap-2 rounded-2xl border px-4 py-2.5 transition-all",
5535
+ showOwnedAssets ? "border-white/10 bg-white/4" : "border-white/8 bg-white/3 hover:border-border hover:bg-accent",
5536
+ isSearching && "cursor-default"
5537
+ ),
5538
+ children: [
5539
+ /* @__PURE__ */ jsx58("span", { className: "text-xxs font-bold uppercase tracking-[0.18em] text-white/55", children: "Your assets" }),
5540
+ /* @__PURE__ */ jsx58("span", { className: "rounded-full bg-white/10 px-1.5 py-0.5 text-tiny font-bold text-white/70", children: ownedAssetsCount }),
5541
+ /* @__PURE__ */ jsx58("div", { className: "flex-1" }),
5542
+ !isSearching && /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined text-icon-md text-white/40", children: showOwnedAssets ? "expand_less" : "expand_more" })
5543
+ ]
5544
+ }
5545
+ ),
5546
+ showOwnedAssets && /* @__PURE__ */ jsx58("div", { className: "space-y-1.5 duration-200 animate-in fade-in slide-in-from-top-1", children: ownedAssets.map((asset) => {
5547
+ const protocolBadge = asset.accountId ? PROTOCOL_BADGE[asset.accountId] : null;
5548
+ const balance = asset.balance ?? 0;
5549
+ return /* @__PURE__ */ jsxs45(
5550
+ "button",
5551
+ {
5552
+ type: "button",
5553
+ "data-testid": `deposit-asset-${asset.asset_id}`,
5554
+ className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 px-4 py-3 text-sm transition-all hover:border-border hover:bg-accent",
5555
+ onClick: () => onSelectAsset(asset),
5556
+ children: [
5557
+ /* @__PURE__ */ jsx58(AssetIcon, { ticker: asset.ticker, size: 40, className: "flex-shrink-0" }),
5558
+ /* @__PURE__ */ jsxs45("div", { className: "min-w-0 flex-1 text-left", children: [
5559
+ /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-1.5", children: [
5560
+ /* @__PURE__ */ jsx58("span", { className: "truncate font-bold tracking-wide text-white transition-colors group-hover:text-primary/90", children: asset.ticker }),
5561
+ protocolBadge && /* @__PURE__ */ jsx58(
5562
+ "span",
5563
+ {
5564
+ className: cn(
5565
+ "shrink-0 rounded-full px-1.5 py-0.5 text-tiny font-bold uppercase tracking-wider",
5566
+ protocolBadge.className
5567
+ ),
5568
+ children: protocolBadge.label
5569
+ }
5570
+ )
5571
+ ] }),
5572
+ /* @__PURE__ */ jsx58("div", { className: "mt-0.5 truncate text-xs text-white/40", children: asset.name ?? "Asset" })
5573
+ ] }),
5574
+ balance > 0 && /* @__PURE__ */ jsxs45("div", { className: "flex-shrink-0 text-right", children: [
5575
+ /* @__PURE__ */ jsx58("div", { className: "font-mono text-xs font-bold text-white", children: formatAssetBalance(asset) }),
5576
+ /* @__PURE__ */ jsx58("div", { className: "mt-0.5 text-tiny uppercase tracking-wider text-white/35", children: asset.ticker })
5577
+ ] }),
5578
+ /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-sm text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
5579
+ ]
5580
+ },
5581
+ asset.asset_id
5582
+ );
5583
+ }) })
5584
+ ] }) : null,
5534
5585
  !searchQuery && /* @__PURE__ */ jsx58("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ jsxs45(
5535
5586
  "button",
5536
5587
  {
@@ -5571,7 +5622,7 @@ function DepositAssetSelection({
5571
5622
  children: [
5572
5623
  /* @__PURE__ */ jsxs45("div", { className: "relative", children: [
5573
5624
  /* @__PURE__ */ jsx58(AssetIcon, { ticker: option.ticker, size: 40 }),
5574
- /* @__PURE__ */ jsx58("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: active ? /* @__PURE__ */ jsx58(Icon2, { name: "check", size: "xs", className: "text-background" }) : /* @__PURE__ */ jsx58(Icon2, { name: "add", size: "xs", className: "text-background" }) })
5625
+ /* @__PURE__ */ jsx58("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ jsx58(Icon2, { name: "add", size: "xs", className: "text-background" }) })
5575
5626
  ] }),
5576
5627
  /* @__PURE__ */ jsx58("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ jsx58(
5577
5628
  "div",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.9",
3
+ "version": "0.1.11",
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",