transactions_count for Scroll batch could be null

types/api/scrollL2.ts

@@ -27,7 +27,7 @@ export type ScrollL2TxnBatch = {
   confirmation_transaction: ScrollL2TxnBatchConfirmationTransaction;
   start_block: number;
   end_block: number;
-  transaction_count: number;
+  transaction_count: number | null;
   data_availability: {
     batch_data_container: 'in_blob4844' | 'in_calldata';
   };

ui/txnBatches/scrollL2/ScrollL2TxnBatchDetails.tsx

@@ -115,17 +115,21 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
         }
       </DetailedInfo.ItemValue>
 
-      <DetailedInfo.ItemLabel
-        isLoading={ isPlaceholderData }
-        hint="Number of transactions in this batch"
-      >
-        Transactions
-      </DetailedInfo.ItemLabel>
-      <DetailedInfo.ItemValue>
-        <Link loading={ isPlaceholderData } href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
-          { data.transaction_count.toLocaleString() } transaction{ data.transaction_count === 1 ? '' : 's' }
-        </Link>
-      </DetailedInfo.ItemValue>
+      { typeof data.transaction_count === 'number' ? (
+        <>
+          <DetailedInfo.ItemLabel
+            isLoading={ isPlaceholderData }
+            hint="Number of transactions in this batch"
+          >
+            Transactions
+          </DetailedInfo.ItemLabel>
+          <DetailedInfo.ItemValue>
+            <Link loading={ isPlaceholderData } href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
+              { data.transaction_count.toLocaleString() } transaction{ data.transaction_count === 1 ? '' : 's' }
+            </Link>
+          </DetailedInfo.ItemValue>
+        </>
+      ) : null }
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }

ui/txnBatches/scrollL2/ScrollL2TxnBatchesListItem.tsx

@@ -104,17 +104,21 @@ const ScrollL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
         </Link>
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <Link
-          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
-          loading={ isLoading }
-          fontWeight={ 600 }
-          minW="40px"
-        >
-          { item.transaction_count.toLocaleString() }
-        </Link>
-      </ListItemMobileGrid.Value>
+      { typeof item.transaction_count === 'number' ? (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <Link
+              href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+              loading={ isLoading }
+              fontWeight={ 600 }
+              minW="40px"
+            >
+              { item.transaction_count.toLocaleString() }
+            </Link>
+          </ListItemMobileGrid.Value>
+        </>
+      ) : null }
 
     </ListItemMobileGrid.Container>
   );

ui/txnBatches/scrollL2/ScrollL2TxnBatchesTableItem.tsx

@@ -87,12 +87,14 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
         </Link>
       </TableCell>
       <TableCell verticalAlign="middle" isNumeric>
-        <Link
-          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
-          loading={ isLoading }
-        >
-          { item.transaction_count.toLocaleString() }
-        </Link>
+        { typeof item.transaction_count === 'number' ? (
+          <Link
+            href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+            loading={ isLoading }
+          >
+            { item.transaction_count.toLocaleString() }
+          </Link>
+        ) : 'N/A' }
       </TableCell>
     </TableRow>
   );