@gearbox-protocol/permissionless-ui 1.24.2 → 1.26.0

package/dist/esm/components/tab-control/tab-control.js

@@ -1,6 +1,6 @@
 import { jsx as f, jsxs as T, Fragment as S } from "react/jsx-runtime";
 import { useRef as b, useState as v, useCallback as p, useMemo as w, useEffect as N } from "react";
-import { useNavigationAdapter as y } from "../navigation-context/navigation-context.js";
+import { useNavigationAdapter as C } from "../navigation-context/navigation-context.js";
 import "@gearbox-protocol/sdk";
 import { cn as m } from "../../utils/cn.js";
 import "sonner";
@@ -8,26 +8,26 @@ import "luxon";
 import "../../utils/z-index.js";
 function U(n) {
   if (!n) return null;
-  const { width: r = 0, height: s = 0 } = n?.getBoundingClientRect() || {}, i = n?.offsetTop || 0, o = n?.offsetLeft || 0;
-  return { width: r, height: s, left: o, top: i };
+  const { width: r = 0, height: s = 0 } = n?.getBoundingClientRect() || {}, a = n?.offsetTop || 0, o = n?.offsetLeft || 0;
+  return { width: r, height: s, left: o, top: a };
 }
 function $(n, r, s) {
-  const i = b(null), [o, u] = v(null), l = b(null), c = p((e) => {
+  const a = b(null), [o, u] = v(null), l = b(null), c = p((e) => {
     u(e), l.current = e;
   }, []);
   return N(() => {
     const e = s.current[n], d = () => {
-      const a = U(e), h = a?.height !== l.current?.height, x = a?.width !== l.current?.width, g = a?.left !== l.current?.left, C = a?.top !== l.current?.top;
-      (h || x || g || C) && c(a);
+      const i = U(e), h = i?.height !== l.current?.height, x = i?.width !== l.current?.width, g = i?.left !== l.current?.left, y = i?.top !== l.current?.top;
+      (h || x || g || y) && c(i);
     };
-    i.current = d, d();
+    a.current = d, d();
     const t = e ? new ResizeObserver(d) : null;
     return e && t?.observe(e), () => {
       e && t?.unobserve(e);
     };
   }, [n, s, c]), N(() => {
     const e = r ? new ResizeObserver(() => {
-      i.current?.();
+      a.current?.();
     }) : null;
     return r && e?.observe(r), () => {
       r && e?.unobserve(r);
@@ -38,7 +38,7 @@ function A({
   className: n,
   tabs: r,
   state: s,
-  showBorder: i = !0,
+  showBorder: a = !0,
   tabItemWrapPadding: o,
   variant: u = "auto"
 }) {
@@ -46,70 +46,61 @@ function A({
     s.id,
     l.current,
     c
-  ), d = (t, a) => () => s.handleTabChange(t, a);
-  return /* @__PURE__ */ f(
+  ), d = (t, i) => () => s.handleTabChange(t, i);
+  return /* @__PURE__ */ f("div", { className: m("relative w-full flex flex-col flex-wrap", n), children: /* @__PURE__ */ T(
     "div",
     {
+      ref: l,
       className: m(
-        "relative w-full flex flex-col flex-wrap overflow-y-hidden",
-        n
+        "relative w-full max-w-full grow-0 shrink-0 basis-full flex items-stretch overflow-x-auto overflow-y-hidden",
+        "scrollbar-hidden",
+        a && "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-border"
       ),
-      children: /* @__PURE__ */ T(
-        "div",
-        {
-          ref: l,
-          className: m(
-            "relative w-full max-w-full grow-0 shrink-0 basis-full flex items-stretch overflow-x-auto overflow-y-hidden",
-            "scrollbar-hidden",
-            i && "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-border"
-          ),
-          children: [
-            e && /* @__PURE__ */ f(
-              "div",
-              {
-                className: "absolute left-0 h-[3px] bg-accent transition-[transform] duration-200 ease-in-out pointer-events-none bottom-[-1px]",
-                style: {
-                  width: `${e.width}px`,
-                  transform: `translate(${e.left}px)`
-                }
-              }
-            ),
-            r.map((t, a, h) => {
-              const x = a === h.length - 1;
-              return /* @__PURE__ */ f(
-                "button",
-                {
-                  ref: (g) => {
-                    c.current[t.id] = g;
-                  },
-                  type: "button",
-                  onClick: t.disabled ? void 0 : d(t.id, a),
-                  disabled: t.disabled,
-                  className: m(
-                    "flex items-center bg-transparent border-none shrink-0 text-foreground",
-                    o ? "" : "p-0 pb-3.5",
-                    u === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !x && "mr-10 max-[500px]:mr-8",
-                    t.disabled && "cursor-not-allowed",
-                    !t.disabled && "cursor-pointer",
-                    !t.disabled && "hover:text-foreground hover:[&>*]:text-foreground"
-                  ),
-                  style: o ? { padding: o } : void 0,
-                  children: t.item
-                },
-                `tab-item-${t.id}`
-              );
-            })
-          ]
-        }
-      )
+      children: [
+        e && /* @__PURE__ */ f(
+          "div",
+          {
+            className: "absolute left-0 h-[3px] bg-accent transition-[transform] duration-200 ease-in-out pointer-events-none bottom-[-1px]",
+            style: {
+              width: `${e.width}px`,
+              transform: `translate(${e.left}px)`
+            }
+          }
+        ),
+        r.map((t, i, h) => {
+          const x = i === h.length - 1;
+          return /* @__PURE__ */ f(
+            "button",
+            {
+              ref: (g) => {
+                c.current[t.id] = g;
+              },
+              type: "button",
+              onClick: t.disabled ? void 0 : d(t.id, i),
+              disabled: t.disabled,
+              className: m(
+                "flex items-center bg-transparent border-none shrink-0 text-foreground",
+                o ? "" : "p-0 pb-3.5",
+                u === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !x && "mr-10 max-[500px]:mr-8",
+                t.disabled && "cursor-not-allowed",
+                !t.disabled && "cursor-pointer",
+                !t.disabled && "hover:text-foreground hover:[&>*]:text-foreground"
+              ),
+              style: o ? { padding: o } : void 0,
+              children: t.item
+            },
+            `tab-item-${t.id}`
+          );
+        })
+      ]
     }
-  );
+  ) });
 }
 function B({
   icon: n,
   label: r,
   selected: s,
-  textSize: i = "default",
+  textSize: a = "default",
   amount: o
 }) {
   return /* @__PURE__ */ T(S, { children: [
@@ -128,8 +119,8 @@ function B({
       {
         className: m(
           "m-0 p-0 whitespace-nowrap",
-          i === "default" && "text-sm leading-[17px] font-normal",
-          i === "unset" && "text-[unset] leading-[unset] font-[unset]",
+          a === "default" && "text-sm leading-[17px] font-normal",
+          a === "unset" && "text-[unset] leading-[unset] font-[unset]",
           s ? "text-foreground" : "text-secondary-foreground"
         ),
         children: r
@@ -139,19 +130,19 @@ function B({
   ] });
 }
 function F(n, r = 0) {
-  const [s, i] = v(n), [o, u] = v(r), l = p((c, e) => {
-    i(c), u(e);
+  const [s, a] = v(n), [o, u] = v(r), l = p((c, e) => {
+    a(c), u(e);
   }, []);
   return { id: s, index: o, handleTabChange: l };
 }
 function I(n) {
-  const { useLocation: r, useNavigate: s } = y(), { hash: i } = r(), o = s(), u = w(
+  const { useLocation: r, useNavigate: s } = C(), { hash: a } = r(), o = s(), u = w(
     () => n.reduce(
-      (t, a, h) => (t[a.id] = { id: a.id, index: h }, t),
+      (t, i, h) => (t[i.id] = { id: i.id, index: h }, t),
       {}
     ),
     [n]
-  ), l = w(() => i.slice(1).toLowerCase(), [i]), { id: c, index: e } = u[l] || {}, d = p(
+  ), l = w(() => a.slice(1).toLowerCase(), [a]), { id: c, index: e } = u[l] || {}, d = p(
     (t) => {
       o(`#${t}`);
     },
@@ -168,9 +159,9 @@ function M({
   pathRoot: r,
   selectedSection: s
 }) {
-  const { useNavigate: i } = y(), o = i(), u = w(
+  const { useNavigate: a } = C(), o = a(), u = w(
     () => n.reduce(
-      (d, t, a) => (d[t.id] = { id: t.id, index: a }, d),
+      (d, t, i) => (d[t.id] = { id: t.id, index: i }, d),
       {}
     ),
     [n]

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

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