@gearbox-protocol/ui-kit 4.0.0-next.20 → 4.0.0-next.22

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

@@ -3,15 +3,13 @@ import { default as React } from 'react';
 import { PositionAssetsTest } from './constants';
 export { PositionAssetsTest };
 export interface PositionAssetsProps {
-    /** What this side holds. */
+    /** What the position 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.
+     * What those holdings become. Given, every row reads `before → after` and
+     * names its token once for the pair; omitted, the rows are plain holdings.
      */
-    readonly against?: readonly TokenAmount[];
+    readonly to?: readonly TokenAmount[];
     /** Rendered in place of the rows when nothing survives the dust filter. */
     readonly empty?: React.ReactNode;
     readonly testId?: string;
@@ -19,7 +17,13 @@ export interface PositionAssetsProps {
 /**
  * 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.
+ * reads as the value of the `InfoLine` a caller drops it into.
+ *
+ * The whole of a change belongs in the one slot: a row carries both amounts
+ * with the arrow between them, rather than the caller putting one list in
+ * `value` and another in `valueTo`. Two lists would name the same token twice
+ * and draw its icon twice, which is what pushes a long symbol out of a narrow
+ * dialog; they would also have to be kept in the same order by hand.
  *
  * 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
@@ -30,12 +34,14 @@ export interface PositionAssetsProps {
  * 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 declare function PositionAssets({ assets, to, empty, testId, }: PositionAssetsProps): React.ReactElement;
+/** One token across both sides of a change. */
 export interface AssetRow {
     readonly token: TokenAmount["token"];
-    /** What this side holds — zero for a token only the other side has. */
+    /** What the position holds now — zero for a token only the other side has. */
     readonly value: bigint;
+    /** What it becomes — zero where the projection drops the token. */
+    readonly valueTo: 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.
@@ -43,7 +49,7 @@ export interface AssetRow {
     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.
+ * What earns a row, most valuable first — decided across both sides, so a
+ * token either side holds is listed once, in one place.
  */
-export declare function visibleAssets(assets: readonly TokenAmount[] | undefined, against?: readonly TokenAmount[]): AssetRow[];
+export declare function visibleAssets(assets: readonly TokenAmount[] | undefined, to?: readonly TokenAmount[]): AssetRow[];

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

@@ -1,5 +1,9 @@
 export declare class StrategyApyBreakdownCardTest {
     static root: string;
-    static row: string;
     static net: string;
+    static collateral: string;
+    static borrow: string;
+    static value: string;
+    static points: string;
+    static caption: string;
 }

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

@@ -1,23 +1,48 @@
-import { ApyBreakdown, Leverage } from '@gearbox-protocol/sdk/model';
+import { ApyBreakdown, Bps, 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 extends StrategyApyRates {
-    readonly collateralApy?: ApyBreakdown;
-    /** Leverage the card falls back to when the toolbar names none. */
-    readonly maxLeverage?: Leverage;
+export interface StrategyApyBreakdownData {
+    /** Leverage every figure below is quoted at. */
+    readonly leverage: Leverage;
+    /**
+     * **N** — the strategy's net rate on the user's equity, as
+     * `calcNetStrategyApy` returns it. Passed in rather than reconstructed:
+     * this is the same figure the badge and the list cell print, and it stays
+     * the same figure by being handed over, not by two formulas agreeing.
+     */
+    readonly netApy: ApyBreakdown;
     /**
-     * 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.
+     * **B** — cost of the credit behind the position, quota folded in, as
+     * `calcEffectiveBorrowApy` returns it. Positive; the card negates it.
      */
-    readonly netApy?: ApyBreakdown;
+    readonly borrowCost: Bps;
+    /** The collateral yield the net was computed from, for its incentive rows. */
+    readonly collateralApy?: ApyBreakdown;
 }
 export interface StrategyApyBreakdownCardProps {
     readonly data: StrategyApyBreakdownData;
-    /** Selected leverage from the chart toolbar chips. Falls back to max. */
-    readonly leverage?: Leverage;
+    /**
+     * Multiplier caption under each figure — `11.18 × 3.11%` and the like.
+     *
+     * On beside a chart, where the card is the derivation and there is room for
+     * it. Off in a tooltip, where it is a glance.
+     */
+    readonly showFormula?: boolean;
 }
-/** Net APY formula beside the strategy yield chart. Chart itself is unchanged. */
-export declare function StrategyApyBreakdownCard({ data, leverage: leverageProp, }: StrategyApyBreakdownCardProps): React.ReactElement;
+/**
+ * How a strategy's net APY is arrived at: collateral yield on the leveraged
+ * position, less what the credit behind it costs.
+ *
+ * The card computes no rate of its own. **N** (`netApy`) and **B**
+ * (`borrowCost`) arrive already calculated, and the collateral row is their
+ * sum — which is exactly `round(leverage × collateralApy)`, because the SDK
+ * subtracts an integer `B` inside its own rounding. Deriving the third value
+ * instead of recomputing it is what makes `N = C − B` hold to the basis point
+ * rather than approximately.
+ *
+ * Incentive rows are levered individually and the collateral row takes the
+ * remainder, so the column adds up to the chip even when each reward rounds
+ * its own way.
+ */
+export declare function StrategyApyBreakdownCard({ data, showFormula, }: StrategyApyBreakdownCardProps): React.ReactElement;

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

@@ -12,13 +12,23 @@ export declare function bps(value: Bps): string;
 export interface ApyValueProps {
     /** A breakdown (tooltip-able) or a bare rate; `undefined` renders a dash. */
     readonly data: ApyBreakdown | Bps | undefined;
+    /**
+     * Whether a breakdown carries its yield tooltip on hover. Off where the
+     * figure is already explained — a badge that states one rate, or a figure
+     * wrapped in a tooltip of its own, which would otherwise stack two.
+     *
+     * A bare `Bps` has no tooltip to begin with, so this does not reach it.
+     *
+     * @default true
+     */
+    readonly tooltip?: boolean;
 }
 /**
  * Any APY the model carries, in one place: `supplyApy`, `netApy`, `borrowApy`.
  * A breakdown renders the reference chip (reward icons + breakdown tooltip)
  * via `CompoundAPY`; a bare `Bps` stays a plain percentage.
  */
-export declare function ApyValue({ data }: ApyValueProps): React.ReactElement;
+export declare function ApyValue({ data, tooltip, }: ApyValueProps): React.ReactElement;
 export declare function UsdValue({ data, }: {
     readonly data: number | null | undefined;
 }): React.ReactElement;
@@ -41,7 +51,12 @@ export declare function HealthFactorValue({ data, }: {
  * 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, }: {
+export declare function TokenBigint({ data, token, showSymbol, }: {
     readonly data: bigint | undefined;
     readonly token: Token | undefined;
+    /**
+     * Off where the row names the token itself — a `before → after` pair prints
+     * the symbol once for both amounts rather than twice.
+     */
+    readonly showSymbol?: boolean;
 }): React.ReactElement;

package/dist/types/components/composites/pool-assets-table/pool-assets-table-row.d.ts

@@ -1,7 +1,6 @@
 import { QuotaAsset, Token } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 export interface PoolAssetsTableRowProps {
-    readonly poolName: string;
     readonly asset: QuotaAsset;
     readonly underlyingToken: Token;
     readonly last: boolean;
@@ -12,4 +11,4 @@ export interface PoolAssetsTableRowProps {
 /**
  * Single data row: token name, exposure (amount + pie), cap, and cap utilization.
  */
-export declare function PoolAssetsTableRow({ poolName, asset, underlyingToken, last, isCompact, totalUsed, colorIndex, }: PoolAssetsTableRowProps): React.ReactElement;
+export declare function PoolAssetsTableRow({ asset, underlyingToken, last, isCompact, totalUsed, colorIndex, }: PoolAssetsTableRowProps): React.ReactElement;

package/dist/types/components/composites/pool-assets-table/pool-assets-table.d.ts

@@ -3,7 +3,6 @@ import { default as React } from 'react';
 import { PoolAssetsTableSort } from './types';
 export interface PoolAssetsTableProps {
     readonly list: ReadonlyArray<QuotaAsset>;
-    readonly poolName: string;
     readonly sort: PoolAssetsTableSort;
     readonly underlyingToken: Token;
 }
@@ -11,4 +10,4 @@ export interface PoolAssetsTableProps {
  * Grid table of pool asset quotas: exposure, cap, and cap utilization.
  * Collapses into stacked cards below {@link COMPACT_WIDTH_THRESHOLD}.
  */
-export declare function PoolAssetsTable({ list, poolName, sort, underlyingToken, }: PoolAssetsTableProps): React.ReactElement | null;
+export declare function PoolAssetsTable({ list, sort, underlyingToken, }: PoolAssetsTableProps): React.ReactElement | null;

package/dist/types/components/compound-apy/compound-apy.d.ts

@@ -23,6 +23,16 @@ export interface CompoundAPYProps {
      * @default 2
      */
     decimals?: number;
+    /**
+     * Whether the figure carries the yield breakdown on hover.
+     *
+     * Off where the number is already explained — a badge that states one rate
+     * and stops, or a figure something else already wraps in a tooltip of its
+     * own. The incentives icon stays either way; only the hover goes.
+     *
+     * @default true
+     */
+    tooltip?: boolean;
     className?: string;
 }
 /**
@@ -31,4 +41,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, quotaRate, decimals, className, }: CompoundAPYProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundAPY({ apy, maxLeverage, collateralApy, borrowApy, quotaRate, decimals, tooltip, className, }: CompoundAPYProps): import("react/jsx-runtime").JSX.Element;

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

@@ -215,13 +215,8 @@ declare const _default: {
   "components.poolApyBreakdownCard.title": "APY Breakdown",
   "components.poolApyBreakdownCard.organicApy": "Pool organic APY",
   "components.poolApyBreakdownCard.incentiveApy": "Incentive APY",
-
-  "components.strategyApyBreakdownCard.titleAtLeverage": "APY at {leverage}× Leverage",
-  "components.strategyApyBreakdownCard.collateralApy": "Collateral APY",
-  "components.strategyApyBreakdownCard.incentiveApy": "Incentive APY",
-  "components.strategyApyBreakdownCard.borrowRate": "Borrow Rate",
-  "components.strategyApyBreakdownCard.quotaRate": "Quota Rate",
   "components.strategyApyBreakdownCard.formula": "{leverage} × {base}",
+  "components.strategyApyBreakdownCard.borrowFormula": "{debtMultiplier} × {borrowBase} + {quotaMultiplier} × {quotaBase}",
 
   "components.leveragePresetChips.label": "Leverage:",
 

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

@@ -27,7 +27,6 @@ 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/package.json

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

package/dist/cjs/utils/strategy-apy.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("@gearbox-protocol/sdk");function o(t,r,e){switch(e){case"min":return Math.max(t-1,0);case"aggressive":return 1.05*Math.max(t-1,0);default:return t*r/1e4}}function y({leverage:t,borrowApy:r=0,quotaRate:e=0,liquidationThreshold:s=0,quotaMode:a="safe"}){const c={borrowApy:r,quotaRate:e,liquidationThreshold:s},n=Math.max(t-1,0),i=o(t,s,a);return{debtMultiplier:n,quotaMultiplier:i,borrowCost:r*n,quotaRate:e,quotaCost:e*i,totalCost:u.calcEffectiveBorrowApy(c,t,a)}}function p({collateralApy:t,leverage:r,borrowApy:e=0,quotaRate:s=0,liquidationThreshold:a=0,quotaMode:c="safe"}){return u.calcNetStrategyApy({borrowApy:e,quotaRate:s,liquidationThreshold:a},t,r,c)}exports.strategyApyPartsAtLeverage=y;exports.strategyNetApyAtLeverage=p;

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

@@ -1,51 +0,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 m({
-  leverage: t,
-  borrowApy: e = 0,
-  quotaRate: r = 0,
-  liquidationThreshold: s = 0,
-  quotaMode: a = "safe"
-}) {
-  const c = {
-    borrowApy: e,
-    quotaRate: r,
-    liquidationThreshold: s
-  }, n = Math.max(t - 1, 0), i = f(t, s, a);
-  return {
-    debtMultiplier: n,
-    quotaMultiplier: i,
-    borrowCost: e * n,
-    quotaRate: r,
-    quotaCost: r * i,
-    totalCost: o(c, t, a)
-  };
-}
-function l({
-  collateralApy: t,
-  leverage: e,
-  borrowApy: r = 0,
-  quotaRate: s = 0,
-  liquidationThreshold: a = 0,
-  quotaMode: c = "safe"
-}) {
-  return u(
-    { borrowApy: r, quotaRate: s, liquidationThreshold: a },
-    t,
-    e,
-    c
-  );
-}
-export {
-  m as strategyApyPartsAtLeverage,
-  l as strategyNetApyAtLeverage
-};

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

@@ -1,40 +0,0 @@
-import { QuotaMode, StrategyRateInputs } from '@gearbox-protocol/sdk';
-import { Bps, Leverage } from '@gearbox-protocol/sdk/model';
-/**
- * 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 type StrategyApyRates = Readonly<Partial<StrategyRateInputs>> & {
-    /** How much quota the position quotes; the SDK's `"safe"` unless told. */
-    readonly quotaMode?: QuotaMode;
-};
-/**
- * Borrow and quota cost of a strategy at one leverage, split so each can have
- * its own row.
- *
- * `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, borrowApy, quotaRate, liquidationThreshold, quotaMode, }: StrategyApyRates & {
-    readonly leverage: Leverage;
-}): {
-    readonly debtMultiplier: number;
-    readonly quotaMultiplier: number;
-    readonly borrowCost: Bps;
-    readonly quotaRate: Bps;
-    readonly quotaCost: Bps;
-    readonly totalCost: Bps;
-};
-/**
- * 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, borrowApy, quotaRate, liquidationThreshold, quotaMode, }: StrategyApyRates & {
-    readonly collateralApy: Bps;
-    readonly leverage: Leverage;
-}): Bps;