@gearbox-protocol/ui-kit 4.0.0-next.6 → 4.0.0-next.60

package/dist/esm/components/{detailed-page-title/detailed-page-title-copy-button.js → base/detailed-page-title/copy-button.js}

@@ -1,19 +1,17 @@
 import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { IconCopy as d } from "@gearbox-protocol/static";
+import { faCheck as d } from "@fortawesome/free-solid-svg-icons";
+import { IconCopy as y } from "@gearbox-protocol/static";
 import * as r from "react";
-import { IconButton as y } from "../icon-button/icon-button.js";
-import { faCheck as x } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as C } from "../icons/fa-icon.js";
-import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
-import "../tooltip/tooltip.js";
-import { FormattedMessageTyped as g } from "../typed-intl/index.js";
-import { useIsMobile as h } from "../../hooks/use-media-query.js";
-import "@gearbox-protocol/sdk";
-import { cn as s } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
+import { IconButton as x } from "../../icon-button/icon-button.js";
+import { FaIcon as C } from "../../icons/fa-icon.js";
+import { SimpleTooltip as T } from "../../tooltip/simple-tooltip.js";
+import "../../tooltip/tooltip.js";
+import { FormattedMessageTyped as g } from "../../typed-intl/index.js";
+import { useIsMobile as h } from "../../../hooks/use-media-query.js";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as s } from "../../../utils/cn.js";
 import "luxon";
