Add Blocks tab to OP batch detail page

- Add getOpBatchBlocks function to firebase.js
- Add /opBatches/:batchIndex/blocks API endpoint
- Add getOpBatchBlocks method to server.js plugin
- Add opBatchIndex prop to BlockList.vue component
- Create OpBatchBlocks.vue wrapper component
- Add Blocks tab to OpBatchDetail.vue with URL hash support
- Change default blob explorer URL from Etherscan to Blockscout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: Antoine de Chevigné

run/api/opBatches.js

@@ -67,4 +67,25 @@ router.get('/:batchIndex/transactions', workspaceAuthMiddleware, async (req, res
     }
 });
 
+/**
+ * Get paginated list of L2 blocks for a specific OP batch
+ * @param {number} batchIndex - The batch index
+ * @param {number} page - The page number
+ * @param {number} itemsPerPage - The number of items per page
+ * @param {string} order - The order to sort by
+ * @returns {Promise<Array>} - A list of L2 blocks in the batch
+ */
+router.get('/:batchIndex/blocks', workspaceAuthMiddleware, async (req, res, next) => {
+    const data = { ...req.query, ...req.params };
+
+    try {
+        const { page, itemsPerPage, order } = sanitizePagination(data.page, data.itemsPerPage, data.order);
+        const { total, items } = await db.getOpBatchBlocks(data.workspace.id, data.batchIndex, page, itemsPerPage, order);
+
+        res.status(200).json({ total, items });
+    } catch (error) {
+        unmanagedError(error, req, next);
+    }
+});
+
 module.exports = router;

run/lib/firebase.js

@@ -546,7 +546,7 @@ const getOpBatch = async (workspaceId, batchIndex) => {
     });
 
     const result = batch.toJSON();
-    result.parentChainExplorer = opConfig?.parentChainExplorer || 'https://etherscan.io';
+    result.parentChainExplorer = opConfig?.parentChainExplorer || 'https://eth.blockscout.com';
     return result;
 };
 
@@ -594,6 +594,50 @@ const getOpBatchTransactions = async (workspaceId, batchIndex, page, itemsPerPag
     return { total: 0, items: [] };
 };
 
+/**
+ * Retrieves L2 blocks for a specific OP batch
+ * @param {string} workspaceId - The workspace id
+ * @param {number} batchIndex - The batch index
+ * @param {number} page - The page number
+ * @param {number} itemsPerPage - The number of items per page
+ * @param {string} order - The order to sort by
+ * @returns {Promise<Object>} - List of blocks and total count
+ */
+const getOpBatchBlocks = async (workspaceId, batchIndex, page, itemsPerPage, order) => {
+    if (!workspaceId || batchIndex === undefined)
+        throw new Error('Missing parameter');
+
+    const batch = await OpBatch.findOne({
+        where: {
+            workspaceId,
+            batchIndex: parseInt(batchIndex)
+        }
+    });
+
+    if (!batch)
+        throw new Error('Could not find batch');
+
+    // If batch has L2 block range, query blocks in that range
+    if (batch.l2BlockStart !== null && batch.l2BlockEnd !== null) {
+        const sanitizedOrder = order === 'ASC' ? 'ASC' : 'DESC';
+        const result = await Block.findAndCountAll({
+            where: {
+                workspaceId,
+                number: {
+                    [Op.between]: [batch.l2BlockStart, batch.l2BlockEnd]
+                }
+            },
+            order: [['number', sanitizedOrder]],
+            limit: parseInt(itemsPerPage) || 10,
+            offset: ((parseInt(page) || 1) - 1) * (parseInt(itemsPerPage) || 10)
+        });
+        return { total: result.count, items: result.rows };
+    }
+
+    // Otherwise return empty result (batch blocks not yet linked)
+    return { total: 0, items: [] };
+};
+
 /**
  * Retrieves a list of OP outputs for a workspace
  * @param {string} workspaceId - The workspace id
@@ -4972,6 +5016,7 @@ module.exports = {
     getWorkspaceOpBatches: getWorkspaceOpBatches,
     getOpBatch: getOpBatch,
     getOpBatchTransactions: getOpBatchTransactions,
+    getOpBatchBlocks: getOpBatchBlocks,
     getWorkspaceOpOutputs: getWorkspaceOpOutputs,
     getOpOutput: getOpOutput,
     getWorkspaceOpDeposits: getWorkspaceOpDeposits,

src/components/BlockList.vue

@@ -74,6 +74,7 @@
  *
  * @prop {boolean} [dense] - Whether to use compact table styling
  * @prop {number} [batchNumber] - Orbit batch number to filter blocks by
+ * @prop {number} [opBatchIndex] - OP batch index to filter blocks by
  */
 <script setup>
 import { ref, reactive, onMounted, onBeforeUnmount, inject } from 'vue';
