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

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

@@ -17,14 +17,9 @@ const e = {
   "components.footer.gearbox": "Copyright © Gearbox Foundation 2023-2026.",
   "components.footer.built": "Built at ETHGlobal MarketMake hackathon.",
   "components.footer.version": "Version {value}",
-  "components.syncStatus.live": "Live",
-  "components.syncStatus.starting": "Syncing…",
-  "components.syncStatus.cached": "Cached",
-  "components.syncStatus.none": "No data",
-  "components.syncStatus.unavailable": "Unavailable",
-  "components.syncStatus.ago": "{age} ago",
-  "components.syncStatus.sourceOutdated": "{source} data outdated",
-  "components.syncStatus.sourceMissing": "no {source} data",
+  "components.sdkStatus.connecting": "Connecting…",
+  "components.sdkStatus.connected": "Connected",
+  "components.sdkStatus.disconnected": "Not connected",
   "components.creditAccountHistory.table.protocol": "Protocol",
   "components.creditAccountHistory.table.operation": "Operation",
   "components.creditAccountHistory.table.details": "Details",
@@ -184,7 +179,8 @@ const e = {
   "components.strategyApyBreakdownCard.collateralApy": "Collateral APY",
   "components.strategyApyBreakdownCard.incentiveApy": "Incentive APY",
   "components.strategyApyBreakdownCard.borrowRate": "Borrow Rate",
-  "components.strategyApyBreakdownCard.formula": "{base} × {leverage} Lev.",
+  "components.strategyApyBreakdownCard.quotaRate": "Quota Rate",
+  "components.strategyApyBreakdownCard.formula": "{leverage} × {base}",
   "components.leveragePresetChips.label": "Leverage:",
   "components.liquidationParamsTable.lt": "Liquidation threshold",
   "components.liquidationParamsTable.penalty": "Liquidation discount",

package/dist/esm/utils/index.js

@@ -1,113 +1,117 @@
 import { generateId as r, useFormFieldIds as t } from "./a11y.js";
-import { pointProgramsOf as m, positiveTokenRewardsOf as n, tokenRewardsOf as i, totalApyOf as p } from "./apy-breakdown.js";
-import { bnToInputView as l } from "./bn-to-input-view.js";
+import { pointProgramsOf as m, positiveTokenRewardsOf as n, tokenRewardsOf as p, totalApyOf as i } from "./apy-breakdown.js";
+import { bnToInputView as s } from "./bn-to-input-view.js";
 import { bnToPrettyView as x } from "./bn-to-pretty-view.js";
-import { bpsToPercent as c } from "./bps.js";
+import { bpsToPercent as g } from "./bps.js";
 import { cn as S, cn as d } from "./cn.js";
-import { generateColorsFromBase as h, getCSSVariable as v, hexToRgba as P, hslToHex as b, resolveCSSColor as A } from "./colors.js";
+import { generateColorsFromBase as h, getCSSVariable as A, hexToRgba as v, hslToHex as y, resolveCSSColor as P } from "./colors.js";
 import { copyToClipboard as N } from "./copy.js";
-import { convertPercent as L, formatBytecodeSize as y, formatBytecodeVersion as C, formatTimestamp as w, shortenHash as F, significantTrunc as D } from "./format.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 M } from "./format-leverage.js";
+import { formatLeverage as B } 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 j, getAdaptiveDecimals as G, isBelowDisplayThreshold as J, isEffectivelyZero as K, toSignificantDigits as Q } from "./format-number.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 { 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";
-import { decimalsToStep as pe, findClosestPoint as fe, formatWithDecimals as le, formatWithoutDecimals as se, splitInterval as xe, validateMinMax as Te } from "./math.js";
-import { getNetworkIcon as ge } from "./network-icons.js";
-import { bnToLiquidationPriceView as de, isPositiveFloat as ue, parseInputToBN as he, parseSmallNumber as ve } from "./parse-input-to-bn.js";
-import { pluralize as be, selectPluralString as Ae } from "./plural.js";
+import { decimalsToStep as ie, findClosestPoint as fe, formatWithDecimals as se, formatWithoutDecimals as le, splitInterval as xe, validateMinMax as Te } from "./math.js";
+import { getNetworkIcon as ce } from "./network-icons.js";
+import { bnToLiquidationPriceView as de, isPositiveFloat as ue, parseInputToBN as he, parseSmallNumber as Ae } from "./parse-input-to-bn.js";
+import { pluralize as ye, selectPluralString as Pe } from "./plural.js";
 import { getAvailableRanges as Ne } from "./ranges.js";
-import { extractTextFromLabel as Le, serializeValue as ye } from "./react.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 Be } from "./short-sha.js";
-import { isLongString as Re, shortenString as _e } from "./shorten-string.js";
-import { negativeTokenTemplate as He, tokenTemplate as We, tokenTemplateNumber as Ze, tokenTemplateString as ze } from "./templates.js";
-import { getTokenIcon as Xe, parseShareTokenUnderlying as qe } from "./token-icon-source.js";
-import { TTL_CONSTANTS as Ge, getTTLZones as Je, ttlFromTimestamp as Ke, ttlLeft as Qe, ttlLeftHuman as Ye } from "./ttl.js";
-import { openInNewWindow as eo } from "./window.js";
-import { Z_INDEX as ro, Z_INDEX_VALUES as to } from "./z-index.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 { 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";
 export {
   X as FORMAT_CONSTANTS,
-  Ge as TTL_CONSTANTS,
-  ro as Z_INDEX,
-  to as Z_INDEX_VALUES,
+  Ye as TTL_CONSTANTS,
+  no as Z_INDEX,
+  po as Z_INDEX_VALUES,
   ae as allLoaded,
-  l as bnToInputView,
+  s as bnToInputView,
   de as bnToLiquidationPriceView,
   x as bnToPrettyView,
-  c as bpsToPercent,
+  g as bpsToPercent,
   S as cn,
-  L as convertPercent,
+  I as convertPercent,
   N as copyToClipboard,
   De as createTokenSearchFilter,
-  pe as decimalsToStep,
+  ie as decimalsToStep,
   d as default,
-  Le as extractTextFromLabel,
+  Ie as extractTextFromLabel,
   fe as findClosestPoint,
   V as formatAssetAmount,
-  y as formatBytecodeSize,
+  k as formatBytecodeSize,
   C as formatBytecodeVersion,
   oe as formatChipLeverage,
   _ as formatCompactPercent,
-  M as formatLeverage,
+  B as formatLeverage,
   E as formatMoney,
   H as formatMoneyAmount,
   q as formatNumberWithSuffix,
   W as formatPercentAmount,
-  j as formatPrice,
+  Q as formatPrice,
   w as formatTimestamp,
-  le as formatWithDecimals,
-  se as formatWithoutDecimals,
+  se as formatWithDecimals,
+  le as formatWithoutDecimals,
   h as generateColorsFromBase,
   r as generateId,
-  G as getAdaptiveDecimals,
+  j as getAdaptiveDecimals,
   Ne as getAvailableRanges,
-  v as getCSSVariable,
-  ge as getNetworkIcon,
-  Je as getTTLZones,
-  Xe as getTokenIcon,
-  P as hexToRgba,
-  b as hslToHex,
-  J as isBelowDisplayThreshold,
-  K as isEffectivelyZero,
-  Re as isLongString,
+  A as getCSSVariable,
+  ce as getNetworkIcon,
+  $e as getTTLZones,
+  Ge as getTokenIcon,
+  v as hexToRgba,
+  y as hslToHex,
+  G as isBelowDisplayThreshold,
+  J as isEffectivelyZero,
+  Me as isLongString,
   ue as isPositiveFloat,
   re as leveragePresets,
   me as loadingProgress,
-  He as negativeTokenTemplate,
-  eo as openInNewWindow,
+  Ue as negativeTokenTemplate,
+  ao as openInNewWindow,
   he as parseInputToBN,
-  qe as parseShareTokenUnderlying,
-  ve as parseSmallNumber,
+  Je as parseShareTokenUnderlying,
+  Ae as parseSmallNumber,
   Z as percentTemplate,
   z as percentageTemplate,
-  be as pluralize,
+  ye as pluralize,
   m as pointProgramsOf,
   n as positiveTokenRewardsOf,
-  A as resolveCSSColor,
+  P as resolveCSSColor,
   ne as round5,
   we as searchInString,
   Oe as searchInToken,
-  Ae as selectPluralString,
-  ye as serializeValue,
-  Be as shortSHA,
+  Pe as selectPluralString,
+  ke as serializeValue,
+  Re as shortSHA,
   F as shortenHash,
   _e as shortenString,
   D as significantTrunc,
   $ as slippageTemplate,
   xe as splitInterval,
-  Q as toSignificantDigits,
-  i as tokenRewardsOf,
-  We as tokenTemplate,
-  Ze as tokenTemplateNumber,
-  ze as tokenTemplateString,
-  p as totalApyOf,
-  Ke as ttlFromTimestamp,
-  Qe as ttlLeft,
-  Ye as ttlLeftHuman,
+  He as strategyApyPartsAtLeverage,
+  We as strategyNetApyAtLeverage,
+  Ze as strategyQuotaRate,
+  K as toSignificantDigits,
+  p as tokenRewardsOf,
+  Xe as tokenTemplate,
+  qe as tokenTemplateNumber,
+  Qe as tokenTemplateString,
+  i as totalApyOf,
+  eo as ttlFromTimestamp,
+  oo as ttlLeft,
+  ro as ttlLeftHuman,
   t as useFormFieldIds,
   Te as validateMinMax
 };

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

@@ -0,0 +1,41 @@
+function e({
+  additionalBorrowApy: o = 0,
+  maxLeverage: t
+}) {
+  return t != null && t > 0 ? o / t : 0;
+}
+function i({
+  leverage: o,
+  maxLeverage: t,
+  borrowApy: r = 0,
+  additionalBorrowApy: u = 0
+}) {
+  const n = Math.max(o - 1, 0), s = r * n, a = e({ additionalBorrowApy: u, maxLeverage: t }), c = a * o;
+  return {
+    debtMultiplier: n,
+    borrowCost: s,
+    quotaRate: a,
+    quotaCost: c,
+    totalCost: s + c
+  };
+}
+function y({
+  collateralApy: o,
+  leverage: t,
+  maxLeverage: r,
+  borrowApy: u,
+  additionalBorrowApy: n
+}) {
+  const { totalCost: s } = i({
+    leverage: t,
+    maxLeverage: r,
+    borrowApy: u,
+    additionalBorrowApy: n
+  });
+  return o * t - s;
+}
+export {
+  i as strategyApyPartsAtLeverage,
+  y as strategyNetApyAtLeverage,
+  e as strategyQuotaRate
+};

package/dist/types/components/base/stat-badge/constants.d.ts

@@ -2,4 +2,5 @@ export declare class StatBadgeTest {
     static root: string;
     static grid: string;
     static action: string;
+    static delta: string;
 }

package/dist/types/components/base/stat-badge/stat-badge.d.ts

@@ -3,10 +3,20 @@ import { TitleText } from '../text';
 import { StatBadgeTest } from './constants';
 export { StatBadgeTest };
 export type StatBadgeSize = "sm" | "md" | "default";
+export interface StatBadgeDelta {
+    /** Formatted change, e.g. `"12.50%"`. Sign is taken from `value`, not this string. */
+    readonly label: ReactNode;
+    /** Signed change; `> 0` is success, `< 0` is destructive. */
+    readonly value: number;
+    /** Period hint shown on hover, e.g. `"7D"`. */
+    readonly tooltip?: ReactNode;
+}
 export interface StatBadgeProps {
     /** A messageId (formatted here) or a node. */
     readonly title: TitleText;
     readonly value: React.ReactNode;
+    /** Optional change chip in the top-right of the card. Hidden while `isLoading`. */
+    readonly delta?: StatBadgeDelta;
     /** Optional control in the top-right of the card, e.g. a Claim button. */
     readonly action?: ReactNode;
     readonly className?: string;
@@ -16,7 +26,7 @@ export interface StatBadgeProps {
     readonly testId?: string;
     readonly size?: StatBadgeSize;
 }
-export declare function StatBadge({ title, value, isLoading, size, action, className, testId, }: StatBadgeProps): React.ReactElement;
+export declare function StatBadge({ title, value, isLoading, size, delta, action, className, testId, }: StatBadgeProps): React.ReactElement;
 export interface StatBadgeGridProps {
     readonly cols?: 1 | 2 | 3 | 4;
     readonly colsLg?: 1 | 2 | 3 | 4;

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

@@ -7,6 +7,18 @@ export interface StrategyApyBreakdownData {
     readonly borrowApy?: Bps;
     readonly additionalBorrowApy?: Bps;
     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.
+     */
+    readonly netApy?: ApyBreakdown;
 }
 export interface StrategyApyBreakdownCardProps {
     readonly data: StrategyApyBreakdownData;

package/dist/types/components/base/tabber/tabber.d.ts

@@ -10,8 +10,8 @@ export interface TabberSectionProps {
     readonly actions?: React.ReactNode;
     readonly children?: React.ReactNode;
     /**
-     * Render this section above the sticky tab bar (overview badges). The tab
-     * still appears in the bar and scroll-spy still tracks the section.
+     * Render this section above the sticky tab bar (overview badges). The
+     * section is not listed in the bar; scroll-spy tracks only sections below it.
      */
     readonly beforeBar?: boolean;
     /** Skip the in-section h2 — overview has badges, not a heading. */

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

@@ -55,6 +55,7 @@ export * from './pool-points-indicator';
 export * from './rounded-image';
 export * from './rwa-feature';
 export * from './rwa-styles';
+export * from './sdk-status-pill';
 export * from './search-line';
 export * from './segmented-control';
 export * from './select';
@@ -69,7 +70,6 @@ export * from './spinner-loader';
 export * from './split-list';
 export * from './status-dot';
 export * from './status-elements';
-export * from './sync-status-pill';
 export * from './tab-control';
 export * from './table';
 export * from './tabs';

package/dist/types/components/sdk-status-pill/constants.d.ts

@@ -0,0 +1,5 @@
+export declare class SdkStatusPillTest {
+    static root: string;
+    static dot: string;
+    static tooltip: string;
+}

package/dist/types/components/sdk-status-pill/index.d.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './sdk-status';
+export * from './sdk-status-pill';

package/dist/types/components/sdk-status-pill/sdk-status-pill.d.ts

@@ -0,0 +1,27 @@
+import { SdkAttachStatus } from './sdk-status';
+import type * as React from "react";
+export interface SdkStatusPillProps {
+    /** Where the SDK is in its attach lifecycle. */
+    status: SdkAttachStatus;
+}
+/**
+ * SdkStatusPill — whether the SDK is connected, as one dot in an app footer.
+ *
+ * Deliberately narrow: it reports the **SDK's attach lifecycle** and nothing
+ * else. It is not a data-freshness indicator — it will not go grey because a
+ * chain lagged or the backend failed, and it says nothing about what is on
+ * screen. Screens surface their own failures.
+ *
+ * Two constraints, both product decisions:
+ *
+ * - **The palette is green and muted grey only**, never red or amber. See
+ *   {@link sdkStatusDotVariant}.
+ * - **No visible label**, so the tooltip carries the wording and is mirrored
+ *   into `aria-label` — a screen reader cannot see the colour.
+ *
+ * @example
+ * ```tsx
+ * <AppFooter status={<SdkStatusPill status={attach.status} />} />
+ * ```
+ */
+export declare function SdkStatusPill({ status, }: SdkStatusPillProps): React.ReactElement;

package/dist/types/components/sdk-status-pill/sdk-status.d.ts

@@ -0,0 +1,11 @@
+/** Where the SDK is in its attach lifecycle. */
+export type SdkAttachStatus = "loading" | "error" | "ready";
+/** Dot variants this indicator is allowed to use. */
+export type SdkStatusDotVariant = "success" | "default";
+/**
+ * The palette rule, as a function rather than a comment: green once the SDK is
+ * usable, muted grey otherwise. Never `alert` or `warning` — an alarming dot in
+ * permanent view teaches people to ignore it, and the screens surface their own
+ * failures. Exported so the rule is pinned by a test rather than by review.
+ */
+export declare function sdkStatusDotVariant(status: SdkAttachStatus): SdkStatusDotVariant;

package/dist/types/index.d.ts

@@ -57,6 +57,7 @@ export * from './components/pool-points-indicator';
 export * from './components/rounded-image';
 export * from './components/rwa-feature';
 export * from './components/rwa-styles';
+export * from './components/sdk-status-pill';
 export * from './components/search-line';
 export * from './components/segmented-control';
 export * from './components/select';
@@ -71,7 +72,6 @@ export * from './components/spinner-loader';
 export * from './components/split-list';
 export * from './components/status-dot';
 export * from './components/status-elements';
-export * from './components/sync-status-pill';
 export * from './components/tab-control';
 export * from './components/table';
 export * from './components/tabs';
@@ -96,7 +96,6 @@ export * from './configs/variants';
 export * from './hooks';
 export type { LocaleKeys } from './locale';
 export * from './locale';
-export type { NetworkById } from './types/footer';
 export { EnglishLocale };
 export * from './utils';
 export * from './utils/a11y';

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

@@ -20,14 +20,9 @@ declare const _default: {
   "components.footer.built": "Built at ETHGlobal MarketMake hackathon.",
   "components.footer.version": "Version {value}",
 
-  "components.syncStatus.live": "Live",
-  "components.syncStatus.starting": "Syncing…",
-  "components.syncStatus.cached": "Cached",
-  "components.syncStatus.none": "No data",
-  "components.syncStatus.unavailable": "Unavailable",
-  "components.syncStatus.ago": "{age} ago",
-  "components.syncStatus.sourceOutdated": "{source} data outdated",
-  "components.syncStatus.sourceMissing": "no {source} data",
+  "components.sdkStatus.connecting": "Connecting…",
+  "components.sdkStatus.connected": "Connected",
+  "components.sdkStatus.disconnected": "Not connected",
 
   "components.creditAccountHistory.table.protocol": "Protocol",
   "components.creditAccountHistory.table.operation": "Operation",
@@ -225,7 +220,8 @@ declare const _default: {
   "components.strategyApyBreakdownCard.collateralApy": "Collateral APY",
   "components.strategyApyBreakdownCard.incentiveApy": "Incentive APY",
   "components.strategyApyBreakdownCard.borrowRate": "Borrow Rate",
-  "components.strategyApyBreakdownCard.formula": "{base} × {leverage} Lev.",
+  "components.strategyApyBreakdownCard.quotaRate": "Quota Rate",
+  "components.strategyApyBreakdownCard.formula": "{leverage} × {base}",
 
   "components.leveragePresetChips.label": "Leverage:",
 

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

@@ -1,4 +1,3 @@
 export type * from './filter';
-export type * from './footer';
 export type * from './graph';
 export type * from './range-item';

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

@@ -27,6 +27,7 @@ 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/dist/types/utils/strategy-apy.d.ts

@@ -0,0 +1,37 @@
+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`).
+ */
+export declare function strategyQuotaRate({ additionalBorrowApy, maxLeverage, }: {
+    readonly additionalBorrowApy?: Bps;
+    readonly maxLeverage?: Leverage;
+}): Bps;
+/**
+ * Borrow + quota cost of a strategy at leverage `l`, in bps.
+ *
+ * `cost = borrowApy × max(l − 1, 0) + quotaRate × l`
+ */
+export declare function strategyApyPartsAtLeverage({ leverage, maxLeverage, borrowApy, additionalBorrowApy, }: {
+    readonly leverage: Leverage;
+    readonly maxLeverage?: Leverage;
+    readonly borrowApy?: Bps;
+    readonly additionalBorrowApy?: Bps;
+}): {
+    readonly debtMultiplier: 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)`.
+ */
+export declare function strategyNetApyAtLeverage({ collateralApy, leverage, maxLeverage, borrowApy, additionalBorrowApy, }: {
+    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.14",
+  "version": "4.0.0-next.16",
   "description": "Internal UI components",
   "repository": {
     "type": "git",

package/dist/cjs/components/sync-status-pill/constants.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class t{static root="sync-status-pill-root";static dot="sync-status-pill-dot";static tooltip="sync-status-pill-tooltip";static headline="sync-status-pill-headline";static chainRow="sync-status-pill-chain-row"}exports.SyncStatusPillTest=t;

package/dist/cjs/components/sync-status-pill/get-sync-status.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function h({onchain:t,offchain:e,attach:n="ready",now:r,staleAfterMs:a}){if(n==="loading")return{health:"starting",chains:[],syncedAt:void 0};if(n==="error")return{health:"none",chains:[],syncedAt:void 0};const i=f({onchain:t,offchain:e,now:r,staleAfterMs:a});if(i.length===0)return{health:"starting",chains:i,syncedAt:void 0};const u=v(i);return{health:u,chains:i,syncedAt:g(u,t,e)}}function f({onchain:t,offchain:e,now:n,staleAfterMs:r}){const a=d(t.meta),i=d(e.meta);return[...new Set([...a.keys(),...i.keys()])].map(o=>{const s=l(a.get(o),t.updatedAt,n,r),c=l(i.get(o),e.updatedAt,n,r);return{chainId:o,onchain:s,offchain:c,health:y(s,c)}})}function d(t){const e=new Map;for(const n of t?.chains??[])e.set(n.chainId,n);return e}function l(t,e,n,r){return t?t.status==="error"?"failed":!e||n-e>r||n-t.timestamp*1e3>r?"stale":"ok":"unknown"}function y(t,e){return t==="ok"?"live":t==="stale"||e==="ok"||e==="stale"?"cached":"none"}function v(t){return t.every(e=>e.health==="none")?"none":t.some(e=>e.health==="live")?"live":"cached"}function g(t,e,n){if(t==="live")return e.updatedAt||void 0;if(t==="cached"){const r=[e.updatedAt,n.updatedAt].filter(a=>!!a);return r.length?Math.max(...r):void 0}}function p(t){return t==="live"?"success":"default"}exports.getSyncStatus=h;exports.syncStatusDotVariant=p;

package/dist/cjs/components/sync-status-pill/index.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./constants.cjs"),t=require("./get-sync-status.cjs"),n=require("./sync-status-pill.cjs");exports.SyncStatusPillTest=s.SyncStatusPillTest;exports.getSyncStatus=t.getSyncStatus;exports.syncStatusDotVariant=t.syncStatusDotVariant;exports.SyncStatusPill=n.SyncStatusPill;

package/dist/cjs/components/sync-status-pill/sync-status-pill.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d=require("react"),f=require("../status-dot/status-dot.cjs"),x=require("../tooltip/simple-tooltip.cjs");require("../tooltip/tooltip.cjs");const g=require("../typed-intl/index.cjs");require("@gearbox-protocol/sdk/common-utils");const _=require("../../hooks/use-media-query.cjs"),c=require("./constants.cjs"),p=require("./get-sync-status.cjs"),I=6e4*2.5,v=1e3,w="(hover: none)";function T({onchain:e,offchain:t,attach:s,isSyncing:u=!1,networkById:r}){const{formatMessage:n}=g.useIntlTyped(),l=$(),y=!_.useMediaQuery(w),o=d.useMemo(()=>p.getSyncStatus({onchain:e,offchain:t,attach:s,now:l,staleAfterMs:I}),[e,t,s,l]),S=n({messageId:q[o.health]}),m=o.syncedAt?`${S} · ${n({messageId:"components.syncStatus.ago"},{age:j(l-o.syncedAt)})}`:S,h=a.jsx("output",{className:"-m-1.5 flex size-6 cursor-pointer items-center justify-center","data-testid":c.SyncStatusPillTest.root,"aria-label":m,children:a.jsx(f.StatusDot,{variant:p.syncStatusDotVariant(o.health),size:"xs",pulse:o.health==="starting"||u,"data-testid":c.SyncStatusPillTest.dot})});return a.jsx(x.SimpleTooltip,{title:h,trigger:y?"hover":"click",placement:"top",maxWidth:"280px",children:a.jsxs("div",{className:"flex flex-col gap-1 text-left text-xs","data-testid":c.SyncStatusPillTest.tooltip,children:[a.jsx("span",{className:"font-medium","data-testid":c.SyncStatusPillTest.headline,children:m}),o.chains.map(i=>a.jsx("span",{className:"text-muted-foreground","data-testid":c.SyncStatusPillTest.chainRow,children:`${r[i.chainId]??String(i.chainId)}  ${M(i,n)}`},i.chainId))]})})}const q={live:"components.syncStatus.live",starting:"components.syncStatus.starting",cached:"components.syncStatus.cached",none:"components.syncStatus.none"};function M(e,t){if(e.health==="none")return t({messageId:"components.syncStatus.unavailable"});const[s,u,r]=e.health==="live"?[t({messageId:"components.syncStatus.live"}),"offchain",e.offchain]:[t({messageId:"components.syncStatus.cached"}),"onchain",e.onchain],n=P(u,r,t);return n?`${s} · ${n}`:s}function P(e,t,s){if(t==="stale")return s({messageId:"components.syncStatus.sourceOutdated"},{source:e});if(t==="failed"||t==="unknown")return s({messageId:"components.syncStatus.sourceMissing"},{source:e})}function j(e){const t=Math.max(0,Math.round(e/1e3));return t<60?`${t}s`:t<3600?`${Math.round(t/60)}m`:`${Math.round(t/3600)}h`}function $(){const[e,t]=d.useState(()=>Date.now());return d.useEffect(()=>{const s=window.setInterval(()=>t(Date.now()),v);return()=>window.clearInterval(s)},[]),e}exports.SyncStatusPill=T;

package/dist/cjs/types/footer.cjs

@@ -1 +0,0 @@
-"use strict";

package/dist/esm/components/sync-status-pill/constants.js

@@ -1,10 +0,0 @@
-class s {
-  static root = "sync-status-pill-root";
-  static dot = "sync-status-pill-dot";
-  static tooltip = "sync-status-pill-tooltip";
-  static headline = "sync-status-pill-headline";
-  static chainRow = "sync-status-pill-chain-row";
-}
-export {
-  s as SyncStatusPillTest
-};

package/dist/esm/components/sync-status-pill/get-sync-status.js

@@ -1,78 +0,0 @@
-function p({
-  onchain: t,
-  offchain: e,
-  attach: n = "ready",
-  now: r,
-  staleAfterMs: a
-}) {
-  if (n === "loading")
-    return { health: "starting", chains: [], syncedAt: void 0 };
-  if (n === "error")
-    return { health: "none", chains: [], syncedAt: void 0 };
-  const i = f({ onchain: t, offchain: e, now: r, staleAfterMs: a });
-  if (i.length === 0)
-    return { health: "starting", chains: i, syncedAt: void 0 };
-  const u = v(i);
-  return { health: u, chains: i, syncedAt: y(u, t, e) };
-}
-function f({
-  onchain: t,
-  offchain: e,
-  now: n,
-  staleAfterMs: r
-}) {
-  const a = d(t.meta), i = d(e.meta);
-  return [
-    .../* @__PURE__ */ new Set([...a.keys(), ...i.keys()])
-  ].map((o) => {
-    const c = h(
-      a.get(o),
-      t.updatedAt,
-      n,
-      r
-    ), s = h(
-      i.get(o),
-      e.updatedAt,
-      n,
-      r
-    );
-    return {
-      chainId: o,
-      onchain: c,
-      offchain: s,
-      health: l(c, s)
-    };
-  });
-}
-function d(t) {
-  const e = /* @__PURE__ */ new Map();
-  for (const n of t?.chains ?? [])
-    e.set(n.chainId, n);
-  return e;
-}
-function h(t, e, n, r) {
-  return t ? t.status === "error" ? "failed" : !e || n - e > r || n - t.timestamp * 1e3 > r ? "stale" : "ok" : "unknown";
-}
-function l(t, e) {
-  return t === "ok" ? "live" : t === "stale" || e === "ok" || e === "stale" ? "cached" : "none";
-}
-function v(t) {
-  return t.every((e) => e.health === "none") ? "none" : t.some((e) => e.health === "live") ? "live" : "cached";
-}
-function y(t, e, n) {
-  if (t === "live")
-    return e.updatedAt || void 0;
-  if (t === "cached") {
-    const r = [e.updatedAt, n.updatedAt].filter(
-      (a) => !!a
-    );
-    return r.length ? Math.max(...r) : void 0;
-  }
-}
-function g(t) {
-  return t === "live" ? "success" : "default";
-}
-export {
-  p as getSyncStatus,
-  g as syncStatusDotVariant
-};

package/dist/esm/components/sync-status-pill/index.js

@@ -1,9 +0,0 @@
-import { SyncStatusPillTest as r } from "./constants.js";
-import { getSyncStatus as a, syncStatusDotVariant as s } from "./get-sync-status.js";
-import { SyncStatusPill as n } from "./sync-status-pill.js";
-export {
-  n as SyncStatusPill,
-  r as SyncStatusPillTest,
-  a as getSyncStatus,
-  s as syncStatusDotVariant
-};