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

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

@@ -7,7 +7,6 @@ export * from './badge';
 export * from './base';
 export * from './base-link';
 export * from './base-table';
-export * from './block-sync-pill';
 export * from './breadcrumbs';
 export * from './breakpoint-provider';
 export * from './buttons';
@@ -70,6 +69,7 @@ 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/layout/app-footer/app-footer.d.ts

@@ -1,4 +1,3 @@
-import { BlockSyncProps } from '../../../types/footer';
 import * as React from "react";
 /**
  * A single legal/navigation link rendered in {@link AppFooter}.
@@ -30,20 +29,14 @@ export interface AppFooterProps extends React.HTMLAttributes<HTMLElement> {
      */
     year?: number;
     /**
-     * Whether to show the status pill on the far right. Defaults to `true`.
+     * Slot between the copyright and the links — typically a
+     * {@link SyncStatusPill}. The footer knows nothing about what goes in it.
+     *
+     * A slot rather than sync-specific props: the footer used to accept a fixed
+     * `blockSyncProps` shape and render its own pill from it, which made every
+     * change to the indicator a change to the footer's API.
      */
-    showStatus?: boolean;
-    /**
-     * Label rendered inside the status pill. Defaults to `Status`.
-     */
-    statusLabel?: React.ReactNode;
-    /**
-     * When provided, the status pill becomes a live network-synchronization
-     * indicator ({@link BlockSyncPill}): the dot color reflects the time since
-     * the last block update and hovering reveals per-chain block details.
-     * Without it, a static green status pill is rendered.
-     */
-    blockSyncProps?: BlockSyncProps;
+    status?: React.ReactNode;
 }
 /**
  * AppFooter — minimal, Hyperliquid-style footer used by the Gearbox App
@@ -56,7 +49,8 @@ export interface AppFooterProps extends React.HTMLAttributes<HTMLElement> {
  * @example
  * ```tsx
  * <AppFooter />
- * <AppFooter links={myLinks} copyright="© Acme, 2026" showStatus={false} />
+ * <AppFooter links={myLinks} copyright="© Acme, 2026" />
+ * <AppFooter status={<SyncStatusPill {...syncProps} />} />
  * ```
  */
 export declare const AppFooter: React.ForwardRefExoticComponent<AppFooterProps & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,7 @@
+export declare class SyncStatusPillTest {
+    static root: string;
+    static dot: string;
+    static tooltip: string;
+    static headline: string;
+    static chainRow: string;
+}

package/dist/types/components/sync-status-pill/get-sync-status.d.ts

