@gearbox-protocol/ui-kit 3.14.0-next.65 → 3.14.0-next.67

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

@@ -1,110 +1,34 @@
-import { PoolAPYPointsTip } from '../pool-apy-tooltip';
-import { LocaleKeys } from '../../locale';
-import { TokenMetaInfo } from '../../types/common';
-/**
- * For GEAR token, use the logo symbol instead of the standard token icon.
- * The standard gear.svg has a white background circle that looks bad on dark themes.
- */
-export declare function getRewardTokenSymbol(token: TokenMetaInfo | undefined, rewardTokenSymbol: string | undefined): import('../token-icon').SymbolOrIcon | undefined;
-export interface PoolBaseAPY {
-    type: "supplyAPY" | "tokenYield";
-    apy: number;
-}
-export interface ExtraRewardApy {
-    apy: number;
-    rewardToken: string;
-    rewardTokenSymbol: string;
-}
-export interface ExternalAPYData {
-    /**
-     * The total value including external APY
-     */
-    totalValue: number;
-    /**
-     * The external APY value
-     */
-    value?: number;
-    /**
-     * The external APY value (backward compatibility alias for value)
-     * @deprecated Use value instead
-     */
-    apy?: number;
-    /**
-     * Name/label of the external APY source
-     */
-    name: string;
-    /**
-     * Localization key for the external APY tooltip
-     * Will be rendered with FormattedMessageTyped with values: { name, value }
-     */
-    tooltip?: LocaleKeys;
-}
+import { ApyBreakdown, Bps, Leverage } from '@gearbox-protocol/sdk/model';
 export interface CompoundAPYProps {
     /**
-     * Total APY value (already in percent form, e.g., 5 for 5%)
-     */
-    totalAPY: number;
-    /**
-     * Whether the total APY is loading (backward compatibility)
-     */
-    totalAPYLoading?: boolean;
-    /**
-     * Base APY array with different types
-     */
-    baseAPY: Array<PoolBaseAPY>;
-    /**
-     * Extra/rewards APY array
+     * SDK `ApyBreakdown`. When undefined, renders an em-dash placeholder.
+     * Display-only: values are final; the component does not look up rates.
      */
-    extraAPY: Array<ExtraRewardApy>;
+    apy: ApyBreakdown | undefined;
     /**
-     * External APY data (e.g., from external protocols)
+     * Strategy-only plain leverage multiplier (e.g. `13.6` for 13.6x).
+     * Forwarded to {@link YieldBreakdownTooltip}.
      */
-    externalAPY?: ExternalAPYData;
+    maxLeverage?: Leverage;
     /**
-     * Pool points data (backward compatibility)
+     * Strategy collateral yield for Base / Incentive rows in the tooltip.
      */
-    points?: Array<PoolAPYPointsTip>;
+    collateralApy?: ApyBreakdown;
+    /** Strategy base borrow cost in bps. */
+    borrowApy?: Bps;
+    /** Strategy additional (quota) borrow cost in bps. */
+    additionalBorrowApy?: Bps;
     /**
-     * APY data from 7 days ago (backward compatibility)
-     */
-    apy7DAgo?: {
-        baseAPY?: Array<PoolBaseAPY>;
-        totalAPY?: number;
-        totalAPYLoading?: boolean;
-    };
-    /**
-     * Token list for displaying token symbols in tooltips
-     */
-    tokensList?: Record<string, TokenMetaInfo>;
-    /**
-     * Number of decimal places
+     * Number of decimal places for the total APY string.
      * @default 2
      */
     decimals?: number;
-    /**
-     * Custom className
-     */
     className?: string;
 }
 /**
- * CompoundAPY component for displaying breakdown of APY with base, extra, and external components.
- *
- * Renders an APY string with an info icon, cascading reward token icons, and points icons.
- * When APY >= 0.001 and not loading, wraps content in PoolAPYTooltip for detailed breakdown.
+ * Compound APY display fed by an SDK `ApyBreakdown`.
  *
- * @example
- * ```tsx
- * <CompoundAPY
- *   totalAPY={15}
- *   baseAPY={[{ type: "supplyAPY", apy: 10 }]}
- *   extraAPY={[{ apy: 3, rewardToken: "0x...", rewardTokenSymbol: "GEAR" }]}
- *   externalAPY={{
- *     totalValue: 15,
- *     value: 2,
- *     name: "Curve",
- *     tooltip: "External APY from Curve"
- *   }}
- * />
- * ```
+ * 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({ totalAPY, totalAPYLoading, baseAPY, extraAPY, externalAPY: externalAPYProp, points, apy7DAgo, tokensList, decimals, className, }: CompoundAPYProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundAPY({ apy, maxLeverage, collateralApy, borrowApy, additionalBorrowApy, decimals, className, }: CompoundAPYProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1,2 @@
 export * from './compound-apy';
+export * from './compound-apy-legacy';

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

@@ -15,6 +15,7 @@ export * from './base-link';
 export * from './block-sync';
 export * from './block-sync-pill';
 export * from './breadcrumbs';
+export * from './breakpoint-provider';
 export * from './button-checkbox';
 export * from './buttons';
 export * from './card-grid';
@@ -26,7 +27,7 @@ export * from './client-adapters';
 export * from './colored-text';
 export * from './complex-input';
 export * from './composites';
-export type { ExternalAPYData, ExtraRewardApy, PoolBaseAPY, } from './compound-apy';
+export type { CompoundAPYLegacyProps, CompoundAPYProps, ExternalAPYData, ExtraRewardApy, PoolBaseAPY, } from './compound-apy';
 export * from './compound-apy';
 export * from './confirm-menu';
 export * from './credit-session-status';
@@ -140,3 +141,4 @@ export * from './vspace';
 export * from './with-copy';
 export * from './with-filter-button';
 export * from './with-title';
+export * from './yield-breakdown-tooltip';

package/dist/types/components/points-icon/index.d.ts

@@ -1 +1 @@
-export { PointsIcon, type PointsIconProps, type PointsReward, } from './points-icon';
+export { PointsIcon, type PointsIconProps, type PointsIconReward, type PointsReward, } from './points-icon';

package/dist/types/components/points-icon/points-icon.d.ts

@@ -1,6 +1,12 @@
 import { RoundedImageProps } from '../rounded-image/rounded-image';
 import * as React from "react";
-export interface PointsReward {
+/**
+ * Minimal reward identity for {@link PointsIcon} (name + icon slug).
+ *
+ * Prefer this over the deprecated {@link PointsReward} alias — that name
+ * collides with SDK `PointsReward<T>` from `@gearbox-protocol/sdk/rewards`.
+ */
+export interface PointsIconReward {
     /**
      * Display name of the reward program
      */
@@ -10,11 +16,16 @@ export interface PointsReward {
      */
     type: string;
 }
+/**
+ * @deprecated Use {@link PointsIconReward}. The bare name conflicts with SDK
+ * `PointsReward<T>` from `@gearbox-protocol/sdk/rewards`.
+ */
+export type PointsReward = PointsIconReward;
 export interface PointsIconProps extends React.HTMLAttributes<HTMLImageElement>, Omit<RoundedImageProps, "size" | "src" | "alt"> {
     /**
      * Reward information with name and type
      */
-    reward: PointsReward;
+    reward: PointsIconReward;
     /**
      * Size of the icon in pixels
      */

package/dist/types/components/pool-apy-tooltip/apy-tooltip.d.ts

@@ -0,0 +1,20 @@
+import { ApyBreakdown } from '@gearbox-protocol/sdk/model';
+import type * as React from "react";
+export interface ApyTooltipProps {
+    /**
+     * SDK `ApyBreakdown`. Display-only — organic base, token rewards, total,
+     * and points programs. No `tokensList`, 7D history, or external APY.
+     */
+    apy: ApyBreakdown;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Tooltip for an SDK `ApyBreakdown` — organic base, token rewards, total,
+ * and points programs.
+ *
+ * Does not cover 1D/7D history, external APY, or rich point tip metadata
+ * (`duration`, `condition`, `tokenTitle`, preformatted `amount`). For those
+ * stay on the deprecated {@link PoolAPYTooltip}.
+ */
+export declare function ApyTooltip({ apy, children, className }: ApyTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/pool-apy-tooltip/index.d.ts

@@ -1 +1,2 @@
+export * from './apy-tooltip';
 export * from './pool-apy-tooltip';

package/dist/types/components/pool-apy-tooltip/pool-apy-tooltip.d.ts

@@ -1,7 +1,12 @@
-import { PoolBaseAPY } from '../compound-apy/compound-apy';
+import { PoolBaseAPY } from '../compound-apy/compound-apy-legacy';
 import { LocaleKeys } from '../../locale';
 import { ExtraRewardApyData, TokenMetaInfo } from '../../types/common';
 import type * as React from "react";
+/**
+ * @deprecated Prefer SDK `ApyBreakdown` + {@link ApyTooltip}. Keep using this
+ * shape only when you need point metadata (`duration`, `condition`,
+ * `tokenTitle`, preformatted `amount`) that `PointsProgram` does not carry.
+ */
 export interface PoolAPYPointsTip {
     reward?: {
         duration?: string;
@@ -32,6 +37,13 @@ interface APY7DAgoData {
     /** Allow extra fields from consumers */
     [key: string]: unknown;
 }
+/**
+ * @deprecated Prefer {@link ApyTooltip} with SDK `ApyBreakdown`. This legacy
+ * tooltip remains the only option when you need:
+ * - 1D / 7D comparison (`apy7DAgo`);
+ * - external APY block;
+ * - rich point tip metadata (`duration`, `condition`, `tokenTitle`, `amount`).
+ */
 export interface PoolAPYTooltipProps {
     children?: React.ReactNode;
     totalAPY?: number;
@@ -43,5 +55,10 @@ export interface PoolAPYTooltipProps {
     tokensList?: Record<string, TokenMetaInfo>;
     className?: string;
 }
+/**
+ * @deprecated Prefer {@link ApyTooltip} with SDK `ApyBreakdown`. Keep this
+ * component only when you still need 1D/7D history, external APY, or rich
+ * point tip metadata that `PointsProgram` does not carry.
+ */
 export declare function PoolAPYTooltip({ children, totalAPY, baseAPY, extraAPY, points, apy7DAgo, externalAPY, tokensList, className, }: PoolAPYTooltipProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/token-icon/token-icon.d.ts

@@ -1,5 +1,6 @@
 import { IconComposite } from '@gearbox-protocol/sdk/common-utils';
 import { default as React } from 'react';
+import { TokenIconInput } from '../../utils/token-icon-source';
 import { RoundedImageProps } from '../rounded-image/rounded-image';
 /**
  * TokenIcon — component for displaying token/asset icons.
@@ -9,7 +10,10 @@ import { RoundedImageProps } from '../rounded-image/rounded-image';
  * token symbols, asset icons, currency icons, token representations.
  *
  * Props:
- * - `symbol` — token symbol/ticker, direct icon URL, or `IconComposite` (see `TokenMetaInfo` in `@/types/common`).
+ * - `token` — token as it comes from the SDK/backend, or a bare symbol (preferred).
+ *   The component resolves the icon itself via `getTokenIcon`, so callers never
+ *   pass a pre-baked URL.
+ * - `symbol` — already-resolved source: direct icon URL or `IconComposite` (legacy).
  * - `size` — icon size in pixels (defaults to 48).
  *
  * Note: Fetches icon from Gearbox static CDN based on symbol.
@@ -29,7 +33,12 @@ type DirectIcon = {
 };
 export type SymbolOrIcon = string | DirectIcon | IconComposite;
 export interface TokenIconProps extends Omit<RoundedImageProps, "src" | "size"> {
-    symbol: SymbolOrIcon | undefined;
+    /**
+     * Token (or bare symbol). When set, takes precedence over `symbol` and is
+     * resolved via `getTokenIcon` (diesel composites, GEAR logo, etc.).
+     */
+    token?: TokenIconInput | string;
+    symbol?: SymbolOrIcon | undefined;
     size?: number;
     className?: string;
 }

package/dist/types/components/token-symbol/token-symbol.d.ts

@@ -1,16 +1,17 @@
 import { NetworkType } from '@gearbox-protocol/sdk';
+import { Token } from '@gearbox-protocol/sdk/model';
 import { VariantProps } from 'class-variance-authority';
 import { default as React } from 'react';
-import { TokenIconProps } from '../token-icon';
 import { TokenMetaInfo } from '../../types/common';
 declare const tokenSymbolVariants: (props?: ({
     marginSize?: "sm" | "lg" | "md" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TokenSymbolProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof tokenSymbolVariants> {
     /**
-     * Token data object or symbol string
+     * SDK `Token`, `TokenMetaInfo`, or bare symbol string. Passed straight to
+     * `TokenIcon`, which resolves the icon via `getTokenIcon`.
      */
-    token?: TokenMetaInfo | string;
+    token?: Token | TokenMetaInfo | string;
     /**
      * Optional override title to display
      */
@@ -51,7 +52,6 @@ export interface TokenSymbolProps extends Omit<React.HTMLAttributes<HTMLDivEleme
      */
     maxLength?: number;
 }
-export declare function getSymbolOrIcon(token: TokenSymbolProps["token"]): TokenIconProps["symbol"] | undefined;
 /**
  * TokenSymbol component for displaying token symbols with optional icon and comment
  *

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

@@ -0,0 +1 @@
+export * from './yield-breakdown-tooltip';

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

@@ -0,0 +1,32 @@
+import { ApyBreakdown, Bps, Leverage } from '@gearbox-protocol/sdk/model';
+import type * as React from "react";
+export interface YieldBreakdownTooltipProps {
+    /**
+     * Net yield (`ApyBreakdown`). For a strategy this is the net at
+     * {@link maxLeverage}.
+     */
+    supplyApy: ApyBreakdown;
+    /**
+     * Strategy-only plain leverage multiplier (e.g. `13.6` for 13.6x). When set,
+     * the header shows "at Nx leverage" and borrow rows may appear.
+     */
+    maxLeverage?: Leverage;
+    /**
+     * Strategy collateral yield used for Base / Incentive rows. Falls back to
+     * {@link supplyApy} when omitted.
+     */
+    collateralApy?: ApyBreakdown;
+    /** Strategy base borrow cost in bps (shown as a negative rate). */
+    borrowApy?: Bps;
+    /** Strategy additional (quota) borrow cost in bps (shown as a negative rate). */
+    additionalBorrowApy?: Bps;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Yield Breakdown tooltip for Earn — pool and strategy layouts from SDK
+ * `ApyBreakdown` (+ optional strategy borrow / leverage fields).
+ *
+ * Visuals follow Figma «Yield Details Surface» (400px card, always expanded).
+ */
+export declare function YieldBreakdownTooltip({ supplyApy, maxLeverage, collateralApy, borrowApy, additionalBorrowApy, children, className, }: YieldBreakdownTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/hooks/use-media-query.d.ts

@@ -9,8 +9,12 @@
  *   return <div>{isMobile ? "Mobile view" : "Desktop view"}</div>;
  * }
  * ```
+ *
+ * @param enabled When `false`, skips the `matchMedia` subscription. Used by
+ *   the named breakpoint hooks so they do not attach listeners when a
+ *   `BreakpointProvider` already owns the shared state.
  */
-export declare function useMediaQuery(query: string): boolean;
+export declare function useMediaQuery(query: string, enabled?: boolean): boolean;
 /**
  * Checks if the viewport is mobile-sized (max-width: 500px-)
  */

package/dist/types/index.d.ts

@@ -16,6 +16,7 @@ export * from './components/base-link';
 export * from './components/block-sync';
 export * from './components/block-sync-pill';
 export * from './components/breadcrumbs';
+export * from './components/breakpoint-provider';
 export * from './components/button-checkbox';
 export * from './components/buttons';
 export * from './components/card-grid';
@@ -138,6 +139,7 @@ export * from './components/vspace';
 export * from './components/with-copy';
 export * from './components/with-filter-button';
 export * from './components/with-title';
+export * from './components/yield-breakdown-tooltip';
 export * from './configs/design-tokens';
 export * from './configs/variants';
 export * from './hooks';

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

@@ -84,6 +84,16 @@ declare const _default: {
   "components.apyParts.points": "{symbol} Incentive",
   "components.apyParts.points.condition.crossDeposit": "For cross-chain deposits made via Omni",
 
+  "components.yieldBreakdown.title": "Yield Breakdown",
+  "components.yieldBreakdown.atLeverage": "at {leverage}× leverage",
+  "components.yieldBreakdown.baseYield": "Base Yield",
+  "components.yieldBreakdown.incentiveYield": "Incentive Yield",
+  "components.yieldBreakdown.borrowRate": "Borrow Rate",
+  "components.yieldBreakdown.baseRate": "Base Rate",
+  "components.yieldBreakdown.additionalRate": "Additional Rate",
+  "components.yieldBreakdown.netYield": "Net Yield",
+  "components.yieldBreakdown.points": "Points",
+
   "components.openCopyButtons.copy": "Copy to clipboard",
 
   "components.poolAssetsTable.asset": "Asset",
@@ -146,8 +156,6 @@ declare const _default: {
   "components.rewardsTooltip.with.title": "With {leverage} Leverage",
   "components.rewardsTooltip.with.borrowRate": "{symbol} borrow rate",
   "components.rewardsTooltip.with.quotaRate": "Quota rate",
-  "components.rewardsTooltip.with.bonusAPY.title": "Target Bonuses Yield",
-  "components.rewardsTooltip.with.bonusAPY.tip": "Expected Bonuses APY is calculated by the Asset Issuer and represents the expected value to be paid out in points.",
   "components.rewardsTooltip.with.extra": "+ Extra APR",
   "components.rewardsTooltip.button": "Click to show rewards details",
 

package/dist/types/types/common.d.ts

@@ -1,18 +1,12 @@
-import { IconComposite } from '@gearbox-protocol/sdk/common-utils';
 import { Address } from 'viem';
-export declare function isIconComposite(value: string | IconComposite | undefined | null): value is IconComposite;
+/**
+ * Token metadata as it arrives from the SDK or backend. Deliberately carries no
+ * icon field: icons are a front-end concern resolved from the symbol by
+ * `getTokenIcon` inside `TokenIcon`.
+ */
 export type TokenMetaInfo = {
     symbol: string;
     title?: string;
-    /**
-     * Token icon:
-     * - **String** — direct URL to a single raster/SVG asset. Often the best choice when the image is
-     *   baked on the server or CDN (single request, no client layering).
-     * - **`IconComposite`** — layered icon using named UI-kit presets (`stacked_full`, `centered_foreground`).
-     *
-     * Do not mix legacy alternate shapes; `icon` is a discriminated field (`string` vs `kind: "composite"`).
-     */
-    icon?: string | IconComposite;
     name?: string;
 };
 export type TokenFullData = TokenMetaInfo & {

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

@@ -0,0 +1,18 @@
+import { ApyBreakdown, Bps, PointsProgram, TokenRewards } from '@gearbox-protocol/sdk/model';
+/**
+ * Total APY as a UI should show it.
+ *
+ * `totalApy` is only reported in `offchain` mode; in `onchain` mode `rewards`
+ * is absent as well, so there are no incentives to fold in and organic yield is
+ * the whole figure.
+ */
+export declare function totalApyOf(apy: ApyBreakdown): Bps;
+/** Token reward rows from an SDK `ApyBreakdown`. */
+export declare function tokenRewardsOf(apy: ApyBreakdown): Array<TokenRewards>;
+/** Points programs from an SDK `ApyBreakdown`. */
+export declare function pointProgramsOf(apy: ApyBreakdown): Array<PointsProgram>;
+/**
+ * Token rewards with a positive supply APR — shared filter for compound APY
+ * chips and breakdown tooltips.
+ */
+export declare function positiveTokenRewardsOf(apy: ApyBreakdown): Array<TokenRewards>;

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

@@ -0,0 +1,3 @@
+import { Bps } from '@gearbox-protocol/sdk/model';
+/** Converts basis points (`10000` = 100%) to a percent number (`100` = 100%). */
+export declare const bpsToPercent: (bps: Bps) => number;

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

@@ -1,6 +1,8 @@
 export * from './a11y';
+export * from './apy-breakdown';
 export * from './bn-to-input-view';
 export * from './bn-to-pretty-view';
+export * from './bps';
 export * from './cn';
 export { cn as default } from './cn';
 export * from './colors';
@@ -24,6 +26,7 @@ export * from './short-sha';
 export * from './shorten-string';
 export type { SortField as UtilsSortField, SortType } from './sort';
 export * from './templates';
+export * from './token-icon-source';
 export * from './ttl';
 export * from './window';
 export * from './z-index';

package/dist/types/utils/token-icon-source.d.ts

@@ -0,0 +1,28 @@
+import { IconComposite } from '@gearbox-protocol/sdk/common-utils';
+/** Same shape as `TokenIcon`'s `symbol` prop — kept here to avoid a cycle. */
+export type TokenIconSource = string | {
+    icon: string;
+} | IconComposite;
+/**
+ * Everything the resolver needs from a token. Structural on purpose so the SDK
+ * read-model `Token`, the `TokenData` class, and bare metadata all fit without
+ * carrying an icon field.
+ */
+export interface TokenIconInput {
+    symbol: string;
+}
+/**
+ * Underlying symbol of a pool share token, or `undefined` when the symbol is
+ * an ordinary token. Falling through is safe: the caller then uses the token's
+ * own CDN asset.
+ */
+export declare function parseShareTokenUnderlying(symbol: string): string | undefined;
+/**
+ * Resolve a token (or bare symbol) into the value `TokenIcon` renders.
+ *
+ * Pure front-end concern: share token composites and the GEAR logo special
+ * case are derived from the symbol alone — callers must not pre-bake `icon` /
+ * `iconUrl`, and should hand the token to `TokenIcon` rather than calling this
+ * directly.
+ */
+export declare function getTokenIcon(token: TokenIconInput | string | undefined): TokenIconSource | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.14.0-next.65",
+  "version": "3.14.0-next.67",
   "description": "Internal UI components",
   "repository": {
     "type": "git",
@@ -156,7 +156,7 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@gearbox-protocol/biome-config": "^1.0.2",
-    "@gearbox-protocol/sdk": "14.11.0-next.9",
+    "@gearbox-protocol/sdk": "v14.12.0-next.73",
     "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",