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

package/dist/esm/components/layout/app-footer/app-footer.js

@@ -1,37 +1,34 @@
-import { jsx as e, jsxs as a, Fragment as f } from "react/jsx-runtime";
-import * as d from "react";
-import { BlockSyncPill as x } from "../../block-sync-pill/block-sync-pill.js";
-import { cn as h } from "../../../utils/cn.js";
-const u = [
+import { jsx as e, jsxs as t, Fragment as p } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as f } from "../../../utils/cn.js";
+const d = [
   { label: "Docs", href: "https://docs.gearbox.finance" },
   { label: "Support", href: "https://discord.com/invite/gearbox" },
   { label: "Terms", href: "https://gearbox.finance/terms" },
   { label: "Privacy Policy", href: "https://gearbox.finance/privacy" }
-], g = d.forwardRef(
+], x = i.forwardRef(
   ({
-    links: o = u,
+    links: o = d,
     copyright: s,
     year: l = (/* @__PURE__ */ new Date()).getFullYear(),
-    showStatus: c = !0,
-    statusLabel: m = "Status",
-    blockSyncProps: t,
-    className: n,
-    ...i
-  }, p) => /* @__PURE__ */ e(
+    status: a,
+    className: c,
+    ...n
+  }, m) => /* @__PURE__ */ e(
     "footer",
     {
-      ref: p,
-      className: h(
+      ref: m,
+      className: f(
         "border-t border-border/60 px-4 sm:px-6 lg:px-8",
-        n
+        c
       ),
-      ...i,
-      children: /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3 py-3 text-xs text-muted-foreground sm:justify-start sm:gap-x-6 sm:gap-y-2", children: [
-        /* @__PURE__ */ e("span", { className: "order-1", children: s ?? /* @__PURE__ */ a(f, { children: [
+      ...n,
+      children: /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3 py-3 text-xs text-muted-foreground sm:justify-start sm:gap-x-6 sm:gap-y-2", children: [
+        /* @__PURE__ */ e("span", { className: "order-1", children: s ?? /* @__PURE__ */ t(p, { children: [
           "© Gearbox Protocol, ",
           l
         ] }) }),
-        c && t ? /* @__PURE__ */ e("div", { className: "order-2 sm:order-3", children: /* @__PURE__ */ e(x, { ...t, statusLabel: m }) }) : null,
+        a ? /* @__PURE__ */ e("div", { className: "order-2 sm:order-3", children: a }) : null,
         /* @__PURE__ */ e("nav", { className: "order-3 flex w-full flex-wrap items-center justify-center gap-4 sm:order-2 sm:ml-auto sm:w-auto sm:justify-start", children: o.map((r) => /* @__PURE__ */ e(
           "a",
           {
@@ -47,8 +44,8 @@ const u = [
     }
   )
 );
-g.displayName = "AppFooter";
+x.displayName = "AppFooter";
 export {
-  g as AppFooter,
-  u as DEFAULT_APP_FOOTER_LINKS
+  x as AppFooter,
+  d as DEFAULT_APP_FOOTER_LINKS
 };

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

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

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

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

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

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