@@ -0,0 +1,100 @@
+import { ResponseMetadata } from '@gearbox-protocol/sdk/model';
+/**
+ * Health of one source (onchain or offchain) as far as one chain is concerned.
+ *
+ * `unknown` is not an error: it means this source has not spoken about the
+ * chain yet, which is what the first frames of a two-source read look like.
+ */
+export type SourceHealth = "ok" | "stale" | "failed" | "unknown";
+/**
+ * What the user sees and can do on one chain.
+ *
+ * Derived from `onchain` alone — see {@link deriveChainHealth}. `offchain`
+ * never moves a chain between these values, it only annotates the row.
+ */
+export type ChainHealth = 
+/** Onchain is fresh: what is on screen is current and actions go through. */
+"live"
+/** Onchain lagged or never answered: rows come from the backend. */
+ | "cached"
+/** Nobody answered. */
+ | "none";
+/** Rolled-up health of the whole app. */
+export type AppSyncHealth = "starting" | "live" | "cached" | "none";
+/** Where the app's single SDK is in its attach lifecycle. */
+export type SdkAttachStatus = "loading" | "error" | "ready";
+/**
+ * One source exactly as the SDK returned it, plus the local clock reading of
+ * its last success.
+ *
+ * `meta` is `DataResponse.meta` verbatim — no projection, no intermediate
+ * format. The previous footer indicator died because ui-kit owned its own
+ * shape (`BlockByChain`) and the app had to hand-translate SDK state into it;
+ * the translator outlived nothing and the format outlived its source.
+ */
+export interface SyncSourceInput {
+    /** `DataResponse.meta`, or `undefined` while the source has never answered. */
+    meta: ResponseMetadata | undefined;
+    /**
+     * react-query `dataUpdatedAt` in ms. The one number that cannot come from
+     * the SDK: `ChainSucceeded.timestamp` is the *block's* time, which answers
+     * "how old is the chain state", not "is our polling loop still alive".
+     * `0` / `undefined` mean no success yet.
+     */
+    updatedAt?: number;
+}
+/** Per-chain outcome, ready to render as one tooltip row. */
+export interface ChainStatus {
+    chainId: number;
+    /** Decides {@link health}, and through it the dot colour. */
+    onchain: SourceHealth;
+    /** Never decides colour — only the row's suffix. */
+    offchain: SourceHealth;
+    health: ChainHealth;
+}
+export interface SyncStatus {
+    health: AppSyncHealth;
+    chains: ChainStatus[];
+    /**
+     * Local clock (ms) of the last success behind what is currently shown, or
+     * `undefined` when nothing has been shown yet. Feeds the "· 12s ago" in the
+     * tooltip header.
+     */
+    syncedAt: number | undefined;
+}
+export interface GetSyncStatusProps {
+    onchain: SyncSourceInput;
+    offchain: SyncSourceInput;
+    attach?: SdkAttachStatus;
+    /** Reference "now" in ms. */
+    now: number;
+    /** Age after which a source counts as stale. */
+    staleAfterMs: number;
+}
+/**
+ * Pure derivation of the sync indicator's state.
+ *
+ * The whole model rests on one asymmetry: **onchain is the ability to act,
+ * offchain is the trimmings** (charts, APY, history). So the colour tracks
+ * `onchain` and nothing else — a dead backend under a healthy chain is still
+ * green, because the user sees current data and their transactions land. The
+ * reverse, a live polling loop over a lagging node, is *not* green: the screen
+ * looks current while a transaction would be built against stale state.
+ *
+ * The roll-up is deliberately optimistic: one dead chain annotates its own row
+ * and leaves the dot green. Statuspage-style pessimism ("any component down ⇒
+ * system degraded") assumes components of one service; our chains are
+ * independent, and greying the dot for a chain the user is not on is a false
+ * alarm.
+ */
+export declare function getSyncStatus({ onchain, offchain, attach, now, staleAfterMs, }: GetSyncStatusProps): SyncStatus;
+/** Dot variants this indicator is allowed to use. */
+export type SyncStatusDotVariant = "success" | "default";
+/**
+ * The palette rule, as a function rather than a comment: green when the user
+ * can act, 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 unit test instead of by
+ * inspecting rendered markup.
+ */
+export declare function syncStatusDotVariant(health: AppSyncHealth): SyncStatusDotVariant;

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

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

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

@@ -0,0 +1,42 @@
+import { NetworkById } from '../../types/footer';
+import { SdkAttachStatus, SyncSourceInput } from './get-sync-status';
+import type * as React from "react";
+export interface SyncStatusPillProps {
+    onchain: SyncSourceInput;
+    offchain: SyncSourceInput;
+    attach?: SdkAttachStatus;
+    /** A read is in flight — the dot pulses. Orthogonal to health. */
+    isSyncing?: boolean;
+    /** Only for chain labels in the tooltip. */
+    networkById: NetworkById;
+}
+/**
+ * SyncStatusPill — data-freshness indicator for an app footer: one dot, and
+ * every word in the tooltip.
+ *
+ * Takes the SDK's own `DataResponse.meta` for each source, untouched, and
+ * derives the status itself. The predecessor (`BlockSyncPill`) owned a bespoke
+ * `BlockByChain` shape that each client had to hand-translate SDK state into;
+ * the format outlived its source and the translators rotted.
+ *
+ * Two deliberate constraints:
+ *
+ * - **The palette is green and muted grey only** — never red or amber, at any
+ *   input. See {@link syncStatusDotVariant}.
+ * - **No visible label.** Colour therefore separates only two of the four
+ *   states, which makes the tooltip the status rather than a nicety — and it is
+ *   mirrored into `aria-label`, because a screen reader cannot see colour.
+ *
+ * Colour tracks `onchain` alone; see {@link getSyncStatus} for why.
+ *
+ * @example
+ * ```tsx
+ * <SyncStatusPill
+ *   onchain={{ meta: onchainResponse?.meta, updatedAt: onchainUpdatedAt }}
+ *   offchain={{ meta: offchainResponse?.meta, updatedAt: offchainUpdatedAt }}
+ *   attach="ready"
+ *   networkById={{ 1: "Ethereum" }}
+ * />
+ * ```
+ */
+export declare function SyncStatusPill({ onchain, offchain, attach, isSyncing, networkById, }: SyncStatusPillProps): React.ReactElement;

