@gearbox-protocol/permissionless-ui 1.26.2 → 1.26.3

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

@@ -1,16 +1,16 @@
-import { jsxs as y, jsx as r } from "react/jsx-runtime";
-import { useMemo as v, useCallback as ee, useRef as L } from "react";
-import { toast as te } from "sonner";
-import { useIsMobile as oe } from "../../hooks/use-media-query.js";
+import { jsxs as y, jsx as i } from "react/jsx-runtime";
+import { useMemo as S, useCallback as oe, useRef as C } from "react";
+import { toast as ne } from "sonner";
+import { useIsMobile as ie } from "../../hooks/use-media-query.js";
 import "@gearbox-protocol/sdk";
-import { cn as re } from "../../utils/cn.js";
+import { cn as le } from "../../utils/cn.js";
 import "luxon";
 import "../../utils/z-index.js";
-import { RangeButtons as ne } from "../buttons/range-buttons/range-buttons.js";
-import { DEFAULT_SERIES_COLORS as A, getSeriesColorPalette as ie } from "../graph/graph.js";
-import { GraphViewWithData as le } from "../graph/graph-view.js";
-import { GraphDropdown as se } from "./graph-dropdown.js";
-const ce = ({ size: e = 16 }) => /* @__PURE__ */ y(
+import { RangeButtons as se } from "../buttons/range-buttons/range-buttons.js";
+import { DEFAULT_SERIES_COLORS as M, getSeriesColorPalette as ce } from "../graph/graph.js";
+import { GraphViewWithData as ue } from "../graph/graph-view.js";
+import { GraphDropdown as me } from "./graph-dropdown.js";
+const ae = ({ size: e = 16 }) => /* @__PURE__ */ y(
   "svg",
   {
     width: e,
@@ -23,11 +23,11 @@ const ce = ({ size: e = 16 }) => /* @__PURE__ */ y(
     strokeLinejoin: "round",
     "aria-label": "Expand fullscreen",
     children: [
-      /* @__PURE__ */ r("title", { children: "Expand fullscreen" }),
-      /* @__PURE__ */ r("path", { d: "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" })
+      /* @__PURE__ */ i("title", { children: "Expand fullscreen" }),
+      /* @__PURE__ */ i("path", { d: "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" })
     ]
   }
-), ue = ({ size: e = 16 }) => /* @__PURE__ */ y(
+), de = ({ size: e = 16 }) => /* @__PURE__ */ y(
   "svg",
   {
     width: e,
@@ -40,202 +40,206 @@ const ce = ({ size: e = 16 }) => /* @__PURE__ */ y(
     strokeLinejoin: "round",
     "aria-label": "Exit fullscreen",
     children: [
-      /* @__PURE__ */ r("title", { children: "Exit fullscreen" }),
-      /* @__PURE__ */ r("path", { d: "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" })
+      /* @__PURE__ */ i("title", { children: "Exit fullscreen" }),
+      /* @__PURE__ */ i("path", { d: "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" })
     ]
   }
-), R = "permissionless-ui:tradingview-series-colors:";
-function O(e) {
+), z = "permissionless-ui:tradingview-series-colors:";
+function E(e) {
   if (typeof window > "u" || !window.localStorage)
     return /* @__PURE__ */ new Map();
   try {
-    const t = window.localStorage.getItem(R + e);
+    const t = window.localStorage.getItem(z + e);
     if (!t) return /* @__PURE__ */ new Map();
-    const i = JSON.parse(t);
-    return i == null || typeof i != "object" ? /* @__PURE__ */ new Map() : new Map(
-      Object.entries(i).filter(
-        ([, s]) => typeof s == "number" && s >= 0 && s < A.length
+    const s = JSON.parse(t);
+    return s == null || typeof s != "object" ? /* @__PURE__ */ new Map() : new Map(
+      Object.entries(s).filter(
+        ([, c]) => typeof c == "number" && c >= 0 && c < M.length
       )
     );
   } catch {
     return /* @__PURE__ */ new Map();
   }
 }
-function ae(e, t) {
+function fe(e, t) {
   if (!(typeof window > "u" || !window.localStorage))
     try {
       window.localStorage.setItem(
-        R + e,
+        z + e,
         JSON.stringify(Object.fromEntries(t))
       );
     } catch {
     }
 }
-function me(e, t) {
+function _(e, t) {
   if (t.size === 0) return;
-  const i = O(e);
-  for (const [s, w] of t)
-    i.set(s, w);
-  ae(e, i);
+  const s = E(e);
+  for (const [c, h] of t)
+    s.set(c, h);
+  fe(e, s);
 }
-function Me({
+function Ne({
   data: e,
   yMeasureUnit: t,
-  height: i = 306,
-  defaultGraph: s,
-  onGraphSelected: w,
-  graphs: S,
-  isMultipleSelect: _,
-  range: V,
-  rangeList: I,
-  setRange: z,
-  onGraphExpanded: C,
-  isGraphExpanded: B,
-  onUnselectSeries: D,
-  graphsWithNoData: F,
-  loadingGraphs: T,
-  noDataMessage: E = "No data available for this graph",
-  currentValueDecimals: W,
-  containerClassName: H,
-  useSharedPriceScale: J,
-  showCurrentValue: $,
-  yScaleMin: X,
-  yScaleMinMultiple: q,
-  seriesColorPersistenceKey: h,
-  ...Q
+  height: s = 306,
+  defaultGraph: c,
+  onGraphSelected: h,
+  graphs: d,
+  isMultipleSelect: V,
+  range: B,
+  rangeList: k,
+  setRange: F,
+  onGraphExpanded: A,
+  isGraphExpanded: T,
+  onUnselectSeries: W,
+  graphsWithNoData: D,
+  loadingGraphs: H,
+  noDataMessage: N = "No data available for this graph",
+  currentValueDecimals: J,
+  containerClassName: $,
+  useSharedPriceScale: X,
+  showCurrentValue: q,
+  yScaleMin: Q,
+  yScaleMinMultiple: Y,
+  seriesColorPersistenceKey: u,
+  ...Z
 }) {
-  const f = v(() => Array.isArray(e) ? e : e ? [e] : [], [e]), M = v(() => Array.isArray(e) && e.length > 1, [e]), N = oe(), Y = ee(
-    (b, j) => {
-      te.error(E);
+  const b = S(() => Array.isArray(e) ? e : e ? [e] : [], [e]), j = S(() => Array.isArray(e) && e.length > 1, [e]), R = ie(), G = oe(
+    (p, v) => {
+      ne.error(N);
     },
-    [E]
-  ), Z = v(() => {
+    [N]
+  ), U = S(() => {
     if (t)
       return Array.isArray(t) ? t[0] : t;
-  }, [t]), P = (!N && C || I.length > 0 || w && S && s) && /* @__PURE__ */ y("div", { className: "z-10 w-full flex flex-row flex-wrap sm:flex-nowrap items-center gap-2", children: [
-    /* @__PURE__ */ r("div", { children: w && S && s && /* @__PURE__ */ r(
-      se,
+  }, [t]), P = (!R && A || k.length > 0 || h && d && c) && /* @__PURE__ */ y("div", { className: "z-10 w-full flex flex-row flex-wrap sm:flex-nowrap items-center gap-2", children: [
+    /* @__PURE__ */ i("div", { children: h && d && c && /* @__PURE__ */ i(
+      me,
       {
-        onSelected: w,
-        items: S,
-        defaultItem: s,
-        multiple: _,
-        graphsWithNoData: F,
-        loadingGraphs: T,
-        onNoDataSelected: Y
+        onSelected: h,
+        items: d,
+        defaultItem: c,
+        multiple: V,
+        graphsWithNoData: D,
+        loadingGraphs: H,
+        onNoDataSelected: G
       }
     ) }),
     /* @__PURE__ */ y("div", { className: "flex flex-row flex-nowrap justify-start sm:justify-end items-center flex-1", children: [
-      /* @__PURE__ */ r(ne, { range: V, rangeList: I, setRange: z }),
-      !N && C && /* @__PURE__ */ r(
+      /* @__PURE__ */ i(se, { range: B, rangeList: k, setRange: F }),
+      !R && A && /* @__PURE__ */ i(
         "button",
         {
           type: "button",
           className: "px-2.5 py-1.5 flex min-w-[44px] min-h-[26px] justify-center items-center text-xs leading-[14px] font-medium text-center rounded-md border cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring bg-muted border-muted text-muted-foreground hover:border-secondary ml-1.5",
-          onClick: C,
-          children: B ? /* @__PURE__ */ r(ue, { size: 16 }) : /* @__PURE__ */ r(ce, { size: 16 })
+          onClick: A,
+          children: T ? /* @__PURE__ */ i(de, { size: 16 }) : /* @__PURE__ */ i(ae, { size: 16 })
         }
       )
     ] })
-  ] }), u = L(/* @__PURE__ */ new Map()), x = L(0), G = v(() => {
-    const b = Array.isArray(t) ? t : void 0;
-    if (h && f.length > 0) {
-      const l = O(h);
-      let m = -1;
-      for (const d of f) {
-        const p = d?.title || "";
-        if (!p) continue;
-        const a = l.get(p);
-        !u.current.has(p) && a !== void 0 && (u.current.set(p, a), a > m && (m = a));
-      }
-      m >= 0 && (x.current = Math.max(
-        x.current,
-        m + 1
-      ));
+  ] }), n = C(/* @__PURE__ */ new Map()), f = C(0), L = C(!1);
+  if (d && d.length > 0 && !L.current) {
+    L.current = !0;
+    const p = u ? E(u) : /* @__PURE__ */ new Map(), v = String(d[0].value);
+    n.current.set(v, 0), f.current = 1;
+    for (let r = 1; r < d.length; r++) {
+      const m = String(d[r].value);
+      if (n.current.has(m)) continue;
+      const x = p.get(m) ?? r;
+      n.current.set(m, x), f.current = Math.max(f.current, x + 1);
+    }
+    u && _(
+      u,
+      n.current
+    );
+  }
+  const K = S(() => {
+    const p = Array.isArray(t) ? t : void 0;
+    if (u) {
+      const r = E(u);
+      for (const [m, w] of r)
+        n.current.has(m) || (n.current.set(m, w), f.current = Math.max(
+          f.current,
+          w + 1
+        ));
     }
-    const j = f.map((l, m) => {
-      const d = l?.title || `Series ${m + 1}`;
-      if (!u.current.has(d)) {
+    const v = b.map((r, m) => {
+      const w = r?.title || `Series ${m + 1}`, x = r?.id || w;
+      if (!n.current.has(x)) {
         const o = new Set(
-          Array.from(u.current.values())
+          Array.from(n.current.values())
         );
-        let n = x.current;
-        for (let c = 0; c < A.length; c++) {
-          const g = (x.current + c) % A.length;
+        let l = f.current;
+        for (let a = 0; a < M.length; a++) {
+          const g = (f.current + a) % M.length;
           if (!o.has(g)) {
-            n = g;
+            l = g;
             break;
           }
         }
-        u.current.set(d, n), x.current = n + 1;
+        n.current.set(x, l), f.current = l + 1;
       }
-      const p = u.current.get(d) ?? 0, a = ie(p), U = [...l?.data || []].sort((o, n) => {
-        const c = typeof o.time == "number" ? o.time : Number(o.time), g = typeof n.time == "number" ? n.time : Number(n.time);
-        return c - g;
-      }).reduce((o, n) => {
-        const c = n.time;
-        return o.length === 0 || o[o.length - 1].time !== c ? o.push({
-          time: c,
-          value: n.value
-        }) : o[o.length - 1] = {
-          time: c,
-          value: n.value
-        }, o;
-      }, []), k = l?.lineColor ?? l?.color ?? void 0;
+      const te = n.current.get(x) ?? 0, I = ce(te), re = [...r?.data || []].sort((o, l) => {
+        const a = typeof o.time == "number" ? o.time : Number(o.time), g = typeof l.time == "number" ? l.time : Number(l.time);
+        return a - g;
+      }).reduce((o, l) => {
+        const a = l.time;
+        return o.length === 0 || o[o.length - 1].time !== a ? o.push({ time: a, value: l.value }) : o[o.length - 1] = { time: a, value: l.value }, o;
+      }, []), O = r?.lineColor ?? r?.color ?? void 0;
       return {
-        data: U,
-        label: d,
-        yMeasureUnit: b?.[m] ?? (Array.isArray(t) ? void 0 : t),
-        ...k != null ? {
-          lineColor: k,
-          ...l?.topColor != null && {
-            topColor: l.topColor
+        data: re,
+        label: w,
+        yMeasureUnit: p?.[m] ?? (Array.isArray(t) ? void 0 : t),
+        ...O != null ? {
+          lineColor: O,
+          ...r?.topColor != null && {
+            topColor: r.topColor
           },
-          ...l?.bottomColor != null && {
-            bottomColor: l.bottomColor
+          ...r?.bottomColor != null && {
+            bottomColor: r.bottomColor
           }
         } : {
-          color: a.line,
-          topColor: a.top,
-          bottomColor: a.bottom
+          color: I.line,
+          topColor: I.top,
+          bottomColor: I.bottom
         }
       };
     });
-    return h && u.current.size > 0 && me(
-      h,
-      u.current
-    ), j;
-  }, [f, t, h]), K = M && f.length > 0 ? f.some((b) => !b) : !e;
-  return /* @__PURE__ */ r(
+    return u && n.current.size > 0 && _(
+      u,
+      n.current
+    ), v;
+  }, [b, t, u]), ee = j && b.length > 0 ? b.some((p) => !p) : !e;
+  return /* @__PURE__ */ i(
     "div",
     {
       style: {
         width: "100%",
-        height: i ? `${i}px` : void 0
+        height: s ? `${s}px` : void 0
       },
       className: "w-full",
-      children: /* @__PURE__ */ r(
-        le,
+      children: /* @__PURE__ */ i(
+        ue,
         {
-          series: G,
-          loading: K,
+          series: K,
+          loading: ee,
           toolbar: P,
-          size: i ? "full" : "default",
-          containerClassName: re("h-full", H),
-          showLegend: M,
-          onUnselectSeries: D,
-          yMeasureUnit: Z,
-          currentValueDecimals: W,
-          useSharedPriceScale: J,
-          showCurrentValue: $,
-          yScaleMin: X,
-          yScaleMinMultiple: q,
-          ...Q
+          size: s ? "full" : "default",
+          containerClassName: le("h-full", $),
+          showLegend: j,
+          onUnselectSeries: W,
+          yMeasureUnit: U,
+          currentValueDecimals: J,
+          useSharedPriceScale: X,
+          showCurrentValue: q,
+          yScaleMin: Q,
+          yScaleMinMultiple: Y,
+          ...Z
         }
       )
     }
   );
 }
 export {
-  Me as TradingView
+  Ne as TradingView
 };