@gearbox-protocol/ui-kit 4.0.0-next.62 → 4.0.0-next.64

package/dist/esm/components/trading-view/price-scale-titles.js

@@ -0,0 +1,52 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { cn as m } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
+import { resolvePriceScaleSides as n } from "../graph/series-config.js";
+import { TradingViewTest as s } from "./constants.js";
+function u({
+  series: e
+}) {
+  const i = n(e);
+  return (
+    // Half the card's gap below: the titles belong to the frame they sit on,
+    // not to the toolbar above them.
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: "-mb-1.5 flex w-full flex-row items-end justify-between gap-4",
+        "data-testid": s.priceScaleTitles,
+        children: [
+          /* @__PURE__ */ l(r, { side: "left", resolved: i }),
+          /* @__PURE__ */ l(r, { side: "right", resolved: i })
+        ]
+      }
+    )
+  );
+}
+function r({
+  side: e,
+  resolved: i
+}) {
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: m(
+        "flex min-w-0 flex-1 flex-col gap-0.5",
+        e === "left" ? "items-start text-left" : "items-end text-right"
+      ),
+      "data-testid": s.priceScaleTitle(e),
+      children: i.filter((t) => t.side === e).map(({ series: t }) => /* @__PURE__ */ l(
+        "span",
+        {
+          className: "max-w-full truncate text-xs font-medium leading-4 text-muted-foreground",
+          children: t.label
+        },
+        t.id ?? t.label
+      ))
+    }
+  );
+}
+export {
+  u as PriceScaleTitles
+};

package/dist/esm/components/trading-view/trading-view.js

@@ -1,26 +1,27 @@
-import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { useMemo as I, useCallback as we, useRef as N } from "react";
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { useMemo as I, useCallback as pe, useRef as N } from "react";
 import { toast as ve } from "sonner";