package/dist/types/index.d.ts

@@ -9,7 +9,6 @@ export * from './components/assets-list-cell';
 export * from './components/badge';
 export * from './components/base-link';
 export * from './components/base-table';
-export * from './components/block-sync-pill';
 export * from './components/breadcrumbs';
 export * from './components/breakpoint-provider';
 export * from './components/buttons';
@@ -72,6 +71,7 @@ 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,7 @@ export * from './configs/variants';
 export * from './hooks';
 export type { LocaleKeys } from './locale';
 export * from './locale';
-export type { BlockSyncProps } from './types/footer';
+export type { NetworkById } from './types/footer';
 export { EnglishLocale };
 export * from './utils';
 export * from './utils/a11y';

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

@@ -20,9 +20,14 @@ declare const _default: {
   "components.footer.built": "Built at ETHGlobal MarketMake hackathon.",
   "components.footer.version": "Version {value}",
 
-  "components.blockSyncPill.syncError": ", sync error",
-  "components.blockSyncPill.syncedAt": ", synced at {time}",
-  "components.blockSyncPill.syncing": ", syncing…",
+  "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.creditAccountHistory.table.protocol": "Protocol",
   "components.creditAccountHistory.table.operation": "Operation",

package/dist/types/types/footer.d.ts

@@ -1,51 +1,7 @@
 /**
  * Types for Footer component
  */
-export interface LastSyncBlock {
-    block: bigint;
-    /** Local wall-clock time (ms) of the last successful sync for this chain. */
-    localTimestamp: number;
-}
-/**
- * Per-chain sync info: the last synced block plus the live refresh state, so the
- * sync indicator can reflect whether the refresh loop is alive / failing.
- */
-export interface ChainSyncInfo {
-    lastSyncBlock: LastSyncBlock;
-    /** True while a refresh for this chain is currently in flight. */
-    loading?: boolean;
-    /** Human-readable error if the last refresh for this chain failed. */
-    error?: string;
-}
-export interface BlockByChain {
-    [chainId: number]: ChainSyncInfo | undefined;
-}
-export interface ExplorerInfo {
-    url: string;
-    name?: string;
-}
-export interface ExplorerAddresses {
-    [chainId: number]: string | ExplorerInfo;
-}
+/** Chain id → display name, for footer status rows. */
 export interface NetworkById {
     [chainId: number]: string;
 }
-export interface BlockSyncProps {
-    blockByChain: BlockByChain | undefined;
-    explorerAddresses: ExplorerAddresses;
-    networkById: NetworkById;
-    /**
-     * Expected refresh cadence in ms. The indicator is considered stale only after
-     * `syncIntervalMs * staleMultiplier`, so a healthy loop never flips to red.
-     * Defaults to 5 minutes.
-     */
-    syncIntervalMs?: number;
-    /**
-     * Stale-threshold multiplier applied to {@link BlockSyncProps.syncIntervalMs}.
-     * Defaults to 2.5 (allows for missed/throttled cycles before flagging stale).
-     */
-    staleMultiplier?: number;
-}
-export interface FooterProps {
-    blockSyncProps?: BlockSyncProps;
-}

package/package.json

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

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

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),E=require("../tooltip/simple-tooltip.cjs");require("../tooltip/tooltip.cjs");const M=require("../typed-intl/index.cjs"),g=require("../../utils/cn.cjs");require("../accordion/accordion.cjs");require("../alert-badge/alert-badge.cjs");require("../alert-dialog/alert-dialog.cjs");require("../alert-modal/alert-modal.cjs");require("@gearbox-protocol/static");require("../buttons/back-button/back-button.cjs");require("../buttons/button/button.cjs");require("../buttons/copy-button/copy-button.cjs");require("../buttons/external-button/external-button.cjs");require("../buttons/filter-button/filter-button.cjs");require("../buttons/navigation-button/navigation-button.cjs");require("@gearbox-protocol/sdk");require("sonner");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../utils/z-index.cjs");require("../buttons/tab-button/tab-button.cjs");require("@fortawesome/free-solid-svg-icons");require("../icons/fa-icon.cjs");require("../token-icon/token-icon.cjs");require("../badge/badge.cjs");require("../badge/chip.cjs");require("../base/amount-input/amount-input.cjs");require("../confirm-menu/confirm-menu.cjs");require("react-intl");require("../table/grid-table.cjs");require("../skeleton/skeleton.cjs");require("../table/table.cjs");require("../token-symbol/token-symbol.cjs");require("../simple-accordion/simple-accordion.cjs");require("../tip-card/tip-card.cjs");require("../typography/typography.cjs");require("../points-icon/points-icon.cjs");require("../vertical-indicator/vertical-indicator.cjs");require("../base/page-title/page-title.cjs");require("../detailed-page-title/detailed-page-title-copy-button.cjs");require("../detailed-page-title/detailed-page-title-explorer-dropdown.cjs");require("../base/details-view/detail-aside/detail-aside-scope.cjs");require("../layout/main-aside-layout/main-aside-layout.cjs");require("../base/details-view/details-view.cjs");require("../fadeout-loading/fadeout-loading.cjs");require("../health-factor/health-factor.cjs");require("@gearbox-protocol/sdk/model");require("../checkbox/checkbox.cjs");require("../checkbox/checkbox-labeled.cjs");require("../select/select.cjs");require("../breakpoint-provider.cjs");require("lightweight-charts");require("../graph/formatters.cjs");require("../graph/graph-view.cjs");require("../base/info-portal/info-portal.cjs");require("../edit-input/edit-input.cjs");require("../slider/slider.cjs");require("../slider/slider-context.cjs");require("../text-button/text-button.cjs");require("../with-title/with-title.cjs");require("react-router-dom");require("../status-elements/status-elements.cjs");require("../client-adapters/styled-dialog-container/styled-dialog-container.cjs");require("../modal/modal.cjs");require("@radix-ui/react-dialog");require("../dialog/dialog-container.cjs");require("../dialog/dialog-content.cjs");require("../dialog/dialog-description.cjs");require("../dialog/dialog-footer.cjs");require("../dialog/dialog-header.cjs");require("../dialog/dialog-title.cjs");require("../dialog/dialog-modal-container.cjs");require("../dialog/dialog-overlay.cjs");require("viem");require("../input/input.cjs");require("../label/label.cjs");require("../simple-dropdown/simple-dropdown.cjs");require("../simple-dropdown/simple-dropdown-menu-item.cjs");require("../base/tabber/tabber.cjs");require("../link/link.cjs");require("../rounded-image/rounded-image.cjs");require("../network-icon/network-indicator.cjs");require("../base-link/base-link.cjs");require("../help-tip/help-tip.cjs");require("../base-table/base-table-line.cjs");require("../navigation-context/navigation-context.cjs");require("../cards/card/card.cjs");require("../checkbox-item/checkbox-item.cjs");require("../client-adapters/styled-button/styled-button.cjs");require("../client-adapters/styled-rounded-image/styled-rounded-image.cjs");require("../composites/tx-preview/confirm/amounts/TransactionConfirmAmountField.cjs");require("../composites/tx-preview/confirm/dialog/constants.cjs");require("../spinner/spinner.cjs");require("../spinner-loader/spinner-loader.cjs");require("../detailed-apy/detailed-apy.cjs");require("../dropdown-menu/dropdown-menu.cjs");require("../dropdown-menu/dropdown-menu-checkbox-item.cjs");require("../dropdown-menu/dropdown-menu-content.cjs");require("../dropdown-menu/dropdown-menu-item.cjs");require("../dropdown-menu/dropdown-menu-label.cjs");require("../dropdown-menu/dropdown-menu-radio-item.cjs");require("../dropdown-menu/dropdown-menu-separator.cjs");require("../dropdown-menu/dropdown-menu-shortcut.cjs");require("../dropdown-menu/dropdown-menu-sub-content.cjs");require("../dropdown-menu/dropdown-menu-sub-trigger.cjs");require("../filter/filter-block.cjs");require("../filter/filter-checkbox-item.cjs");require("../filter/filter-chip.cjs");require("../filter/filter-chips.cjs");require("../filter/filter-dropdown-item.cjs");require("../filter/filter-group.cjs");require("../filter/filter-label.cjs");require("../search-line/search-line.cjs");require("../tabs/tabs.cjs");require("../filter/filter-modal-item.cjs");require("../filter/filter-radio-item.cjs");require("../filter/filter-separator.cjs");require("../filter/variants.cjs");require("../icon-button/icon-button.cjs");require("../layout/app-footer/app-footer.cjs");require("../layout/app-header/app-header.cjs");require("../layout/col/col.cjs");require("../layout/container/container.cjs");require("../layout/grid/grid.cjs");require("../layout/layout/layout.cjs");require("../legal-agreement/legal-agreement-theme.cjs");require("../loader/loader.cjs");require("../loading/loading.cjs");require("../loading-bar/loading-bar.cjs");require("../segmented-control/segmented-control.cjs");require("../separate-line/separate-line.cjs");require("../split-list/split-list.cjs");const R=require("../status-dot/status-dot.cjs");require("../textarea/textarea.cjs");require("../theme-provider.cjs");const U=require("./block-sync-status.cjs"),$=300*1e3,F=2.5;function O({blockByChain:n,explorerAddresses:y,networkById:f,syncIntervalMs:b=$,staleMultiplier:j=F,statusLabel:T="Status",className:_}){const{formatMessage:s}=M.useIntlTyped(),[c,k]=o.useState(Date.now());o.useEffect(()=>{const t=()=>{k(Date.now())},r=window.setInterval(t,1e3);return()=>{clearInterval(r)}},[]);const l=b*j,{state:u,isSyncing:h}=o.useMemo(()=>U.getBlockSyncStatus({blockByChain:n,now:c,staleAfterMs:l}),[n,c,l]),v=u==="error"?"alert":u==="loading"?"default":"success",L=u==="loading"||u==="synced"&&h,a=()=>e.jsxs("span",{className:g.cn("inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs",u==="error"?"text-destructive":"text-muted-foreground",_),children:[e.jsx(R.StatusDot,{variant:v,size:"xs",pulse:L}),T]}),d=(()=>{if(!n)return null;const t=Object.entries(n).filter(r=>!!r[1]);return t.length===0?null:e.jsx("div",{className:"flex flex-col text-left text-xs",children:t.map(([r,N],P)=>{const{lastSyncBlock:p,error:w}=N,q=p?.block||0n,m=p?.localTimestamp,i=y[Number(r)],x=typeof i=="string"?i:i&&typeof i=="object"&&"url"in i?i.url:void 0,D=f[Number(r)]||"Unknown",S=`[${q.toString()}]`,I=P===t.length-1,A=q>0n&&!!m;return e.jsxs("div",{className:g.cn(!I&&"mb-2"),children:[e.jsxs("span",{children:[D," "]}),x&&q>0?e.jsx("a",{href:`${x}/block/${q}`,target:"_blank",rel:"noopener noreferrer",className:"underline hover:text-foreground",children:S}):e.jsx("span",{children:S}),w?e.jsx("span",{className:"text-destructive",children:s({messageId:"components.blockSyncPill.syncError"})}):A?e.jsx("span",{children:s({messageId:"components.blockSyncPill.syncedAt"},{time:new Date(m).toLocaleTimeString()})}):e.jsx("span",{children:s({messageId:"components.blockSyncPill.syncing"})})]},r)})})})();return d?e.jsx(E.SimpleTooltip,{title:a(),children:d}):e.jsx("div",{className:"select-none",children:a()})}exports.BlockSyncPill=O;

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

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function m({blockByChain:l,now:o,staleAfterMs:a}){const s=l?Object.values(l).filter(t=>!!t):[],i=s.some(t=>!!t.error),r=s.some(t=>!!t.loading),n=s.filter(t=>t.lastSyncBlock.block>0n&&t.lastSyncBlock.localTimestamp).map(t=>t.lastSyncBlock.localTimestamp),c=n.length?Math.min(...n):0,S=c>0&&o-c>a;let e;return i||S?e="error":c===0?e="loading":e="synced",{state:e,isSyncing:r}}exports.getBlockSyncStatus=m;

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

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./block-sync-pill.cjs");exports.BlockSyncPill=l.BlockSyncPill;

