@gearbox-protocol/ui-kit 4.0.0-next.2 → 4.0.0-next.20

package/dist/esm/components/base/borrow-rate-block/borrow-rate-block.js

@@ -1,10 +1,10 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import { SimpleAccordion as p, SimpleAccordionItem as s } from "../../simple-accordion/simple-accordion.js";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { SimpleAccordion as l, SimpleAccordionItem as s } from "../../simple-accordion/simple-accordion.js";
 import { TipCard as c } from "../../tip-card/tip-card.js";
-import { FormattedMessageTyped as t } from "../../typed-intl/index.js";
+import { FormattedMessageTyped as e } from "../../typed-intl/index.js";
 import { Typography as d } from "../../typography/typography.js";
 import { VSpace as f } from "../../vspace/vspace.js";
-import { InfoList as u, InfoLine as r } from "../info-list/info-list.js";
+import { InfoList as b, InfoLine as i } from "../info-list/info-list.js";
 import "react";
 import "@gearbox-protocol/sdk";
 import "clsx";
@@ -13,15 +13,22 @@ import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../utils/z-index.js";
-import { ApyValue as e } from "../values/scalars.js";
+import "../../points-icon/points-icon.js";
+import { ApyValue as a } from "../values/scalars.js";
 import "../../badge/badge.js";