@@ -83,6 +84,10 @@ const props = defineProps({
     batchNumber: {
         type: Number,
         required: false
+    },
+    opBatchIndex: {
+        type: Number,
+        required: false
     }
 });
 
@@ -142,9 +147,14 @@ const getBlocks = ({ page, itemsPerPage, sortBy } = {}) => {
         sortBy
     });
 
-    const fn = props.batchNumber ?
-        $server.getOrbitBatchBlocks({ batchNumber: props.batchNumber, page, itemsPerPage, orderBy: sortBy[0].key, order: sortBy[0].order }) :
-        $server.getBlocks({ page, itemsPerPage, orderBy: sortBy[0].key, order: sortBy[0].order });
+    let fn;
+    if (props.batchNumber) {
+        fn = $server.getOrbitBatchBlocks({ batchNumber: props.batchNumber, page, itemsPerPage, orderBy: sortBy[0].key, order: sortBy[0].order });
+    } else if (props.opBatchIndex !== undefined && props.opBatchIndex !== null) {
+        fn = $server.getOpBatchBlocks({ batchIndex: props.opBatchIndex, page, itemsPerPage, orderBy: sortBy[0].key, order: sortBy[0].order });
+    } else {
+        fn = $server.getBlocks({ page, itemsPerPage, orderBy: sortBy[0].key, order: sortBy[0].order });
+    }
 
     fn.then(({ data }) => {
         blocks.value = data.items;

src/components/OpBatchBlocks.vue

@@ -0,0 +1,18 @@
+<template>
+    <v-card>
+        <v-card-text>
+            <BlockList :opBatchIndex="batchIndex" />
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup>
+import BlockList from './BlockList.vue';
+
+const props = defineProps({
+    batchIndex: {
+        type: Number,
+        required: true
+    }
+});
+</script>

src/components/OpBatchDetail.vue

@@ -17,6 +17,7 @@
         <template v-else-if="batch && !loading">
             <BaseChipGroup v-model="selectedTab" mandatory>
                 <v-chip label size="small" value="overview">Overview</v-chip>
+                <v-chip label size="small" value="blocks">Blocks</v-chip>
                 <v-chip label size="small" value="transactions">Transactions</v-chip>
             </BaseChipGroup>
 
@@ -25,6 +26,11 @@
                 :batch="batch"
             />
 
+            <OpBatchBlocks
+                v-if="selectedTab === 'blocks'"
+                :batchIndex="Number(batch.batchIndex)"
+            />
+
             <OpBatchTransactions
                 v-if="selectedTab === 'transactions'"
                 :batchIndex="Number(batch.batchIndex)"
@@ -45,6 +51,7 @@ import { ref, onMounted, inject, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import BaseChipGroup from './base/BaseChipGroup.vue';
 import OpBatchOverview from './OpBatchOverview.vue';
+import OpBatchBlocks from './OpBatchBlocks.vue';
 import OpBatchTransactions from './OpBatchTransactions.vue';
 
 const props = defineProps({
@@ -76,7 +83,9 @@ function loadBatch() {
 }
 
 const checkUrlHash = () => {
-    if (window.location.hash === '#transactions') {
+    if (window.location.hash === '#blocks') {
+        selectedTab.value = 'blocks';
+    } else if (window.location.hash === '#transactions') {
         selectedTab.value = 'transactions';
     } else {
         selectedTab.value = 'overview';
@@ -97,7 +106,9 @@ watch(() => selectedTab.value, (newTab) => {
     const currentPath = router.currentRoute.value.fullPath.split('#')[0];
     let hash = '';
 
-    if (newTab === 'transactions') {
+    if (newTab === 'blocks') {
+        hash = '#blocks';
+    } else if (newTab === 'transactions') {
         hash = '#transactions';
     }
 

src/components/OpBatchOverview.vue

@@ -152,7 +152,7 @@ const dataContainerLabels = {
 };
 
 const parentChainExplorer = computed(() => {
-    return props.batch.parentChainExplorer || 'https://etherscan.io';
+    return props.batch.parentChainExplorer || 'https://eth.blockscout.com';
 });
 
 const l1TransactionUrl = computed(() => {

src/plugins/server.js

@@ -588,6 +588,16 @@ export default {
                 return axios.get(resource, { params });
             },
 
+            getOpBatchBlocks(options) {
+                const params = {
+                    firebaseUserId: firebaseUserId.value,
+                    workspace: workspace.value,
+                    ...options
+                };
+                const resource = `${envStore.apiRoot}/api/opBatches/${options.batchIndex}/blocks`;
+                return axios.get(resource, { params });
+            },
+
             getOpOutputs(options) {
                 const params = {
                     firebaseUserId: firebaseUserId.value,