package/dist/esm/components/block-sync-pill/block-sync-pill.js

@@ -1,211 +0,0 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { useState as U, useEffect as j, useMemo as R } from "react";
-import { SimpleTooltip as $ } from "../tooltip/simple-tooltip.js";
-import "../tooltip/tooltip.js";
-import { useIntlTyped as F } from "../typed-intl/index.js";
-import { cn as S } from "../../utils/cn.js";
-import "../accordion/accordion.js";
-import "../alert-badge/alert-badge.js";
-import "../alert-dialog/alert-dialog.js";
-import "../alert-modal/alert-modal.js";
-import "@gearbox-protocol/static";
-import "../buttons/back-button/back-button.js";
-import "../buttons/button/button.js";
-import "../buttons/copy-button/copy-button.js";
-import "../buttons/external-button/external-button.js";
-import "../buttons/filter-button/filter-button.js";
-import "../buttons/navigation-button/navigation-button.js";
-import "@gearbox-protocol/sdk";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
-import "../buttons/tab-button/tab-button.js";
-import "@fortawesome/free-solid-svg-icons";
-import "../icons/fa-icon.js";
-import "../token-icon/token-icon.js";
-import "../badge/badge.js";
-import "../badge/chip.js";
-import "../base/amount-input/amount-input.js";
-import "../confirm-menu/confirm-menu.js";
-import "react-intl";
-import "../table/grid-table.js";
-import "../skeleton/skeleton.js";
-import "../table/table.js";
-import "../token-symbol/token-symbol.js";
-import "../simple-accordion/simple-accordion.js";
-import "../tip-card/tip-card.js";
-import "../typography/typography.js";
-import "../points-icon/points-icon.js";
-import "../vertical-indicator/vertical-indicator.js";
-import "../base/page-title/page-title.js";
-import "../detailed-page-title/detailed-page-title-copy-button.js";
-import "../detailed-page-title/detailed-page-title-explorer-dropdown.js";
-import "../base/details-view/detail-aside/detail-aside-scope.js";
-import "../layout/main-aside-layout/main-aside-layout.js";
-import "../base/details-view/details-view.js";
-import "../fadeout-loading/fadeout-loading.js";
-import "../health-factor/health-factor.js";
-import "@gearbox-protocol/sdk/model";
-import "../checkbox/checkbox.js";
-import "../checkbox/checkbox-labeled.js";
-import "../select/select.js";
-import "../breakpoint-provider.js";
-import "lightweight-charts";
-import "../graph/formatters.js";
-import "../graph/graph-view.js";
-import "../base/info-portal/info-portal.js";
-import "../edit-input/edit-input.js";
-import "../slider/slider.js";
-import "../slider/slider-context.js";
-import "../text-button/text-button.js";
-import "../with-title/with-title.js";
-import "react-router-dom";
-import "../status-elements/status-elements.js";
-import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
-import "../modal/modal.js";
-import "@radix-ui/react-dialog";
-import "../dialog/dialog-container.js";
-import "../dialog/dialog-content.js";
-import "../dialog/dialog-description.js";
-import "../dialog/dialog-footer.js";
-import "../dialog/dialog-header.js";
-import "../dialog/dialog-title.js";
-import "../dialog/dialog-modal-container.js";
-import "../dialog/dialog-overlay.js";
-import "viem";
-import "../input/input.js";
-import "../label/label.js";
-import "../simple-dropdown/simple-dropdown.js";
-import "../simple-dropdown/simple-dropdown-menu-item.js";
-import "../base/tabber/tabber.js";
-import "../link/link.js";
-import "../rounded-image/rounded-image.js";
-import "../network-icon/network-indicator.js";
-import "../base-link/base-link.js";
-import "../help-tip/help-tip.js";
-import "../base-table/base-table-line.js";
-import "../navigation-context/navigation-context.js";
-import "../cards/card/card.js";
-import "../checkbox-item/checkbox-item.js";
-import "../client-adapters/styled-button/styled-button.js";
-import "../client-adapters/styled-rounded-image/styled-rounded-image.js";
-import "../composites/tx-preview/confirm/amounts/TransactionConfirmAmountField.js";
-import "../composites/tx-preview/confirm/dialog/constants.js";
-import "../spinner/spinner.js";
-import "../spinner-loader/spinner-loader.js";
-import "../detailed-apy/detailed-apy.js";
-import "../dropdown-menu/dropdown-menu.js";
-import "../dropdown-menu/dropdown-menu-checkbox-item.js";
-import "../dropdown-menu/dropdown-menu-content.js";
-import "../dropdown-menu/dropdown-menu-item.js";
-import "../dropdown-menu/dropdown-menu-label.js";
-import "../dropdown-menu/dropdown-menu-radio-item.js";
-import "../dropdown-menu/dropdown-menu-separator.js";
-import "../dropdown-menu/dropdown-menu-shortcut.js";
-import "../dropdown-menu/dropdown-menu-sub-content.js";
-import "../dropdown-menu/dropdown-menu-sub-trigger.js";
-import "../filter/filter-block.js";
-import "../filter/filter-checkbox-item.js";
-import "../filter/filter-chip.js";
-import "../filter/filter-chips.js";
-import "../filter/filter-dropdown-item.js";
-import "../filter/filter-group.js";
-import "../filter/filter-label.js";
-import "../search-line/search-line.js";
-import "../tabs/tabs.js";
-import "../filter/filter-modal-item.js";
-import "../filter/filter-radio-item.js";
-import "../filter/filter-separator.js";
-import "../filter/variants.js";
-import "../icon-button/icon-button.js";
-import "../layout/app-footer/app-footer.js";
-import "../layout/app-header/app-header.js";
-import "../layout/col/col.js";
-import "../layout/container/container.js";
-import "../layout/grid/grid.js";
-import "../layout/layout/layout.js";
-import "../legal-agreement/legal-agreement-theme.js";
-import "../loader/loader.js";
-import "../loading/loading.js";
-import "../loading-bar/loading-bar.js";
-import "../segmented-control/segmented-control.js";
-import "../separate-line/separate-line.js";
-import "../split-list/split-list.js";
-import { StatusDot as V } from "../status-dot/status-dot.js";
-import "../textarea/textarea.js";
-import "../theme-provider.js";
-import { getBlockSyncStatus as z } from "./block-sync-status.js";
-const C = 300 * 1e3, O = 2.5;
-function ho({
-  blockByChain: p,
-  explorerAddresses: y,
-  networkById: T,
-  syncIntervalMs: b = C,
-  staleMultiplier: h = O,
-  statusLabel: k = "Status",
-  className: v
-}) {
-  const { formatMessage: n } = F(), [c, L] = U(Date.now());
-  j(() => {
-    const m = () => {
-      L(Date.now());
-    }, r = window.setInterval(m, 1e3);
-    return () => {
-      clearInterval(r);
-    };
-  }, []);
-  const l = b * h, { state: i, isSyncing: N } = R(
-    () => z({ blockByChain: p, now: c, staleAfterMs: l }),
-    [p, c, l]
-  ), w = i === "error" ? "alert" : i === "loading" ? "default" : "success", A = i === "loading" || i === "synced" && N, a = () => /* @__PURE__ */ s(
-    "span",
-    {
-      className: S(
-        "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs",
-        i === "error" ? "text-destructive" : "text-muted-foreground",
-        v
-      ),
-      children: [
-        /* @__PURE__ */ t(V, { variant: w, size: "xs", pulse: A }),
-        k
-      ]
-    }
-  ), d = (() => {
-    if (!p) return null;
-    const m = Object.entries(p).filter(
-      (r) => !!r[1]
-    );
-    return m.length === 0 ? null : /* @__PURE__ */ t("div", { className: "flex flex-col text-left text-xs", children: m.map(([r, E], I) => {
-      const { lastSyncBlock: u, error: D } = E, e = u?.block || 0n, f = u?.localTimestamp, o = y[Number(r)], g = typeof o == "string" ? o : o && typeof o == "object" && "url" in o ? o.url : void 0, P = T[Number(r)] || "Unknown", x = `[${e.toString()}]`, _ = I === m.length - 1, M = e > 0n && !!f;
-      return /* @__PURE__ */ s("div", { className: S(!_ && "mb-2"), children: [
-        /* @__PURE__ */ s("span", { children: [
-          P,
-          " "
-        ] }),
-        g && e > 0 ? /* @__PURE__ */ t(
-          "a",
-          {
-            href: `${g}/block/${e}`,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "underline hover:text-foreground",
-            children: x
-          }
-        ) : /* @__PURE__ */ t("span", { children: x }),
-        D ? /* @__PURE__ */ t("span", { className: "text-destructive", children: n({
-          messageId: "components.blockSyncPill.syncError"
-        }) }) : M ? /* @__PURE__ */ t("span", { children: n(
-          { messageId: "components.blockSyncPill.syncedAt" },
-          { time: new Date(f).toLocaleTimeString() }
-        ) }) : /* @__PURE__ */ t("span", { children: n({
-          messageId: "components.blockSyncPill.syncing"
-        }) })
-      ] }, r);
-    }) });
-  })();
-  return d ? /* @__PURE__ */ t($, { title: a(), children: d }) : /* @__PURE__ */ t("div", { className: "select-none", children: a() });
-}
-export {
-  ho as BlockSyncPill
-};

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

