@gearbox-protocol/ui-kit 4.0.0-next.26 → 4.0.0-next.28

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

@@ -0,0 +1,42 @@
+import { Bps } from '@gearbox-protocol/sdk/model';
+import { default as React } from 'react';
+import { LocaleKeys } from '../../../locale';
+export declare const BREAKDOWN_DASH = "\u2014";
+/** Width of an APY breakdown in a tooltip — the one place it is named. */
+export declare const APY_BREAKDOWN_TOOLTIP_WIDTH = "400px";
+export declare function periodMessageId(period: "7d" | undefined, base: LocaleKeys, with7d: LocaleKeys): LocaleKeys;
+/**
+ * A rate as the rows write it: two decimals, and a real minus sign.
+ *
+ * Two decimals at every scale, unlike the compact form the rest of the kit
+ * uses above 1000%. A breakdown is read by adding it up, and `1.2K%` carries
+ * three significant figures — enough to make a correct column look wrong.
+ */
+export declare function formatBreakdownRate(value: Bps): string;
+export interface ApyBreakdownBodyProps {
+    /** Heading to the left of the chip — "Net APY (7d)" and the like. */
+    readonly title: React.ReactNode;
+    /** The figure the chip prints. */
+    readonly chip: string;
+    /** Green chip when the net is positive; muted otherwise. */
+    readonly chipPositive?: boolean;
+    readonly chipTestId?: string;
+    readonly children: React.ReactNode;
+    readonly testId?: string;
+}
+/**
+ * Shared chrome of an APY breakdown: header with a net chip, then rows.
+ * Used by the pool and strategy cards and by the yield tooltip.
+ */
+export declare function ApyBreakdownBody({ title, chip, chipPositive, chipTestId, children, testId, }: ApyBreakdownBodyProps): React.ReactElement;
+export interface ApyBreakdownRowProps {
+    readonly label: React.ReactNode;
+    readonly value: string;
+    readonly subtext?: React.ReactNode;
+    readonly muted?: boolean;
+    readonly testId?: string;
+    readonly valueTestId?: string;
+    readonly captionTestId?: string;
+}
+export declare function ApyBreakdownRow({ label, value, subtext, muted, testId, valueTestId, captionTestId, }: ApyBreakdownRowProps): React.ReactElement;
+export declare function ApyBreakdownDivider(): React.ReactElement;

package/dist/types/components/base/apy-breakdown-body/index.d.ts

@@ -0,0 +1,2 @@
+export type { ApyBreakdownBodyProps, ApyBreakdownRowProps, } from './apy-breakdown-body';
+export { APY_BREAKDOWN_TOOLTIP_WIDTH, ApyBreakdownBody, ApyBreakdownDivider, ApyBreakdownRow, BREAKDOWN_DASH, formatBreakdownRate, periodMessageId, } from './apy-breakdown-body';

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

@@ -1,4 +1,7 @@
 export declare class PoolApyBreakdownCardTest {
     static root: string;
+    static net: string;
     static value: string;
+    static reward: string;
+    static points: string;
 }

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

@@ -1,15 +1,17 @@
-import { Bps } from '@gearbox-protocol/sdk/model';
+import { ApyBreakdown } from '@gearbox-protocol/sdk/model';
 import { default as React } from 'react';
 import { PoolApyBreakdownCardTest } from './constants';
 export { PoolApyBreakdownCardTest };
 export interface PoolApyBreakdownCardProps {
-    /** Organic and incentive APYs in basis points; a missing value renders a dash. */
-    readonly data?: {
-        readonly organicApy?: Bps;
-        readonly incentiveApy?: Bps;
-    };
+    /** SDK supply APY; missing data renders dashes, a present one with no incentives renders Incentive APY as 0%. */
+    readonly data?: ApyBreakdown;
     /** When `"7d"`, labels carry the averaging-window suffix. */
     readonly period?: "7d";
 }
-/** Organic vs incentive APY next to the pool APY chart. Missing organic renders as a dash; incentive is 0% when omitted. */
+/**
+ * How a pool's net APY is arrived at: base yield plus incentives.
+ *
+ * Base and Incentive add up to the chip. Token rewards and points programs
+ * sit under a divider as a breakdown of the incentive, not as extra addends.
+ */
 export declare function PoolApyBreakdownCard({ data, period, }: PoolApyBreakdownCardProps): React.ReactElement;

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

