@gearbox-protocol/ui-kit 4.0.0-next.4 → 4.0.0-next.41

package/dist/esm/components/base/amount-input/token-select-panel.js

@@ -1,73 +1,68 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { ConfirmMenu as h } from "../../confirm-menu/confirm-menu.js";
 import "react-intl";
 import "../../buttons/button/button.js";
-import { VSpace as b } from "../../vspace/vspace.js";
-import { GridTable as g, GridTableBody as v, GridTableRow as w, GridTableCell as s } from "../../table/grid-table.js";
+import { VSpace as u } from "../../vspace/vspace.js";
+import { GridTable as b, GridTableBody as g, GridTableRow as v, GridTableCell as a } from "../../table/grid-table.js";
 import "../../skeleton/skeleton.js";
 import "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
-import { formatAssetAmount as T } from "../../../utils/format-asset-amount.js";
-import { formatMoney as y } from "../../../utils/format-money.js";
-import "@gearbox-protocol/sdk/common-utils";
+import { formatAssetAmount as w } from "../../../utils/format-asset-amount.js";
+import { formatMoney as T } from "../../../utils/format-money.js";
 import "luxon";
 import "../../../utils/z-index.js";
 import "../../table/table.js";
-import { TokenSymbol as N } from "../../token-symbol/token-symbol.js";
-import { FormattedMessageTyped as z } from "../../typed-intl/index.js";
-import { AmountInputTest as n } from "./constants.js";
-function d(o, i) {
-  if (o)
-    return o[i] ?? o[i.toLowerCase()];
-}
-function Q({
-  tokens: o,
-  balances: i,
-  usdPrices: p,
-  onSelect: c,
-  onClose: f
+import { TokenSymbol as y } from "../../token-symbol/token-symbol.js";
+import { FormattedMessageTyped as N } from "../../typed-intl/index.js";
+import { AmountInputTest as s } from "./constants.js";
+function K({
+  tokens: i,
+  balances: d,
+  usdPrices: n,
+  onSelect: p,
+  onClose: c
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ o(
     "div",
     {
-      "data-testid": n.selectPanel,
+      "data-testid": s.selectPanel,
       className: "flex max-h-[calc(100vh-40px)] w-full flex-col overflow-hidden rounded-lg border border-gray-10 bg-modal p-4 shadow-[0_4px_28px_4px_rgba(0,0,0,0.25)] sm:max-h-[560px]",
       children: [
         /* @__PURE__ */ e(
           h,
           {
-            title: /* @__PURE__ */ e(z, { messageId: "components.amountInput.selectToken" }),
-            onClose: f
+            title: /* @__PURE__ */ e(N, { messageId: "components.amountInput.selectToken" }),
+            onClose: c
           }
         ),
-        /* @__PURE__ */ e(b, { size: 16 }),
+        /* @__PURE__ */ e(u, { size: 16 }),
         /* @__PURE__ */ e("div", { className: "flex min-h-[260px] flex-col overflow-y-auto pr-1", children: /* @__PURE__ */ e(
-          g,
+          b,
           {
             cols: "minmax(0,1fr) 120px",
             gap: 0,
             size: "sm",
             wrapperClassName: "overflow-visible",
-            children: /* @__PURE__ */ e(v, { children: o.map((r, x) => {
-              const l = d(i, r.address) ?? 0n, m = d(p, r.address), u = Number(l) / 10 ** r.decimals, a = m !== void 0 ? y(u * m, 4) : void 0;
-              return /* @__PURE__ */ t(
-                w,
+            children: /* @__PURE__ */ e(g, { children: i.map((r, f) => {
+              const t = d?.get(r.address) ?? 0n, l = n?.get(r.address), x = Number(t) / 10 ** r.decimals, m = l !== void 0 ? T(x * l, 4) : void 0;
+              return /* @__PURE__ */ o(
+                v,
                 {
-                  last: x === o.length - 1,
+                  last: f === i.length - 1,
                   height: "56px",
-                  "data-testid": n.selectOption,
-                  onRowClick: () => c(r),
+                  "data-testid": s.selectOption,
+                  onRowClick: () => p(r),
                   children: [
-                    /* @__PURE__ */ e(s, { size: "sm", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
-                      /* @__PURE__ */ e(N, { token: r, size: 24, showSymbol: !1 }),
+                    /* @__PURE__ */ e(a, { size: "sm", children: /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ e(y, { token: r, size: 24, showSymbol: !1 }),
                       /* @__PURE__ */ e("span", { className: "truncate", children: r.name })
                     ] }) }),
-                    /* @__PURE__ */ e(s, { size: "sm", textAlign: "right", children: /* @__PURE__ */ t("div", { children: [
-                      /* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children: T(l, r.decimals) }),
-                      a !== void 0 ? /* @__PURE__ */ e("div", { className: "block text-[11px] font-normal leading-[13px] tabular-nums text-secondary-foreground", children: a }) : null
+                    /* @__PURE__ */ e(a, { size: "sm", textAlign: "right", children: /* @__PURE__ */ o("div", { children: [
+                      /* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children: w(t, r.decimals) }),
+                      m !== void 0 ? /* @__PURE__ */ e("div", { className: "block text-[11px] font-normal leading-[13px] tabular-nums text-secondary-foreground", children: m }) : null
                     ] }) })
                   ]
                 },
@@ -81,5 +76,5 @@ function Q({
   );
 }
 export {
-  Q as TokenSelectPanel
+  K as TokenSelectPanel
 };

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,16 +6,16 @@ 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;

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,26 +1,25 @@
-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 { Stack as r } 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 "@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({
+function J({
   title: c,
   browserTitle: p,
   token: n,
   icon: d,
   tokenIconSize: u = 32,
   disabled: g = !1,
-  toCopy: l,
-  explorerLinks: t,
+  toCopy: i,
+  explorerLinks: e,
   badges: f,
   actions: a,
   buttonsSlot: o,
@@ -28,17 +27,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(y, { size: u, token: n })
     }
-  ) : d, P = o != null || a != null || l != null || t != null && t.length > 0 ? /* @__PURE__ */ r(
-    i,
+  ) : d, P = o != null || a != null || i != null || e != null && e.length > 0 ? /* @__PURE__ */ l(
+    r,
     {
       direction: "row",
       align: "center",
@@ -48,25 +47,25 @@ function K({
       children: [
         a,
         o,
-        l != null ? /* @__PURE__ */ e(j, { toCopy: l }) : null,
-        t != null && t.length > 0 ? /* @__PURE__ */ e(
+        i != null ? /* @__PURE__ */ t(j, { toCopy: i }) : null,
+        e != null && e.length > 0 ? /* @__PURE__ */ t(
           x,
           {
-            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 +74,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: p }),
                 f
               ] }),
               P
@@ -90,6 +89,6 @@ function K({
   );
 }
 export {
-  K as DetailedPageTitle,
+  J as DetailedPageTitle,
   s as DetailedPageTitleTest
 };

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

@@ -1,42 +1,41 @@
 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";
 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 h({
+  children: e,
   aside: r,
-  mainRef: e,
+  mainRef: t,
   asidePosition: m,
   centeredMain: a,
-  className: p,
-  asideClassName: A,
+  className: A,
+  asideClassName: p,
   mainClassName: s
 }) {
   const l = r != null ? /* @__PURE__ */ i(f, { children: r }) : null;
   return /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
     n,
     {
-      className: o(c, p),
-      asideClassName: o(d, A),
+      className: o(c, A),
+      asideClassName: o(d, p),
       mainClassName: s,
-      mainRef: e,
+      mainRef: t,
       aside: l,
       asidePosition: m,
       centeredMain: a,
       variant: "detail",
       stickyAside: !1,
-      children: t
+      children: e
     }
   ) });
 }
 export {
-  x as DetailAsideScreenLayout
+  h as DetailAsideScreenLayout
 };

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
 };