@gearbox-protocol/ui-kit 4.0.0-next.1 → 4.0.0-next.10

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

@@ -0,0 +1,90 @@
+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 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 b, InfoLine as i } from "../info-list/info-list.js";
+import "react";
+import "@gearbox-protocol/sdk";
+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;
+}
+function u(t) {
+  return typeof t == "number" ? t : t?.base;
+}
+function q({
+  data: t,
+  dataTo: r
+}) {
+  return /* @__PURE__ */ o("div", { "data-testid": n.root, children: /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
+    s,
+    {
+      value: "borrow-rate",
+      last: !0,
+      triggerClassName: "flex-nowrap py-0 font-normal",
+      className: "[&_[role=region]_>div]:pb-0 border-b-0",
+      title: /* @__PURE__ */ o(
+        "div",
+        {
+          className: "min-w-0 flex-1 pr-1.5",
+          "data-testid": n.trigger,
+          children: /* @__PURE__ */ o(
+            i,
+            {
+              title: "components.borrowRateBlock.label",
+              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__ */ m("div", { "data-testid": n.details, children: [
+        /* @__PURE__ */ o(f, { size: 16 }),
+        /* @__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(
+            i,
+            {
+              title: "components.borrowRateBlock.baseRate",
+              value: /* @__PURE__ */ o(a, { data: u(r ?? t) })
+            }
+          ),
+          /* @__PURE__ */ o(
+            i,
+            {
+              title: "components.borrowRateBlock.normalization",
+              tip: /* @__PURE__ */ o(
+                e,
+                {
+                  messageId: "components.borrowRateBlock.normalization.tip",
+                  values: {
+                    quota: "Quota Rates",
+                    utilization: "Utilization Rate"
+                  }
+                }
+              ),
+              value: "—"
+            }
+          )
+        ] }) })
+      ] })
+    }
+  ) }) });
+}
+export {
+  q as BorrowRateBlock,
+  n as BorrowRateBlockTest
+};

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

@@ -0,0 +1,8 @@
+class t {
+  static root = "borrow-rate-block-root";
+  static trigger = "borrow-rate-block-trigger";
+  static details = "borrow-rate-block-details";
+}
+export {
+  t as BorrowRateBlockTest
+};

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

@@ -0,0 +1,6 @@
+import { BorrowRateBlock as e } from "./borrow-rate-block.js";
+import { BorrowRateBlockTest as B } from "./constants.js";
+export {
+  e as BorrowRateBlock,
+  B as BorrowRateBlockTest
+};

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

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

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

@@ -0,0 +1,8 @@
+class a {
+  static root = "chart-with-side-card-root";
+  static chart = "chart-with-side-card-chart";
+  static side = "chart-with-side-card-side";
+}
+export {
+  a as ChartWithSideCardTest
+};

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

@@ -0,0 +1,6 @@
+import { ChartWithSideCard as e } from "./chart-with-side-card.js";
+import { ChartWithSideCardTest as d } from "./constants.js";
+export {
+  e as ChartWithSideCard,
+  d as ChartWithSideCardTest
+};

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/details-view/details-view.js

@@ -1,67 +1,72 @@
-import { jsx as i, jsxs as g } from "react/jsx-runtime";
-import { Children as p, cloneElement as h, isValidElement as c } from "react";
-import { Stack as r } from "../stack/stack.js";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { Children as u, cloneElement as g, isValidElement as c } from "react";
+import { Stack as l } from "../stack/stack.js";
 import { isTabber as A } from "../tabber/tabber.js";
 import { Container as P } from "../../layout/container/container.js";
 import { useIsMedium as x } from "../../../hooks/use-media-query.js";
-import { DetailsViewTest as s } from "./constants.js";
+import { DetailsViewTest as o } from "./constants.js";
 import { AsideAlignAnchor as y } from "./detail-aside/detail-aside-scope.js";
 import { DetailAsideScreenLayout as w } from "./detail-aside/detail-aside-screen-layout.js";
-function D(e) {
+function N(e) {
   return c(e) && e.type === b;
 }
-function V(e) {
-  return c(e) && e.type === u;
+function D(e) {
+  return c(e) && e.type === h;
 }
-function M(e) {
+function V(e) {
   return c(e) && e.type === y;
 }
 function q({
   children: e,
-  mainRef: l,
+  mainRef: s,
   className: n,
-  testId: t
+  testId: a
 }) {
-  const a = x(), d = p.toArray(e), m = d.find(D), f = d.find(V)?.props.children ?? null, o = f != null ? /* @__PURE__ */ i(r, { "data-testid": s.managePane, children: f }) : null;
-  return /* @__PURE__ */ i(r, { className: "flex-col-12", "data-testid": t ?? s.root, children: /* @__PURE__ */ i(r, { className: "px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ i(
+  const t = x(), i = u.toArray(e), m = i.find(N), f = i.find(D)?.props.children ?? null, d = f != null ? /* @__PURE__ */ r(l, { gap: "md", "data-testid": o.managePane, children: f }) : null;
+  return /* @__PURE__ */ r(l, { className: "flex-col-12", "data-testid": a ?? o.root, children: /* @__PURE__ */ r(l, { className: "px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ r(
     w,
     {
       className: n,
-      mainRef: l,
-      aside: !a && o ? o : null,
-      children: /* @__PURE__ */ i(P, { padding: !1, children: m ? h(m, {
-        mobileManagePane: a ? o : null
+      mainRef: s,
+      aside: !t && d ? d : null,
+      children: /* @__PURE__ */ r(P, { padding: !1, children: m ? g(m, {
+        mobileManagePane: t ? d : null
       }) : null })
     }
   ) }) });
 }
 function b({
   children: e,
-  mobileManagePane: l
+  mobileManagePane: s
 }) {
-  const n = p.toArray(e);
-  if (l == null)
-    return /* @__PURE__ */ i(r, { gap: "lg", "data-testid": s.leftPane, children: n });
-  let t = n.findIndex(M);
-  if (t !== -1)
-    t += 1;
-  else {
-    const a = n.findIndex(A);
-    t = a === -1 ? n.length : a;
+  const n = u.toArray(e);
+  if (s == null)
+    return /* @__PURE__ */ r(l, { className: "gap-3.5", "data-testid": o.leftPane, children: n });
+  const a = n.findIndex(A);
+  if (a !== -1) {
+    const i = n[a];
+    return /* @__PURE__ */ p(l, { className: "gap-3.5", "data-testid": o.leftPane, children: [
+      n.slice(0, a),
+      c(i) ? g(i, {
+        mobileManagePane: s
+      }) : i,
+      n.slice(a + 1)
+    ] });
   }
-  return /* @__PURE__ */ g(r, { gap: "lg", "data-testid": s.leftPane, children: [
+  let t = n.findIndex(V);
+  return t !== -1 ? t += 1 : t = n.length, /* @__PURE__ */ p(l, { className: "gap-3.5", "data-testid": o.leftPane, children: [
     n.slice(0, t),
-    l,
+    s,
     n.slice(t)
   ] });
 }
-function u(e) {
+function h(e) {
   return null;
 }
-u.displayName = "DetailsViewManagePane";
+h.displayName = "DetailsViewManagePane";
 export {
   q as DetailsView,
   b as DetailsViewLeftPane,
-  u as DetailsViewManagePane,
-  s as DetailsViewTest
+  h as DetailsViewManagePane,
+  o as DetailsViewTest
 };

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