feat(web): tick timeAgo via shared clock in TopbarProvider

Author: ryanwaits

apps/web/src/components/console/overview-topbar.tsx

@@ -13,8 +13,8 @@ function formatBlock(n: number) {
 	return `#${n.toLocaleString()}`;
 }
 
-function timeAgo(iso: string) {
-	const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
+function timeAgo(iso: string, now: number) {
+	const diff = Math.floor((now - new Date(iso).getTime()) / 1000);
 	if (diff < 60) return "just now";
 	if (diff < 3600) return `${Math.floor(diff / 60)} min ago`;
 	if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
@@ -106,17 +106,17 @@ export function OverviewTopbar({
 	lastUpdated,
 }: OverviewTopbarProps) {
 	const { data: status } = useStatus();
-	const { autoRefresh, setAutoRefresh, autoRefreshLabel } = useTopbar();
+	const { autoRefresh, setAutoRefresh, autoRefreshLabel, now } = useTopbar();
 
 	const blockHeight = status?.chainTip ? formatBlock(status.chainTip) : "—";
 
 	let lastUpdatedDisplay: string;
 	if (lastUpdated === null) {
 		lastUpdatedDisplay = "—";
 	} else if (lastUpdated !== undefined) {
-		lastUpdatedDisplay = timeAgo(lastUpdated);
+		lastUpdatedDisplay = timeAgo(lastUpdated, now);
 	} else {
-		lastUpdatedDisplay = status?.timestamp ? timeAgo(status.timestamp) : "—";
+		lastUpdatedDisplay = status?.timestamp ? timeAgo(status.timestamp, now) : "—";
 	}
 
 	return (

apps/web/src/lib/topbar-context.tsx

@@ -16,12 +16,14 @@ interface TopbarState {
 	autoRefresh: RefreshInterval;
 	setAutoRefresh: (v: RefreshInterval) => void;
 	autoRefreshLabel: string;
+	now: number;
 }
 
 const TopbarCtx = createContext<TopbarState>({
 	autoRefresh: null,
 	setAutoRefresh: () => {},
 	autoRefreshLabel: "Auto-refresh off",
+	now: Date.now(),
 });
 
 export function useTopbar() {
@@ -30,6 +32,7 @@ export function useTopbar() {
 
 export function TopbarProvider({ children }: { children: React.ReactNode }) {
 	const [autoRefresh, setAutoRefresh] = useState<RefreshInterval>(null);
+	const [now, setNow] = useState(() => Date.now());
 	const queryClient = useQueryClient();
 	const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
@@ -45,6 +48,11 @@ export function TopbarProvider({ children }: { children: React.ReactNode }) {
 		};
 	}, [autoRefresh, queryClient]);
 
+	useEffect(() => {
+		const id = setInterval(() => setNow(Date.now()), 60_000);
+		return () => clearInterval(id);
+	}, []);
+
 	const refreshLabel = REFRESH_OPTIONS.find((o) => o.value === autoRefresh)?.label ?? "Auto-refresh off";
 
 	return (
@@ -53,6 +61,7 @@ export function TopbarProvider({ children }: { children: React.ReactNode }) {
 				autoRefresh,
 				setAutoRefresh,
 				autoRefreshLabel: refreshLabel,
+				now,
 			}}
 		>
 			{children}