@@ -1,12 +0,0 @@
-function S({
-  blockByChain: c,
-  now: o,
-  staleAfterMs: a
-}) {
-  const e = c ? Object.values(c).filter((t) => !!t) : [], i = e.some((t) => !!t.error), r = e.some((t) => !!t.loading), l = e.filter((t) => t.lastSyncBlock.block > 0n && t.lastSyncBlock.localTimestamp).map((t) => t.lastSyncBlock.localTimestamp), n = l.length ? Math.min(...l) : 0, m = n > 0 && o - n > a;
-  let s;
-  return i || m ? s = "error" : n === 0 ? s = "loading" : s = "synced", { state: s, isSyncing: r };
-}
-export {
-  S as getBlockSyncStatus
-};

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

@@ -1,4 +0,0 @@
-import { BlockSyncPill as c } from "./block-sync-pill.js";
-export {
-  c as BlockSyncPill
-};

package/dist/types/components/block-sync-pill/block-sync-pill.d.ts

@@ -1,35 +0,0 @@
-import { BlockSyncProps } from '../../types/footer';
-import type * as React from "react";
-export interface BlockSyncPillProps extends BlockSyncProps {
-    /**
-     * Label rendered inside the status pill. Defaults to `Status`.
-     */
-    statusLabel?: React.ReactNode;
-    /**
-     * Additional class names applied to the pill wrapper.
-     */
-    className?: string;
-}
-/**
- * BlockSyncPill — backend-sync status rendered as an {@link AppFooter}-style
- * pill: a thin bordered, rounded badge with a status dot and a label.
- *
- * Reflects the **liveness** of the data-refresh loop rather than raw block age:
- * - **loading** (no successful sync yet): the dot is a pulsing neutral gray;
- * - **synced** (within `syncIntervalMs * staleMultiplier`, no errors): green,
- *   pulsing while a refresh is in flight;
- * - **error / stalled**: red.
- *
- * Hovering reveals per-chain block numbers and the local time of the last sync.
- *
- * @example
- * ```tsx
- * <BlockSyncPill
- *   blockByChain={blockByChain}
- *   explorerAddresses={explorerAddresses}
- *   networkById={networkById}
- *   syncIntervalMs={300000}
- * />
- * ```
- */
-export declare function BlockSyncPill({ blockByChain, explorerAddresses, networkById, syncIntervalMs, staleMultiplier, statusLabel, className, }: BlockSyncPillProps): React.ReactElement;