-import "../../utils/z-index.js";
+import "../../../utils/z-index.js";
 const I = r.forwardRef(function({ toCopy: t, className: n }, c) {
   const l = h(), [o, a] = r.useState(!1), i = r.useRef(null), p = l ? 32 : 40, m = async () => {
     if (t)
@@ -29,7 +27,7 @@ const I = r.forwardRef(function({ toCopy: t, className: n }, c) {
     T,
     {
       title: /* @__PURE__ */ f(
-        y,
+        x,
         {
           ref: c,
           buttonType: "outlined",
@@ -45,7 +43,7 @@ const I = r.forwardRef(function({ toCopy: t, className: n }, c) {
                   "absolute inset-0 flex items-center justify-center transition-all duration-200",
                   o ? "opacity-100 scale-100 text-success" : "opacity-0 scale-50 text-foreground"
                 ),
-                children: /* @__PURE__ */ e(C, { icon: x, className: "size-4" })
+                children: /* @__PURE__ */ e(C, { icon: d, className: "size-4" })
               }
             ),
             /* @__PURE__ */ e(
@@ -55,7 +53,7 @@ const I = r.forwardRef(function({ toCopy: t, className: n }, c) {
                   "flex items-center justify-center transition-all duration-200 text-foreground",
                   o ? "opacity-0 scale-50" : "opacity-100 scale-100"
                 ),
-                children: /* @__PURE__ */ e(d, { size: 15 })
+                children: /* @__PURE__ */ e(y, { size: 15 })
               }
             )
           ]

package/dist/esm/components/base/detailed-page-title/detailed-page-title.js

@@ -1,26 +1,23 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import { PageTitle as N } from "../page-title/page-title.js";
-import { Stack as i } from "../stack/stack.js";
-import { DetailedPageTitleCopyButton as j } from "../../detailed-page-title/detailed-page-title-copy-button.js";
-import { DetailedPageTitleExplorerDropdown as x } from "../../detailed-page-title/detailed-page-title-explorer-dropdown.js";
-import { TokenSymbol as y } from "../../token-symbol/token-symbol.js";
-import "react";
-import "@gearbox-protocol/sdk";
+import { Stack as r } from "../stack/stack.js";
+import { DetailedPageTitleExplorerDropdown as j } from "../../detailed-page-title/detailed-page-title-explorer-dropdown.js";
+import { TokenSymbol as x } from "../../token-symbol/token-symbol.js";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as m } from "../../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../utils/z-index.js";
 import { DetailedPageTitleTest as s } from "./constants.js";
-function K({
+import { DetailedPageTitleCopyButton as y } from "./copy-button.js";
+function G({
   title: c,
-  browserTitle: p,
+  browserTitle: d,
   token: n,
-  icon: d,
+  icon: p,
   tokenIconSize: u = 32,
   disabled: g = !1,
-  toCopy: l,
-  explorerLinks: t,
+  toCopy: i,
+  explorerLinks: e,
   badges: f,
   actions: a,
   buttonsSlot: o,
@@ -28,17 +25,17 @@ function K({
   actionsPosition: h = "left",
   className: T
 }) {
-  const D = n ? /* @__PURE__ */ e(
+  const D = n ? /* @__PURE__ */ t(
     "span",
     {
       className: m(
         "inline-flex shrink-0 self-center",
         g ? "grayscale" : void 0
       ),
-      children: /* @__PURE__ */ e(y, { size: u, token: n })
+      children: /* @__PURE__ */ t(x, { size: u, token: n })
     }
-  ) : d, P = o != null || a != null || l != null || t != null && t.length > 0 ? /* @__PURE__ */ r(
-    i,
+  ) : p, P = o != null || a != null || i != null || e != null && e.length > 0 ? /* @__PURE__ */ l(
+    r,
     {
       direction: "row",
       align: "center",
@@ -48,25 +45,25 @@ function K({
       children: [
         a,
         o,
-        l != null ? /* @__PURE__ */ e(j, { toCopy: l }) : null,
-        t != null && t.length > 0 ? /* @__PURE__ */ e(
-          x,
+        i != null ? /* @__PURE__ */ t(y, { toCopy: i }) : null,
+        e != null && e.length > 0 ? /* @__PURE__ */ t(
+          j,
           {
-            explorerLinks: [...t]
+            explorerLinks: [...e]
           }
         ) : null
       ]
     }
   ) : null;
-  return /* @__PURE__ */ r(
-    i,
+  return /* @__PURE__ */ l(
+    r,
     {
       gap: "sm",
       className: m("min-w-0", T),
       "data-testid": s.root,
       children: [
-        /* @__PURE__ */ r(
-          i,
+        /* @__PURE__ */ l(
+          r,
           {
             direction: "row",
             align: "center",
@@ -75,9 +72,9 @@ function K({
             wrap: !0,
             className: "w-full",
             children: [
-              /* @__PURE__ */ r(i, { direction: "row", align: "center", gap: "sm", wrap: !0, className: "min-w-0", children: [
+              /* @__PURE__ */ l(r, { direction: "row", align: "center", gap: "sm", wrap: !0, className: "min-w-0", children: [
                 D,
-                /* @__PURE__ */ e(N, { title: c, browserTitle: p }),
+                /* @__PURE__ */ t(N, { title: c, browserTitle: d }),
                 f
               ] }),
               P
@@ -90,6 +87,6 @@ function K({
   );
 }
 export {
-  K as DetailedPageTitle,
+  G as DetailedPageTitle,
   s as DetailedPageTitleTest
 };

package/dist/esm/components/base/details-view/detail-aside/detail-aside-scope.js

@@ -1,5 +1,5 @@
 import { jsx as u } from "react/jsx-runtime";
-import { createContext as l, useContext as a, useCallback as s, useRef as A, useMemo as f } from "react";
+import { createContext as l, useRef as A, useCallback as s, useMemo as f, useContext as a } from "react";
 import { defaultQuerySelectorAnchor as d } from "./sticky-controller.js";
 const i = l(null);
 function g({

package/dist/esm/components/base/details-view/detail-aside/detail-aside-screen-layout.js

@@ -1,42 +1,39 @@
 import { jsx as i } from "react/jsx-runtime";
 import { MainAsideLayout as n } from "../../../layout/main-aside-layout/main-aside-layout.js";
-import "react";
-import "@gearbox-protocol/sdk";
-import { cn as o } from "../../../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as e } from "../../../../utils/cn.js";
 import "luxon";
 import "../../../../utils/z-index.js";
 import { DETAIL_MAIN_ASIDE_CLASS_NAME as d, DETAIL_MAIN_ASIDE_LAYOUT_CLASS_NAME as c } from "./constants.js";
 import { DetailAsideScope as _ } from "./detail-aside-scope.js";
 import { DetailAsideWrapper as f } from "./detail-aside-wrapper.js";
-function x({
-  children: t,
+function C({
+  children: o,
   aside: r,
-  mainRef: e,
-  asidePosition: m,
-  centeredMain: a,
-  className: p,
-  asideClassName: A,
-  mainClassName: s
+  mainRef: t,
+  asidePosition: a,
+  centeredMain: m,
+  className: A,
+  asideClassName: s,
+  mainClassName: l
 }) {
-  const l = r != null ? /* @__PURE__ */ i(f, { children: r }) : null;
+  const p = r != null ? /* @__PURE__ */ i(f, { children: r }) : null;
   return /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
     n,
     {
-      className: o(c, p),
-      asideClassName: o(d, A),
-      mainClassName: s,
-      mainRef: e,
-      aside: l,
-      asidePosition: m,
-      centeredMain: a,
+      className: e(c, A),
+      asideClassName: e(d, s),
+      mainClassName: l,
+      mainRef: t,
+      aside: p,
+      asidePosition: a,
+      centeredMain: m,
       variant: "detail",
       stickyAside: !1,
-      children: t
+      children: o
     }
   ) });
 }
 export {
-  x as DetailAsideScreenLayout
+  C as DetailAsideScreenLayout
 };

package/dist/esm/components/base/details-view/index.js

@@ -1,12 +1,14 @@
-import { AsideAlignAnchor as t } from "./detail-aside/detail-aside-scope.js";
-import { DetailAsideScreenLayout as o } from "./detail-aside/detail-aside-screen-layout.js";
-import { DetailsView as s, DetailsViewLeftPane as l, DetailsViewManagePane as n } from "./details-view.js";
-import { DetailsViewTest as D } from "./constants.js";
+import { AsideAlignAnchor as t, DetailAsideScope as a, useDetailAsideAnchorGetter as o } from "./detail-aside/detail-aside-scope.js";
+import { DetailAsideScreenLayout as s } from "./detail-aside/detail-aside-screen-layout.js";
+import { DetailsView as n, DetailsViewLeftPane as A, DetailsViewManagePane as D } from "./details-view.js";
+import { DetailsViewTest as p } from "./constants.js";
 export {
   t as AsideAlignAnchor,
-  o as DetailAsideScreenLayout,
-  s as DetailsView,
-  l as DetailsViewLeftPane,
-  n as DetailsViewManagePane,
-  D as DetailsViewTest
+  a as DetailAsideScope,
+  s as DetailAsideScreenLayout,
+  n as DetailsView,
+  A as DetailsViewLeftPane,
+  D as DetailsViewManagePane,
+  p as DetailsViewTest,
+  o as useDetailAsideAnchorGetter
 };

package/dist/esm/components/base/health-factor-block/health-factor-block.js

@@ -1,52 +1,67 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useTitleText as h } from "../text/use-title-text.js";
-import { FadeoutLoading as s } from "../../fadeout-loading/fadeout-loading.js";
-import { HealthFactor as c } from "../../health-factor/health-factor.js";
-import { FormattedMessageTyped as n } from "../../typed-intl/index.js";
-import { VerticalIndicator as g } from "../../vertical-indicator/vertical-indicator.js";
+import { jsx as e } from "react/jsx-runtime";
+import { useTitleText as g } from "../text/use-title-text.js";
+import { FadeoutLoading as c } from "../../fadeout-loading/fadeout-loading.js";
+import { HealthFactor as m } from "../../health-factor/health-factor.js";
+import { FormattedMessageTyped as p } from "../../typed-intl/index.js";
+import { VerticalIndicator as x } from "../../vertical-indicator/vertical-indicator.js";
 import { HealthFactorBlockTest as t } from "./constants.js";
-function b({
-  healthFactor: e,
-  healthFactorTo: a,
-  debt: r,
-  debtTo: p,
-  zone: i,
-  isLoading: l,
+function N({
+  healthFactor: a,
+  healthFactorTo: i,
+  debt: l,
+  debtTo: u,
+  approximate: r,
+  zone: n,
+  isLoading: s,
   title: d,
-  tip: u,
-  testId: v
+  tip: v,
+  testId: f
 }) {
-  const f = h(), m = a !== void 0;
-  return /* @__PURE__ */ o(
-    g,
+  const h = g(), o = i !== void 0;
+  return /* @__PURE__ */ e(
+    x,
     {
       align: "center",
       dimPreviousValue: !1,
-      "data-testid": v ?? t.root,
-      label: d !== void 0 ? f(d) : /* @__PURE__ */ o(n, { messageId: "components.healthFactorBlock.label" }),
-      tip: u ?? /* @__PURE__ */ o(n, { messageId: "components.healthFactorBlock.tip" }),
-      value: /* @__PURE__ */ o(s, { loading: l, children: e === void 0 ? /* @__PURE__ */ o("span", { "data-testid": t.value, children: "—" }) : /* @__PURE__ */ o(
-        c,
+      "data-testid": f ?? t.root,
+      label: d !== void 0 ? h(d) : /* @__PURE__ */ e(p, { messageId: "components.healthFactorBlock.label" }),
+      tip: v ?? /* @__PURE__ */ e(p, { messageId: "components.healthFactorBlock.tip" }),
+      value: /* @__PURE__ */ e(c, { loading: s, children: a === void 0 ? /* @__PURE__ */ e("span", { "data-testid": t.value, children: "—" }) : /* @__PURE__ */ e(
+        "span",
         {
-          value: e,
-          debt: r,
-          zone: m ? void 0 : i,
-          "data-testid": t.value
+          className: "inline-flex items-center",
+          "data-testid": t.value,
+          children: /* @__PURE__ */ e(
+            m,
+            {
+              value: a,
+              debt: l,
+              zone: o ? void 0 : n,
+              approximate: r && !o
+            }
+          )
         }
       ) }),
-      valueTo: m ? /* @__PURE__ */ o(s, { loading: l, children: /* @__PURE__ */ o(
-        c,
+      valueTo: o ? /* @__PURE__ */ e(c, { loading: s, children: /* @__PURE__ */ e(
+        "span",
         {
-          value: a,
-          debt: p ?? r,
-          zone: i,
-          "data-testid": t.valueTo
+          className: "inline-flex items-center",
+          "data-testid": t.valueTo,
+          children: /* @__PURE__ */ e(
+            m,
+            {
+              value: i,
+              debt: u ?? l,
+              zone: n,
+              approximate: r
+            }
+          )
         }
       ) }) : void 0
     }
   );
 }
 export {
-  b as HealthFactorBlock,
+  N as HealthFactorBlock,
   t as HealthFactorBlockTest
 };

package/dist/esm/components/base/history-chart/history-chart.js

@@ -1,110 +1,112 @@
-import { jsx as h } from "react/jsx-runtime";
-import { useMemo as g } from "react";
-import { useTitleText as E } from "../text/use-title-text.js";
+import { jsx as y } from "react/jsx-runtime";
+import { CHART_RANGES as b } from "@gearbox-protocol/sdk/model";
+import { useMemo as S } from "react";
+import { useTitleText as w } from "../text/use-title-text.js";
 import "@gearbox-protocol/static";
 import "../../checkbox/checkbox.js";
 import "../../checkbox/checkbox-labeled.js";
 import "../../select/select.js";
-import { TradingView as G } from "../../trading-view/trading-view.js";
-import { useIntlTyped as O } from "../../typed-intl/index.js";
-import { HistoryChartTest as R } from "./constants.js";
-const Y = ["1d", "1w", "1m", "1y", "max"], j = {
+import { TradingView as D } from "../../trading-view/trading-view.js";
+import { useIntlTyped as H } from "../../typed-intl/index.js";
+import { HistoryChartTest as M } from "./constants.js";
+const N = b, O = {
   "1d": "1D",
   "1w": "7D",
   "1m": "1M",
   "1y": "1Y",
   max: "MAX"
 };
-function q({
+function F({
   data: t,
-  range: o,
-  onRange: a,
-  isLoading: v = !1,
-  error: x,
-  yMeasureUnit: i = "none",
-  height: S,
+  range: r,
+  onRange: s,
+  isLoading: g = !1,
+  error: v,
+  yMeasureUnit: a = "none",
+  height: x,
   seriesTitles: c,
   priceLines: f,
   zones: u,
-  showCurrentValue: I = !1,
-  yScaleMin: w,
+  showCurrentValue: C = !1,
+  yScaleMin: I,
   title: A,
-  trailing: C,
-  dualYAxis: L
+  trailing: R,
+  dualYAxis: E
 }) {
-  const y = O(), b = E(), e = g(
-    () => Array.isArray(i) ? [...i] : void 0,
-    [i]
-  ), p = e != null && new Set(e).size > 1, d = L ?? p, l = e?.[0], D = g(() => {
-    const r = (n, m) => {
-      if (!d) return n;
-      if (p && e != null && l != null) {
-        const s = e[m] ?? l;
+  const h = H(), G = w(), o = S(
+    () => Array.isArray(a) ? a : void 0,
+    [a]
+  ), d = o != null && new Set(o).size > 1, l = E ?? d, p = o?.[0], L = S(() => {
+    const n = (i, e) => {
+      if (!l) return i;
+      if (d && o != null && p != null) {
+        const m = o[e] ?? p;
         return {
-          ...n,
-          priceScaleId: s === l ? "left" : "right"
+          ...i,
+          priceScaleId: m === p ? "left" : "right"
         };
       }
       return {
-        ...n,
-        priceScaleId: m === 0 ? "left" : "right"
+        ...i,
+        priceScaleId: e === 0 ? "left" : "right"
       };
     };
     if (t)
       return (Array.isArray(t) ? t : [t]).map(
-        (m, s) => r(H(c)(m), s)
+        (e, m) => n(T(c)(e), m)
       );
     if (c)
       return Object.entries(c).map(
-        ([n, m], s) => r(
+        ([i, e], m) => n(
           {
-            id: n,
-            title: m,
+            id: i,
+            title: e,
             data: []
           },
-          s
+          m
         )
       );
-  }, [t, c, p, d, l, e]);
-  return /* @__PURE__ */ h("div", { "data-testid": R.root, children: /* @__PURE__ */ h(
-    G,
+  }, [t, c, d, l, p, o]);
+  return /* @__PURE__ */ y("div", { "data-testid": M.root, children: /* @__PURE__ */ y(
+    D,
     {
-      data: D,
-      isLoading: v,
-      error: x ? y.formatMessage({ messageId: "components.historyChart.error" }) : void 0,
-      emptyMessage: y.formatMessage({
+      data: L,
+      isLoading: g,
+      error: v ? h.formatMessage({ messageId: "components.historyChart.error" }) : void 0,
+      emptyMessage: h.formatMessage({
         messageId: "components.historyChart.empty"
       }),
-      dualYAxis: d,
-      yMeasureUnit: Array.isArray(i) ? [...i] : i,
-      height: S,
-      rangeList: Y.map((r) => ({
-        value: r,
-        label: j[r]
+      dualYAxis: l,
+      useSharedPriceScale: !l,
+      yMeasureUnit: a,
+      height: x,
+      rangeList: N.map((n) => ({
+        value: n,
+        label: O[n]
       })),
-      range: o,
-      setRange: (r) => a(r),
+      range: r,
+      setRange: s,
       priceLineOptions: f ? [...f] : void 0,
       zoneOptions: u ? [...u] : void 0,
-      showCurrentValue: I,
-      yScaleMin: w,
+      showCurrentValue: C,
+      yScaleMin: I,
       disableZoom: !0,
-      title: A != null ? b(A) : void 0,
-      trailing: C
+      title: A != null ? G(A) : void 0,
+      trailing: R
     }
   ) });
 }
-function H(t) {
-  return (o) => ({
-    id: o.metric,
-    title: t?.[o.metric] ?? o.metric,
-    data: o.points.map((a) => ({
-      time: a.timestamp,
-      value: a.value
+function T(t) {
+  return (r) => ({
+    id: r.metric,
+    title: t?.[r.metric] ?? r.metric,
+    data: r.points.map((s) => ({
+      time: s.timestamp,
+      value: s.value
     }))
   });
 }
 export {
-  q as HistoryChart,
-  R as HistoryChartTest
+  F as HistoryChart,
+  M as HistoryChartTest
 };