@gearbox-protocol/ui-kit 4.0.0-next.16 → 4.0.0-next.18

package/dist/esm/utils/index.js

@@ -8,9 +8,9 @@ import { generateColorsFromBase as h, getCSSVariable as A, hexToRgba as v, hslTo
 import { copyToClipboard as N } from "./copy.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 B } from "./format-leverage.js";
+import { formatLeverage as M } 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 Q, getAdaptiveDecimals as j, isBelowDisplayThreshold as G, isEffectivelyZero as J, toSignificantDigits as K } from "./format-number.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 { 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";
@@ -22,19 +22,19 @@ import { getAvailableRanges as Ne } from "./ranges.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 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 { shortSHA as Be } from "./short-sha.js";
+import { isLongString as Re, shortenString as _e } from "./shorten-string.js";
+import { strategyApyPartsAtLeverage as He, strategyNetApyAtLeverage as We } from "./strategy-apy.js";
+import { negativeTokenTemplate as ze, tokenTemplate as Ue, tokenTemplateNumber as Xe, 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";
+import { TTL_CONSTANTS as Qe, getTTLZones as Ye, ttlFromTimestamp as $e, ttlLeft as eo, ttlLeftHuman as oo } from "./ttl.js";
+import { openInNewWindow as to } from "./window.js";
+import { Z_INDEX as mo, Z_INDEX_VALUES as no } from "./z-index.js";
 export {
   X as FORMAT_CONSTANTS,
-  Ye as TTL_CONSTANTS,
-  no as Z_INDEX,
-  po as Z_INDEX_VALUES,
+  Qe as TTL_CONSTANTS,
+  mo as Z_INDEX,
+  no as Z_INDEX_VALUES,
   ae as allLoaded,
   s as bnToInputView,
   de as bnToLiquidationPriceView,
@@ -53,33 +53,33 @@ export {
   C as formatBytecodeVersion,
   oe as formatChipLeverage,
   _ as formatCompactPercent,
-  B as formatLeverage,
+  M as formatLeverage,
   E as formatMoney,
   H as formatMoneyAmount,
   q as formatNumberWithSuffix,
   W as formatPercentAmount,
-  Q as formatPrice,
+  j as formatPrice,
   w as formatTimestamp,
   se as formatWithDecimals,
   le as formatWithoutDecimals,
   h as generateColorsFromBase,
   r as generateId,
-  j as getAdaptiveDecimals,
+  G as getAdaptiveDecimals,
   Ne as getAvailableRanges,
   A as getCSSVariable,
   ce as getNetworkIcon,
-  $e as getTTLZones,
+  Ye as getTTLZones,
   Ge as getTokenIcon,
   v as hexToRgba,
   y as hslToHex,
-  G as isBelowDisplayThreshold,
-  J as isEffectivelyZero,
-  Me as isLongString,
+  J as isBelowDisplayThreshold,
+  K as isEffectivelyZero,
+  Re as isLongString,
   ue as isPositiveFloat,
   re as leveragePresets,
   me as loadingProgress,
-  Ue as negativeTokenTemplate,
-  ao as openInNewWindow,
+  ze as negativeTokenTemplate,
+  to as openInNewWindow,
   he as parseInputToBN,
   Je as parseShareTokenUnderlying,
   Ae as parseSmallNumber,
@@ -94,7 +94,7 @@ export {
   Oe as searchInToken,
   Pe as selectPluralString,
   ke as serializeValue,
-  Re as shortSHA,
+  Be as shortSHA,
   F as shortenHash,
   _e as shortenString,
   D as significantTrunc,
@@ -102,16 +102,15 @@ export {
   xe as splitInterval,
   He as strategyApyPartsAtLeverage,
   We as strategyNetApyAtLeverage,
-  Ze as strategyQuotaRate,
-  K as toSignificantDigits,
+  Q as toSignificantDigits,
   p as tokenRewardsOf,
-  Xe as tokenTemplate,
-  qe as tokenTemplateNumber,
-  Qe as tokenTemplateString,
+  Ue as tokenTemplate,
+  Xe as tokenTemplateNumber,
+  qe as tokenTemplateString,
   i as totalApyOf,
-  eo as ttlFromTimestamp,
-  oo as ttlLeft,
-  ro as ttlLeftHuman,
+  $e as ttlFromTimestamp,
+  eo as ttlLeft,
+  oo as ttlLeftHuman,
   t as useFormFieldIds,
   Te as validateMinMax
 };

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

@@ -1,41 +1,51 @@
-function e({
-  additionalBorrowApy: o = 0,
-  maxLeverage: t
-}) {
-  return t != null && t > 0 ? o / t : 0;
+import { calcEffectiveBorrowApy as o, calcNetStrategyApy as u } from "@gearbox-protocol/sdk";
+function f(t, e, r) {
+  switch (r) {
+    case "min":
+      return Math.max(t - 1, 0);
+    case "aggressive":
+      return 1.05 * Math.max(t - 1, 0);
+    default:
+      return t * e / 1e4;
+  }
 }
-function i({
-  leverage: o,
-  maxLeverage: t,
-  borrowApy: r = 0,
-  additionalBorrowApy: u = 0
+function m({
+  leverage: t,
+  borrowApy: e = 0,
+  quotaRate: r = 0,
+  liquidationThreshold: s = 0,
+  quotaMode: a = "safe"
 }) {
-  const n = Math.max(o - 1, 0), s = r * n, a = e({ additionalBorrowApy: u, maxLeverage: t }), c = a * o;
+  const c = {
+    borrowApy: e,
+    quotaRate: r,
+    liquidationThreshold: s
+  }, n = Math.max(t - 1, 0), i = f(t, s, a);
   return {
     debtMultiplier: n,
-    borrowCost: s,
-    quotaRate: a,
-    quotaCost: c,
-    totalCost: s + c
+    quotaMultiplier: i,
+    borrowCost: e * n,
+    quotaRate: r,
+    quotaCost: r * i,
+    totalCost: o(c, t, a)
   };
 }
-function y({
-  collateralApy: o,
-  leverage: t,
-  maxLeverage: r,
-  borrowApy: u,
-  additionalBorrowApy: n
+function l({
+  collateralApy: t,
+  leverage: e,
+  borrowApy: r = 0,
+  quotaRate: s = 0,
+  liquidationThreshold: a = 0,
+  quotaMode: c = "safe"
 }) {
-  const { totalCost: s } = i({
-    leverage: t,
-    maxLeverage: r,
-    borrowApy: u,
-    additionalBorrowApy: n
-  });
-  return o * t - s;
+  return u(
+    { borrowApy: r, quotaRate: s, liquidationThreshold: a },
+    t,
+    e,
+    c
+  );
 }
 export {
-  i as strategyApyPartsAtLeverage,
-  y as strategyNetApyAtLeverage,
-  e as strategyQuotaRate
+  m as strategyApyPartsAtLeverage,
+  l as strategyNetApyAtLeverage
 };

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/strategy-apy-breakdown-card/strategy-apy-breakdown-card.d.ts

@@ -1,22 +1,16 @@
-import { ApyBreakdown, Bps, Leverage } from '@gearbox-protocol/sdk/model';
+import { ApyBreakdown, Leverage } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
+import { StrategyApyRates } from '../../../utils/strategy-apy';
 import { StrategyApyBreakdownCardTest } from './constants';
 export { StrategyApyBreakdownCardTest };
-export interface StrategyApyBreakdownData {
+export interface StrategyApyBreakdownData extends StrategyApyRates {
     readonly collateralApy?: ApyBreakdown;
-    readonly borrowApy?: Bps;
-    readonly additionalBorrowApy?: Bps;
+    /** Leverage the card falls back to when the toolbar names none. */
     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.
+     * Net rate the caller already knows — a position's own `netApy`. Preferred
+     * over the rows' arithmetic, which answers for the strategy rather than for
+     * one account inside it.
      */
     readonly netApy?: ApyBreakdown;
 }

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/components/compound-apy/compound-apy.d.ts

@@ -17,7 +17,7 @@ export interface CompoundAPYProps {
     /** Strategy base borrow cost in bps. */
     borrowApy?: Bps;
     /** Strategy additional (quota) borrow cost in bps. */
-    additionalBorrowApy?: Bps;
+    quotaRate?: Bps;
     /**
      * Number of decimal places for the total APY string.
      * @default 2
@@ -31,4 +31,4 @@ export interface CompoundAPYProps {
  * No `tokensList`, no external APY, no 7D history, no "soon" points state.
  * For the legacy percent-based API see {@link CompoundAPYLegacy}.
  */
-export declare function CompoundAPY({ apy, maxLeverage, collateralApy, borrowApy, additionalBorrowApy, decimals, className, }: CompoundAPYProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundAPY({ apy, maxLeverage, collateralApy, borrowApy, quotaRate, decimals, className, }: CompoundAPYProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/yield-breakdown-tooltip/yield-breakdown-tooltip.d.ts

@@ -18,8 +18,8 @@ export interface YieldBreakdownTooltipProps {
     collateralApy?: ApyBreakdown;
     /** Strategy base borrow cost in bps (shown as a negative rate). */
     borrowApy?: Bps;
-    /** Strategy additional (quota) borrow cost in bps (folded into Borrow Rate). */
-    additionalBorrowApy?: Bps;
+    /** Strategy quota rate in bps, at 1x (folded into Borrow Rate). */
+    quotaRate?: Bps;
     children?: React.ReactNode;
     className?: string;
 }
@@ -27,4 +27,4 @@ export interface YieldBreakdownTooltipProps {
  * Earn APY tooltip — strategy (`Net APY at Nx Leverage`) and pool
  * (`Overall APY`) layouts from SDK `ApyBreakdown`.
  */
-export declare function YieldBreakdownTooltip({ supplyApy, maxLeverage, collateralApy, borrowApy, additionalBorrowApy, children, className, }: YieldBreakdownTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function YieldBreakdownTooltip({ supplyApy, maxLeverage, collateralApy, borrowApy, quotaRate, children, className, }: YieldBreakdownTooltipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,37 +1,40 @@
+import { QuotaMode, StrategyRateInputs } from '@gearbox-protocol/sdk';
 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`).
+ * The rates a strategy's cost of credit is made of — the SDK's own
+ * `StrategyRateInputs`, spelled the same way so a caller hands over the fields
+ * of a `StrategyOpportunity` rather than a translation of them.
+ *
+ * Optional only because a card may be rendered before its strategy has loaded;
+ * the SDK requires all three, and so does the arithmetic.
  */
-export declare function strategyQuotaRate({ additionalBorrowApy, maxLeverage, }: {
-    readonly additionalBorrowApy?: Bps;
-    readonly maxLeverage?: Leverage;
-}): Bps;
+export type StrategyApyRates = Readonly<Partial<StrategyRateInputs>> & {
+    /** How much quota the position quotes; the SDK's `"safe"` unless told. */
+    readonly quotaMode?: QuotaMode;
+};
 /**
- * Borrow + quota cost of a strategy at leverage `l`, in bps.
+ * Borrow and quota cost of a strategy at one leverage, split so each can have
+ * its own row.
  *
- * `cost = borrowApy × max(l − 1, 0) + quotaRate × l`
+ * `totalCost` comes from `calcEffectiveBorrowApy` rather than from adding the
+ * two parts up here: the SDK rounds once, at the end, and a card whose rows
+ * sum to something other than its own total is the bug this replaced.
  */
-export declare function strategyApyPartsAtLeverage({ leverage, maxLeverage, borrowApy, additionalBorrowApy, }: {
+export declare function strategyApyPartsAtLeverage({ leverage, borrowApy, quotaRate, liquidationThreshold, quotaMode, }: StrategyApyRates & {
     readonly leverage: Leverage;
-    readonly maxLeverage?: Leverage;
-    readonly borrowApy?: Bps;
-    readonly additionalBorrowApy?: Bps;
 }): {
     readonly debtMultiplier: number;
+    readonly quotaMultiplier: 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)`.
+ * Net strategy APY at one leverage, straight from the SDK — the same call the
+ * app makes for the badge beside this card, so the two cannot disagree.
  */
-export declare function strategyNetApyAtLeverage({ collateralApy, leverage, maxLeverage, borrowApy, additionalBorrowApy, }: {
+export declare function strategyNetApyAtLeverage({ collateralApy, leverage, borrowApy, quotaRate, liquidationThreshold, quotaMode, }: StrategyApyRates & {
     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.16",
+  "version": "4.0.0-next.18",
   "description": "Internal UI components",
   "repository": {
     "type": "git",
@@ -115,7 +115,7 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@gearbox-protocol/biome-config": "^1.0.2",
-    "@gearbox-protocol/sdk": "15.1.0-next.17",
+    "@gearbox-protocol/sdk": "16.0.0-next.1",
     "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",