feat(frontend): add live TPS and transaction count tracker

frontend/app/page.tsx

@@ -4,13 +4,16 @@ import PageHeader from '@/components/common/page-header'
 import HotAccountsBubbleMap from '@/components/hot-accounts-bubble-map'
 import HotSlotsBubbleMap from '@/components/hot-slots-bubble-map'
 import SwapTransferTracker from '@/components/swap-transfer-tracker'
+import TpsTracker from '@/components/tps-tracker'
 
 export default function Home() {
   return (
     <div className="min-h-screen text-white font-sans">
       <main className="py-6 px-4 max-w-7xl mx-auto sm:py-8 sm:px-6 md:py-12 flex flex-col gap-8 md:gap-12">
         <PageHeader />
 
+        <TpsTracker />
+
         <BlockStateTracker />
 
         <BlockTimeExecutionTracker />

frontend/components/common/live-badge.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+interface LiveBadgeProps {
+  isConnected: boolean
+}
+
+/**
+ * Reusable live badge component with animated ping effect.
+ * Used to indicate real-time connection status.
+ */
+export function LiveBadge({ isConnected }: LiveBadgeProps) {
+  return (
+    <span
+      className={cn(
+        'flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium',
+        isConnected
+          ? 'bg-tracker-active/10 text-tracker-active'
+          : 'bg-zinc-500/10 text-zinc-400',
+      )}
+    >
+      <span className="relative flex size-1.5">
+        {isConnected && (
+          <span className="absolute inline-flex size-full animate-ping rounded-full bg-tracker-active opacity-75" />
+        )}
+        <span
+          className={cn(
+            'relative inline-flex size-1.5 rounded-full',
+            isConnected ? 'bg-tracker-active' : 'bg-zinc-500',
+          )}
+        />
+      </span>
+      Live
+    </span>
+  )
+}

frontend/components/swap-transfer-tracker/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { ArrowLeftRight, Send } from 'lucide-react'
+import { LiveBadge } from '@/components/common/live-badge'
 import { SectionHeader } from '@/components/ui/section-header'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useSwapEvents } from '@/hooks/use-swap-events'
@@ -18,32 +19,6 @@ const TAB_TRIGGER_CLASS = cn(
   'data-[state=active]:bg-transparent data-[state=active]:shadow-none',
 )
 
-function LiveBadge({ isConnected }: { isConnected: boolean }) {
-  return (
-    <span
-      className={cn(
-        'flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium',
-        isConnected
-          ? 'bg-tracker-active/10 text-tracker-active'
-          : 'bg-zinc-500/10 text-zinc-400',
-      )}
-    >
-      <span className="relative flex size-1.5">
-        {isConnected && (
-          <span className="absolute inline-flex size-full animate-ping rounded-full bg-tracker-active opacity-75" />
-        )}
-        <span
-          className={cn(
-            'relative inline-flex size-1.5 rounded-full',
-            isConnected ? 'bg-tracker-active' : 'bg-zinc-500',
-          )}
-        />
-      </span>
-      Live
-    </span>
-  )
-}
-
 export default function SwapTransferTracker() {
   const { allSwaps, isConnected: isSwapConnected } = useSwapEvents()
   const {

frontend/components/tps-tracker/index.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { Activity, Hash, TrendingUp } from 'lucide-react'
+import { SectionHeader } from '@/components/ui/section-header'
+import { StatCard } from '@/components/ui/stat-card'
+import { useTps } from '@/hooks/use-tps'
+import { formatIntNumber } from '@/utils/ui'
+
+/**
+ * TPS Tracker component displaying real-time transactions per second on Monad
+ */
+export default function TpsTracker() {
+  const { currentTps, peakTps, totalTransactions } = useTps()
+
+  return (
+    <div className="w-full flex flex-col gap-4 sm:gap-6">
+      <SectionHeader
+        title="Network Activity"
+        description="Live throughput and transaction count from execution events."
+      />
+
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <StatCard
+          label="Current TPS"
+          value={formatIntNumber(currentTps)}
+          description="Transactions per second right now"
+          icon={Activity}
+        />
+        <StatCard
+          label="Peak TPS"
+          value={formatIntNumber(peakTps)}
+          description="Highest TPS observed since page load"
+          icon={TrendingUp}
+          iconClassName="text-amber-400"
+          iconBgClassName="bg-amber-400/10"
+        />
+        <StatCard
+          label="Total Transactions"
+          value={formatIntNumber(totalTransactions)}
+          description="Transactions since page load"
+          icon={Hash}
+          iconClassName="text-blue-400"
+          iconBgClassName="bg-blue-400/10"
+        />
+      </div>
+    </div>
+  )
+}

frontend/hooks/use-tps.ts

@@ -0,0 +1,60 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useEvents } from '@/hooks/use-events'
+import type { SerializableEventData } from '@/types/events'
+
+const TPS_INTERVAL_MS = 1000
+
+interface TpsData {
+  currentTps: number
+  peakTps: number
+  totalTransactions: number
+}
+
+/**
+ * Hook to calculate and track TPS (Transactions Per Second) from execution events.
+ * Subscribes to TxnHeaderStart events and calculates TPS every second.
+ */
+export function useTps() {
+  const [tpsData, setTpsData] = useState<TpsData>({
+    currentTps: 0,
+    peakTps: 0,
+    totalTransactions: 0,
+  })
+
+  const txCountRef = useRef(0)
+  const intervalRef = useRef<NodeJS.Timeout | null>(null)
+
+  const handleEvent = useCallback((event: SerializableEventData) => {
+    if (event.payload.type === 'TxnHeaderStart') {
+      txCountRef.current += 1
+    }
+  }, [])
+
+  useEvents({
+    filters: [{ eventName: 'TxnHeaderStart' }],
+    onEvent: handleEvent,
+  })
+
+  useEffect(() => {
+    intervalRef.current = setInterval(() => {
+      const count = txCountRef.current
+      txCountRef.current = 0
+
+      setTpsData((prev) => ({
+        currentTps: count,
+        peakTps: Math.max(prev.peakTps, count),
+        totalTransactions: prev.totalTransactions + count,
+      }))
+    }, TPS_INTERVAL_MS)
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+      }
+    }
+  }, [])
+
+  return tpsData
+}