Polish block transaction drilldown cleanup

frontend/src/hooks/useBlockTransactions.ts

@@ -29,24 +29,16 @@ export function useBlockTransactions({ blockNumber, chainId, enabled }: UseBlock
     setLoading(true)
     setError(false)
 
-    try {
+    const result = await transactionsApi.listByBlockSafe(
-      const result = await transactionsApi.listByBlockSafe(
+      chainId,
-        chainId,
+      blockNumber,
-        blockNumber,
+      page,
-        page,
+      DEFAULT_BLOCK_TRANSACTION_PAGE_SIZE,
-        DEFAULT_BLOCK_TRANSACTION_PAGE_SIZE,
+    )
-      )
+    setTransactions(result.items)
-      setTransactions(result.items)
+    setHasNextPage(result.hasNextPage)
-      setHasNextPage(result.hasNextPage)
+    setError(!result.ok)
-      setError(!result.ok)
+    setLoading(false)
-    } catch (loadError) {
-      console.error('Failed to load block transactions:', loadError)
-      setTransactions([])
-      setHasNextPage(false)
-      setError(true)
-    } finally {
-      setLoading(false)
-    }
   }, [blockNumber, chainId, enabled, page])
 
   useEffect(() => {

frontend/src/pages/blocks/[number].tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useRouter } from 'next/router'
 import { blocksApi, Block } from '@/services/api/blocks'
 import { Card, Address, Table } from '@/libs/frontend-ui-primitives'
@@ -62,7 +62,7 @@ export default function BlockDetailPage() {
   const gasUtilization = block && block.gas_limit > 0
     ? Math.round((block.gas_used / block.gas_limit) * 100)
     : null
-  const transactionColumns = [
+  const transactionColumns = useMemo(() => [
     {
       header: 'Hash',
       accessor: (transaction: Transaction) => (
@@ -102,7 +102,13 @@ export default function BlockDetailPage() {
         </span>
       ),
     },
-  ]
+  ], [])
+
+  const transactionsEmptyMessage = transactionsError
+    ? 'Unable to load indexed block transactions right now. Please retry from this page in a moment.'
+    : (block?.transaction_count ?? 0) > 0
+    ? 'No indexed block transactions were returned for this page yet.'
+    : 'This block does not contain any indexed transactions.'
 
   return (
     <div className="container mx-auto px-4 py-6 sm:py-8">
@@ -210,13 +216,7 @@ export default function BlockDetailPage() {
                 <Table
                   columns={transactionColumns}
                   data={blockTransactions}
-                  emptyMessage={
+                  emptyMessage={transactionsEmptyMessage}
-                    transactionsError
-                      ? 'Unable to load indexed block transactions right now. Please retry from this page in a moment.'
-                      : block.transaction_count > 0
-                      ? 'No indexed block transactions were returned for this page yet.'
-                      : 'This block does not contain any indexed transactions.'
-                  }
                   keyExtractor={(transaction) => transaction.hash}
                 />
                 {block.transaction_count > 0 ? (