@gearbox-protocol/ui-kit 4.0.0-next.34 → 4.0.0-next.36

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

@@ -5,13 +5,13 @@ 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 T } from "./chart-with-side-card/constants.js";
 import { DetailedPageTitle as d } from "./detailed-page-title/detailed-page-title.js";
-import { AsideAlignAnchor as S } from "./details-view/detail-aside/detail-aside-scope.js";
+import { AsideAlignAnchor as c } from "./details-view/detail-aside/detail-aside-scope.js";
 import { DetailAsideScreenLayout as g } from "./details-view/detail-aside/detail-aside-screen-layout.js";
 import { DetailsView as k, DetailsViewLeftPane as B, DetailsViewManagePane as A } from "./details-view/details-view.js";
 import { HealthFactorBlockTest as L } from "./health-factor-block/constants.js";
-import { HealthFactorBlock as y } from "./health-factor-block/health-factor-block.js";
+import { HealthFactorBlock as I } from "./health-factor-block/health-factor-block.js";
 import { HistoryChart as h } from "./history-chart/history-chart.js";
-import { InfoLine as M, InfoList as V, InfoSectionTitle as D, PointsInfoLine as H } from "./info-list/info-list.js";
+import { InfoLine as w, InfoList as M, InfoSectionTitle as D, PointsInfoLine as H } from "./info-list/info-list.js";
 import { InfoPortalOut as E, InfoPortalProvider as q } from "./info-portal/info-portal.js";
 import { LeverageInput as N } from "./leverage-input/leverage-input.js";
 import { LeveragePresetChipsTest as F } from "./leverage-preset-chips/constants.js";
@@ -27,13 +27,13 @@ import { NestedInfoStackTest as fe } from "./nested-info-stack/constants.js";
 import { NestedInfoStack as xe } from "./nested-info-stack/nested-info-stack.js";
 import { PageHeadProvider as Te, PageTitle as le } from "./page-title/page-title.js";
 import { PoolApyBreakdownCardTest as Pe } from "./pool-apy-breakdown-card/constants.js";
-import { PoolApyBreakdownCard as ce } from "./pool-apy-breakdown-card/pool-apy-breakdown-card.js";
+import { PoolApyBreakdownCard as Se } from "./pool-apy-breakdown-card/pool-apy-breakdown-card.js";
 import { PositionAssetsTest as ue } from "./position-assets/constants.js";
 import { PositionAssets as Be } from "./position-assets/position-assets.js";
 import { ReviewButton as be } from "./review-button/review-button.js";
 import { SectionHeading as Ce } from "./section-heading/section-heading.js";
-import { SEGMENTED_TABS_INACTIVE_BUTTON_CLASS as Ie, SegmentedTabs as he } from "./segmented-tabs/segmented-tabs.js";
-import { SideCardTest as Me } from "./side-card/constants.js";
+import { SEGMENTED_TABS_INACTIVE_BUTTON_CLASS as ye, SegmentedTabs as he } from "./segmented-tabs/segmented-tabs.js";
+import { SideCardTest as we } from "./side-card/constants.js";
 import { SideCard as De } from "./side-card/side-card.js";
 import { SPACE_HEIGHT as ve, SPACE_PX as Ee } from "./spacing.js";
 import { Stack as _e } from "./stack/stack.js";
@@ -51,63 +51,64 @@ import { TitleMeta as fo } from "./title-meta/title-meta.js";
 import { TokenAmount as xo } from "./token-amount/token-amount.js";
 import { TokenPairSymbolTest as To } from "./token-pair-symbol/constants.js";
 import { TokenPairSymbol as Po } from "./token-pair-symbol/token-pair-symbol.js";
-import { TokenPairTitleTest as co } from "./token-pair-title/constants.js";
+import { TokenPairTitleTest as So } from "./token-pair-title/constants.js";
 import { TokenPairTitle as uo } from "./token-pair-title/token-pair-title.js";
 import { PositionShortLabelTest as Bo, ValueTest as Ao } from "./values/constants.js";
 import { PnlValue as Lo } from "./values/pnl-value.js";
