@gearbox-protocol/ui-kit 4.0.0-next.15 → 4.0.0-next.17

package/dist/esm/locale/en.json.js

@@ -179,7 +179,8 @@ const e = {
   "components.strategyApyBreakdownCard.collateralApy": "Collateral APY",
   "components.strategyApyBreakdownCard.incentiveApy": "Incentive APY",
   "components.strategyApyBreakdownCard.borrowRate": "Borrow Rate",
-  "components.strategyApyBreakdownCard.formula": "{base} × {leverage} Lev.",
+  "components.strategyApyBreakdownCard.quotaRate": "Quota Rate",
+  "components.strategyApyBreakdownCard.formula": "{leverage} × {base}",
   "components.leveragePresetChips.label": "Leverage:",
   "components.liquidationParamsTable.lt": "Liquidation threshold",
   "components.liquidationParamsTable.penalty": "Liquidation discount",

package/dist/esm/utils/index.js

@@ -1,113 +1,117 @@
 import { generateId as r, useFormFieldIds as t } from "./a11y.js";
-import { pointProgramsOf as m, positiveTokenRewardsOf as n, tokenRewardsOf as i, totalApyOf as p } from "./apy-breakdown.js";
-import { bnToInputView as l } from "./bn-to-input-view.js";
+import { pointProgramsOf as m, positiveTokenRewardsOf as n, tokenRewardsOf as p, totalApyOf as i } from "./apy-breakdown.js";
+import { bnToInputView as s } from "./bn-to-input-view.js";
 import { bnToPrettyView as x } from "./bn-to-pretty-view.js";
-import { bpsToPercent as c } from "./bps.js";
+import { bpsToPercent as g } from "./bps.js";
 import { cn as S, cn as d } from "./cn.js";
-import { generateColorsFromBase as h, getCSSVariable as v, hexToRgba as P, hslToHex as b, resolveCSSColor as A } from "./colors.js";
+import { generateColorsFromBase as h, getCSSVariable as A, hexToRgba as v, hslToHex as y, resolveCSSColor as P } from "./colors.js";
 import { copyToClipboard as N } from "./copy.js";
-import { convertPercent as L, formatBytecodeSize as y, formatBytecodeVersion as C, formatTimestamp as w, shortenHash as F, significantTrunc as D } from "./format.js";
+import { convertPercent as I, formatBytecodeSize as k, formatBytecodeVersion as C, formatTimestamp as w, shortenHash as F, significantTrunc as D } from "./format.js";
 import { formatAssetAmount as V } from "./format-asset-amount.js";
-import { formatLeverage as M } from "./format-leverage.js";
+import { formatLeverage as B } from "./format-leverage.js";
 import { formatCompactPercent as _, formatMoney as E, formatMoneyAmount as H, formatPercentAmount as W, percentTemplate as Z, percentageTemplate as z } from "./format-money.js";
-import { FORMAT_CONSTANTS as X, formatNumberWithSuffix as q, formatPrice as j, getAdaptiveDecimals as G, isBelowDisplayThreshold as J, isEffectivelyZero as K, toSignificantDigits as Q } from "./format-number.js";
+import { FORMAT_CONSTANTS as X, formatNumberWithSuffix as q, formatPrice as Q, getAdaptiveDecimals as j, isBelowDisplayThreshold as G, isEffectivelyZero as J, toSignificantDigits as K } from "./format-number.js";
 import { slippageTemplate as $ } from "./format-slippage.js";
 import { formatChipLeverage as oe, leveragePresets as re } from "./leverage-presets.js";
 import { allLoaded as ae, loadingProgress as me, round5 as ne } from "./loading.js";
-import { decimalsToStep as pe, findClosestPoint as fe, formatWithDecimals as le, formatWithoutDecimals as se, splitInterval as xe, validateMinMax as Te } from "./math.js";
-import { getNetworkIcon as ge } from "./network-icons.js";
-import { bnToLiquidationPriceView as de, isPositiveFloat as ue, parseInputToBN as he, parseSmallNumber as ve } from "./parse-input-to-bn.js";
-import { pluralize as be, selectPluralString as Ae } from "./plural.js";
+import { decimalsToStep as ie, findClosestPoint as fe, formatWithDecimals as se, formatWithoutDecimals as le, splitInterval as xe, validateMinMax as Te } from "./math.js";
+import { getNetworkIcon as ce } from "./network-icons.js";
+import { bnToLiquidationPriceView as de, isPositiveFloat as ue, parseInputToBN as he, parseSmallNumber as Ae } from "./parse-input-to-bn.js";
+import { pluralize as ye, selectPluralString as Pe } from "./plural.js";
 import { getAvailableRanges as Ne } from "./ranges.js";
-import { extractTextFromLabel as Le, serializeValue as ye } from "./react.js";
+import { extractTextFromLabel as Ie, serializeValue as ke } from "./react.js";
 import { searchInString as we } from "./search.js";
 import { createTokenSearchFilter as De, searchInToken as Oe } from "./search-in-token.js";
-import { shortSHA as Be } from "./short-sha.js";
-import { isLongString as Re, shortenString as _e } from "./shorten-string.js";
-import { negativeTokenTemplate as He, tokenTemplate as We, tokenTemplateNumber as Ze, tokenTemplateString as ze } from "./templates.js";
-import { getTokenIcon as Xe, parseShareTokenUnderlying as qe } from "./token-icon-source.js";
-import { TTL_CONSTANTS as Ge, getTTLZones as Je, ttlFromTimestamp as Ke, ttlLeft as Qe, ttlLeftHuman as Ye } from "./ttl.js";
-import { openInNewWindow as eo } from "./window.js";
-import { Z_INDEX as ro, Z_INDEX_VALUES as to } from "./z-index.js";
+import { shortSHA as Re } from "./short-sha.js";
+import { isLongString as Me, shortenString as _e } from "./shorten-string.js";
+import { strategyApyPartsAtLeverage as He, strategyNetApyAtLeverage as We, strategyQuotaRate as Ze } from "./strategy-apy.js";
+import { negativeTokenTemplate as Ue, tokenTemplate as Xe, tokenTemplateNumber as qe, tokenTemplateString as Qe } from "./templates.js";
+import { getTokenIcon as Ge, parseShareTokenUnderlying as Je } from "./token-icon-source.js";
+import { TTL_CONSTANTS as Ye, getTTLZones as $e, ttlFromTimestamp as eo, ttlLeft as oo, ttlLeftHuman as ro } from "./ttl.js";
+import { openInNewWindow as ao } from "./window.js";
+import { Z_INDEX as no, Z_INDEX_VALUES as po } from "./z-index.js";
 export {
   X as FORMAT_CONSTANTS,
-  Ge as TTL_CONSTANTS,
-  ro as Z_INDEX,
-  to as Z_INDEX_VALUES,
+  Ye as TTL_CONSTANTS,
+  no as Z_INDEX,
+  po as Z_INDEX_VALUES,
   ae as allLoaded,
-  l as bnToInputView,
+  s as bnToInputView,
   de as bnToLiquidationPriceView,
   x as bnToPrettyView,
-  c as bpsToPercent,
+  g as bpsToPercent,
   S as cn,
-  L as convertPercent,
+  I as convertPercent,
   N as copyToClipboard,
   De as createTokenSearchFilter,
-  pe as decimalsToStep,
+  ie as decimalsToStep,
   d as default,
-  Le as extractTextFromLabel,
+  Ie as extractTextFromLabel,
   fe as findClosestPoint,
   V as formatAssetAmount,
-  y as formatBytecodeSize,
+  k as formatBytecodeSize,
   C as formatBytecodeVersion,
   oe as formatChipLeverage,
   _ as formatCompactPercent,
-  M as formatLeverage,
+  B as formatLeverage,
   E as formatMoney,
   H as formatMoneyAmount,
   q as formatNumberWithSuffix,
   W as formatPercentAmount,
-  j as formatPrice,
+  Q as formatPrice,
   w as formatTimestamp,
-  le as formatWithDecimals,
-  se as formatWithoutDecimals,
+  se as formatWithDecimals,
+  le as formatWithoutDecimals,
   h as generateColorsFromBase,
   r as generateId,
-  G as getAdaptiveDecimals,
+  j as getAdaptiveDecimals,
   Ne as getAvailableRanges,
-  v as getCSSVariable,
-  ge as getNetworkIcon,
-  Je as getTTLZones,
-  Xe as getTokenIcon,
-  P as hexToRgba,
-  b as hslToHex,
-  J as isBelowDisplayThreshold,
-  K as isEffectivelyZero,
-  Re as isLongString,
+  A as getCSSVariable,
+  ce as getNetworkIcon,
+  $e as getTTLZones,
+  Ge as getTokenIcon,
+  v as hexToRgba,
+  y as hslToHex,
+  G as isBelowDisplayThreshold,
+  J as isEffectivelyZero,
+  Me as isLongString,
   ue as isPositiveFloat,
   re as leveragePresets,
   me as loadingProgress,
-  He as negativeTokenTemplate,
-  eo as openInNewWindow,
+  Ue as negativeTokenTemplate,
+  ao as openInNewWindow,
   he as parseInputToBN,
-  qe as parseShareTokenUnderlying,
-  ve as parseSmallNumber,
+  Je as parseShareTokenUnderlying,
+  Ae as parseSmallNumber,
   Z as percentTemplate,
   z as percentageTemplate,
-  be as pluralize,
+  ye as pluralize,
   m as pointProgramsOf,
   n as positiveTokenRewardsOf,
-  A as resolveCSSColor,
+  P as resolveCSSColor,
   ne as round5,
   we as searchInString,
   Oe as searchInToken,
-  Ae as selectPluralString,
-  ye as serializeValue,
-  Be as shortSHA,
+  Pe as selectPluralString,
+  ke as serializeValue,
+  Re as shortSHA,
   F as shortenHash,
   _e as shortenString,
   D as significantTrunc,
   $ as slippageTemplate,
   xe as splitInterval,
-  Q as toSignificantDigits,
-  i as tokenRewardsOf,
-  We as tokenTemplate,
-  Ze as tokenTemplateNumber,
-  ze as tokenTemplateString,
-  p as totalApyOf,
-  Ke as ttlFromTimestamp,
-  Qe as ttlLeft,
-  Ye as ttlLeftHuman,
+  He as strategyApyPartsAtLeverage,
+  We as strategyNetApyAtLeverage,
+  Ze as strategyQuotaRate,
+  K as toSignificantDigits,
+  p as tokenRewardsOf,
+  Xe as tokenTemplate,
+  qe as tokenTemplateNumber,
+  Qe as tokenTemplateString,
+  i as totalApyOf,
+  eo as ttlFromTimestamp,
+  oo as ttlLeft,
+  ro as ttlLeftHuman,
   t as useFormFieldIds,
   Te as validateMinMax
 };

package/dist/esm/utils/strategy-apy.js

@@ -0,0 +1,41 @@
+function e({
+  additionalBorrowApy: o = 0,
+  maxLeverage: t
+}) {
+  return t != null && t > 0 ? o / t : 0;
+}
+function i({
+  leverage: o,
+  maxLeverage: t,
+  borrowApy: r = 0,
+  additionalBorrowApy: u = 0
+}) {
+  const n = Math.max(o - 1, 0), s = r * n, a = e({ additionalBorrowApy: u, maxLeverage: t }), c = a * o;
+  return {
+    debtMultiplier: n,
+    borrowCost: s,
+    quotaRate: a,
+    quotaCost: c,
+    totalCost: s + c
+  };
+}
+function y({
+  collateralApy: o,
+  leverage: t,
+  maxLeverage: r,
+  borrowApy: u,
+  additionalBorrowApy: n
+}) {
+  const { totalCost: s } = i({
+    leverage: t,
+    maxLeverage: r,
+    borrowApy: u,
+    additionalBorrowApy: n
+  });
+  return o * t - s;
+}
+export {
+  i as strategyApyPartsAtLeverage,
+  y as strategyNetApyAtLeverage,
+  e as strategyQuotaRate
+};

package/dist/types/components/base/index.d.ts

@@ -16,6 +16,7 @@ export * from './more-accordion';
 export * from './nested-info-stack';
 export * from './page-title';
 export * from './pool-apy-breakdown-card';
+export * from './position-assets';
 export * from './review-button';
 export * from './section-heading';
 export * from './segmented-tabs';

package/dist/types/components/base/position-assets/constants.d.ts

@@ -0,0 +1,5 @@
+export declare class PositionAssetsTest {
+    static root: string;
+    static row: string;
+    static empty: string;
+}

package/dist/types/components/base/position-assets/index.d.ts

@@ -0,0 +1,2 @@
+export { PositionAssetsTest } from './constants';
+export { PositionAssets, type PositionAssetsProps } from './position-assets';

package/dist/types/components/base/position-assets/position-assets.d.ts

@@ -0,0 +1,49 @@
+import { TokenAmount } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+import { PositionAssetsTest } from './constants';
+export { PositionAssetsTest };
+export interface PositionAssetsProps {
+    /** What this side holds. */
+    readonly assets?: readonly TokenAmount[];
+    /**
+     * The list this one is shown against — the other slot of the same row.
+     * Never rendered: it only joins the row set and the order, so two lists in
+     * `value` and `valueTo` list the same tokens in the same order and their
+     * rows line up. Pass each side the other one.
+     */
+    readonly against?: readonly TokenAmount[];
+    /** Rendered in place of the rows when nothing survives the dust filter. */
+    readonly empty?: React.ReactNode;
+    readonly testId?: string;
+}
+/**
+ * Holdings token by token, most valuable first — the position itself rather
+ * than the one number its collateral adds up to. A right-aligned column, so it
+ * reads as the value of the `InfoLine` a caller drops it into, in either slot.
+ *
+ * The rows carry no label of their own, which is why they are not `InfoLine`s:
+ * `VerticalIndicator` leaves out its left column entirely when no label is
+ * given and never justifies what remains, so a label-less row would sit on the
+ * wrong side.
+ *
+ * Dust is left out: an account carries stray fractions of a cent from
+ * rounding, and listing them buries the holdings that matter. A token the
+ * oracle cannot price is never dust — an unknown value is not a small one.
+ */
+export declare function PositionAssets({ assets, against, empty, testId, }: PositionAssetsProps): React.ReactElement;
+/** One token as a side lists it. */
+export interface AssetRow {
+    readonly token: TokenAmount["token"];
+    /** What this side holds — zero for a token only the other side has. */
+    readonly value: bigint;
+    /**
+     * What the token is worth at its richer side, which is what decides both
+     * dust and order. `null` when a side the oracle cannot price is involved.
+     */
+    readonly worth: number | null;
+}
+/**
+ * What earns a row, most valuable first — decided across both sides, so the
+ * order is a property of the pair rather than of the side that renders it.
+ */
+export declare function visibleAssets(assets: readonly TokenAmount[] | undefined, against?: readonly TokenAmount[]): AssetRow[];

package/dist/types/components/base/stat-badge/constants.d.ts

@@ -2,4 +2,5 @@ export declare class StatBadgeTest {
     static root: string;
     static grid: string;
     static action: string;
+    static delta: string;
 }

package/dist/types/components/base/stat-badge/stat-badge.d.ts

@@ -3,10 +3,20 @@ import { TitleText } from '../text';
 import { StatBadgeTest } from './constants';
 export { StatBadgeTest };
 export type StatBadgeSize = "sm" | "md" | "default";
+export interface StatBadgeDelta {
+    /** Formatted change, e.g. `"12.50%"`. Sign is taken from `value`, not this string. */
+    readonly label: ReactNode;
+    /** Signed change; `> 0` is success, `< 0` is destructive. */
+    readonly value: number;
+    /** Period hint shown on hover, e.g. `"7D"`. */
+    readonly tooltip?: ReactNode;
+}
 export interface StatBadgeProps {
     /** A messageId (formatted here) or a node. */
     readonly title: TitleText;
     readonly value: React.ReactNode;
+    /** Optional change chip in the top-right of the card. Hidden while `isLoading`. */
+    readonly delta?: StatBadgeDelta;
     /** Optional control in the top-right of the card, e.g. a Claim button. */
     readonly action?: ReactNode;
     readonly className?: string;
@@ -16,7 +26,7 @@ export interface StatBadgeProps {
     readonly testId?: string;
     readonly size?: StatBadgeSize;
 }
-export declare function StatBadge({ title, value, isLoading, size, action, className, testId, }: StatBadgeProps): React.ReactElement;
+export declare function StatBadge({ title, value, isLoading, size, delta, action, className, testId, }: StatBadgeProps): React.ReactElement;
 export interface StatBadgeGridProps {
     readonly cols?: 1 | 2 | 3 | 4;
     readonly colsLg?: 1 | 2 | 3 | 4;

package/dist/types/components/base/strategy-apy-breakdown-card/strategy-apy-breakdown-card.d.ts

@@ -7,6 +7,18 @@ export interface StrategyApyBreakdownData {
     readonly borrowApy?: Bps;
     readonly additionalBorrowApy?: Bps;
     readonly maxLeverage?: Leverage;
+    /**
+     * SDK net at {@link maxLeverage}. Used for the net chip when the selected
+     * leverage is max, so the chip matches the Max APY badge instead of a
+     * client-side reconstruction.
+     */
+    readonly maxLeverageApy?: ApyBreakdown;
+    /**
+     * SDK net at the displayed {@link StrategyApyBreakdownCardProps.leverage}
+     * (e.g. a position's `netApy`). Preferred over both `maxLeverageApy` and
+     * the reconstructed formula.
+     */
+    readonly netApy?: ApyBreakdown;
 }
 export interface StrategyApyBreakdownCardProps {
     readonly data: StrategyApyBreakdownData;

package/dist/types/components/base/tabber/tabber.d.ts

@@ -10,8 +10,8 @@ export interface TabberSectionProps {
     readonly actions?: React.ReactNode;
     readonly children?: React.ReactNode;
     /**
-     * Render this section above the sticky tab bar (overview badges). The tab
-     * still appears in the bar and scroll-spy still tracks the section.
+     * Render this section above the sticky tab bar (overview badges). The
+     * section is not listed in the bar; scroll-spy tracks only sections below it.
      */
     readonly beforeBar?: boolean;
     /** Skip the in-section h2 — overview has badges, not a heading. */

package/dist/types/components/base/values/scalars.d.ts

@@ -36,6 +36,10 @@ export declare function HealthFactorValue({ data, }: {
  * A bare `bigint` in token units (simulate previews carry these): the only
  * value component that needs a denomination passed with it, because the SDK
  * hands these out without one.
+ *
+ * Shown to `formatAssetAmount`'s three decimals, with the exact amount in a
+ * tooltip — a metrics row reads better short, and nothing is lost: the figure
+ * behind the rounding stays a hover away.
  */
 export declare function TokenBigint({ data, token, }: {
     readonly data: bigint | undefined;

package/dist/types/locale/en.json.d.ts

@@ -220,7 +220,8 @@ declare const _default: {
   "components.strategyApyBreakdownCard.collateralApy": "Collateral APY",
   "components.strategyApyBreakdownCard.incentiveApy": "Incentive APY",
   "components.strategyApyBreakdownCard.borrowRate": "Borrow Rate",
-  "components.strategyApyBreakdownCard.formula": "{base} × {leverage} Lev.",
+  "components.strategyApyBreakdownCard.quotaRate": "Quota Rate",
+  "components.strategyApyBreakdownCard.formula": "{leverage} × {base}",
 
   "components.leveragePresetChips.label": "Leverage:",
 

package/dist/types/utils/index.d.ts

@@ -27,6 +27,7 @@ export * from './search-in-token';
 export * from './short-sha';
 export * from './shorten-string';
 export type { SortField as UtilsSortField, SortType } from './sort';
+export * from './strategy-apy';
 export * from './templates';
 export * from './token-icon-source';
 export * from './ttl';

package/dist/types/utils/strategy-apy.d.ts

@@ -0,0 +1,37 @@
+import { Bps, Leverage } from '@gearbox-protocol/sdk/model';
+/**
+ * Quota rate at 1x. `additionalBorrowApy` from the SDK is already scaled to
+ * {@link maxLeverage} (`quotaRate × (1 + feeInterest) × maxLeverage`).
+ */
+export declare function strategyQuotaRate({ additionalBorrowApy, maxLeverage, }: {
+    readonly additionalBorrowApy?: Bps;
+    readonly maxLeverage?: Leverage;
+}): Bps;
+/**
+ * Borrow + quota cost of a strategy at leverage `l`, in bps.
+ *
+ * `cost = borrowApy × max(l − 1, 0) + quotaRate × l`
+ */
+export declare function strategyApyPartsAtLeverage({ leverage, maxLeverage, borrowApy, additionalBorrowApy, }: {
+    readonly leverage: Leverage;
+    readonly maxLeverage?: Leverage;
+    readonly borrowApy?: Bps;
+    readonly additionalBorrowApy?: Bps;
+}): {
+    readonly debtMultiplier: number;
+    readonly borrowCost: Bps;
+    readonly quotaRate: Bps;
+    readonly quotaCost: Bps;
+    readonly totalCost: Bps;
+};
+/**
+ * Net strategy APY at leverage `l`, in bps:
+ * `collateralApy × l − cost(l)`.
+ */
+export declare function strategyNetApyAtLeverage({ collateralApy, leverage, maxLeverage, borrowApy, additionalBorrowApy, }: {
+    readonly collateralApy: Bps;
+    readonly leverage: Leverage;
+    readonly maxLeverage?: Leverage;
+    readonly borrowApy?: Bps;
+    readonly additionalBorrowApy?: Bps;
+}): Bps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.15",
+  "version": "4.0.0-next.17",
   "description": "Internal UI components",
   "repository": {
     "type": "git",