@gearbox-protocol/ui-kit 4.0.0-next.23 → 4.0.0-next.24

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

@@ -1,4 +1,4 @@
-const o = {
+const e = {
   "errors.networkError": "Network error. Can't fetch data",
   "errors.incorrectAddressError": "Incorrect address. Please, check url",
   "errors.noOpenedAccountsError": "You have no opened Credit Accounts. Perhaps, you have recently been liquidated? Check notification centre to see more.",
@@ -70,9 +70,18 @@ const o = {
   "components.apyParts.points": "{symbol} Incentive",
   "components.apyParts.points.condition.crossDeposit": "For cross-chain deposits made via Omni",
   "components.yieldBreakdown.titleNetAtLeverage": "Net APY at {leverage}× Leverage",
+  "components.yieldBreakdown.titleNetAtLeverage7d": "Net APY at {leverage}× Leverage (7d)",
+  "components.yieldBreakdown.titleNet": "Net APY",
+  "components.yieldBreakdown.titleNet7d": "Net APY (7d)",
   "components.yieldBreakdown.collateralApy": "Collateral APY",
+  "components.yieldBreakdown.collateralApy7d": "Collateral APY (7d)",
+  "components.yieldBreakdown.baseApy": "Base APY",
+  "components.yieldBreakdown.baseApy7d": "Base APY (7d)",
   "components.yieldBreakdown.incentive": "Incentive",
+  "components.yieldBreakdown.incentiveApy": "Incentive APY",
+  "components.yieldBreakdown.incentiveApy7d": "Incentive APY (7d)",
   "components.yieldBreakdown.borrowRate": "Borrow Rate",
+  "components.yieldBreakdown.borrowRate7d": "Borrow Rate (7d)",
   "components.yieldBreakdown.programPoints": "{name} Points",
   "components.yieldBreakdown.points": "Points",
   "components.openCopyButtons.copy": "Copy to clipboard",
@@ -172,9 +181,12 @@ const o = {
   "components.titleMeta.unknownCurator": "Curator",
   "components.moreAccordion.more": "More details",
   "components.moreAccordion.less": "Less details",
-  "components.poolApyBreakdownCard.title": "APY Breakdown",
-  "components.poolApyBreakdownCard.organicApy": "Pool organic APY",
+  "components.poolApyBreakdownCard.title": "Net APY",
+  "components.poolApyBreakdownCard.title7d": "Net APY (7d)",
+  "components.poolApyBreakdownCard.organicApy": "Base APY",
+  "components.poolApyBreakdownCard.organicApy7d": "Base APY (7d)",
   "components.poolApyBreakdownCard.incentiveApy": "Incentive APY",
+  "components.poolApyBreakdownCard.incentiveApy7d": "Incentive APY (7d)",
   "components.strategyApyBreakdownCard.formula": "{leverage} × {base}",
   "components.strategyApyBreakdownCard.borrowFormula": "{debtMultiplier} × {borrowBase} + {quotaMultiplier} × {quotaBase}",
   "components.leveragePresetChips.label": "Leverage:",
@@ -192,5 +204,5 @@ const o = {
   "components.transactionConfirm.previewErrorTitle": "Preview error"
 };
 export {
-  o as default
+  e as default
 };

package/dist/types/components/base/history-chart/history-chart.d.ts

@@ -49,7 +49,8 @@ export interface HistoryChartProps {
     readonly trailing?: React.ReactNode;
     /**
      * Force a second Y-axis. When omitted, the chart splits axes only if
-     * `yMeasureUnit` lists more than one distinct unit.
+     * `yMeasureUnit` lists more than one distinct unit. Same-unit series share
+     * one scale and show its labels.
      */
     readonly dualYAxis?: boolean;
 }

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

@@ -8,6 +8,8 @@ export interface PoolApyBreakdownCardProps {
         readonly organicApy?: Bps;
         readonly incentiveApy?: Bps;
     };
+    /** When `"7d"`, labels carry the averaging-window suffix. */
+    readonly period?: "7d";
 }
-/** Organic vs incentive APY next to the pool APY chart. Missing values render as dashes. */
-export declare function PoolApyBreakdownCard({ data, }: PoolApyBreakdownCardProps): React.ReactElement;
+/** Organic vs incentive APY next to the pool APY chart. Missing organic renders as a dash; incentive is 0% when omitted. */
+export declare function PoolApyBreakdownCard({ data, period, }: PoolApyBreakdownCardProps): React.ReactElement;

package/dist/types/components/graph/default-config.d.ts

@@ -2,6 +2,29 @@ import { AreaSeriesPartialOptions, ChartOptions, DeepPartial } from 'lightweight
 import { VertLineOptions } from './plugins/vertical-line';
 export declare const DEFAULT_AREA_SERIES: AreaSeriesPartialOptions;
 export declare const DEFAULT_VERTICAL_LINE: Partial<VertLineOptions>;
+/** Matches UI `text-sm` so axis tick labels read with the rest of the chrome. */
+export declare const AXIS_FONT_SIZE = 14;
+/**
+ * Price-scale tick density. Higher → more space between labels (fewer ticks).
+ * Lightweight-charts defaults to 2.5, which packs ~12 labels onto a 460px pane.
+ */
+export declare const AXIS_TICK_MARK_DENSITY = 5;
+/**
+ * Pixel inset so a tick sitting on the pane edge is drawn fully inside the
+ * canvas (half the font plus a couple of pixels of breathing room).
+ */
+export declare const AXIS_EDGE_LABEL_PADDING_PX: number;
+/**
+ * Extra air above the top tick so the label does not sit flush with the
+ * chart frame. Larger than the bottom inset because the top edge has no
+ * time-axis chrome to separate it from the container.
+ */
+export declare const AXIS_TOP_LABEL_PADDING_PX: number;
+/**
+ * Horizontal inset so a centred date label (`dd MMM`, ~50px) sits fully
+ * inside the time-scale canvas with a few pixels of air on each side.
+ */
+export declare const AXIS_TIME_EDGE_PADDING_PX = 40;
 /**
  * Gets the default chart options with resolved CSS colors
  * Call this at runtime to ensure CSS variables are properly resolved

package/dist/types/components/graph/formatters.d.ts

@@ -27,6 +27,11 @@ export interface AdaptiveYAxisFormatterOptions {
  * stay bare so charts without a real unit don't render a placeholder.
  */
 export declare function withYAxisUnit(label: string, unit: YMeasureUnits): string;
+/**
+ * Ratio units (`base / quote`) stay off axis ticks, the crosshair pill, and
+ * tooltip values — the pair belongs in the series title, not after the number.
+ */
+export declare function isRatioUnit(unit: YMeasureUnits): boolean;
 /**
  * Creates an adaptive Y-axis formatter that determines precision dynamically
  * based on visible range to ensure unique labels on the axis.
@@ -37,7 +42,6 @@ export declare function createAdaptiveYAxisFormatter(initialValues: number[], un
     formatter: (price: number) => string;
     tickmarksFormatter: (prices: number[]) => string[];
     updateVisibleRange: (visibleValues: number[]) => void;
-    updateLastValues: (lastValues: number[]) => void;
 };
 export type XMeasureUnits = "time" | "%";
 type XFormatter = (time: Time, symbol: XMeasureUnits | undefined) => string;

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

@@ -6,6 +6,12 @@ export type SeriesPriceScaleId = "left" | "right";
 export type SeriesChartType = "area" | "line";
 export interface SeriesConfig {
     data: Array<Point>;
+    /**
+     * Stable chart-instance key. Prefer this over `label` so renaming the legend
+     * (e.g. interpolating leverage into the title) updates the existing series
+     * instead of destroying it — which shuffles `seriesRefs` and breaks tooltips.
+     */
+    id?: string;
     label: string;
     /** Line color (area stroke). Alias: prefer `lineColor` for clarity; if both set, `lineColor` wins. */
     color?: string;
@@ -23,6 +29,8 @@ export interface SeriesConfig {
     /** Line dash style (line series only). */
     lineStyle?: LineStyle;
 }
+/** Chart-instance key: stable `id` when set, otherwise the display `label`. */
+export declare function seriesIdentity(series: Pick<SeriesConfig, "id" | "label">): string;
 export type VerticalLineOptions = Partial<{
     color: string;
     labelText: string;
@@ -51,8 +59,8 @@ export interface PriceLineConfig {
     /** Y value (price) where the horizontal line is drawn. */
     price: number;
     /**
-     * Label of the series to attach the line to. When omitted, the line is
-     * attached to the first series that has data (its price scale is used).
+     * `id` (preferred) or display `label` of the series to attach the line to.
+     * When omitted, the line is attached to the first series that has data.
      */
     seriesLabel?: string;
     /** Line color. Defaults to the destructive theme color. */
@@ -80,8 +88,8 @@ export interface PriceZoneConfig {
     /** Fill color — use a translucent value. Defaults to a translucent destructive tint. */
     color?: string;
     /**
-     * Label of the series whose price scale the band is drawn against. When
-     * omitted, the first series with data is used.
+     * `id` (preferred) or display `label` of the series whose price scale the
+     * band is drawn against. When omitted, the first series with data is used.
      */
     seriesLabel?: string;
 }

package/dist/types/components/graph/y-axis-scale.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Nice Y-axis range: a tick step from the same 1 / 2 / 2.5 / 5 × 10^n family
+ * that lightweight-charts uses, with min/max snapped onto that grid so the
+ * first and last labels sit on the pane edges.
+ */
+export interface PickTickSpanArgs {
+    min: number;
+    max: number;
+    scaleHeightPx: number;
+    fontSizePx: number;
+    tickMarkDensity: number;
+    minMove: number;
+}
+export interface NiceAxisRangeArgs {
+    min: number;
+    max: number;
+    /** Hard floor (e.g. `yScaleMin`, or 0 when the series never goes negative). */
+    floor?: number;
+    scaleHeightPx: number;
+    fontSizePx: number;
+    tickMarkDensity: number;
+    minMove?: number;
+    /** Pixel inset lightweight-charts will add via AutoscaleInfo.margins.below. */
+    edgePaddingPx?: number;
+    /** Pixel inset for AutoscaleInfo.margins.above. Defaults to `edgePaddingPx`. */
+    edgePaddingTopPx?: number;
+}
+export interface NiceAxisRange {
+    min: number;
+    max: number;
+    step: number;
+}
+/**
+ * Smallest price increment the scale should resolve. One thousandth of the
+ * data span, snapped down to a power of ten — coarse enough to stay stable,
+ * fine enough not to cap the tick step the way a hardcoded `0.01` does on
+ * narrow ratio charts.
+ */
+export declare function pickMinMove(range: number): number;
+/**
+ * Tick step lightweight-charts would pick for this visible range.
+ */
+export declare function pickTickSpan({ min, max, scaleHeightPx, fontSizePx, tickMarkDensity, minMove, }: PickTickSpanArgs): number;
+/**
+ * Expand `[min, max]` onto the tick grid so both edges are labelled, matching
+ * the step the library will use once pixel edge-padding is applied.
+ */
+export declare function niceAxisRange({ min: rawMin, max: rawMax, floor, scaleHeightPx, fontSizePx, tickMarkDensity, minMove: minMoveArg, edgePaddingPx, edgePaddingTopPx, }: NiceAxisRangeArgs): NiceAxisRange;

package/dist/types/components/trading-view/trading-view.d.ts

@@ -15,7 +15,11 @@ export interface GraphDataPoint {
  * Graph data structure with title and data points
  */
 export interface GraphData {
-    /** Stable identifier used for color mapping. Should match `GraphDropdownItem.value`. */
+    /**
+     * Stable identifier used for color mapping and as the chart series key.
+     * Should match `GraphDropdownItem.value`. Keep this fixed when only `title`
+     * changes, otherwise the series is recreated and hover tooltips break.
+     */
     id?: string;
     title?: string;
     data: GraphDataPoint[];

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

@@ -20,11 +20,13 @@ export interface YieldBreakdownTooltipProps {
     borrowApy?: Bps;
     /** Strategy quota rate in bps, at 1x (folded into Borrow Rate). */
     quotaRate?: Bps;
+    /** When `"7d"`, labels carry the averaging-window suffix. */
+    period?: "7d";
     children?: React.ReactNode;
     className?: string;
 }
 /**
  * Earn APY tooltip — strategy (`Net APY at Nx Leverage`) and pool
- * (`Overall APY`) layouts from SDK `ApyBreakdown`.
+ * (`Net APY`) layouts from SDK `ApyBreakdown`.
  */
-export declare function YieldBreakdownTooltip({ supplyApy, maxLeverage, collateralApy, borrowApy, quotaRate, children, className, }: YieldBreakdownTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function YieldBreakdownTooltip({ supplyApy, maxLeverage, collateralApy, borrowApy, quotaRate, period, children, className, }: YieldBreakdownTooltipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -87,9 +87,18 @@ declare const _default: {
   "components.apyParts.points.condition.crossDeposit": "For cross-chain deposits made via Omni",
 
   "components.yieldBreakdown.titleNetAtLeverage": "Net APY at {leverage}× Leverage",
+  "components.yieldBreakdown.titleNetAtLeverage7d": "Net APY at {leverage}× Leverage (7d)",
+  "components.yieldBreakdown.titleNet": "Net APY",
+  "components.yieldBreakdown.titleNet7d": "Net APY (7d)",
   "components.yieldBreakdown.collateralApy": "Collateral APY",
+  "components.yieldBreakdown.collateralApy7d": "Collateral APY (7d)",
+  "components.yieldBreakdown.baseApy": "Base APY",
+  "components.yieldBreakdown.baseApy7d": "Base APY (7d)",
   "components.yieldBreakdown.incentive": "Incentive",
+  "components.yieldBreakdown.incentiveApy": "Incentive APY",
+  "components.yieldBreakdown.incentiveApy7d": "Incentive APY (7d)",
   "components.yieldBreakdown.borrowRate": "Borrow Rate",
+  "components.yieldBreakdown.borrowRate7d": "Borrow Rate (7d)",
   "components.yieldBreakdown.programPoints": "{name} Points",
   "components.yieldBreakdown.points": "Points",
 
@@ -212,9 +221,12 @@ declare const _default: {
   "components.moreAccordion.more": "More details",
   "components.moreAccordion.less": "Less details",
 
-  "components.poolApyBreakdownCard.title": "APY Breakdown",
-  "components.poolApyBreakdownCard.organicApy": "Pool organic APY",
+  "components.poolApyBreakdownCard.title": "Net APY",
+  "components.poolApyBreakdownCard.title7d": "Net APY (7d)",
+  "components.poolApyBreakdownCard.organicApy": "Base APY",
+  "components.poolApyBreakdownCard.organicApy7d": "Base APY (7d)",
   "components.poolApyBreakdownCard.incentiveApy": "Incentive APY",
+  "components.poolApyBreakdownCard.incentiveApy7d": "Incentive APY (7d)",
   "components.strategyApyBreakdownCard.formula": "{leverage} × {base}",
   "components.strategyApyBreakdownCard.borrowFormula": "{debtMultiplier} × {borrowBase} + {quotaMultiplier} × {quotaBase}",
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.23",
+  "version": "4.0.0-next.24",
   "description": "Internal UI components",
   "repository": {
     "type": "git",
@@ -55,8 +55,8 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^7.1.0",
-    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/fontawesome-svg-core": "^7.3.1",
+    "@fortawesome/free-solid-svg-icons": "^7.3.1",
     "@fortawesome/react-fontawesome": "^3.1.1",
     "@gearbox-protocol/static": "^1.117.2",
     "@radix-ui/react-accordion": "^1.2.2",