kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-3CHDKHXW.js

@@ -0,0 +1,150 @@
+"use client";
+import {
+  ChartFrame,
+  ChartLegend,
+  chartSeriesLimit,
+  defaultChartFormat,
+  nextActiveIndex,
+  plotClass,
+  seriesColor,
+  useSeriesVisibility
+} from "./chunk-CXLGQSHM.js";
+
+// src/web/components/charts/donut-chart.tsx
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var OTHER_ID = "__other";
+function foldSegments(segments) {
+  const positive = segments.filter((s) => s.value > 0);
+  if (positive.length <= chartSeriesLimit) return positive;
+  const sorted = [...positive].sort((a, b) => b.value - a.value);
+  const kept = sorted.slice(0, chartSeriesLimit - 1);
+  const rest = sorted.slice(chartSeriesLimit - 1).reduce((sum, s) => sum + s.value, 0);
+  const keptIds = new Set(kept.map((s) => s.id));
+  return [...positive.filter((s) => keptIds.has(s.id)), { id: OTHER_ID, label: "Other", value: rest }];
+}
+var polar = (cx, cy, r, angle) => [
+  cx + r * Math.sin(angle),
+  cy - r * Math.cos(angle)
+];
+function arcPath(cx, cy, outer, inner, start, end) {
+  const large = end - start > Math.PI ? 1 : 0;
+  const [x0, y0] = polar(cx, cy, outer, start);
+  const [x1, y1] = polar(cx, cy, outer, end);
+  const [x2, y2] = polar(cx, cy, inner, end);
+  const [x3, y3] = polar(cx, cy, inner, start);
+  return `M${x0},${y0}A${outer},${outer} 0 ${large} 1 ${x1},${y1}L${x2},${y2}A${inner},${inner} 0 ${large} 0 ${x3},${y3}Z`;
+}
+function DonutChart({
+  segments,
+  label,
+  formatValue = defaultChartFormat,
+  totalLabel = "Total",
+  size = 200,
+  empty,
+  className,
+  ...head
+}) {
+  const [active, setActive] = useState(null);
+  const allParts = foldSegments(segments);
+  const visibility = useSeriesVisibility(allParts.map((part) => part.id));
+  const parts = allParts.filter((part) => visibility.isVisible(part.id));
+  const total = parts.reduce((sum, s) => sum + s.value, 0);
+  if (parts.length === 0 || total <= 0) return /* @__PURE__ */ jsx(Fragment, { children: empty ?? null });
+  const cx = size / 2;
+  const cy = size / 2;
+  const outer = size / 2 - 2;
+  const inner = outer * 0.64;
+  const gap = parts.length > 1 ? 2 / outer : 0;
+  let angle = 0;
+  const arcs = parts.map((part) => {
+    const sweep = part.value / total * Math.PI * 2;
+    const start = angle + gap / 2;
+    const end = angle + sweep - gap / 2;
+    angle += sweep;
+    return { part, start, end: Math.max(start + 1e-3, end) };
+  });
+  const colorOfPart = (part) => part.id === OTHER_ID ? "var(--muted-foreground)" : seriesColor(allParts.indexOf(part));
+  const colorOf = (index) => colorOfPart(parts[index]);
+  const share = (value) => `${Math.round(value / total * 1e3) / 10}%`;
+  const activePart = active === null ? null : parts[active];
+  const onKeyDown = (event) => {
+    if (nextActiveIndex(event.key, active, parts.length) === void 0) return;
+    event.preventDefault();
+    setActive((current) => {
+      const next = nextActiveIndex(event.key, current, parts.length);
+      return next === void 0 ? current : next;
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...head,
+      label,
+      className,
+      legend: /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          items: allParts.map((part) => ({
+            id: part.id,
+            label: visibility.isVisible(part.id) ? `${part.label} \xB7 ${share(part.value)}` : part.label,
+            color: colorOfPart(part)
+          })),
+          ...visibility.legend
+        }
+      ),
+      table: {
+        columns: ["Part", "Value", "Share"],
+        rows: [
+          ...parts.map((part) => [part.label, formatValue(part.value), share(part.value)]),
+          [totalLabel, formatValue(total), "100%"]
+        ]
+      },
+      announcement: activePart ? `${activePart.label}: ${formatValue(activePart.value)}, ${share(activePart.value)}` : void 0,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "group",
+          "aria-roledescription": "chart",
+          "aria-label": `${label}: ${parts.length} parts. Arrow keys move between them.`,
+          tabIndex: 0,
+          onKeyDown,
+          onBlur: () => setActive(null),
+          onPointerLeave: () => setActive(null),
+          className: `${plotClass} flex justify-center py-4`,
+          children: /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", className: "block max-w-full", children: [
+            arcs.map(({ part, start, end }, index) => /* @__PURE__ */ jsx(
+              "path",
+              {
+                "data-segment": part.id,
+                d: arcPath(cx, cy, active === index ? outer + 1 : outer, inner, start, end),
+                fill: colorOf(index),
+                opacity: active !== null && active !== index ? 0.55 : 1,
+                onPointerEnter: () => setActive(index)
+              },
+              part.id
+            )),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: cx,
+                y: cy - 4,
+                textAnchor: "middle",
+                fontSize: 20,
+                fontWeight: 700,
+                fill: "var(--foreground)",
+                children: formatValue(activePart ? activePart.value : total)
+              }
+            ),
+            /* @__PURE__ */ jsx("text", { x: cx, y: cy + 16, textAnchor: "middle", fontSize: 11, fill: "var(--muted-foreground)", children: activePart ? `${activePart.label} \xB7 ${share(activePart.value)}` : totalLabel })
+          ] })
+        }
+      )
+    }
+  );
+}
+
+export {
+  foldSegments,
+  DonutChart
+};

