Freshness diagnostics API, UI trust notes, mission control/stats updates, and deploy scripts.

Made-with: Cursor

frontend/src/pages/blocks/index.tsx

@@ -1,20 +1,55 @@
 import type { GetServerSideProps } from 'next'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { blocksApi, Block } from '@/services/api/blocks'
 import { Card, Address } from '@/libs/frontend-ui-primitives'
 import Link from 'next/link'
 import PageIntro from '@/components/common/PageIntro'
 import { formatTimestamp } from '@/utils/format'
 import { fetchPublicJson } from '@/utils/publicExplorer'
-import { normalizeBlock } from '@/services/api/blockscout'
+import { normalizeBlock, normalizeTransaction } from '@/services/api/blockscout'
+import type { Transaction } from '@/services/api/transactions'
+import { transactionsApi } from '@/services/api/transactions'
+import { summarizeChainActivity } from '@/utils/activityContext'
+import ActivityContextPanel from '@/components/common/ActivityContextPanel'
+import FreshnessTrustNote from '@/components/common/FreshnessTrustNote'
+import { normalizeExplorerStats, type ExplorerStats } from '@/services/api/stats'
+import type { MissionControlBridgeStatusResponse } from '@/services/api/missionControl'
+import { resolveEffectiveFreshness, shouldExplainEmptyHeadBlocks } from '@/utils/explorerFreshness'
 
 interface BlocksPageProps {
   initialBlocks: Block[]
+  initialRecentTransactions: Transaction[]
+  initialStats: ExplorerStats | null
+  initialBridgeStatus: MissionControlBridgeStatusResponse | null
 }
 
-export default function BlocksPage({ initialBlocks }: BlocksPageProps) {
+function serializeTransactions(transactions: Transaction[]): Transaction[] {
+  return JSON.parse(
+    JSON.stringify(
+      transactions.map((transaction) => ({
+        hash: transaction.hash,
+        block_number: transaction.block_number,
+        from_address: transaction.from_address,
+        to_address: transaction.to_address ?? null,
+        value: transaction.value,
+        status: transaction.status ?? null,
+        contract_address: transaction.contract_address ?? null,
+        fee: transaction.fee ?? null,
+        created_at: transaction.created_at,
+      })),
+    ),
+  ) as Transaction[]
+}
+
+export default function BlocksPage({
+  initialBlocks,
+  initialRecentTransactions,
+  initialStats,
+  initialBridgeStatus,
+}: BlocksPageProps) {
   const pageSize = 20
   const [blocks, setBlocks] = useState<Block[]>(initialBlocks)
+  const [recentTransactions, setRecentTransactions] = useState<Transaction[]>(initialRecentTransactions)
   const [loading, setLoading] = useState(initialBlocks.length === 0)
   const [page, setPage] = useState(1)
   const chainId = parseInt(process.env.NEXT_PUBLIC_CHAIN_ID || '138')
@@ -47,8 +82,43 @@ export default function BlocksPage({ initialBlocks }: BlocksPageProps) {
     void loadBlocks()
   }, [initialBlocks, loadBlocks, page])
 
+  useEffect(() => {
+    if (initialRecentTransactions.length > 0) {
+      setRecentTransactions(initialRecentTransactions)
+      return
+    }
+
+    let active = true
+    transactionsApi.listSafe(chainId, 1, 5)
+      .then(({ ok, data }) => {
+        if (active && ok && data.length > 0) {
+          setRecentTransactions(data)
+        }
+      })
+      .catch(() => {
+        if (active) {
+          setRecentTransactions([])
+        }
+      })
+
+    return () => {
+      active = false
+    }
+  }, [chainId, initialRecentTransactions])
+
   const showPagination = page > 1 || blocks.length > 0
   const canGoNext = blocks.length === pageSize
+  const activityContext = useMemo(
+    () =>
+      summarizeChainActivity({
+        blocks,
+        transactions: recentTransactions,
+        latestBlockNumber: blocks[0]?.number ?? null,
+        latestBlockTimestamp: blocks[0]?.timestamp ?? null,
+        freshness: resolveEffectiveFreshness(initialStats, initialBridgeStatus),
+      }),
+    [blocks, initialBridgeStatus, initialStats, recentTransactions],
+  )
 
   return (
     <div className="container mx-auto px-4 py-6 sm:py-8">
@@ -63,12 +133,30 @@ export default function BlocksPage({ initialBlocks }: BlocksPageProps) {
         ]}
       />
 
+      <div className="mb-6">
+        <ActivityContextPanel context={activityContext} title="Block Production Context" />
+        <FreshnessTrustNote
+          className="mt-3"
+          context={activityContext}
+          stats={initialStats}
+          bridgeStatus={initialBridgeStatus}
+          scopeLabel="This page focuses on recent visible head blocks."
+        />
+      </div>
+
       {loading ? (
         <Card>
           <p className="text-sm text-gray-600 dark:text-gray-400">Loading blocks...</p>
         </Card>
       ) : (
         <div className="space-y-4">
+          {shouldExplainEmptyHeadBlocks(blocks, activityContext) ? (
+            <Card className="border border-amber-200 bg-amber-50/70 dark:border-amber-900/40 dark:bg-amber-950/20">
+              <p className="text-sm text-amber-900 dark:text-amber-100">
+                Recent head blocks are currently empty; use the latest transaction block for recent visible activity.
+              </p>
+            </Card>
+          ) : null}
           {blocks.length === 0 ? (
             <Card>
               <p className="text-sm text-gray-600 dark:text-gray-400">Recent blocks are unavailable right now.</p>
@@ -161,13 +249,23 @@ export default function BlocksPage({ initialBlocks }: BlocksPageProps) {
 
 export const getServerSideProps: GetServerSideProps<BlocksPageProps> = async () => {
   const chainId = Number(process.env.NEXT_PUBLIC_CHAIN_ID || '138')
-  const blocksResult = await fetchPublicJson<{ items?: unknown[] }>('/api/v2/blocks?page=1&page_size=20').catch(() => null)
+  const [blocksResult, transactionsResult, statsResult, bridgeResult] = await Promise.all([
+    fetchPublicJson<{ items?: unknown[] }>('/api/v2/blocks?page=1&page_size=20').catch(() => null),
+    fetchPublicJson<{ items?: unknown[] }>('/api/v2/transactions?page=1&page_size=5').catch(() => null),
+    fetchPublicJson<Record<string, unknown>>('/api/v2/stats').catch(() => null),
+    fetchPublicJson<MissionControlBridgeStatusResponse>('/explorer-api/v1/track1/bridge/status').catch(() => null),
+  ])
 
   return {
     props: {
       initialBlocks: Array.isArray(blocksResult?.items)
         ? blocksResult.items.map((item) => normalizeBlock(item as never, chainId))
         : [],
+      initialRecentTransactions: Array.isArray(transactionsResult?.items)
+        ? serializeTransactions(transactionsResult.items.map((item) => normalizeTransaction(item as never, chainId)))
+        : [],
+      initialStats: statsResult ? normalizeExplorerStats(statsResult as never) : null,
+      initialBridgeStatus: bridgeResult,
     },
   }
 }