From d6d0d5829e41fdeb05ce0f27b64fa5378102bd58 Mon Sep 17 00:00:00 2001 From: satyakwok <119509589+satyakwok@users.noreply.github.com> Date: Thu, 25 Jun 2026 11:05:55 +0200 Subject: [PATCH] fix(scan): remove redundant sticky stats bar from home The sticky stats bar showed SRX Price (hardcoded "not listed", no price source) plus Latest Block, TPS, and Active Validators, all of which already appear in the LiveTicker and the main stats grid. Block height and validator count rendered three times above the fold. Dropped the bar and its component. --- apps/scan/app/[locale]/HomeContent.tsx | 5 - apps/scan/components/home/StickyStatsBar.tsx | 117 ------------------- 2 files changed, 122 deletions(-) delete mode 100644 apps/scan/components/home/StickyStatsBar.tsx diff --git a/apps/scan/app/[locale]/HomeContent.tsx b/apps/scan/app/[locale]/HomeContent.tsx index a0f6cd4..91e07e3 100644 --- a/apps/scan/app/[locale]/HomeContent.tsx +++ b/apps/scan/app/[locale]/HomeContent.tsx @@ -18,7 +18,6 @@ import { BlockHeight } from "@/components/common/BlockHeight"; import { Timestamp } from "@/components/common/Timestamp"; import { StatCard } from "@/components/common/StatCard"; import { LiveTicker } from "@/components/home/LiveTicker"; -import { StickyStatsBar } from "@/components/home/StickyStatsBar"; import { TxChart14d } from "@/components/home/TxChart14d"; import { FreshnessChip } from "@/components/common/FreshnessChip"; import { useNetwork, useNetworkFromQuery } from "@/lib/network-context"; @@ -257,10 +256,6 @@ export function HomeContent({ initial }: { initial: HomeBundle }) { return ( <> - {/* Sticky stats bar — Etherscan-style 4-card row right under the - navbar. Sits above LiveTicker's flow content but below the - fixed header (top-16 = h-16 of header). */} - {(isChainIdle || chainUnreachable) && (
diff --git a/apps/scan/components/home/StickyStatsBar.tsx b/apps/scan/components/home/StickyStatsBar.tsx deleted file mode 100644 index d0c630a..0000000 --- a/apps/scan/components/home/StickyStatsBar.tsx +++ /dev/null @@ -1,117 +0,0 @@ -"use client"; - -import { useMemo } from "react"; -import { Activity, Blocks, DollarSign, Shield } from "lucide-react"; -import { Link } from "@/i18n/navigation"; -import { useNetwork } from "@/lib/network-context"; -import { useStats, useBlocks } from "@/lib/hooks"; -import { Timestamp } from "@/components/common/Timestamp"; -import { toMillis } from "@/lib/format"; - -// Etherscan-style sticky stats bar — sits below the navbar on every page -// Home renders. Four cards, dense, no spark/delta clutter (the per-stat -// Stats grid further down the page covers the deeper signals). 10s -// refresh cadence matches the spec; usePolling is the local equivalent -// of TanStack's refetchInterval and is already wired across the app. -export function StickyStatsBar() { - const { network } = useNetwork(); - // Pull the chain summary at 10s; useStats already polls the right - // endpoint (/chain/info) so we just shorten its cadence indirectly by - // relying on the fact that the underlying useChainInfo call refreshes - // on every WS new-head — the bar is never staler than ~5s in practice. - const { data: stats } = useStats(network); - // Latest 10 blocks to compute TPS — newest-first array, oldest at end. - const { data: blocks } = useBlocks(network, 10); - - // TPS = total tx in window / span seconds. Span = newest_ts - oldest_ts - // (in seconds). Skip when we don't have ≥2 blocks (can't divide by 0) - // or when span is 0 (same-second blocks; chain is producing faster - // than 1Hz which is genuinely possible during recovery bursts — - // rather than show "Inf tps" we fall back to the count itself). - const tps = useMemo(() => { - if (!blocks || blocks.length < 2) return null; - const ts = blocks.map((b) => toMillis(b.timestamp)).sort((a, b) => a - b); - const spanSec = (ts[ts.length - 1] - ts[0]) / 1000; - const totalTx = blocks.reduce( - (n, b) => n + (b.tx_count ?? b.transactions?.length ?? 0), - 0, - ); - if (spanSec <= 0) return totalTx > 0 ? totalTx : 0; - return totalTx / spanSec; - }, [blocks]); - - const latestBlock = blocks && blocks.length > 0 ? blocks[0] : null; - - return ( -
-
- } - label="SRX Price" - value="$-.--" - sub="not listed" - /> - } - label="Latest Block" - value={ - latestBlock ? ( - - #{latestBlock.index.toLocaleString()} - - ) : ( - "—" - ) - } - sub={latestBlock ? : "—"} - /> - } - label="Network TPS" - value={tps != null ? tps.toFixed(2) : "—"} - sub="last 10 blocks" - /> - } - label="Active Validators" - value={stats ? String(stats.active_validators) : "—"} - sub="in BFT set" - /> -
-
- ); -} - -function Cell({ - icon, - label, - value, - sub, -}: { - icon: React.ReactNode; - label: string; - value: React.ReactNode; - sub: React.ReactNode; -}) { - return ( -
-
- {icon} -
-
- {/* On 375-class viewports the labels were getting cut to "LIVE _" / - "BLOCK_" / "TOTAL_" because the truncate clipped the second word. - Tighten letter-spacing + font on small screens, restore the - original at md+ where the cards have room. */} -
- {label} -
-
{value}
-
{sub}
-
-
- ); -}