package/dist/types/components/block-sync-pill/block-sync-status.d.ts

@@ -1,29 +0,0 @@
-import { BlockByChain } from '../../types/footer';
-/**
- * Liveness state of the data-refresh loop, derived from per-chain sync info:
- * - `loading` — nothing has successfully synced yet (initial state);
- * - `synced` — at least one chain synced and none are stale/failing;
- * - `error` — a chain reported an error, or the oldest sync is stale.
- */
-export type BlockSyncState = "loading" | "synced" | "error";
-export interface BlockSyncStatus {
-    state: BlockSyncState;
-    /** True while any chain has a refresh in flight. */
-    isSyncing: boolean;
-}
-export interface GetBlockSyncStatusProps {
-    blockByChain: BlockByChain | undefined;
-    /** Reference "now" timestamp (ms) used to evaluate staleness. */
-    now: number;
-    /** Age (ms) after which the oldest sync is considered stale. */
-    staleAfterMs: number;
-}
-/**
- * Pure derivation of the {@link BlockSyncState} from chain sync info.
- *
- * A chain counts as "synced" only when it has both a real block (`> 0`) and a
- * local sync timestamp. Staleness is measured against the **oldest** synced
- * chain, so a single lagging chain is enough to flag the whole indicator.
- * Errors take priority over everything else.
- */
-export declare function getBlockSyncStatus({ blockByChain, now, staleAfterMs, }: GetBlockSyncStatusProps): BlockSyncStatus;

package/dist/types/components/block-sync-pill/index.d.ts

@@ -1 +0,0 @@
-export * from './block-sync-pill';