-import { SectionHeading as pe } from "../base/section-heading/section-heading.js";
-import { useIsMobile as xe } from "../../hooks/use-media-query.js";
-import { cn as Se } from "../../utils/cn.js";
+import { SectionHeading as Se } from "../base/section-heading/section-heading.js";
+import { useIsMobile as he } from "../../hooks/use-media-query.js";
+import { cn as xe } from "../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-import { GraphLegend as he } from "../graph/graph.js";
-import { GraphViewWithData as ge } from "../graph/graph-view.js";
-import { DEFAULT_SERIES_COLORS as k } from "../graph/graph-vocabulary.js";
-import { getSeriesColorPalette as ye } from "../graph/series-palette.js";
-import { Select as Ae, SelectTrigger as Ie, SelectValue as Ne, SelectContent as Ce, SelectItem as Me } from "../select/select.js";
-import { GraphDropdown as Re } from "./graph-dropdown.js";
-const Ee = {
+import { GraphLegend as ge } from "../graph/graph.js";
+import { GraphViewWithData as ye } from "../graph/graph-view.js";
+import { DEFAULT_SERIES_COLORS as j } from "../graph/graph-vocabulary.js";
+import { getSeriesColorPalette as Ae } from "../graph/series-palette.js";
+import { Select as Ie, SelectTrigger as Ne, SelectValue as Ce, SelectContent as Me, SelectItem as Re } from "../select/select.js";
+import { GraphDropdown as Te } from "./graph-dropdown.js";
+import { PriceScaleTitles as Ee } from "./price-scale-titles.js";
+const Oe = {
   expand: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3",
   exit: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"
-}, X = ({
+}, q = ({
   direction: r,
   size: t = 16
 }) => {
   const l = r === "expand" ? "Expand fullscreen" : "Exit fullscreen";
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ x(
     "svg",
     {
       width: t,
@@ -34,98 +35,99 @@ const Ee = {
       "aria-label": l,
       children: [
         /* @__PURE__ */ n("title", { children: l }),
-        /* @__PURE__ */ n("path", { d: Ee[r] })
+        /* @__PURE__ */ n("path", { d: Oe[r] })
       ]
     }
   );
-}, Te = {
+}, ke = {
   timeScale: { borderVisible: !1 },
   rightPriceScale: { borderVisible: !1 },
   leftPriceScale: { borderVisible: !1 }
-}, Q = "ui-kit:tradingview-series-colors:";
-function L(r) {
+}, Z = "ui-kit:tradingview-series-colors:";
+function V(r) {
   if (typeof window > "u" || !window.localStorage)
     return /* @__PURE__ */ new Map();
   try {
-    const t = window.localStorage.getItem(Q + r);
+    const t = window.localStorage.getItem(Z + r);
     if (!t) return /* @__PURE__ */ new Map();
     const l = JSON.parse(t);
     return l == null || typeof l != "object" ? /* @__PURE__ */ new Map() : new Map(
       Object.entries(l).filter(
-        ([, o]) => typeof o == "number" && o >= 0 && o < k.length
+        ([, o]) => typeof o == "number" && o >= 0 && o < j.length
       )
     );
   } catch {
     return /* @__PURE__ */ new Map();
   }
 }
-function Oe(r, t) {
+function Le(r, t) {
   if (!(typeof window > "u" || !window.localStorage))
     try {
       window.localStorage.setItem(
-        Q + r,
+        Z + r,
         JSON.stringify(Object.fromEntries(t))
       );
     } catch {
     }
 }
-function q(r, t) {
+function Q(r, t) {
   if (t.size === 0) return;
-  const l = L(r);
-  for (const [o, p] of t)
-    l.set(o, p);
-  Oe(r, l);
+  const l = V(r);
+  for (const [o, v] of t)
+    l.set(o, v);
+  Le(r, l);
 }
-function Pe({
+function Ke({
   data: r,
   yMeasureUnit: t,
   height: l = 306,
   defaultGraph: o,
-  onGraphSelected: p,
+  onGraphSelected: v,
   graphs: f,
-  isMultipleSelect: Y,
-  range: Z,
+  isMultipleSelect: P,
+  range: Y,
   rangeList: g,
-  setRange: P,
+  setRange: D,
   onGraphExpanded: C,
-  isGraphExpanded: D,
-  onUnselectSeries: j,
-  legendMarkers: V,
-  graphsWithNoData: U,
+  isGraphExpanded: U,
+  onUnselectSeries: _,
+  legendMarkers: z,
+  graphsWithNoData: K,
   loadingGraphs: M,
-  isLoading: _,
-  noDataMessage: z = "No data available for this graph",
-  currentValueDecimals: K,
-  containerClassName: G,
-  useSharedPriceScale: ee,
-  showCurrentValue: te,
-  yScaleMin: re,
-  yScaleMinMultiple: oe,
+  isLoading: F,
+  noDataMessage: H = "No data available for this graph",
+  currentValueDecimals: G,
+  containerClassName: ee,
+  useSharedPriceScale: te,
+  dualYAxis: B,
+  showCurrentValue: re,
+  yScaleMin: oe,
+  yScaleMinMultiple: ne,
   seriesColorPersistenceKey: d,
-  title: ne,
+  title: le,
   trailing: R,
-  ...le
+  ...ie
 }) {
-  const x = I(() => Array.isArray(r) ? r : r ? [r] : [], [r]), ie = I(() => Array.isArray(r) && r.length > 1, [r]), F = xe(), se = we(
+  const S = I(() => Array.isArray(r) ? r : r ? [r] : [], [r]), se = I(() => Array.isArray(r) && r.length > 1, [r]), T = he(), ce = pe(
     (u, y) => {
-      ve.error(z);
+      ve.error(H);
     },
-    [z]
-  ), ce = I(() => {
+    [H]
+  ), ue = I(() => {
     if (t)
       return Array.isArray(t) ? t[0] : t;
-  }, [t]), ue = !!(p && f && o), s = N(/* @__PURE__ */ new Map()), b = N(0), H = N(!1);
-  if (f && f.length > 0 && !H.current) {
-    H.current = !0;
-    const u = d ? L(d) : /* @__PURE__ */ new Map(), y = String(f[0].value);
+  }, [t]), de = !!(v && f && o), s = N(/* @__PURE__ */ new Map()), b = N(0), J = N(!1);
+  if (f && f.length > 0 && !J.current) {
+    J.current = !0;
+    const u = d ? V(d) : /* @__PURE__ */ new Map(), y = String(f[0].value);
     s.current.set(y, 0), b.current = 1;
     for (let e = 1; e < f.length; e++) {
       const m = String(f[e].value);
       if (s.current.has(m)) continue;
-      const S = u.get(m) ?? e;
-      s.current.set(m, S), b.current = Math.max(b.current, S + 1);
+      const h = u.get(m) ?? e;
+      s.current.set(m, h), b.current = Math.max(b.current, h + 1);
     }
-    d && q(
+    d && Q(
       d,
       s.current
     );
@@ -133,39 +135,39 @@ function Pe({
   const w = I(() => {
     const u = Array.isArray(t) ? t : void 0;
     if (d) {
-      const e = L(d);
-      for (const [m, v] of e)
-        s.current.has(m) || (s.current.set(m, v), b.current = Math.max(
+      const e = V(d);
+      for (const [m, p] of e)
+        s.current.has(m) || (s.current.set(m, p), b.current = Math.max(
           b.current,
-          v + 1
+          p + 1
         ));
     }
-    const y = x.map((e, m) => {
-      const v = e?.title || `Series ${m + 1}`, S = o != null ? Array.isArray(o) ? o[0]?.value ?? o[0] : typeof o == "object" && "value" in o ? o.value : o : null, T = x.length === 1 ? S != null ? String(S) : "single" : e?.id || v;
-      if (!s.current.has(T)) {
+    const y = S.map((e, m) => {
+      const p = e?.title || `Series ${m + 1}`, h = o != null ? Array.isArray(o) ? o[0]?.value ?? o[0] : typeof o == "object" && "value" in o ? o.value : o : null, k = S.length === 1 ? h != null ? String(h) : "single" : e?.id || p;
+      if (!s.current.has(k)) {
         const i = new Set(
           Array.from(s.current.values())
         );
         let c = b.current;
-        for (let a = 0; a < k.length; a++) {
-          const A = (b.current + a) % k.length;
+        for (let a = 0; a < j.length; a++) {
+          const A = (b.current + a) % j.length;
           if (!i.has(A)) {
             c = A;
             break;
           }
         }
-        s.current.set(T, c), b.current = c + 1;
+        s.current.set(k, c), b.current = c + 1;
       }
-      const fe = s.current.get(T) ?? 0, O = ye(fe), be = [...e?.data || []].sort((i, c) => {
+      const be = s.current.get(k) ?? 0, L = Ae(be), we = [...e?.data || []].sort((i, c) => {
         const a = typeof i.time == "number" ? i.time : Number(i.time), A = typeof c.time == "number" ? c.time : Number(c.time);
         return a - A;
       }).reduce((i, c) => {
         const a = c.time;
         return i.length === 0 || i[i.length - 1].time !== a ? i.push({ time: a, value: c.value }) : i[i.length - 1] = { time: a, value: c.value }, i;
-      }, []), $ = e?.lineColor ?? e?.color ?? void 0;
+      }, []), X = e?.lineColor ?? e?.color ?? void 0;
       return {
-        data: be,
-        label: v,
+        data: we,
+        label: p,
         ...e?.id != null && { id: e.id },
         yMeasureUnit: u?.[m] ?? (Array.isArray(t) ? void 0 : t),
         ...e?.priceScaleId != null && {
@@ -177,8 +179,8 @@ function Pe({
         ...e?.lineStyle != null && {
           lineStyle: e.lineStyle
         },
-        ...$ != null ? {
-          lineColor: $,
+        ...X != null ? {
+          lineColor: X,
           ...e?.topColor != null && {
             topColor: e.topColor
           },
@@ -186,65 +188,66 @@ function Pe({
             bottomColor: e.bottomColor
           }
         } : {
-          color: O.line,
-          topColor: O.top,
-          bottomColor: O.bottom
+          color: L.line,
+          topColor: L.top,
+          bottomColor: L.bottom
         }
       };
     });
-    return d && s.current.size > 0 && q(
+    return d && s.current.size > 0 && Q(
       d,
       s.current
     ), y;
-  }, [x, o, t, d]), B = _ !== void 0 ? _ : M !== void 0 ? M.size > 0 : ie && x.length > 0 ? x.some((u) => !u) : !r, J = N(w);
-  w.length > 0 && (J.current = w);
-  const W = w.length > 0 ? w : B ? J.current : w, E = ne, de = !F && C ? !0 : g.length > 0 || ue || E != null || R != null, me = p && f && o ? /* @__PURE__ */ n(
-    Re,
+  }, [S, o, t, d]), W = F !== void 0 ? F : M !== void 0 ? M.size > 0 : se && S.length > 0 ? S.some((u) => !u) : !r, $ = N(w);
+  w.length > 0 && ($.current = w);
+  const E = w.length > 0 ? w : W ? $.current : w, O = le, me = !T && C ? !0 : g.length > 0 || de || O != null || R != null, ae = v && f && o ? /* @__PURE__ */ n(
+    Te,
     {
-      onSelected: p,
+      onSelected: v,
       items: f,
       defaultItem: o,
-      multiple: Y,
-      graphsWithNoData: U,
+      multiple: P,
+      graphsWithNoData: K,
       loadingGraphs: M,
-      onNoDataSelected: se
+      onNoDataSelected: ce
     }
-  ) : E != null ? /* @__PURE__ */ n(pe, { className: "min-w-0 truncate", children: E }) : null, ae = de && /* @__PURE__ */ h("div", { className: "flex w-full flex-row flex-wrap items-center justify-between gap-3", children: [
-    /* @__PURE__ */ n("div", { className: "min-w-0 flex-1", children: me }),
-    /* @__PURE__ */ h("div", { className: "flex shrink-0 flex-row flex-nowrap items-center gap-3", children: [
+  ) : O != null ? /* @__PURE__ */ n(Se, { className: "min-w-0 truncate", children: O }) : null, fe = me && /* @__PURE__ */ x("div", { className: "flex w-full flex-row flex-wrap items-center justify-between gap-3", children: [
+    /* @__PURE__ */ n("div", { className: "min-w-0 flex-1", children: ae }),
+    /* @__PURE__ */ x("div", { className: "flex shrink-0 flex-row flex-nowrap items-center gap-3", children: [
       R,
       R != null && g.length > 0 ? /* @__PURE__ */ n("div", { className: "h-4 w-px shrink-0 bg-border" }) : null,
-      g.length > 0 ? /* @__PURE__ */ h(Ae, { value: Z, onValueChange: P, children: [
+      g.length > 0 ? /* @__PURE__ */ x(Ie, { value: Y, onValueChange: D, children: [
         /* @__PURE__ */ n(
-          Ie,
+          Ne,
           {
             size: "sm",
             className: "h-8 w-auto min-w-[4.5rem] gap-1.5 border-border bg-muted shadow-none",
-            children: /* @__PURE__ */ n(Ne, {})
+            children: /* @__PURE__ */ n(Ce, {})
           }
         ),
-        /* @__PURE__ */ n(Ce, { align: "end", children: g.map((u) => /* @__PURE__ */ n(Me, { value: u.value, children: u.label }, u.value)) })
+        /* @__PURE__ */ n(Me, { align: "end", children: g.map((u) => /* @__PURE__ */ n(Re, { value: u.value, children: u.label }, u.value)) })
       ] }) : null,
-      !F && C && /* @__PURE__ */ n(
+      !T && C && /* @__PURE__ */ n(
         "button",
         {
           type: "button",
           className: "flex min-h-[26px] min-w-[44px] cursor-pointer items-center justify-center rounded-md border border-muted bg-muted px-2.5 py-1.5 text-center text-xs font-medium leading-[14px] text-muted-foreground transition-colors hover:border-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
           onClick: C,
-          children: D ? /* @__PURE__ */ n(X, { direction: "exit", size: 16 }) : /* @__PURE__ */ n(X, { direction: "expand", size: 16 })
+          children: U ? /* @__PURE__ */ n(q, { direction: "exit", size: 16 }) : /* @__PURE__ */ n(q, { direction: "expand", size: 16 })
         }
       )
     ] })
   ] });
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ x(
     "div",
     {
-      className: Se(
+      className: xe(
         "flex w-full flex-col gap-3 rounded-lg border border-border bg-card p-4 shadow-none",
-        G
+        ee
       ),
       children: [
-        ae,
+        fe,
+        B && !T ? /* @__PURE__ */ n(Ee, { series: E }) : null,
         /* @__PURE__ */ n(
           "div",
           {
@@ -254,36 +257,37 @@ function Pe({
             },
             className: "w-full",
             children: /* @__PURE__ */ n(
-              ge,
+              ye,
               {
-                ...le,
+                ...ie,
                 series: w,
-                loading: B,
+                loading: W,
                 size: l ? "full" : "default",
                 padding: "none",
                 variant: "ghost",
                 className: "rounded-md border border-border bg-card",
                 containerClassName: "h-full overflow-hidden rounded-none border-0 bg-transparent shadow-none",
                 showLegend: !1,
-                onUnselectSeries: j,
-                yMeasureUnit: ce,
-                currentValueDecimals: K,
-                useSharedPriceScale: ee,
-                showCurrentValue: te,
-                yScaleMin: re,
-                yScaleMinMultiple: oe,
+                onUnselectSeries: _,
+                yMeasureUnit: ue,
+                currentValueDecimals: G,
+                useSharedPriceScale: te,
+                dualYAxis: B,
+                showCurrentValue: re,
+                yScaleMin: oe,
+                yScaleMinMultiple: ne,
                 hideDefaultTooltip: !0,
-                optionsOverrides: Te
+                optionsOverrides: ke
               }
             )
           }
         ),
-        W.length > 0 || (V?.length ?? 0) > 0 ? /* @__PURE__ */ n(
-          he,
+        E.length > 0 || (z?.length ?? 0) > 0 ? /* @__PURE__ */ n(
+          ge,
           {
-            series: W,
-            markers: V,
-            onUnselect: j,
+            series: E,
+            markers: z,
+            onUnselect: _,
             inline: !0
           }
         ) : null
@@ -292,5 +296,5 @@ function Pe({
   );
 }
 export {
-  Pe as TradingView
+  Ke as TradingView
 };