feat: add block view and per block execution info (#91)

* feat: block listing & overview

* fixes

* downgrade viem

* fix lints

Author: danyalprout

.env.example

@@ -33,6 +33,7 @@ TIPS_AUDIT_S3_SECRET_ACCESS_KEY=minioadmin
 
 # TIPS UI
 NEXT_PUBLIC_BLOCK_EXPLORER_URL=https://base.blockscout.com
+TIPS_UI_RPC_URL=http://localhost:8549
 TIPS_UI_AWS_REGION=us-east-1
 TIPS_UI_S3_BUCKET_NAME=tips
 TIPS_UI_S3_CONFIG_TYPE=manual

ui/biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.0/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",
@@ -9,6 +9,12 @@
     "ignoreUnknown": true,
     "includes": ["**", "!node_modules", "!.next", "!dist", "!build"]
   },
+  "css": {
+    "parser": {
+      "cssModules": true,
+      "tailwindDirectives": true
+    }
+  },
   "formatter": {
     "enabled": true,
     "indentStyle": "space",

ui/package.json

@@ -10,18 +10,19 @@
     "format": "biome format --write"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.888.0",
-    "next": "15.5.3",
+    "@aws-sdk/client-s3": "3.940.0",
+    "next": "15.5.6",
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "viem": "2.40.3"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.2.0",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "tailwindcss": "^4",
-    "typescript": "^5"
+    "@biomejs/biome": "2.3.8",
+    "@tailwindcss/postcss": "4.1.17",
+    "@types/node": "20.19.25",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
+    "tailwindcss": "4.1.17",
+    "typescript": "5.9.3"
   }
 }

ui/src/app/api/block/[hash]/route.ts