-import { BorrowRateBlockTest as i } from "./constants.js";
-function L({
-  data: m,
-  dataTo: a,
-  base: l
+import "../../badge/chip.js";
+import { BorrowRateBlockTest as n } from "./constants.js";
+function p(t) {
+  return typeof t == "number" ? t : t?.total;
+}
+function u(t) {
+  return typeof t == "number" ? t : t?.base;
+}
+function q({
+  data: t,
+  dataTo: r
 }) {
-  return /* @__PURE__ */ o("div", { "data-testid": i.root, children: /* @__PURE__ */ o(p, { children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o("div", { "data-testid": n.root, children: /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
     s,
     {
       value: "borrow-rate",
@@ -32,35 +39,35 @@ function L({
         "div",
         {
           className: "min-w-0 flex-1 pr-1.5",
-          "data-testid": i.trigger,
+          "data-testid": n.trigger,
           children: /* @__PURE__ */ o(
-            r,
+            i,
             {
               title: "components.borrowRateBlock.label",
-              tip: /* @__PURE__ */ o(t, { messageId: "components.borrowRateBlock.tip" }),
-              value: /* @__PURE__ */ o(e, { data: m }),
-              valueTo: a !== void 0 ? /* @__PURE__ */ o(e, { data: a }) : void 0
+              tip: /* @__PURE__ */ o(e, { messageId: "components.borrowRateBlock.tip" }),
+              value: /* @__PURE__ */ o(a, { data: p(t) }),
+              valueTo: r !== void 0 ? /* @__PURE__ */ o(a, { data: p(r) }) : void 0
             }
           )
         }
       ),
-      description: /* @__PURE__ */ n("div", { "data-testid": i.details, children: [
+      description: /* @__PURE__ */ m("div", { "data-testid": n.details, children: [
         /* @__PURE__ */ o(f, { size: 16 }),
-        /* @__PURE__ */ o(c, { backgroundColor: "transparent", textColor: "unset", children: /* @__PURE__ */ n(u, { children: [
-          /* @__PURE__ */ o(d, { as: "span", variant: "caption", color: "secondary", children: /* @__PURE__ */ o(t, { messageId: "components.borrowRateBlock.description" }) }),
+        /* @__PURE__ */ o(c, { backgroundColor: "transparent", textColor: "unset", children: /* @__PURE__ */ m(b, { children: [
+          /* @__PURE__ */ o(d, { as: "span", variant: "caption", color: "secondary", children: /* @__PURE__ */ o(e, { messageId: "components.borrowRateBlock.description" }) }),
           /* @__PURE__ */ o(
-            r,
+            i,
             {
               title: "components.borrowRateBlock.baseRate",
-              value: /* @__PURE__ */ o(e, { data: l })
+              value: /* @__PURE__ */ o(a, { data: u(r ?? t) })
             }
           ),
           /* @__PURE__ */ o(
-            r,
+            i,
             {
               title: "components.borrowRateBlock.normalization",
               tip: /* @__PURE__ */ o(
-                t,
+                e,
                 {
                   messageId: "components.borrowRateBlock.normalization.tip",
                   values: {
@@ -78,6 +85,6 @@ function L({
   ) }) });
 }
 export {
-  L as BorrowRateBlock,
-  i as BorrowRateBlockTest
+  q as BorrowRateBlock,
+  n as BorrowRateBlockTest
 };

package/dist/esm/components/base/chart-with-side-card/chart-with-side-card.js

@@ -1,7 +1,7 @@
-import { jsxs as e, jsx as a } from "react/jsx-runtime";
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
 import { ChartWithSideCardTest as i } from "./constants.js";
 function m({
-  chart: r,
+  chart: a,
   side: t
 }) {
   return /* @__PURE__ */ e(
@@ -10,18 +10,18 @@ function m({
       className: "flex w-full flex-wrap gap-4",
       "data-testid": i.root,
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ r(
           "div",
           {
             className: "min-w-[min(100%,40rem)] grow-[999] basis-0",
             "data-testid": i.chart,
-            children: r
+            children: a
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ r(
           "div",
           {
-            className: "min-w-0 grow shrink-0 basis-[calc((100%-3rem)/4)]",
+            className: "min-w-[min(100%,300px)] grow-0 shrink-0 basis-[22.5rem]",
             "data-testid": i.side,
             children: t
           }

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

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

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

@@ -1,46 +1,46 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useTitleText as f } from "../text/use-title-text.js";
-import { FadeoutLoading as m } from "../../fadeout-loading/fadeout-loading.js";
-import { HealthFactor as s } from "../../health-factor/health-factor.js";
+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 F } from "../../vertical-indicator/vertical-indicator.js";
-import { HealthFactorBlockTest as o } from "./constants.js";
+import { VerticalIndicator as g } from "../../vertical-indicator/vertical-indicator.js";
+import { HealthFactorBlockTest as t } from "./constants.js";
 function b({
-  hf: e,
-  hfTo: a,
+  healthFactor: e,
+  healthFactorTo: a,
   debt: r,
   debtTo: p,
-  zone: l,
-  isLoading: i,
+  zone: i,
+  isLoading: l,
   title: d,
   tip: u,
   testId: v
 }) {
-  const h = f(), c = a !== void 0;
-  return /* @__PURE__ */ t(
-    F,
+  const f = h(), m = a !== void 0;
+  return /* @__PURE__ */ o(
+    g,
     {
       align: "center",
       dimPreviousValue: !1,
-      "data-testid": v ?? o.root,
-      label: d !== void 0 ? h(d) : /* @__PURE__ */ t(n, { messageId: "components.healthFactorBlock.label" }),
-      tip: u ?? /* @__PURE__ */ t(n, { messageId: "components.healthFactorBlock.tip" }),
-      value: /* @__PURE__ */ t(m, { loading: i, children: e === void 0 ? /* @__PURE__ */ t("span", { "data-testid": o.value, children: "—" }) : /* @__PURE__ */ t(
-        s,
+      "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,
         {
           value: e,
           debt: r,
-          zone: c ? void 0 : l,
-          "data-testid": o.value
+          zone: m ? void 0 : i,
+          "data-testid": t.value
         }
       ) }),
-      valueTo: c ? /* @__PURE__ */ t(m, { loading: i, children: /* @__PURE__ */ t(
-        s,
+      valueTo: m ? /* @__PURE__ */ o(s, { loading: l, children: /* @__PURE__ */ o(
+        c,
         {
           value: a,
           debt: p ?? r,
-          zone: l,
-          "data-testid": o.valueTo
+          zone: i,
+          "data-testid": t.valueTo
         }
       ) }) : void 0
     }
@@ -48,5 +48,5 @@ function b({
 }
 export {
   b as HealthFactorBlock,
-  o as HealthFactorBlockTest
+  t as HealthFactorBlockTest
 };

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

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