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

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,20 @@ import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../utils/z-index.js";
-import { ApyValue as e } from "../values/scalars.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 { 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 V({
+  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 +37,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 +83,6 @@ function L({
   ) }) });
 }
 export {
-  L as BorrowRateBlock,
-  i as BorrowRateBlockTest
+  V as BorrowRateBlock,
+  n as BorrowRateBlockTest
 };

package/dist/esm/components/base/index.js

@@ -1,6 +1,6 @@
 import { AmountInput as r } from "./amount-input/amount-input.js";
 import { TokenSelectPanel as a } from "./amount-input/token-select-panel.js";
-import { BorrowRateBlock as m } from "./borrow-rate-block/borrow-rate-block.js";
+import { BorrowRateBlock as p } from "./borrow-rate-block/borrow-rate-block.js";
 import { BorrowRateBlockTest as f } from "./borrow-rate-block/constants.js";
 import { ChartWithSideCard as x } from "./chart-with-side-card/chart-with-side-card.js";
 import { ChartWithSideCardTest as s } from "./chart-with-side-card/constants.js";
@@ -23,7 +23,7 @@ import { MoreAccordionTest as $ } from "./more-accordion/constants.js";
 import { MoreAccordion as oe } from "./more-accordion/more-accordion.js";
 import { NestedInfoStackTest as te } from "./nested-info-stack/constants.js";
 import { NestedInfoStack as ie } from "./nested-info-stack/nested-info-stack.js";
-import { PageTitle as pe } from "./page-title/page-title.js";
+import { PageTitle as me } from "./page-title/page-title.js";
 import { PoolApyBreakdownCardTest as ne } from "./pool-apy-breakdown-card/constants.js";
 import { PoolApyBreakdownCard as Te } from "./pool-apy-breakdown-card/pool-apy-breakdown-card.js";
 import { ReviewButton as le } from "./review-button/review-button.js";
@@ -47,58 +47,58 @@ import { TitleMeta as Ze } from "./title-meta/title-meta.js";
 import { TokenAmount as eo } from "./token-amount/token-amount.js";
 import { TokenPairSymbolTest as ro } from "./token-pair-symbol/constants.js";
 import { TokenPairSymbol as ao } from "./token-pair-symbol/token-pair-symbol.js";
-import { TokenPairTitleTest as mo } from "./token-pair-title/constants.js";
+import { TokenPairTitleTest as po } from "./token-pair-title/constants.js";
 import { TokenPairTitle as fo } from "./token-pair-title/token-pair-title.js";
 import { PositionShortLabelTest as xo, ValueTest as To } from "./values/constants.js";
 import { PnlValue as lo } from "./values/pnl-value.js";
 import { PositionShortLabel as Po } from "./values/position-short-label.js";
 import { PositionTypeBadge as go } from "./values/position-type-badge.js";