@@ -0,0 +1,134 @@
+import { type NextRequest, NextResponse } from "next/server";
+import { type Block, createPublicClient, type Hash, http } from "viem";
+import { mainnet } from "viem/chains";
+import {
+  type BlockData,
+  type BlockTransaction,
+  cacheBlockData,
+  getBlockFromCache,
+  getBundleHistory,
+  getTransactionMetadataByHash,
+  type MeterBundleResult,
+} from "@/lib/s3";
+
+function serializeBlockData(block: BlockData) {
+  return {
+    ...block,
+    number: block.number.toString(),
+    timestamp: block.timestamp.toString(),
+    gasUsed: block.gasUsed.toString(),
+    gasLimit: block.gasLimit.toString(),
+    transactions: block.transactions.map((tx) => ({
+      ...tx,
+      gasUsed: tx.gasUsed.toString(),
+    })),
+  };
+}
+
+const RPC_URL = process.env.TIPS_UI_RPC_URL || "http://localhost:8545";
+
+const client = createPublicClient({
+  chain: mainnet,
+  transport: http(RPC_URL),
+});
+
+async function fetchBlockFromRpc(
+  blockHash: string,
+): Promise<Block<bigint, true> | null> {
+  try {
+    const block = await client.getBlock({
+      blockHash: blockHash as Hash,
+      includeTransactions: true,
+    });
+    return block;
+  } catch (error) {
+    console.error("Failed to fetch block from RPC:", error);
+    return null;
+  }
+}
+
+async function enrichTransactionWithBundleData(
+  txHash: string,
+): Promise<{ bundleId: string | null; executionTimeUs: number | null }> {
+  const metadata = await getTransactionMetadataByHash(txHash);
+  if (!metadata || metadata.bundle_ids.length === 0) {
+    return { bundleId: null, executionTimeUs: null };
+  }
+
+  const bundleId = metadata.bundle_ids[0];
+  const bundleHistory = await getBundleHistory(bundleId);
+  if (!bundleHistory) {
+    return { bundleId, executionTimeUs: null };
+  }
+
+  const receivedEvent = bundleHistory.history.find(
+    (e) => e.event === "Received",
+  );
+  if (!receivedEvent?.data?.bundle?.meter_bundle_response?.results) {
+    return { bundleId, executionTimeUs: null };
+  }
+
+  const txResult = receivedEvent.data.bundle.meter_bundle_response.results.find(
+    (r: MeterBundleResult) => r.txHash.toLowerCase() === txHash.toLowerCase(),
+  );
+
+  return {
+    bundleId,
+    executionTimeUs: txResult?.executionTimeUs ?? null,
+  };
+}
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ hash: string }> },
+) {
+  try {
+    const { hash } = await params;
+
+    const cachedBlock = await getBlockFromCache(hash);
+    if (cachedBlock) {
+      return NextResponse.json(serializeBlockData(cachedBlock));
+    }
+
+    const rpcBlock = await fetchBlockFromRpc(hash);
+    if (!rpcBlock || !rpcBlock.hash || !rpcBlock.number) {
+      return NextResponse.json({ error: "Block not found" }, { status: 404 });
+    }
+
+    const transactions: BlockTransaction[] = await Promise.all(
+      rpcBlock.transactions.map(async (tx, index) => {
+        const { bundleId, executionTimeUs } =
+          await enrichTransactionWithBundleData(tx.hash);
+        return {
+          hash: tx.hash,
+          from: tx.from,
+          to: tx.to,
+          gasUsed: tx.gas,
+          executionTimeUs,
+          bundleId,
+          index,
+        };
+      }),
+    );
+
+    const blockData: BlockData = {
+      hash: rpcBlock.hash,
+      number: rpcBlock.number,
+      timestamp: rpcBlock.timestamp,
+      transactions,
+      gasUsed: rpcBlock.gasUsed,
+      gasLimit: rpcBlock.gasLimit,
+      cachedAt: Date.now(),
+    };
+
+    await cacheBlockData(blockData);
+
+    return NextResponse.json(serializeBlockData(blockData));
+  } catch (error) {
+    console.error("Error fetching block data:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}

ui/src/app/api/blocks/route.ts

@@ -0,0 +1,105 @@
+import { NextResponse } from "next/server";
+
+const RPC_URL = process.env.TIPS_UI_RPC_URL || "http://localhost:8545";
+
+export interface BlockSummary {
+  hash: string;
+  number: number;
+  timestamp: number;
+  transactionCount: number;
+}
+
+export interface BlocksResponse {
+  blocks: BlockSummary[];
+}
+
+async function fetchLatestBlockNumber(): Promise<number | null> {
+  try {
+    const response = await fetch(RPC_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_blockNumber",
+        params: [],
+        id: 1,
+      }),
+    });
+
+    const data = await response.json();
+    if (data.error || !data.result) {
+      return null;
+    }
+
+    return parseInt(data.result, 16);
+  } catch (error) {
+    console.error("Failed to fetch latest block number:", error);
+    return null;
+  }
+}
+
+async function fetchBlockByNumber(
+  blockNumber: number,
+): Promise<BlockSummary | null> {
+  try {
+    const response = await fetch(RPC_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_getBlockByNumber",
+        params: [`0x${blockNumber.toString(16)}`, false],
+        id: 1,
+      }),
+    });
+
+    const data = await response.json();
+    if (data.error || !data.result) {
+      return null;
+    }
+
+    const block = data.result;
+    return {
+      hash: block.hash,
+      number: parseInt(block.number, 16),
+      timestamp: parseInt(block.timestamp, 16),
+      transactionCount: block.transactions?.length ?? 0,
+    };
+  } catch (error) {
+    console.error(`Failed to fetch block ${blockNumber}:`, error);
+    return null;
+  }
+}
+
+export async function GET() {
+  try {
+    const latestBlockNumber = await fetchLatestBlockNumber();
+    if (latestBlockNumber === null) {
+      return NextResponse.json(
+        { error: "Failed to fetch latest block" },
+        { status: 500 },
+      );
+    }
+
+    const blockNumbers = Array.from(
+      { length: 10 },
+      (_, i) => latestBlockNumber - i,
+    ).filter((n) => n >= 0);
+
+    const blocks = await Promise.all(blockNumbers.map(fetchBlockByNumber));
+
+    const validBlocks = blocks.filter(
+      (block): block is BlockSummary => block !== null,
+    );
+
+    const response: BlocksResponse = { blocks: validBlocks };
+
+    return NextResponse.json(response);
+  } catch (error) {
+    console.error("Error fetching blocks:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}