@gearbox-protocol/ui-kit 4.0.0-next.3 → 4.0.0-next.31

package/dist/esm/components/base/apy-breakdown-body/apy-breakdown-body.js

@@ -0,0 +1,106 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { bpsToPercent as c } from "../../../utils/bps.js";
+import { cn as i } from "../../../utils/cn.js";
+const x = "—", p = "400px";
+function g(n, t, e) {
+  return n === "7d" ? e : t;
+}
+function b(n) {
+  const t = c(n), e = `${Math.abs(t).toFixed(2)}%`;
+  return t < 0 ? `−${e}` : e;
+}
+function h({
+  title: n,
+  chip: t,
+  chipPositive: e = !1,
+  chipTestId: d,
+  children: r,
+  testId: o
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: "flex w-full min-w-0 flex-col gap-4 rounded-xl border border-border bg-card p-4",
+      "data-testid": o,
+      children: [
+        /* @__PURE__ */ a("div", { className: "flex min-h-6 items-center justify-between gap-3", children: [
+          /* @__PURE__ */ s("span", { className: "min-w-0 text-base font-semibold leading-5 text-foreground", children: n }),
+          /* @__PURE__ */ s(
+            "span",
+            {
+              className: i(
+                "shrink-0 rounded-md px-2 py-0.5 text-sm font-semibold tabular-nums",
+                e ? "bg-success/20 text-success" : "bg-muted text-muted-foreground"
+              ),
+              "data-testid": d,
+              children: t
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s("div", { className: "flex flex-col gap-3", children: r })
+      ]
+    }
+  );
+}
+function N({
+  label: n,
+  value: t,
+  subtext: e,
+  muted: d = !1,
+  testId: r,
+  valueTestId: o,
+  captionTestId: l
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: "flex items-start justify-between gap-3",
+      "data-testid": r,
+      children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            className: i(
+              "min-w-0 text-sm font-semibold leading-5",
+              d ? "text-muted-foreground" : "text-foreground"
+            ),
+            children: n
+          }
+        ),
+        /* @__PURE__ */ a("span", { className: "flex shrink-0 flex-col items-end", children: [
+          /* @__PURE__ */ s(
+            "span",
+            {
+              className: i(
+                "text-sm font-semibold leading-5 tabular-nums",
+                d ? "text-muted-foreground" : "text-foreground"
+              ),
+              "data-testid": o,
+              children: t
+            }
+          ),
+          e != null ? /* @__PURE__ */ s(
+            "span",
+            {
+              className: "text-xs leading-4 text-muted-foreground",
+              "data-testid": l,
+              children: e
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function w() {
+  return /* @__PURE__ */ s("div", { className: "h-px w-full bg-divider" });
+}
+export {
+  p as APY_BREAKDOWN_TOOLTIP_WIDTH,
+  h as ApyBreakdownBody,
+  w as ApyBreakdownDivider,
+  N as ApyBreakdownRow,
+  x as BREAKDOWN_DASH,
+  b as formatBreakdownRate,
+  g as periodMessageId
+};

package/dist/esm/components/base/apy-breakdown-body/index.js

@@ -0,0 +1,10 @@
+import { APY_BREAKDOWN_TOOLTIP_WIDTH as r, ApyBreakdownBody as d, ApyBreakdownDivider as a, ApyBreakdownRow as A, BREAKDOWN_DASH as B, formatBreakdownRate as p, periodMessageId as w } from "./apy-breakdown-body.js";
+export {
+  r as APY_BREAKDOWN_TOOLTIP_WIDTH,
+  d as ApyBreakdownBody,
+  a as ApyBreakdownDivider,
+  A as ApyBreakdownRow,
+  B as BREAKDOWN_DASH,
+  p as formatBreakdownRate,
+  w as periodMessageId
+};

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

@@ -6,15 +6,17 @@ import { Typography as d } from "../../typography/typography.js";
 import { VSpace as f } from "../../vspace/vspace.js";
 import { InfoList as b, InfoLine as i } from "../info-list/info-list.js";
 import "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../utils/z-index.js";
+import "../../points-icon/points-icon.js";
 import { ApyValue as a } from "../values/scalars.js";
 import "../../badge/badge.js";
+import "../../badge/chip.js";
 import { BorrowRateBlockTest as n } from "./constants.js";
 function p(t) {
   return typeof t == "number" ? t : t?.total;
@@ -22,7 +24,7 @@ function p(t) {
 function u(t) {
   return typeof t == "number" ? t : t?.base;
 }
-function V({
+function q({
   data: t,
   dataTo: r
 }) {
@@ -83,6 +85,6 @@ function V({
   ) }) });
 }
 export {
-  V as BorrowRateBlock,
+  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,44 +1,43 @@
 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 "@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 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/details-view/detail-aside/detail-aside-screen-layout.js

@@ -1,7 +1,7 @@
 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 "@gearbox-protocol/sdk/onchain";
 import { cn as o } from "../../../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";

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,112 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useMemo as g } from "react";
+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 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 F({
   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: g = !1,
+  error: v,
+  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 = 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 {
+          ...i,
+          priceScaleId: m === p ? "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, d, l, p, 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: g,
+      error: v ? 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: l,
+      useSharedPriceScale: !l,
+      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
+  F as HistoryChart,
+  M as HistoryChartTest
 };