@gearbox-protocol/permissionless-ui 1.23.0 → 1.24.0

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

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

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

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