fix(tps-chart): smooth Transaction volume line

.github/workflows/ci.yml

@@ -0,0 +1,75 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/cache@v4
+        with:
+          path: ~/.cache/biome
+          key: biome-${{ runner.os }}-${{ hashFiles('biome.json') }}
+          restore-keys: biome-${{ runner.os }}-
+      - uses: biomejs/setup-biome@v2
+        with:
+          version: 2.1.2
+      - run: biome ci --linter-enabled=true --formatter-enabled=true
+
+  typecheck:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: frontend
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+          cache-dependency-path: frontend/pnpm-lock.yaml
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm typecheck
+
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: frontend
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+          cache-dependency-path: frontend/pnpm-lock.yaml
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build
+
+  rust:
+    runs-on: ubuntu-latest
+    # Match the backend Dockerfile's build image so bindgen sees a libclang
+    # new enough for the upstream C23 (`constexpr`) headers from monad-bft.
+    container: rust:1.91-slim
+    steps:
+      - name: Install build dependencies
+        run: |
+          apt-get update
+          apt-get install -y git curl gcc g++ cmake pkg-config libssl-dev libclang-dev libzstd-dev libhugetlbfs-dev
+      - uses: actions/checkout@v4
+      - run: rustup component add rustfmt clippy
+      - uses: Swatinem/rust-cache@v2
+      - run: cargo fmt --all --check
+      - run: cargo clippy --all-targets --all-features -- -D warnings
+      - run: cargo build --all-targets

backend/src/bin/client.rs