-import { PointsValue as yo } from "./values/points-value.js";
+import { PointsValue as Io } from "./values/points-value.js";
 import { PositionShortLabel as ho } from "./values/position-short-label.js";
-import { PositionStatusBadge as Mo } from "./values/position-status-badge.js";
+import { PositionStatusBadge as wo } from "./values/position-status-badge.js";
 import { PositionTypeBadge as Do } from "./values/position-type-badge.js";
-import { ApyValue as vo, HealthFactorValue as Eo, LeverageValue as qo, TokenBigint as _o, UsdValue as No, UtilizationValue as Ro, bps as Fo } from "./values/scalars.js";
-import { AmountInputTest as Uo } from "./amount-input/constants.js";
-import { DetailedPageTitleTest as Wo } from "./detailed-page-title/constants.js";
-import { DetailsViewTest as Xo } from "./details-view/constants.js";
-import { HistoryChartTest as Jo } from "./history-chart/constants.js";
-import { InfoListTest as Qo } from "./info-list/constants.js";
-import { LeverageInputTest as Zo } from "./leverage-input/constants.js";
-import { ManagePaneTest as er } from "./manage-pane/constants.js";
-import { PageTitleTest as rr } from "./page-title/constants.js";
-import { ReviewButtonTest as ar } from "./review-button/constants.js";
-import { SectionHeadingTest as pr } from "./section-heading/constants.js";
-import { SegmentedTabsTest as fr } from "./segmented-tabs/constants.js";
-import { StackTest as xr } from "./stack/constants.js";
-import { StatBadgeTest as Tr } from "./stat-badge/constants.js";
-import { StickyBarTest as dr } from "./sticky-bar/constants.js";
-import { TabberTest as Sr } from "./tabber/constants.js";
-import { TokenAmountTest as gr } from "./token-amount/constants.js";
+import { PriceImpactValue as vo, priceImpact as Eo } from "./values/price-impact-value.js";
+import { ApyValue as _o, HealthFactorValue as No, LeverageValue as Ro, TokenBigint as Fo, UsdValue as Go, UtilizationValue as Uo, bps as Oo } from "./values/scalars.js";
+import { AmountInputTest as zo } from "./amount-input/constants.js";
+import { DetailedPageTitleTest as jo } from "./detailed-page-title/constants.js";
+import { DetailsViewTest as Ko } from "./details-view/constants.js";
+import { HistoryChartTest as Yo } from "./history-chart/constants.js";
+import { InfoListTest as $o } from "./info-list/constants.js";
+import { LeverageInputTest as or } from "./leverage-input/constants.js";
+import { ManagePaneTest as tr } from "./manage-pane/constants.js";
+import { PageTitleTest as ir } from "./page-title/constants.js";
+import { ReviewButtonTest as mr } from "./review-button/constants.js";
+import { SectionHeadingTest as nr } from "./section-heading/constants.js";
+import { SegmentedTabsTest as sr } from "./segmented-tabs/constants.js";
+import { StackTest as lr } from "./stack/constants.js";
+import { StatBadgeTest as Pr } from "./stat-badge/constants.js";
+import { StickyBarTest as Sr } from "./sticky-bar/constants.js";
+import { TabberTest as ur } from "./tabber/constants.js";
+import { TokenAmountTest as Br } from "./token-amount/constants.js";
 export {
   r as AmountInput,
-  Uo as AmountInputTest,
-  vo as ApyValue,
-  S as AsideAlignAnchor,
+  zo as AmountInputTest,
+  _o as ApyValue,
+  c as AsideAlignAnchor,
   p as BorrowRateBlock,
   f as BorrowRateBlockTest,
   x as ChartWithSideCard,
   T as ChartWithSideCardTest,
   g as DetailAsideScreenLayout,
   d as DetailedPageTitle,
-  Wo as DetailedPageTitleTest,
+  jo as DetailedPageTitleTest,
   k as DetailsView,
   B as DetailsViewLeftPane,
   A as DetailsViewManagePane,
-  Xo as DetailsViewTest,
-  y as HealthFactorBlock,
+  Ko as DetailsViewTest,
+  I as HealthFactorBlock,
   L as HealthFactorBlockTest,
-  Eo as HealthFactorValue,
+  No as HealthFactorValue,
   h as HistoryChart,
-  Jo as HistoryChartTest,
-  M as InfoLine,
-  V as InfoList,
-  Qo as InfoListTest,
+  Yo as HistoryChartTest,
+  w as InfoLine,
+  M as InfoList,
+  $o as InfoListTest,
   E as InfoPortalOut,
   q as InfoPortalProvider,
   D as InfoSectionTitle,
   N as LeverageInput,
-  Zo as LeverageInputTest,
+  or as LeverageInputTest,
   U as LeveragePresetChips,
   F as LeveragePresetChipsTest,
-  qo as LeverageValue,
+  Ro as LeverageValue,
   X as LiquidationParamsTable,
   W as LiquidationParamsTableTest,
   Q as LiquidationPriceBlock,
@@ -117,65 +118,67 @@ export {
   ee as ManagePaneMessage,
   oe as ManagePaneTab,
   re as ManagePaneTabDropdown,
-  er as ManagePaneTest,
+  tr as ManagePaneTest,
   pe as MoreAccordion,
   ae as MoreAccordionTest,
   xe as NestedInfoStack,
   fe as NestedInfoStackTest,
   Te as PageHeadProvider,
   le as PageTitle,
-  rr as PageTitleTest,
+  ir as PageTitleTest,
   Lo as PnlValue,
   H as PointsInfoLine,
-  yo as PointsValue,
-  ce as PoolApyBreakdownCard,
+  Io as PointsValue,
+  Se as PoolApyBreakdownCard,
   Pe as PoolApyBreakdownCardTest,
   Be as PositionAssets,
   ue as PositionAssetsTest,
   ho as PositionShortLabel,
   Bo as PositionShortLabelTest,
-  Mo as PositionStatusBadge,
+  wo as PositionStatusBadge,
   Do as PositionTypeBadge,
+  vo as PriceImpactValue,
   be as ReviewButton,
-  ar as ReviewButtonTest,
-  Ie as SEGMENTED_TABS_INACTIVE_BUTTON_CLASS,
+  mr as ReviewButtonTest,
+  ye as SEGMENTED_TABS_INACTIVE_BUTTON_CLASS,
   ve as SPACE_HEIGHT,
   Ee as SPACE_PX,
   Ce as SectionHeading,
-  pr as SectionHeadingTest,
+  nr as SectionHeadingTest,
   he as SegmentedTabs,
-  fr as SegmentedTabsTest,
+  sr as SegmentedTabsTest,
   De as SideCard,
-  Me as SideCardTest,
+  we as SideCardTest,
   _e as Stack,
-  xr as StackTest,
+  lr as StackTest,
   Re as StatBadge,
   Fe as StatBadgeGrid,
-  Tr as StatBadgeTest,
+  Pr as StatBadgeTest,
   Ue as StickyBar,
-  dr as StickyBarTest,
+  Sr as StickyBarTest,
   Xe as StrategyApyBreakdownCard,
   We as StrategyApyBreakdownCardTest,
   Je as Tabber,
   Ke as TabberSection,
-  Sr as TabberTest,
+  ur as TabberTest,
   ao as TimeToLiquidationBlock,
   ro as TimeToLiquidationBlockTest,
   fo as TitleMeta,
   po as TitleMetaTest,
   xo as TokenAmount,
-  gr as TokenAmountTest,
-  _o as TokenBigint,
+  Br as TokenAmountTest,
+  Fo as TokenBigint,
   Po as TokenPairSymbol,
   To as TokenPairSymbolTest,
   uo as TokenPairTitle,
-  co as TokenPairTitleTest,
+  So as TokenPairTitleTest,
   a as TokenSelectPanel,
-  No as UsdValue,
-  Ro as UtilizationValue,
+  Go as UsdValue,
+  Uo as UtilizationValue,
   Ao as ValueTest,
-  Fo as bps,
+  Oo as bps,
   Qe as isTabber,
+  Eo as priceImpact,
   Ze as useDetailScrollSpy,
   eo as useTitleText
 };

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

@@ -5,6 +5,7 @@ class a {
   static utilization = "value-utilization";
   static healthFactor = "value-health-factor";
   static pnl = "value-pnl";
+  static priceImpact = "value-price-impact";
   static tokenBigint = "value-token-bigint";
   static points = "value-points";
   static placeholder = "value-placeholder";

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

@@ -1,23 +1,26 @@
 import { PositionShortLabelTest as t, ValueTest as r } from "./constants.js";
 import { PnlValue as i } from "./pnl-value.js";
 import { PointsValue as p } from "./points-value.js";
-import { PositionShortLabel as n } from "./position-short-label.js";
-import { PositionStatusBadge as V } from "./position-status-badge.js";
-import { PositionTypeBadge as m } from "./position-type-badge.js";
-import { ApyValue as P, HealthFactorValue as g, LeverageValue as T, TokenBigint as b, UsdValue as d, UtilizationValue as h, bps as B } from "./scalars.js";
+import { PositionShortLabel as s } from "./position-short-label.js";
+import { PositionStatusBadge as n } from "./position-status-badge.js";
+import { PositionTypeBadge as f } from "./position-type-badge.js";
+import { PriceImpactValue as P, priceImpact as c } from "./price-impact-value.js";
+import { ApyValue as T, HealthFactorValue as b, LeverageValue as d, TokenBigint as h, UsdValue as B, UtilizationValue as L, bps as S } from "./scalars.js";
 export {
-  P as ApyValue,
-  g as HealthFactorValue,
-  T as LeverageValue,
+  T as ApyValue,
+  b as HealthFactorValue,
+  d as LeverageValue,
   i as PnlValue,
   p as PointsValue,
-  n as PositionShortLabel,
+  s as PositionShortLabel,
   t as PositionShortLabelTest,
-  V as PositionStatusBadge,
-  m as PositionTypeBadge,
-  b as TokenBigint,
-  d as UsdValue,
-  h as UtilizationValue,
+  n as PositionStatusBadge,
+  f as PositionTypeBadge,
+  P as PriceImpactValue,
+  h as TokenBigint,
+  B as UsdValue,
+  L as UtilizationValue,
   r as ValueTest,
-  B as bps
+  S as bps,
+  c as priceImpact
 };

package/dist/esm/components/base/values/pnl-value.js

@@ -1,4 +1,4 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "react";
 import "@gearbox-protocol/sdk/onchain";
 import { cn as s } from "../../../utils/cn.js";
@@ -6,17 +6,18 @@ import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../utils/z-index.js";
-import { ValueTest as r } from "./constants.js";
+import { ValueTest as o } from "./constants.js";
 function x({
   data: e
 }) {
-  if (e === void 0 || e.total.valueUsd === null)
-    return /* @__PURE__ */ o("span", { "data-testid": r.placeholder, children: "—" });
-  const t = e.total.valueUsd, i = t > 0 ? "+" : t < 0 ? "−" : "";
-  return /* @__PURE__ */ o(
+  const t = typeof e == "number" ? e : e?.total.valueUsd ?? null;
+  if (t === null)
+    return /* @__PURE__ */ r("span", { "data-testid": o.placeholder, children: "—" });
+  const i = t > 0 ? "+" : t < 0 ? "−" : "";
+  return /* @__PURE__ */ r(
     "span",
     {
-      "data-testid": r.pnl,
+      "data-testid": o.pnl,
       className: s(t > 0 && "text-success", t < 0 && "text-destructive"),
       children: `${i}$${Math.abs(t).toFixed(2)}`
     }

package/dist/esm/components/base/values/price-impact-value.js

@@ -0,0 +1,23 @@
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk/onchain";
+import "clsx";
+import "tailwind-merge";
+import "sonner";
+import { formatPercentAmount as o } 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";
+function m(r) {
+  return `${r > 0n ? "+" : ""}${o(Number(r) / 1e4, 2)}%`;
+}
+function g({
+  data: r
+}) {
+  return r === void 0 ? /* @__PURE__ */ t("span", { "data-testid": i.placeholder, children: "—" }) : /* @__PURE__ */ t("span", { "data-testid": i.priceImpact, children: m(r) });
+}
+export {
+  g as PriceImpactValue,
+  m as priceImpact
+};