@@ -29,6 +29,8 @@ export interface StrategyApyBreakdownCardProps {
      * it. Off in a tooltip, where it is a glance.
      */
     readonly showFormula?: boolean;
+    /** When `"7d"`, labels carry the averaging-window suffix. */
+    readonly period?: "7d";
 }
 /**
  * How a strategy's net APY is arrived at: collateral yield on the leveraged
@@ -45,4 +47,4 @@ export interface StrategyApyBreakdownCardProps {
  * 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;
+export declare function StrategyApyBreakdownCard({ data, showFormula, period, }: StrategyApyBreakdownCardProps): React.ReactElement;

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

@@ -22,13 +22,15 @@ export interface ApyValueProps {
      * @default true
      */
     readonly tooltip?: boolean;
+    /** When `"7d"`, the breakdown tooltip labels carry the averaging-window suffix. */
+    readonly period?: "7d";
 }
 /**
  * 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, tooltip, }: ApyValueProps): React.ReactElement;
+export declare function ApyValue({ data, tooltip, period, }: ApyValueProps): React.ReactElement;
 export declare function UsdValue({ data, }: {
     readonly data: number | null | undefined;
 }): React.ReactElement;

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

@@ -33,6 +33,8 @@ export interface CompoundAPYProps {
      * @default true
      */
     tooltip?: boolean;
+    /** When `"7d"`, tooltip labels carry the averaging-window suffix. */
+    period?: "7d";
     className?: string;
 }
 /**
@@ -41,4 +43,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, tooltip, className, }: CompoundAPYProps): import("react").JSX.Element;
+export declare function CompoundAPY({ apy, maxLeverage, collateralApy, borrowApy, quotaRate, decimals, tooltip, period, className, }: CompoundAPYProps): import("react").JSX.Element;

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

@@ -1,5 +1,23 @@
 import { ApyBreakdown, Bps, Leverage } from '@gearbox-protocol/sdk/model';
+import { SimpleTooltipPlacement } from '../tooltip';
 import type * as React from "react";
+export interface ApyBreakdownTooltipProps {
+    /** Trigger — what the user hovers. */
+    readonly title: React.ReactNode;
+    /** Breakdown card (or any rich body) shown in the panel. */
+    readonly children: React.ReactNode;
+    /** Placement relative to the trigger. @default "left" */
+    readonly placement?: SimpleTooltipPlacement;
+    /** Controlled open state. Specs pass it because jsdom has no hover. */
+    readonly open?: boolean;
+    readonly className?: string;
+    readonly triggerClassName?: string;
+}
+/**
+ * Chrome around an APY breakdown in a tooltip: 400px, no arrow, modal
+ * surface. Callers pass only the trigger and the card — width lives here.
+ */
+export declare function ApyBreakdownTooltip({ title, children, placement, open, className, triggerClassName, }: ApyBreakdownTooltipProps): React.ReactElement;
 export interface YieldBreakdownTooltipProps {
     /**
      * Net yield (`ApyBreakdown`). For a strategy this is the net at
@@ -24,9 +42,11 @@ export interface YieldBreakdownTooltipProps {
     period?: "7d";
     children?: React.ReactNode;
     className?: string;
+    /** Controlled open state. Specs pass it because jsdom has no hover. */
+    open?: boolean;
 }
 /**
- * Earn APY tooltip — strategy (`Net APY at Nx Leverage`) and pool
- * (`Net APY`) layouts from SDK `ApyBreakdown`.
+ * Earn APY tooltip — a pool hands {@link PoolApyBreakdownCard}; a strategy
+ * (positions list) still itemises unlevered collateral, borrow and rewards.
  */
-export declare function YieldBreakdownTooltip({ supplyApy, maxLeverage, collateralApy, borrowApy, quotaRate, period, children, className, }: YieldBreakdownTooltipProps): React.JSX.Element;
+export declare function YieldBreakdownTooltip({ supplyApy, maxLeverage, collateralApy, borrowApy, quotaRate, period, children, className, open, }: YieldBreakdownTooltipProps): React.JSX.Element;

package/package.json

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