@gearbox-protocol/ui-kit 4.0.0-next.26 → 4.0.0-next.28

package/dist/esm/components/index.js

@@ -249,25 +249,25 @@ import { VerticalIndicator as cs, verticalIndicatorVariants as us } from "./vert
 import { VSpace as Ss } from "./vspace/vspace.js";
 import { WithCopy as Ds } from "./with-copy/with-copy.js";
 import { WithTitle as bs } from "./with-title/with-title.js";
-import { YieldBreakdownTooltip as Bs } from "./yield-breakdown-tooltip/yield-breakdown-tooltip.js";
-import { AmountInputTest as Is } from "./base/amount-input/constants.js";
-import { DetailedPageTitleTest as Vs } from "./base/detailed-page-title/constants.js";
-import { DetailsViewTest as Es } from "./base/details-view/constants.js";
-import { HistoryChartTest as Fs } from "./base/history-chart/constants.js";
-import { InfoListTest as _s } from "./base/info-list/constants.js";
-import { LeverageInputTest as Hs } from "./base/leverage-input/constants.js";
-import { ManagePaneTest as vs } from "./base/manage-pane/constants.js";
-import { PageTitleTest as Ns } from "./base/page-title/constants.js";
-import { ReviewButtonTest as Ws } from "./base/review-button/constants.js";
-import { SectionHeadingTest as qs } from "./base/section-heading/constants.js";
-import { SegmentedTabsTest as Ys } from "./base/segmented-tabs/constants.js";
-import { StackTest as Qs } from "./base/stack/constants.js";
-import { StatBadgeTest as js } from "./base/stat-badge/constants.js";
-import { StickyBarTest as $s } from "./base/sticky-bar/constants.js";
-import { TabberTest as oT } from "./base/tabber/constants.js";
-import { TokenAmountTest as tT } from "./base/token-amount/constants.js";
-import { BaseTableLineTest as iT, BaseTableTest as nT } from "./base-table/constants.js";
-import { decimalsToStep as lT, findClosestPoint as mT, formatWithDecimals as fT, formatWithoutDecimals as xT, splitInterval as sT, validateMinMax as TT } from "../utils/math.js";
+import { ApyBreakdownTooltip as Bs, YieldBreakdownTooltip as hs } from "./yield-breakdown-tooltip/yield-breakdown-tooltip.js";
+import { AmountInputTest as ks } from "./base/amount-input/constants.js";
+import { DetailedPageTitleTest as ws } from "./base/detailed-page-title/constants.js";
+import { DetailsViewTest as Ms } from "./base/details-view/constants.js";
+import { HistoryChartTest as Rs } from "./base/history-chart/constants.js";
+import { InfoListTest as ys } from "./base/info-list/constants.js";
+import { LeverageInputTest as Gs } from "./base/leverage-input/constants.js";
+import { ManagePaneTest as Os } from "./base/manage-pane/constants.js";
+import { PageTitleTest as Us } from "./base/page-title/constants.js";
+import { ReviewButtonTest as Xs } from "./base/review-button/constants.js";
+import { SectionHeadingTest as Ks } from "./base/section-heading/constants.js";
+import { SegmentedTabsTest as Zs } from "./base/segmented-tabs/constants.js";
+import { StackTest as zs } from "./base/stack/constants.js";
+import { StatBadgeTest as Js } from "./base/stat-badge/constants.js";
+import { StickyBarTest as eT } from "./base/sticky-bar/constants.js";
+import { TabberTest as rT } from "./base/tabber/constants.js";
+import { TokenAmountTest as aT } from "./base/token-amount/constants.js";
+import { BaseTableLineTest as nT, BaseTableTest as pT } from "./base-table/constants.js";
+import { decimalsToStep as mT, findClosestPoint as fT, formatWithDecimals as xT, formatWithoutDecimals as sT, splitInterval as TT, validateMinMax as dT } from "../utils/math.js";
 export {
   gn as AXIS_EDGE_LABEL_PADDING_PX,
   cn as AXIS_FONT_SIZE,
@@ -294,9 +294,10 @@ export {
   Bt as AllocationWheel,
   Vt as AllocationWheelTest,
   R as AmountInput,
-  Is as AmountInputTest,
+  ks as AmountInputTest,
   ml as AppFooter,
   sl as AppHeader,
+  Bs as ApyBreakdownTooltip,
   sr as ApyValue,
   Z as AsideAlignAnchor,
   L as AssetsListCell,
@@ -307,8 +308,8 @@ export {
   Ar as BaseLink,
   Pr as BaseTable,
   Lr as BaseTableLine,
-  iT as BaseTableLineTest,
-  nT as BaseTableTest,
+  nT as BaseTableLineTest,
+  pT as BaseTableTest,
   Il as BlockedRegionDialog,
   G as BorrowRateBlock,
   O as BorrowRateBlockTest,
@@ -350,11 +351,11 @@ export {
   K as DetailedPageTitle,
   Ea as DetailedPageTitleCopyButton,
   Fa as DetailedPageTitleExplorerDropdown,
-  Vs as DetailedPageTitleTest,
+  ws as DetailedPageTitleTest,
   J as DetailsView,
   $ as DetailsViewLeftPane,
   ee as DetailsViewManagePane,
-  Es as DetailsViewTest,
+  Ms as DetailsViewTest,
   Ha as Dialog,
   Na as DialogContainer,
   Wa as DialogContent,
@@ -435,12 +436,12 @@ export {
   ip as HelpTip,
   np as HelpTipIcon,
   ne as HistoryChart,
-  Fs as HistoryChartTest,
+  Rs as HistoryChartTest,
   xp as IconButton,
   ol as InfiniteScrollWrapper,
   le as InfoLine,
   me as InfoList,
-  _s as InfoListTest,
+  ys as InfoListTest,
   Te as InfoPortalOut,
   de as InfoPortalProvider,
   fe as InfoSectionTitle,
@@ -454,7 +455,7 @@ export {
   Ml as LegalAgreementPanel,
   Fl as LegalAgreementPanelTest,
   ce as LeverageInput,
-  Hs as LeverageInputTest,
+  Gs as LeverageInputTest,
   Ae as LeveragePresetChips,
   Ce as LeveragePresetChipsTest,
   dr as LeverageValue,
@@ -472,7 +473,7 @@ export {
   Me as ManagePaneMessage,
   Fe as ManagePaneTab,
   Re as ManagePaneTabDropdown,
-  vs as ManagePaneTest,
+  Os as ManagePaneTest,
   _a as Modal,
   Ge as MoreAccordion,
   ye as MoreAccordionTest,
@@ -486,7 +487,7 @@ export {
   ii as OneFieldDialog,
   Xe as PageHeadProvider,
   qe as PageTitle,
-  Ns as PageTitleTest,
+  Us as PageTitleTest,
   rr as PnlValue,
   lm as PointsIcon,
   xe as PointsInfoLine,
@@ -512,7 +513,7 @@ export {
   um as RWA_POOL_ROW_HOVER_WRAPPER_CLASS,
   zr as RangeButtons,
   oo as ReviewButton,
-  Ws as ReviewButtonTest,
+  Xs as ReviewButtonTest,
   sm as RoundedImage,
   io as SEGMENTED_TABS_INACTIVE_BUTTON_CLASS,
   so as SPACE_HEIGHT,
@@ -521,10 +522,10 @@ export {
   Sm as SdkStatusPillTest,
   Bm as SearchLine,
   to as SectionHeading,
-  qs as SectionHeadingTest,
+  Ks as SectionHeadingTest,
   wm as SegmentedControl,
   no as SegmentedTabs,
-  Ys as SegmentedTabsTest,
+  Zs as SegmentedTabsTest,
   Fm as Select,
   Rm as SelectContent,
   _m as SelectGroup,
@@ -557,14 +558,14 @@ export {
   kf as SpinnerOverlay,
   Mf as SplitList,
   co as Stack,
-  Qs as StackTest,
+  zs as StackTest,
   Co as StatBadge,
   So as StatBadgeGrid,
-  js as StatBadgeTest,
+  Js as StatBadgeTest,
   Gf as StatusBars,
   Rf as StatusDot,
   Do as StickyBar,
-  $s as StickyBarTest,
+  eT as StickyBarTest,
   Bo as StrategyApyBreakdownCard,
   bo as StrategyApyBreakdownCardTest,
   St as StyledButton,
@@ -578,7 +579,7 @@ export {
   Nf as TabItem,
   Io as Tabber,
   ko as TabberSection,
-  oT as TabberTest,
+  rT as TabberTest,
   xx as Table,
   sx as TableBody,
   Tx as TableCaption,
@@ -607,7 +608,7 @@ export {
   No as TitleMeta,
   vo as TitleMetaTest,
   Wo as TokenAmount,
-  tT as TokenAmountTest,
+  aT as TokenAmountTest,
   gr as TokenBigint,
   Kx as TokenIcon,
   Yo as TokenPairSymbol,
@@ -646,14 +647,14 @@ export {
   Ds as WithCopy,
   hm as WithSearchLine,
   bs as WithTitle,
-  Bs as YieldBreakdownTooltip,
+  hs as YieldBreakdownTooltip,
   l as alertBadgeVariants,
   Hr as backButtonVariants,
   I as badgeVariants,
   Cr as bps,
   Or as buttonVariants,
   Yt as computeTransactionConfirmDialogLayout,
-  lT as decimalsToStep,
+  mT as decimalsToStep,
   dp as faArrowDown,
   gp as faArrowLeft,
   cp as faArrowRight,
@@ -693,9 +694,9 @@ export {
   zp as faWallet,
   jp as faXmark,
   xn as filterBlockVariants,
-  mT as findClosestPoint,
-  fT as formatWithDecimals,
-  xT as formatWithoutDecimals,
+  fT as findClosestPoint,
+  xT as formatWithDecimals,
+  sT as formatWithoutDecimals,
   Mr as getBreakpointState,
   bn as getDefaultOptions,
   Ln as getDefaultSeries,
@@ -738,7 +739,7 @@ export {
   Wm as selectTriggerVariants,
   Pa as shouldShowTransactionProgressStepper,
   tf as skeletonVariants,
-  sT as splitInterval,
+  TT as splitInterval,
   _f as statusDotVariants,
   Fr as subscribeBreakpoints,
   Sx as tableCellVariants,
@@ -763,6 +764,6 @@ export {
   Nx as useTheme,
   Fo as useTitleText,
   Cf as validateMarkerPoints,
-  TT as validateMinMax,
+  dT as validateMinMax,
   us as verticalIndicatorVariants
 };

package/dist/esm/components/yield-breakdown-tooltip/index.js

@@ -1,4 +1,5 @@
-import { YieldBreakdownTooltip as r } from "./yield-breakdown-tooltip.js";
+import { ApyBreakdownTooltip as p, YieldBreakdownTooltip as r } from "./yield-breakdown-tooltip.js";
 export {
+  p as ApyBreakdownTooltip,
   r as YieldBreakdownTooltip
 };

package/dist/esm/components/yield-breakdown-tooltip/yield-breakdown-tooltip.js

@@ -1,204 +1,184 @@
-import { jsxs as a, jsx as e, Fragment as N } from "react/jsx-runtime";
-import { PointsIcon as A } from "../points-icon/points-icon.js";
-import { TokenIcon as I } from "../token-icon/token-icon.js";
-import { SimpleTooltip as P } from "../tooltip/simple-tooltip.js";
+import { jsx as e, jsxs as c, Fragment as A } from "react/jsx-runtime";
+import { APY_BREAKDOWN_TOOLTIP_WIDTH as B, ApyBreakdownBody as v, formatBreakdownRate as u, ApyBreakdownRow as y, periodMessageId as w, ApyBreakdownDivider as h } from "../base/apy-breakdown-body/apy-breakdown-body.js";
+import { PoolApyBreakdownCard as b } from "../base/pool-apy-breakdown-card/pool-apy-breakdown-card.js";
+import { PointsIcon as I } from "../points-icon/points-icon.js";
+import { TokenIcon as P } from "../token-icon/token-icon.js";
+import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import { FormattedMessageTyped as s } from "../typed-intl/index.js";
-import "react";
-import { tokenRewardsOf as T, pointProgramsOf as $, totalApyOf as j } from "../../utils/apy-breakdown.js";
-import "@gearbox-protocol/sdk/onchain";
-import { bpsToPercent as R } from "../../utils/bps.js";
-import { cn as f } from "../../utils/cn.js";
-import "sonner";
-import { formatLeverage as S } from "../../utils/format-leverage.js";
-import { formatCompactPercent as C } from "../../utils/format-money.js";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
-function p(o) {
-  const n = R(o), r = C(Math.abs(n));
-  return n < 0 ? `-${r}` : r;
+import { FormattedMessageTyped as d } from "../typed-intl/index.js";
+import { tokenRewardsOf as O, pointProgramsOf as R, totalApyOf as x } from "../../utils/apy-breakdown.js";
+import { formatLeverage as N } from "../../utils/format-leverage.js";
+function S({
+  title: t,
+  children: l,
+  placement: s = "left",
+  open: a,
+  className: i,
+  triggerClassName: n
+}) {
+  return /* @__PURE__ */ e(
+    T,
+    {
+      placement: s,
+      triangle: !1,
+      type: "modal-tooltip",
+      minWidth: B,
+      maxWidth: B,
+      title: t,
+      open: a,
+      className: i,
+      triggerClassName: n,
+      children: l
+    }
+  );
 }
-function m(o, n, r) {
-  return o === "7d" ? r : n;
+function H({
+  supplyApy: t,
+  maxLeverage: l,
+  collateralApy: s,
+  borrowApy: a,
+  quotaRate: i,
+  period: n,
+  children: r,
+  className: m,
+  open: g
+}) {
+  const p = l !== void 0 && l > 0;
+  return /* @__PURE__ */ e(
+    S,
+    {
+      placement: "bottom",
+      title: /* @__PURE__ */ e("span", { className: m, children: r }),
+      triggerClassName: m,
+      open: g,
+      children: p ? /* @__PURE__ */ e(
+        W,
+        {
+          supplyApy: t,
+          maxLeverage: l,
+          collateralApy: s,
+          borrowApy: a,
+          quotaRate: i,
+          period: n
+        }
+      ) : /* @__PURE__ */ e(b, { data: t, period: n })
+    }
+  );
 }
-function Z({
-  supplyApy: o,
-  maxLeverage: n,
-  collateralApy: r,
-  borrowApy: g,
-  quotaRate: b,
-  period: l,
-  children: h,
-  className: w
+function W({
+  supplyApy: t,
+  maxLeverage: l,
+  collateralApy: s,
+  borrowApy: a,
+  quotaRate: i,
+  period: n
 }) {
-  const d = n !== void 0 && n > 0, i = d ? r : r ?? o, k = i ? T(i) : [], v = $(o), x = j(o), u = g != null || b != null ? -((g ?? 0) + (b ?? 0)) : void 0, y = v.filter((t) => t.multiplier != null), B = /* @__PURE__ */ a(
-    "div",
+  const r = s, m = r ? O(r) : [], g = R(t), p = x(t), f = a != null || i != null ? -((a ?? 0) + (i ?? 0)) : void 0, k = g.filter((o) => o.multiplier != null);
+  return /* @__PURE__ */ c(
+    v,
     {
-      className: f(
-        "flex w-[400px] max-w-[calc(100vw-32px)] flex-col gap-4 p-4",
-        "rounded-xl",
-        "bg-card text-card-foreground",
-        "border border-border",
-        "shadow-[0_4px_14px_rgba(0,0,0,0.15)]",
-        "text-left font-normal"
+      title: /* @__PURE__ */ e(
+        d,
+        {
+          messageId: w(
+            n,
+            "components.yieldBreakdown.titleNetAtLeverage",
+            "components.yieldBreakdown.titleNetAtLeverage7d"
+          ),
+          values: { leverage: N(l) }
+        }
       ),
+      chip: u(p),
+      chipPositive: p > 0,
       children: [
-        /* @__PURE__ */ a("div", { className: "flex h-6 items-center justify-between gap-3", children: [
-          /* @__PURE__ */ e("span", { className: "text-base font-semibold leading-4 text-foreground", children: d ? /* @__PURE__ */ e(
-            s,
-            {
-              messageId: m(
-                l,
-                "components.yieldBreakdown.titleNetAtLeverage",
-                "components.yieldBreakdown.titleNetAtLeverage7d"
-              ),
-              values: {
-                leverage: S(n)
-              }
-            }
-          ) : /* @__PURE__ */ e(
-            s,
-            {
-              messageId: m(
-                l,
-                "components.yieldBreakdown.titleNet",
-                "components.yieldBreakdown.titleNet7d"
-              )
-            }
-          ) }),
-          /* @__PURE__ */ e(
-            "span",
-            {
-              className: f(
-                "rounded-md px-2 py-0.5 text-sm font-semibold tabular-nums",
-                x > 0 ? "bg-success/20 text-success" : "bg-muted text-muted-foreground"
-              ),
-              children: p(x)
-            }
-          )
-        ] }),
-        i?.organicApy != null && /* @__PURE__ */ e(
-          c,
+        r?.organicApy != null ? /* @__PURE__ */ e(
+          y,
           {
-            muted: i.organicApy < 0,
+            muted: r.organicApy < 0,
             label: /* @__PURE__ */ e(
-              s,
+              d,
               {
-                messageId: d ? m(
-                  l,
+                messageId: w(
+                  n,
                   "components.yieldBreakdown.collateralApy",
                   "components.yieldBreakdown.collateralApy7d"
-                ) : m(
-                  l,
-                  "components.yieldBreakdown.baseApy",
-                  "components.yieldBreakdown.baseApy7d"
                 )
               }
             ),
-            value: p(i.organicApy)
+            value: u(r.organicApy)
           }
+        ) : null,
+        m.map(
+          (o) => o.supplyApr == null ? null : /* @__PURE__ */ e(
+            y,
+            {
+              muted: o.supplyApr < 0,
+              label: /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                  d,
+                  {
+                    messageId: "components.apyParts.extraAPY",
+                    values: { symbol: o.token.symbol }
+                  }
+                ) }),
+                /* @__PURE__ */ e(P, { token: o.token, size: 20 })
+              ] }),
+              value: u(o.supplyApr)
+            },
+            `incentive-${o.token.address}-${o.supplyApr}`
+          )
         ),
-        k.map((t) => t.supplyApr == null ? null : /* @__PURE__ */ e(
-          c,
-          {
-            muted: t.supplyApr < 0,
-            label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
-              /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                s,
-                {
-                  messageId: "components.apyParts.extraAPY",
-                  values: { symbol: t.token.symbol }
-                }
-              ) }),
-              /* @__PURE__ */ e(I, { token: t.token, size: 20 })
-            ] }),
-            value: p(t.supplyApr)
-          },
-          `incentive-${t.token.address}-${t.supplyApr}`
-        )),
-        d && u != null && /* @__PURE__ */ e(
-          c,
+        f != null ? /* @__PURE__ */ e(
+          y,
           {
-            muted: u < 0,
+            muted: f < 0,
             label: /* @__PURE__ */ e(
-              s,
+              d,
               {
-                messageId: m(
-                  l,
+                messageId: w(
+                  n,
                   "components.yieldBreakdown.borrowRate",
                   "components.yieldBreakdown.borrowRate7d"
                 )
               }
             ),
-            value: p(u)
+            value: u(f)
           }
-        ),
-        y.length > 0 && /* @__PURE__ */ a(N, { children: [
-          /* @__PURE__ */ e("div", { className: "h-px w-full bg-divider" }),
-          y.map((t) => /* @__PURE__ */ e(
-            c,
+        ) : null,
+        k.length > 0 ? /* @__PURE__ */ c(A, { children: [
+          /* @__PURE__ */ e(h, {}),
+          k.map((o) => /* @__PURE__ */ e(
+            y,
             {
-              label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
+              label: /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1.5", children: [
                 /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                  s,
+                  d,
                   {
                     messageId: "components.yieldBreakdown.programPoints",
-                    values: { name: t.name }
+                    values: { name: o.name }
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  A,
+                  I,
                   {
                     reward: {
-                      name: t.name,
-                      type: t.id
+                      name: o.name,
+                      type: o.id
                     },
                     size: 20
                   }
                 )
               ] }),
-              value: `${t.multiplier}×`
+              value: `${o.multiplier}×`
             },
-            `points-${t.id}`
+            `points-${o.id}`
           ))
-        ] })
+        ] }) : null
       ]
     }
   );
-  return /* @__PURE__ */ e(
-    P,
-    {
-      placement: "bottom",
-      triangle: !1,
-      type: "modal-tooltip",
-      minWidth: "100%",
-      maxWidth: "100%",
-      title: /* @__PURE__ */ e("span", { className: w, children: h }),
-      triggerClassName: w,
-      children: B
-    }
-  );
-}
-function c({
-  label: o,
-  value: n,
-  muted: r = !1
-}) {
-  return /* @__PURE__ */ a("div", { className: "flex h-6 items-center justify-between gap-3 text-sm leading-5", children: [
-    /* @__PURE__ */ e("span", { className: "min-w-0 font-normal text-muted-foreground", children: o }),
-    /* @__PURE__ */ e(
-      "span",
-      {
-        className: f(
-          "shrink-0 font-semibold tabular-nums",
-          r ? "text-muted-foreground" : "text-foreground"
-        ),
-        children: n
-      }
-    )
-  ] });
 }
 export {
-  Z as YieldBreakdownTooltip
+  S as ApyBreakdownTooltip,
+  H as YieldBreakdownTooltip
 };