@gearbox-protocol/ui-kit 3.14.0-next.26 → 3.14.0-next.27

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

@@ -0,0 +1,35 @@
+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/index.d.ts

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

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

@@ -13,6 +13,7 @@ export * from './avatar';
 export * from './badge';
 export * from './base-link';
 export * from './block-sync';
+export * from './block-sync-pill';
 export * from './breadcrumbs';
 export * from './button-checkbox';
 export * from './buttons';

package/dist/types/components/layout/app-footer/app-footer.d.ts

@@ -0,0 +1,62 @@
+import { BlockSyncProps } from '../../../types/footer';
+import * as React from "react";
+/**
+ * A single legal/navigation link rendered in {@link AppFooter}.
+ */
+export interface AppFooterLink {
+    label: string;
+    href: string;
+}
+/**
+ * Default footer links used by the Gearbox App (client-v3) shell footer.
+ *
+ * `Support` points to the Gearbox Discord invite, matching `DISCORD_ADDR`
+ * in the app config.
+ */
+export declare const DEFAULT_APP_FOOTER_LINKS: ReadonlyArray<AppFooterLink>;
+export interface AppFooterProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Legal / navigation links rendered on the right side.
+     * Defaults to {@link DEFAULT_APP_FOOTER_LINKS}.
+     */
+    links?: ReadonlyArray<AppFooterLink>;
+    /**
+     * Copyright node on the left. Defaults to
+     * `© Gearbox Protocol, {year}`.
+     */
+    copyright?: React.ReactNode;
+    /**
+     * Year used in the default copyright. Defaults to the current year.
+     */
+    year?: number;
+    /**
+     * Whether to show the status pill on the far right. Defaults to `true`.
+     */
+    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;
+}
+/**
+ * AppFooter — minimal, Hyperliquid-style footer used by the Gearbox App
+ * (client-v3): one thin line with copyright on the left and legal links plus a
+ * status pill on the right.
+ *
+ * Presentational port of client-v3 `AppFooter`. All dynamic content is
+ * controlled through props; defaults reproduce the app exactly.
+ *
+ * @example
+ * ```tsx
+ * <AppFooter />
+ * <AppFooter links={myLinks} copyright="© Acme, 2026" showStatus={false} />
+ * ```
+ */
+export declare const AppFooter: React.ForwardRefExoticComponent<AppFooterProps & React.RefAttributes<HTMLElement>>;

package/dist/types/components/layout/app-footer/index.d.ts

@@ -0,0 +1 @@
+export * from './app-footer';

package/dist/types/components/layout/app-header/app-header.d.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+export interface AppHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Home link target used by the default logos. Defaults to `/`.
+     */
+    homeHref?: string;
+    /**
+     * Desktop logo block (visible at `lg` and up). Defaults to the full Gearbox
+     * wordmark linking to {@link AppHeaderProps.homeHref}.
+     */
+    desktopLogo?: React.ReactNode;
+    /**
+     * Mobile logo block (visible below `lg`). Defaults to the Gearbox sign mark
+     * linking to {@link AppHeaderProps.homeHref}.
+     */
+    mobileLogo?: React.ReactNode;
+    /**
+     * Mobile menu trigger (hamburger dropdown), visible below `lg`.
+     */
+    mobileMenu?: React.ReactNode;
+    /**
+     * Center navigation tabs — typically a `TabControl`. Visible at `lg` and up.
+     */
+    tabs?: React.ReactNode;
+    /**
+     * Optional actions placed left of the wallet button (e.g. migration button).
+     */
+    actions?: React.ReactNode;
+    /**
+     * Wallet / connect button area, rendered on the right.
+     */
+    wallet?: React.ReactNode;
+    /**
+     * Optional `data-testid` applied to the left side panel.
+     */
+    leftTestId?: string;
+    /**
+     * Optional `data-testid` applied to the center navigation area.
+     */
+    centerTestId?: string;
+    /**
+     * Optional `data-testid` applied to the right side panel.
+     */
+    rightTestId?: string;
+}
+/**
+ * AppHeader — three-column top navigation bar used by the **Gearbox App
+ * (client-v3)** shell: logo on the left, center `TabControl`, and wallet
+ * (plus optional actions) on the right.
+ *
+ * Presentational port of client-v3 `AppBarView`. Dynamic regions are exposed as
+ * slots; the logos default to the exact Gearbox assets used by the app.
+ *
+ * @example
+ * ```tsx
+ * <AppHeader
+ *   mobileMenu={<HamburgerDropdown />}
+ *   tabs={<TabControl state={tabState} tabs={tabs} showBorder={false} />}
+ *   wallet={<Button variant="outline">Connect wallet</Button>}
+ * />
+ * ```
+ */
+export declare const AppHeader: React.ForwardRefExoticComponent<AppHeaderProps & React.RefAttributes<HTMLElement>>;

package/dist/types/components/layout/app-header/index.d.ts

@@ -0,0 +1 @@
+export * from './app-header';

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

@@ -1,3 +1,5 @@
+export * from './app-footer';
+export * from './app-header';
 export * from './app-logo';
 export * from './block';
 export * from './col';

package/dist/types/index.d.ts

@@ -14,6 +14,7 @@ export * from './components/avatar';
 export * from './components/badge';
 export * from './components/base-link';
 export * from './components/block-sync';
+export * from './components/block-sync-pill';
 export * from './components/breadcrumbs';
 export * from './components/button-checkbox';
 export * from './components/buttons';
@@ -142,6 +143,7 @@ export * from './configs/variants';
 export * from './hooks';
 export type { LocaleKeys } from './locale';
 export * from './locale';
+export type { BlockSyncProps } from './types/footer';
 export { EnglishLocale };
 export * from './test-ids';
 export * from './utils';

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

@@ -18,6 +18,10 @@ 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.liquidationPrice.check": "Check Area",
 
   "components.loading.loading": "Loading",

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

@@ -3,12 +3,22 @@
  */
 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]: {
-        lastSyncBlock: LastSyncBlock;
-    } | undefined;
+    [chainId: number]: ChainSyncInfo | undefined;
 }
 export interface ExplorerInfo {
     url: string;
@@ -24,6 +34,17 @@ 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": "3.14.0-next.26",
+  "version": "3.14.0-next.27",
   "description": "Internal UI components",
   "repository": {
     "type": "git",