-import { ApyValue as ko, HealthFactorValue as Bo, LeverageValue as Ao, TokenBigint as bo, UsdValue as Lo, UtilizationValue as yo } from "./values/scalars.js";
-import { AmountInputTest as Io } from "./amount-input/constants.js";
-import { DetailedPageTitleTest as Mo } from "./detailed-page-title/constants.js";
-import { DetailsViewTest as Vo } from "./details-view/constants.js";
-import { HistoryChartTest as Ho } from "./history-chart/constants.js";
-import { InfoListTest as qo } from "./info-list/constants.js";
-import { LeverageInputTest as _o } from "./leverage-input/constants.js";
-import { ManagePaneTest as Ro } from "./manage-pane/constants.js";
-import { PageTitleTest as Go } from "./page-title/constants.js";
-import { ReviewButtonTest as Oo } from "./review-button/constants.js";
-import { SectionHeadingTest as zo } from "./section-heading/constants.js";
-import { SegmentedTabsTest as jo } from "./segmented-tabs/constants.js";
-import { StackTest as Ko } from "./stack/constants.js";
-import { StatBadgeTest as Yo } from "./stat-badge/constants.js";
-import { StickyBarTest as $o } from "./sticky-bar/constants.js";
-import { TabberTest as or } from "./tabber/constants.js";
-import { TokenAmountTest as tr } from "./token-amount/constants.js";
+import { ApyValue as ko, HealthFactorValue as Bo, LeverageValue as Ao, TokenBigint as bo, UsdValue as Lo, UtilizationValue as yo, bps as Co } from "./values/scalars.js";
+import { AmountInputTest as wo } from "./amount-input/constants.js";
+import { DetailedPageTitleTest as ho } from "./detailed-page-title/constants.js";
+import { DetailsViewTest as Do } from "./details-view/constants.js";
+import { HistoryChartTest as Eo } from "./history-chart/constants.js";
+import { InfoListTest as vo } from "./info-list/constants.js";
+import { LeverageInputTest as No } from "./leverage-input/constants.js";
+import { ManagePaneTest as Fo } from "./manage-pane/constants.js";
+import { PageTitleTest as Uo } from "./page-title/constants.js";
+import { ReviewButtonTest as Wo } from "./review-button/constants.js";
+import { SectionHeadingTest as Xo } from "./section-heading/constants.js";
+import { SegmentedTabsTest as Jo } from "./segmented-tabs/constants.js";
+import { StackTest as Qo } from "./stack/constants.js";
+import { StatBadgeTest as Zo } from "./stat-badge/constants.js";
+import { StickyBarTest as er } from "./sticky-bar/constants.js";
+import { TabberTest as rr } from "./tabber/constants.js";
+import { TokenAmountTest as ar } from "./token-amount/constants.js";
 export {
   r as AmountInput,
-  Io as AmountInputTest,
+  wo as AmountInputTest,
   ko as ApyValue,
   P as AsideAlignAnchor,
-  m as BorrowRateBlock,
+  p as BorrowRateBlock,
   f as BorrowRateBlockTest,
   x as ChartWithSideCard,
   s as ChartWithSideCardTest,
   g as DetailAsideScreenLayout,
   d as DetailedPageTitle,
-  Mo as DetailedPageTitleTest,
+  ho as DetailedPageTitleTest,
   k as DetailsView,
   B as DetailsViewLeftPane,
   A as DetailsViewManagePane,
-  Vo as DetailsViewTest,
+  Do as DetailsViewTest,
   C as HealthFactorBlock,
   L as HealthFactorBlockTest,
   Bo as HealthFactorValue,
   w as HistoryChart,
-  Ho as HistoryChartTest,
+  Eo as HistoryChartTest,
   h as InfoLine,
   V as InfoList,
-  qo as InfoListTest,
+  vo as InfoListTest,
   E as InfoPortalOut,
   q as InfoPortalProvider,
   D as InfoSectionTitle,
   _ as LeverageInput,
-  _o as LeverageInputTest,
+  No as LeverageInputTest,
   Ao as LeverageValue,
   G as LiquidationParamsTable,
   R as LiquidationParamsTableTest,
@@ -109,13 +109,13 @@ export {
   K as ManagePaneMessage,
   Q as ManagePaneTab,
   Y as ManagePaneTabDropdown,
-  Ro as ManagePaneTest,
+  Fo as ManagePaneTest,
   oe as MoreAccordion,
   $ as MoreAccordionTest,
   ie as NestedInfoStack,
   te as NestedInfoStackTest,
-  pe as PageTitle,
-  Go as PageTitleTest,
+  me as PageTitle,
+  Uo as PageTitleTest,
   lo as PnlValue,
   Te as PoolApyBreakdownCard,
   ne as PoolApyBreakdownCardTest,
@@ -123,43 +123,44 @@ export {
   xo as PositionShortLabelTest,
   go as PositionTypeBadge,
   le as ReviewButton,
-  Oo as ReviewButtonTest,
+  Wo as ReviewButtonTest,
   ce as SEGMENTED_TABS_INACTIVE_BUTTON_CLASS,
   Le as SPACE_HEIGHT,
   ye as SPACE_PX,
   Se as SectionHeading,
-  zo as SectionHeadingTest,
+  Xo as SectionHeadingTest,
   ge as SegmentedTabs,
-  jo as SegmentedTabsTest,
+  Jo as SegmentedTabsTest,
   Ae as SideCard,
   ke as SideCardTest,
   Ie as Stack,
-  Ko as StackTest,
+  Qo as StackTest,
   Me as StatBadge,
   he as StatBadgeGrid,
-  Yo as StatBadgeTest,
+  Zo as StatBadgeTest,
   De as StickyBar,
-  $o as StickyBarTest,
+  er as StickyBarTest,
   ve as StrategyApyBreakdownCard,
   Ee as StrategyApyBreakdownCardTest,
   Ne as Tabber,
   Re as TabberSection,
-  or as TabberTest,
+  rr as TabberTest,
   Je as TimeToLiquidationBlock,
   Xe as TimeToLiquidationBlockTest,
   Ze as TitleMeta,
   Qe as TitleMetaTest,
   eo as TokenAmount,
-  tr as TokenAmountTest,
+  ar as TokenAmountTest,
   bo as TokenBigint,
   ao as TokenPairSymbol,
   ro as TokenPairSymbolTest,
   fo as TokenPairTitle,
-  mo as TokenPairTitleTest,
+  po as TokenPairTitleTest,
   a as TokenSelectPanel,
   Lo as UsdValue,
   yo as UtilizationValue,
   To as ValueTest,
+  Co as bps,
   Fe as isTabber,
   Ue as useDetailScrollSpy,
   We as useTitleText

package/dist/esm/components/base/values/index.js

@@ -1,18 +1,19 @@
 import { PositionShortLabelTest as t, ValueTest as a } from "./constants.js";
 import { PnlValue as l } from "./pnl-value.js";
-import { PositionShortLabel as n } from "./position-short-label.js";
-import { PositionTypeBadge as u } from "./position-type-badge.js";
-import { ApyValue as s, HealthFactorValue as f, LeverageValue as m, TokenBigint as x, UsdValue as P, UtilizationValue as T } from "./scalars.js";
+import { PositionShortLabel as p } from "./position-short-label.js";
+import { PositionTypeBadge as s } from "./position-type-badge.js";
+import { ApyValue as V, HealthFactorValue as f, LeverageValue as m, TokenBigint as x, UsdValue as P, UtilizationValue as T, bps as b } from "./scalars.js";
 export {
-  s as ApyValue,
+  V as ApyValue,
   f as HealthFactorValue,
   m as LeverageValue,
   l as PnlValue,
-  n as PositionShortLabel,
+  p as PositionShortLabel,
   t as PositionShortLabelTest,
-  u as PositionTypeBadge,
+  s as PositionTypeBadge,
   x as TokenBigint,
   P as UsdValue,
   T as UtilizationValue,
-  a as ValueTest
+  a as ValueTest,
+  b as bps
 };

package/dist/esm/components/base/values/scalars.js

@@ -4,58 +4,59 @@ import "react";
 import "@gearbox-protocol/sdk";
 import { cn as c } from "../../../utils/cn.js";
 import "sonner";
-import { formatMoney as a, percentageTemplate as l } from "../../../utils/format-money.js";
+import { formatPercentAmount as a, formatMoney as l } from "../../../utils/format-money.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../utils/z-index.js";
-import { ValueTest as i } from "./constants.js";
-const p = "—";
-function r() {
-  return /* @__PURE__ */ e("span", { "data-testid": i.placeholder, children: p });
+import { ValueTest as r } from "./constants.js";
+const d = "—";
+function i() {
+  return /* @__PURE__ */ e("span", { "data-testid": r.placeholder, children: d });
 }
 function o(t) {
-  return l(t / 100);
+  return `${a(t / 100, 2)}%`;
 }
-function L({ data: t }) {
-  return t === void 0 ? /* @__PURE__ */ e(r, {}) : typeof t == "number" ? /* @__PURE__ */ e("span", { "data-testid": i.apy, children: o(t) }) : /* @__PURE__ */ e("span", { "data-testid": i.apy, children: /* @__PURE__ */ e(s, { apy: t }) });
+function F({ data: t }) {
+  return t === void 0 ? /* @__PURE__ */ e(i, {}) : typeof t == "number" ? /* @__PURE__ */ e("span", { "data-testid": r.apy, children: o(t) }) : /* @__PURE__ */ e("span", { "data-testid": r.apy, children: /* @__PURE__ */ e(s, { apy: t }) });
 }
-function z({
+function L({
   data: t
 }) {
-  return t == null ? /* @__PURE__ */ e(r, {}) : /* @__PURE__ */ e("span", { "data-testid": i.usd, children: a(t) });
+  return t == null ? /* @__PURE__ */ e(i, {}) : /* @__PURE__ */ e("span", { "data-testid": r.usd, children: l(t) });
 }
-function A({
+function P({
   data: t
 }) {
-  return t === void 0 ? /* @__PURE__ */ e(r, {}) : /* @__PURE__ */ e("span", { "data-testid": i.leverage, children: `${t}x` });
+  return t === void 0 ? /* @__PURE__ */ e(i, {}) : /* @__PURE__ */ e("span", { "data-testid": r.leverage, children: `${t}x` });
 }
-function P({
+function $({
   data: t
 }) {
-  return t === void 0 ? /* @__PURE__ */ e(r, {}) : /* @__PURE__ */ e("span", { "data-testid": i.utilization, children: o(t) });
+  return t === void 0 ? /* @__PURE__ */ e(i, {}) : /* @__PURE__ */ e("span", { "data-testid": r.utilization, children: o(t) });
 }
-function T({
+function z({
   data: t
 }) {
   if (t === void 0)
-    return /* @__PURE__ */ e(r, {});
+    return /* @__PURE__ */ e(i, {});
   const n = t < 1e4 ? "text-destructive" : t < 11e3 ? "text-warning" : "text-success";
-  return /* @__PURE__ */ e("span", { "data-testid": i.healthFactor, className: c(n), children: (t / 1e4).toFixed(2) });
+  return /* @__PURE__ */ e("span", { "data-testid": r.healthFactor, className: c(n), children: (t / 1e4).toFixed(2) });
 }
-function $({
+function w({
   data: t,
   token: n
 }) {
   if (t === void 0 || n === void 0)
-    return /* @__PURE__ */ e(r, {});
+    return /* @__PURE__ */ e(i, {});
   const u = Number(t) / 10 ** n.decimals;
-  return /* @__PURE__ */ e("span", { "data-testid": i.tokenBigint, children: `${u.toLocaleString(void 0, { maximumFractionDigits: 6 })} ${n.symbol}` });
+  return /* @__PURE__ */ e("span", { "data-testid": r.tokenBigint, children: `${u.toLocaleString(void 0, { maximumFractionDigits: 6 })} ${n.symbol}` });
 }
 export {
-  L as ApyValue,
-  T as HealthFactorValue,
-  A as LeverageValue,
-  $ as TokenBigint,
-  z as UsdValue,
-  P as UtilizationValue
+  F as ApyValue,
+  z as HealthFactorValue,
+  P as LeverageValue,
+  w as TokenBigint,
+  L as UsdValue,
+  $ as UtilizationValue,
+  o as bps
 };

package/dist/esm/components/composites/pool-assets-table/pool-assets-table-row.js

@@ -1,32 +1,33 @@
 import { jsx as e, jsxs as t, Fragment as N } from "react/jsx-runtime";
 import "react";
-import "@gearbox-protocol/sdk/common-utils";
-import { useIsMobile as y, useIsDesktop as L } from "../../../hooks/use-media-query.js";
 import "@gearbox-protocol/sdk";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
-import { percentageTemplate as S } from "../../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../utils/z-index.js";
+import { bps as y } from "../../base/values/scalars.js";
+import "../../badge/badge.js";
+import { FormattedMessageTyped as o } from "../../typed-intl/index.js";
+import { useIsMobile as L, useIsDesktop as S } from "../../../hooks/use-media-query.js";
 import { ShortString as c } from "../../short-string/short-string.js";
 import { GridTableRow as A, GridTableCell as s } from "../../table/grid-table.js";
 import { TableLineSm as k, TableCellSm as p } from "../../table/table-sm.js";
 import { TokenSymbol as v } from "../../token-symbol/token-symbol.js";
 import { TokenTemplate as d } from "../../token-template/token-template.js";
-import { FormattedMessageTyped as o } from "../../typed-intl/index.js";
 import { Typography as w } from "../../typography/typography.js";
-function O({
+function V({
   poolName: h,
   token: l,
   currentQuota: g,
   underlyingToken: r,
   last: u
 }) {
-  const { limit: f, totalQuoted: x, rate: T } = g, a = y(), b = L() ? 21 : a ? 40 : 16, i = () => /* @__PURE__ */ t("div", { className: "flex items-center flex-col-auto", children: [
+  const { limit: f, totalQuoted: b, rate: x } = g, i = L(), T = S() ? 21 : i ? 40 : 16, a = () => /* @__PURE__ */ t("div", { className: "flex items-center flex-col-auto", children: [
     /* @__PURE__ */ e(v, { token: l, size: 32 }),
     /* @__PURE__ */ t("span", { className: "ml-1.5 md:ml-2.5 text-left", children: [
-      /* @__PURE__ */ e(c, { maxLength: b, children: l?.title }),
+      /* @__PURE__ */ e(c, { maxLength: T, children: l?.title }),
       /* @__PURE__ */ e(
         w,
         {
@@ -38,7 +39,7 @@ function O({
         }
       )
     ] })
-  ] }), m = () => S(T), n = () => /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+  ] }), m = () => y(Number(x)), n = () => /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
     o,
     {
       messageId: "components.poolAssetsTable.usage",
@@ -46,7 +47,7 @@ function O({
         amount: /* @__PURE__ */ e(
           d,
           {
-            value: x,
+            value: b,
             token: r,
             decimalPartLength: 2,
             precision: 2,
@@ -77,12 +78,12 @@ function O({
       style: {
         minHeight: "75px"
       },
-      children: a ? /* @__PURE__ */ e(s, { span: "full", size: "sm", className: "px-3 py-0!", children: /* @__PURE__ */ t(
+      children: i ? /* @__PURE__ */ e(s, { span: "full", size: "sm", className: "px-3 py-0!", children: /* @__PURE__ */ t(
         k,
         {
           columns: 2,
           columnsXs: 2,
-          title: i(),
+          title: a(),
           className: "w-full",
           children: [
             /* @__PURE__ */ e(
@@ -102,7 +103,7 @@ function O({
           ]
         }
       ) }) : /* @__PURE__ */ t(N, { children: [
-        /* @__PURE__ */ e(s, { textAlign: "left", className: "pl-4", size: "sm", children: i() }),
+        /* @__PURE__ */ e(s, { textAlign: "left", className: "pl-4", size: "sm", children: a() }),
         /* @__PURE__ */ e(s, { textAlign: "right", size: "sm", children: m() }),
         /* @__PURE__ */ e(s, { textAlign: "right", className: "pr-4", size: "sm", children: n() })
       ] })
@@ -110,5 +111,5 @@ function O({
   );
 }
 export {
-  O as PoolAssetsTableRow
+  V as PoolAssetsTableRow
 };