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

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

@@ -1,137 +0,0 @@
-import { jsx as a, jsxs as h } from "react/jsx-runtime";
-import { useMemo as S, useState as y, useEffect as g } from "react";
-import { StatusDot as x } from "../status-dot/status-dot.js";
-import { SimpleTooltip as I } from "../tooltip/simple-tooltip.js";
-import "../tooltip/tooltip.js";
-import { useIntlTyped as v } from "../typed-intl/index.js";
-import "@gearbox-protocol/sdk/common-utils";
-import { useMediaQuery as w } from "../../hooks/use-media-query.js";
-import { SyncStatusPillTest as c } from "./constants.js";
-import { getSyncStatus as $, syncStatusDotVariant as A } from "./get-sync-status.js";
-const E = 6e4 * 2.5, M = 1e3, N = "(hover: none)";
-function F({
-  onchain: e,
-  offchain: t,
-  attach: n,
-  isSyncing: i = !1,
-  networkById: u
-}) {
-  const { formatMessage: s } = v(), d = D(), p = !w(N), o = S(
-    () => $({
-      onchain: e,
-      offchain: t,
-      attach: n,
-      now: d,
-      staleAfterMs: E
-    }),
-    [e, t, n, d]
-  ), l = s({
-    messageId: T[o.health]
-  }), m = o.syncedAt ? `${l} · ${s(
-    { messageId: "components.syncStatus.ago" },
-    { age: R(d - o.syncedAt) }
-  )}` : l, f = (
-    // `<output>` rather than a span with role="status": same implicit live
-    // region, and the status is announced without the dot being focusable.
-    //
-    // The box is `size-6`, not the dot's 6px: a 6px hover/tap target is far
-    // under the 24px WCAG 2.5.8 minimum and genuinely hard to hit, while the
-    // dot itself has to stay small to keep the footer quiet. So the target is
-    // the padding around it.
-    //
-    // `-m-1.5` keeps that out of the layout in both axes: the box contributes
-    // 12px, less than the 16px line beside it, so the footer row keeps its
-    // height and the links do not shift.
-    /* @__PURE__ */ a(
-      "output",
-      {
-        className: "-m-1.5 flex size-6 cursor-pointer items-center justify-center",
-        "data-testid": c.root,
-        "aria-label": m,
-        children: /* @__PURE__ */ a(
-          x,
-          {
-            variant: A(o.health),
-            size: "xs",
-            pulse: o.health === "starting" || i,
-            "data-testid": c.dot
-          }
-        )
-      }
-    )
-  );
-  return /* @__PURE__ */ a(
-    I,
-    {
-      title: f,
-      trigger: p ? "hover" : "click",
-      placement: "top",
-      maxWidth: "280px",
-      children: /* @__PURE__ */ h(
-        "div",
-        {
-          className: "flex flex-col gap-1 text-left text-xs",
-          "data-testid": c.tooltip,
-          children: [
-            /* @__PURE__ */ a("span", { className: "font-medium", "data-testid": c.headline, children: m }),
-            o.chains.map((r) => /* @__PURE__ */ a(
-              "span",
-              {
-                className: "text-muted-foreground",
-                "data-testid": c.chainRow,
-                children: `${u[r.chainId] ?? String(r.chainId)}  ${_(r, s)}`
-              },
-              r.chainId
-            ))
-          ]
-        }
-      )
-    }
-  );
-}
-const T = {
-  live: "components.syncStatus.live",
-  starting: "components.syncStatus.starting",
-  cached: "components.syncStatus.cached",
-  none: "components.syncStatus.none"
-};
-function _(e, t) {
-  if (e.health === "none")
-    return t({ messageId: "components.syncStatus.unavailable" });
-  const [n, i, u] = e.health === "live" ? [
-    t({ messageId: "components.syncStatus.live" }),
-    "offchain",
-    e.offchain
-  ] : [
-    t({ messageId: "components.syncStatus.cached" }),
-    "onchain",
-    e.onchain
-  ], s = b(i, u, t);
-  return s ? `${n} · ${s}` : n;
-}
-function b(e, t, n) {
-  if (t === "stale")
-    return n(
-      { messageId: "components.syncStatus.sourceOutdated" },
-      { source: e }
-    );
-  if (t === "failed" || t === "unknown")
-    return n(
-      { messageId: "components.syncStatus.sourceMissing" },
-      { source: e }
-    );
-}
-function R(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 D() {
-  const [e, t] = y(() => Date.now());
-  return g(() => {
-    const n = window.setInterval(() => t(Date.now()), M);
-    return () => window.clearInterval(n);
-  }, []), e;
-}
-export {
-  F as SyncStatusPill
-};

package/dist/esm/types/footer.js

@@ -1 +0,0 @@
-

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

@@ -1,7 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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/types/footer.d.ts

@@ -1,7 +0,0 @@
-/**
- * Types for Footer component
- */
-/** Chain id → display name, for footer status rows. */
-export interface NetworkById {
-    [chainId: number]: string;
-}