package/dist/web/chunk-4BTXTIE6.js

@@ -0,0 +1,126 @@
+"use client";
+import {
+  formatDisplayAmountText
+} from "./chunk-VM6AGMYO.js";
+import {
+  StatusBadge
+} from "./chunk-LPDB7EHH.js";
+import {
+  AssetIcon
+} from "./chunk-SGXLWU4V.js";
+import {
+  NetworkBadge
+} from "./chunk-EBQ35SOM.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/asset-card.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AssetCard({
+  ticker,
+  name,
+  displayBalance,
+  networks = [],
+  logoUri,
+  balanceVisible = true,
+  accentColor,
+  status,
+  isYielding,
+  onClick,
+  className
+}) {
+  const shown = balanceVisible ? displayBalance : "\u2022\u2022\u2022\u2022\u2022\u2022";
+  const displayShown = balanceVisible ? formatDisplayAmountText(displayBalance) : shown;
+  const [hovered, setHovered] = useState(false);
+  const showYield = isYielding ?? ["USDB"].includes(ticker.toUpperCase());
+  const gradientStyle = accentColor ? {
+    background: `linear-gradient(135deg, var(--card) 35%, ${accentColor}${hovered ? "33" : "1f"} 78%, ${accentColor}${hovered ? "55" : "3d"} 100%)`,
+    transition: "background 0.3s ease"
+  } : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "p-4 rounded-card transition-all duration-200 shadow-card-secondary relative overflow-hidden group",
+        !accentColor && "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card",
+        onClick && "cursor-pointer hover:shadow-card-secondary hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98]",
+        className
+      ),
+      style: gradientStyle,
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-secondary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex min-w-0 items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              AssetIcon,
+              {
+                ticker,
+                logoUri,
+                size: 44,
+                className: "group-hover:scale-105 transition-transform"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "max-w-full truncate font-bold text-body leading-tight tracking-wide text-foreground",
+                    onClick && "transition-colors"
+                  ),
+                  title: name,
+                  children: name
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-nowrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ jsx(NetworkBadge, { network, size: "sm" }, network)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 max-w-[45%] flex-col items-end text-right", children: [
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "max-w-full truncate font-bold text-subhead tabular-nums tracking-tight text-foreground transition-colors group-hover:opacity-90",
+                title: shown,
+                children: displayShown
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex min-h-6 items-center justify-end gap-1", children: [
+              status && /* @__PURE__ */ jsx(StatusBadge, { status }),
+              status && ticker && /* @__PURE__ */ jsx("span", { className: "text-tiny text-muted-foreground", children: "\xB7" }),
+              showYield && /* @__PURE__ */ jsx("div", { title: "Yield Generating Asset", className: "text-success-fg/90 flex items-center justify-center bg-success/10 rounded-full p-0.5", children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "w-3 h-3",
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" }),
+                    /* @__PURE__ */ jsx("path", { d: "M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("p", { className: cn("truncate text-muted-foreground", eyebrow), children: ticker })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  AssetCard
+};

package/dist/web/chunk-4L55ANVR.js

@@ -0,0 +1,330 @@
+"use client";
+import {
+  DotPagination
+} from "./chunk-6PNGSAJB.js";
+import {
+  BottomSheet
+} from "./chunk-JYM5NHBA.js";
+import {
+  AssetIcon
+} from "./chunk-SGXLWU4V.js";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  NetworkBadge
+} from "./chunk-EBQ35SOM.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  LiquidNetworkIcon
+} from "./chunk-WBW5E6LC.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Add,
+  ArrowBack,
+  ArrowForward,
+  ExpandLess,
+  ExpandMore,
+  Search,
+  SwapCalls
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/deposit-asset-selection.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ADD_ASSET_SUBTITLE = {
+  RGB: "RGB asset on Bitcoin",
+  SPARK: "Spark-native asset",
+  ARKADE: "Arkade-native asset",
+  LIQUID: "L-BTC or Liquid asset"
+};
+var PROTOCOL_BADGE = {
+  RGB: { label: "RGB", className: "bg-network-rgb-chip text-network-rgb-fg" },
+  SPARK: { label: "Spark", className: "bg-network-spark-chip text-network-spark-fg" },
+  ARKADE: { label: "Arkade", className: "bg-network-arkade-chip text-network-arkade-fg" },
+  LIQUID: { label: "Liquid", className: "bg-network-liquid-chip text-network-liquid-fg" }
+};
+function formatAssetBalance(asset) {
+  const raw = asset.balance ?? 0;
+  if (raw === 0) return "0";
+  const precision = asset.precision ?? 0;
+  const value = raw / Math.pow(10, precision);
+  return value.toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: Math.min(precision, 8)
+  });
+}
+function DepositAssetSelection({
+  setCurrentView,
+  isNewAsset,
+  newAssetAccount,
+  newAssetId,
+  setNewAssetId,
+  searchQuery,
+  setSearchQuery,
+  filteredAssets,
+  onSelectAsset,
+  handleAddNewAsset,
+  handleContinueToGenerate,
+  isRgbConnected,
+  isSparkConnected,
+  isArkadeConnected,
+  isLiquidConnected = false
+}) {
+  const btcAsset = filteredAssets.find((asset) => asset.ticker === "BTC");
+  const ownedAssets = filteredAssets.filter((asset) => asset.ticker !== "BTC").slice().sort((a, b) => (b.balance ?? 0) - (a.balance ?? 0));
+  const ownedAssetsCount = ownedAssets.length;
+  const noResults = filteredAssets.length === 0 && !!searchQuery;
+  const isSearching = !!searchQuery;
+  const [assetsExpanded, setAssetsExpanded] = useState(false);
+  const [showAddAssetModal, setShowAddAssetModal] = useState(false);
+  useEffect(() => {
+    if (isSearching) setAssetsExpanded(true);
+  }, [isSearching]);
+  const showOwnedAssets = isSearching ? true : assetsExpanded;
+  const newAssetOptions = [
+    {
+      account: "RGB",
+      title: "New RGB Asset",
+      ticker: "RGB",
+      enabled: isRgbConnected,
+      idleClass: "bg-primary/10 hover:bg-primary/20",
+      activeClass: "bg-primary/25",
+      titleHoverClass: "group-hover:text-brand"
+    },
+    {
+      account: "SPARK",
+      title: "New Spark Asset",
+      ticker: "SPARK",
+      enabled: isSparkConnected,
+      idleClass: "bg-info/10 hover:bg-info/20",
+      activeClass: "bg-info/25",
+      titleHoverClass: "group-hover:text-info-fg"
+    },
+    {
+      account: "ARKADE",
+      title: "New Arkade Asset",
+      ticker: "ARKADE",
+      enabled: isArkadeConnected,
+      idleClass: "bg-network-arkade/10 hover:bg-network-arkade/20",
+      activeClass: "bg-network-arkade/25",
+      titleHoverClass: "group-hover:text-network-arkade-fg"
+    },
+    {
+      account: "LIQUID",
+      title: "New Liquid Asset",
+      ticker: "LIQUID",
+      enabled: isLiquidConnected,
+      idleClass: "bg-network-liquid/10 hover:bg-network-liquid/20",
+      activeClass: "bg-network-liquid/25",
+      titleHoverClass: "group-hover:text-network-liquid-fg"
+    }
+  ].filter((option) => option.enabled);
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background bg-page-radial pt-16 font-display text-foreground", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-4 top-4 z-30", children: /* @__PURE__ */ jsx(GlyphButton, { icon: ArrowBack, label: "Go back", size: "lg", onClick: () => setCurrentView("dashboard") }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 px-5 pb-3 pt-4", children: /* @__PURE__ */ jsx(
+      DotPagination,
+      {
+        count: 2,
+        index: 0,
+        ariaLabel: "Deposit step 1 of 2: select asset"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 px-5 pb-3", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        IconGlyph,
+        {
+          glyph: Search,
+          size: "sm",
+          className: "absolute left-3 top-1/2 -translate-y-1/2 text-secondary-content"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          autoFocus: true,
+          "data-testid": "deposit-asset-search",
+          className: "w-full rounded-xl bg-card/55 bg-gradient-card ring-1 ring-inset ring-secondary/15 hover:ring-secondary/35 py-2.5 pl-10 pr-4 text-caption text-foreground shadow-inner outline-none transition-all placeholder:text-muted-foreground focus:ring-primary/50 focus:bg-foreground/8 focus:shadow-glow-primary-soft",
+          onChange: (event) => setSearchQuery(event.target.value),
+          placeholder: "Search assets...",
+          type: "text",
+          value: searchQuery
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: "space-y-1.5 px-5 pb-3", children: [
+      btcAsset && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "data-testid": "deposit-asset-btc",
+          className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card px-4 py-3 text-body shadow-card transition-all duration-200 hover-gradient-violet hover:shadow-card-hover",
+          onClick: () => onSelectAsset(btcAsset),
+          children: [
+            /* @__PURE__ */ jsx(AssetIcon, { ticker: "BTC", size: 40, className: "flex-shrink-0" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-left", children: [
+              /* @__PURE__ */ jsx("div", { className: "font-bold tracking-wide text-foreground transition-colors group-hover:text-secondary-content", children: "Bitcoin" }),
+              /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-caption text-foreground/55", children: "Choose destination account next" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "hidden min-w-0 max-w-[42%] flex-shrink flex-wrap justify-end gap-1 min-[380px]:flex", children: [
+              /* @__PURE__ */ jsx(NetworkBadge, { network: "L1", size: "sm" }),
+              /* @__PURE__ */ jsx(NetworkBadge, { network: "LN", size: "sm" }),
+              isSparkConnected && /* @__PURE__ */ jsx(NetworkBadge, { network: "Spark", size: "sm" }),
+              isArkadeConnected && /* @__PURE__ */ jsx(NetworkBadge, { network: "Arkade", size: "sm" }),
+              isLiquidConnected && /* @__PURE__ */ jsx(NetworkBadge, { network: "Liquid", size: "sm" })
+            ] }),
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: ArrowForward, className: "flex-shrink-0 text-icon-md text-foreground/20 transition-colors group-hover:text-secondary-content" })
+          ]
+        }
+      ),
+      noResults ? /* @__PURE__ */ jsxs("div", { className: "py-8 text-center text-caption text-foreground/55", children: [
+        'No assets match "',
+        searchQuery,
+        '"'
+      ] }) : ownedAssetsCount > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 pt-1", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-testid": "deposit-toggle-owned-assets",
+            onClick: () => !isSearching && setAssetsExpanded((value) => !value),
+            disabled: isSearching,
+            className: cn(
+              "flex w-full items-center gap-2 rounded-2xl px-4 py-2.5 transition-all",
+              showOwnedAssets ? "bg-gradient-active ring-1 ring-inset ring-primary/40" : "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-raised hover-gradient-violet",
+              isSearching && "cursor-default"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", eyebrow), children: "Your assets" }),
+              /* @__PURE__ */ jsx("span", { className: "inline-flex size-5 items-center justify-center rounded-full bg-secondary bg-gradient-violet text-tiny font-bold text-white shadow-button-violet", children: ownedAssetsCount }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+              !isSearching && /* @__PURE__ */ jsx(IconGlyph, { glyph: showOwnedAssets ? ExpandLess : ExpandMore, size: "md", className: "text-secondary-content" })
+            ]
+          }
+        ),
+        showOwnedAssets && /* @__PURE__ */ jsx("div", { className: "space-y-1.5 duration-200 animate-in fade-in slide-in-from-top-1", children: ownedAssets.map((asset) => {
+          const protocolBadge = asset.accountId ? PROTOCOL_BADGE[asset.accountId] : null;
+          const balance = asset.balance ?? 0;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "data-testid": `deposit-asset-${asset.asset_id}`,
+              className: "group flex w-full min-w-0 items-center gap-3 overflow-hidden rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card px-4 py-3 text-body shadow-card transition-all duration-200 hover-gradient-violet hover:shadow-card-hover",
+              onClick: () => onSelectAsset(asset),
+              children: [
+                /* @__PURE__ */ jsx(AssetIcon, { ticker: asset.ticker, size: 40, className: "flex-shrink-0" }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-left", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate font-bold tracking-wide text-foreground transition-colors group-hover:text-secondary-content", children: asset.ticker }),
+                    protocolBadge && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "shrink-0 rounded-full px-1.5 py-0.5",
+                          eyebrow,
+                          protocolBadge.className
+                        ),
+                        children: protocolBadge.label
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-caption text-foreground/55", children: asset.name ?? "Asset" })
+                ] }),
+                balance > 0 && /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-right", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-caption font-bold tabular-nums text-foreground", children: formatAssetBalance(asset) }),
+                  /* @__PURE__ */ jsx("div", { className: cn("mt-0.5 text-foreground/55", eyebrow), children: asset.ticker })
+                ] }),
+                /* @__PURE__ */ jsx(IconGlyph, { glyph: ArrowForward, className: "flex-shrink-0 text-icon-sm text-foreground/20 transition-colors group-hover:text-secondary-content" })
+              ]
+            },
+            asset.asset_id
+          );
+        }) })
+      ] }) : null,
+      !searchQuery && /* @__PURE__ */ jsx("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setCurrentView("bridge"),
+          className: "group flex w-full items-center gap-3 rounded-2xl bg-gradient-to-r from-secondary/20 to-primary/10 p-3 shadow-card transition-all duration-200 hover:from-secondary/30 hover:to-primary/15 hover:shadow-card-hover",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary bg-gradient-violet text-white shadow-button-violet", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: SwapCalls, className: "text-icon-lg" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 text-left", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-body font-semibold text-foreground transition-colors group-hover:text-secondary-content", children: "Bridge from another chain" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xxs leading-tight text-foreground/55", children: "USDC, USDT, ETH, SOL via Flashnet" })
+            ] }),
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: ArrowForward, className: "text-icon-lg text-foreground/55 transition-colors group-hover:text-secondary-content" })
+          ]
+        }
+      ) }),
+      !searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "data-testid": "deposit-add-asset",
+          onClick: () => setShowAddAssetModal(true),
+          className: "group flex w-full items-center gap-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-3 shadow-card transition-all duration-200 hover-gradient-violet hover:shadow-card-hover",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary/15 text-secondary-content", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Add, size: "md" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 text-left", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-body font-semibold text-foreground transition-colors group-hover:text-secondary-content", children: "Add an asset" }),
+              /* @__PURE__ */ jsxs("p", { className: "text-xxs leading-tight text-foreground/55", children: [
+                "Receive a new ",
+                newAssetOptions.map((o) => o.ticker).join(", "),
+                " asset"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: ArrowForward, className: "text-icon-lg text-foreground/55 transition-colors group-hover:text-secondary-content" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      BottomSheet,
+      {
+        open: showAddAssetModal,
+        title: "Add an asset",
+        onClose: () => setShowAddAssetModal(false),
+        children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: newAssetOptions.map((option) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
+            className: cn(
+              "group flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left shadow-raised transition-all hover:shadow-card-hover",
+              option.idleClass
+            ),
+            onClick: () => {
+              setShowAddAssetModal(false);
+              handleAddNewAsset(option.account);
+            },
+            children: [
+              option.account === "LIQUID" ? /* @__PURE__ */ jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-network-liquid/10", children: /* @__PURE__ */ jsx(LiquidNetworkIcon, { className: "size-5" }) }) : /* @__PURE__ */ jsx(AssetIcon, { ticker: option.ticker, size: 36, className: "flex-shrink-0" }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("div", { className: cn("text-body font-bold tracking-wide text-foreground", option.titleHoverClass), children: option.title }),
+                /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xxs text-foreground/55", children: ADD_ASSET_SUBTITLE[option.account] })
+              ] }),
+              /* @__PURE__ */ jsx(IconGlyph, { glyph: Add, size: "sm", className: "text-foreground/55 transition-colors group-hover:text-foreground/60" })
+            ]
+          },
+          option.account
+        )) })
+      }
+    )
+  ] });
+}
+
+export {
+  DepositAssetSelection
+};

package/dist/web/chunk-4UMKXXAK.js

@@ -0,0 +1,33 @@
+"use client";
+import {
+  Label
+} from "./chunk-H3GYLFHP.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/form-field.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FormField({ label, children, id: idProp, hint, error, className }) {
+  const generated = React.useId();
+  const id = idProp ?? children.props.id ?? `field-${generated.replace(/:/g, "")}`;
+  const hintId = hint ? `${id}-hint` : void 0;
+  const errorId = error ? `${id}-error` : void 0;
+  const describedBy = [children.props["aria-describedby"], hintId, errorId].filter(Boolean).join(" ") || void 0;
+  const control = React.cloneElement(children, {
+    id,
+    "aria-describedby": describedBy,
+    ...error ? { "aria-invalid": true } : {}
+  });
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "form-field", className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label }),
+    control,
+    hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "m-0 text-caption text-muted-foreground", children: hint }),
+    error && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "m-0 text-caption text-danger-fg", children: error })
+  ] });
+}
+
+export {
+  FormField
+};