@@ -110,7 +110,7 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
                                         },
                                         SerializableExecEvent::TxnEvmOutput { txn_index, .. } => {
                                             if let Some((txn_hash, txn_start_ns)) = client_state.txs_start_ns.remove(&txn_index) {
-                                                let txn_duration = std::time::Duration::from_nanos((event.timestamp_ns - txn_start_ns) as u64);
+                                                let txn_duration = std::time::Duration::from_nanos(event.timestamp_ns - txn_start_ns);
                                                 client_state.block_txns_total_duration += txn_duration;
 
                                                 log_event!("TxnEvmOutput", txn_index = txn_index, txn_hash = txn_hash, duration = txn_duration);
@@ -120,7 +120,7 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
                                         },
                                         SerializableExecEvent::BlockPerfEvmExit => {
                                             log_event!("BlockPerfEvmExit");
-                                            let block_duration = std::time::Duration::from_nanos((event.timestamp_ns - client_state.block_start_ns) as u64);
+                                            let block_duration = std::time::Duration::from_nanos(event.timestamp_ns - client_state.block_start_ns);
                                             let parallel_execution_savings = client_state.block_txns_total_duration.checked_sub(block_duration);
                                             let savings_pct = if parallel_execution_savings.is_none() { // This only happens with really small/empty blocks
                                                 error!("Parallel execution savings is negative: txs={:?} block={:?} height={}", client_state.block_txns_total_duration, block_duration, client_state.current_block_number);

backend/src/lib/event_filter.rs

@@ -63,7 +63,7 @@ pub struct ArrayPrefixFilter<T: PartialEq> {
 
 impl<T: PartialEq> ArrayPrefixFilter<T> {
     /// Checks if input array starts with filter values (prefix match)
-    pub fn matches(&self, value: &Vec<T>) -> bool {
+    pub fn matches(&self, value: &[T]) -> bool {
         self.values.is_empty() || value.starts_with(&self.values)
     }
 
@@ -192,7 +192,7 @@ impl EventFilter {
             return true;
         }
 
-        if self.includes_native_transfers() && is_native_transfer(&event) {
+        if self.includes_native_transfers() && is_native_transfer(event) {
             return true;
         }
 

backend/src/lib/event_listener.rs

@@ -85,7 +85,7 @@ impl EventName {
         }
     }
 
-    pub fn from_str(s: &str) -> Option<Self> {
+    pub fn from_name(s: &str) -> Option<Self> {
         match s {
             "RECORD_ERROR" => Some(EventName::RecordError),
             "BLOCK_START" => Some(EventName::BlockStart),
@@ -157,7 +157,7 @@ fn event_to_data(event: &EventDescriptor<ExecEventDecoder>) -> Option<EventData>
     } = event.info();
 
     // Convert event_type to EventName enum for type safety
-    let event_name = EventName::from_str(EXEC_EVENT_NAMES[event_type as usize])?;
+    let event_name = EventName::from_name(EXEC_EVENT_NAMES[event_type as usize])?;
 
     // Get block number if present
     let block_number = if flow_info.block_seqno != 0 {
@@ -284,7 +284,7 @@ pub fn run_event_listener(
                     last_event_timestamp_ns = Some(event.info().record_epoch_nanos);
                     event_count += 1;
 
-                    if event_count % 100 == 0 {
+                    if event_count.is_multiple_of(100) {
                         debug!("Processed {} events", event_count);
                     }
 

backend/src/lib/serializable_event.rs

@@ -326,7 +326,7 @@ impl From<&EventData> for SerializableEventData {
             txn_hash: data.txn_hash.map(B256::from),
             payload: SerializableExecEvent::from(&data.payload),
             seqno: data.seqno,
-            timestamp_ns: data.timestamp_ns.clone(),
+            timestamp_ns: data.timestamp_ns,
         }
     }
 }

backend/src/lib/server.rs

@@ -43,7 +43,7 @@ pub struct TopAccessesData {
 
 #[derive(Debug, Clone)]
 pub enum EventDataOrMetrics {
-    Event(EventData),
+    Event(Box<EventData>),
     TopAccesses(TopAccessesData),
     TPS(usize)
 }
@@ -80,7 +80,7 @@ impl TPSTracker {
         self.block_2_txs = self.block_3_txs;
         self.block_3_txs = self.current_tx_count;
         self.current_tx_count = 0;
-        return self.block_1_txs + self.block_2_txs + (self.block_3_txs / 2);
+        self.block_1_txs + self.block_2_txs + (self.block_3_txs / 2)
     }
 }
 
@@ -95,7 +95,7 @@ fn process_event(
 ) {
     match event {
         EventDataOrMetrics::Event(event_data) => {
-            let serializable = SerializableEventData::from(&event_data);
+            let serializable = SerializableEventData::from(&*event_data);
             if filter.matches_event(&serializable) {
                 events_buf.push(serializable);
             }
@@ -289,13 +289,9 @@ async fn run_event_forwarder_task(
                 }
 
                 // Send accesses update on BlockEnd events (after all access events are processed)
-                let send_accesses_update = if let EventName::BlockEnd = event_data.event_name {
-                    true
-                } else {
-                    false
-                };
+                let send_accesses_update = matches!(event_data.event_name, EventName::BlockEnd);
 
-                let _ = event_broadcast_sender.send(EventDataOrMetrics::Event(event_data));
+                let _ = event_broadcast_sender.send(EventDataOrMetrics::Event(Box::new(event_data)));
 
                 if send_accesses_update {
                     let top_accesses_data = TopAccessesData {

frontend/components/network-activity-tracker/tps-chart.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import Image from 'next/image'
+import { useEffect, useState } from 'react'
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 import {
   type ChartConfig,
@@ -9,7 +10,7 @@ import {
   ChartTooltipContent,
 } from '@/components/ui/chart'
 import { useTotalTransactions } from '@/hooks/use-total-transactions'
-import { useTps } from '@/hooks/use-tps'
+import { type TpsDataPoint, useTps } from '@/hooks/use-tps'
 import { formatRelativeTime, formatTimeHMS } from '@/lib/timestamp'
 import { formatIntNumber } from '@/lib/ui'
 import { NetworkActivityStats } from './network-activity-stats'
@@ -21,10 +22,96 @@ const chartConfig = {
   },
 } satisfies ChartConfig
 
+/** Maximum visible time window of the chart, matching the TPS history retained. */
+const CHART_WINDOW_MS = 5 * 60 * 1000
+
+/** Smallest window to show early on, so the chart starts zoomed in rather than mostly empty. */
+const MIN_WINDOW_MS = 3 * 1000
+
+/**
+ * Drives a smoothly advancing "now" so the chart's x-domain slides
+ * continuously instead of jumping by one slot as each point arrives.
+ * Updates every animation frame for the smoothest motion; rAF auto-pauses
+ * when the tab is hidden.
+ */
+function useSlidingNow(): number {
+  const [now, setNow] = useState(() => Date.now())
+
+  useEffect(() => {
+    let raf: number
+    const tick = () => {
+      setNow(Date.now())
+      raf = requestAnimationFrame(tick)
+    }
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+  }, [])
+
+  return now
+}
+
+/**
+ * Returns the history with its newest segment progressively "drawn": instead of
+ * the last point appearing fully-formed, a head vertex travels from the previous
+ * point to the newest one over the inter-arrival interval. `now` advances every
+ * frame, so the head moves smoothly. Once it reaches the newest point the segment
+ * is complete and the next arrival starts drawing the following one.
+ */
+function drawHistory(history: TpsDataPoint[], now: number): TpsDataPoint[] {
+  if (history.length < 2) return history
+
+  const target = history[history.length - 1]
+  const from = history[history.length - 2]
+  const duration = target.timestamp - from.timestamp
+  if (duration <= 0) return history
+
+  const progress = Math.min(1, Math.max(0, (now - target.timestamp) / duration))
+  const head: TpsDataPoint = {
+    timestamp: from.timestamp + (target.timestamp - from.timestamp) * progress,
+    tps: from.tps + (target.tps - from.tps) * progress,
+  }
+
+  return [...history.slice(0, -1), head]
+}
+
+/** Nice, human-friendly tick steps in ms for the relative-time x-axis. */
+const TICK_STEPS_MS = [1, 2, 5, 10, 15, 30, 60, 120, 300].map((s) => s * 1000)
+
+/**
+ * Builds evenly-spaced ticks anchored at the sliding edge (`end`) and stepping
+ * backwards. Anchoring at `end` keeps a single "now" pinned to the far right;
+ * supplying ticks explicitly also avoids recharts' auto-generated ticks landing
+ * both at the edge and at the current second (which both format as "now").
+ */
+function buildTicks(start: number, end: number): number[] {
+  const step =
+    TICK_STEPS_MS.find((s) => s >= (end - start) / 6) ??
+    TICK_STEPS_MS[TICK_STEPS_MS.length - 1]
+
+  const ticks: number[] = []
+  for (let t = end; t >= start; t -= step) {
+    ticks.push(t)
+  }
+  return ticks.reverse()
+}
+
 export function TpsChart() {
   const { currentTps, peakTps, history } = useTps()
   const totalTransactions = useTotalTransactions()
   const hasData = history.length > 0
+  const now = useSlidingNow()
+
+  // Start zoomed in to the earliest data point and expand the window as data
+  // accumulates, capping at CHART_WINDOW_MS once we have 5 minutes of history.
+  const earliest = history[0]?.timestamp ?? now
+  const windowStart = Math.max(
+    now - CHART_WINDOW_MS,
+    Math.min(earliest, now - MIN_WINDOW_MS),
+  )
+
+  // Progressively draw the newest segment rather than snapping it into place.
+  const chartData = drawHistory(history, now)
+  const ticks = buildTicks(windowStart, now)
 
   return (
     <div className="flex flex-col h-full">
@@ -59,7 +146,7 @@ export function TpsChart() {
             className="h-full min-w-2xl w-full p-0"
           >
             <AreaChart
-              data={history}
+              data={chartData}
               margin={{ top: 8, right: 8, bottom: 0, left: 0 }}
             >
               <defs>
@@ -77,6 +164,11 @@ export function TpsChart() {
               <CartesianGrid stroke="var(--chart-grid)" vertical={false} />
               <XAxis
                 dataKey="timestamp"
+                type="number"
+                scale="time"
+                domain={[windowStart, now]}
+                ticks={ticks}
+                allowDataOverflow={true}
                 tickLine={false}
                 axisLine={false}
                 tickMargin={8}