diff --git a/frontend/src/hooks/useBlockTransactions.ts b/frontend/src/hooks/useBlockTransactions.ts index 40549d2..7bbec81 100644 --- a/frontend/src/hooks/useBlockTransactions.ts +++ b/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( - chainId, - blockNumber, - page, - DEFAULT_BLOCK_TRANSACTION_PAGE_SIZE, - ) - setTransactions(result.items) - setHasNextPage(result.hasNextPage) - setError(!result.ok) - } catch (loadError) { - console.error('Failed to load block transactions:', loadError) - setTransactions([]) - setHasNextPage(false) - setError(true) - } finally { - setLoading(false) - } + const result = await transactionsApi.listByBlockSafe( + chainId, + blockNumber, + page, + DEFAULT_BLOCK_TRANSACTION_PAGE_SIZE, + ) + setTransactions(result.items) + setHasNextPage(result.hasNextPage) + setError(!result.ok) + setLoading(false) }, [blockNumber, chainId, enabled, page]) useEffect(() => { diff --git a/frontend/src/pages/blocks/[number].tsx b/frontend/src/pages/blocks/[number].tsx index 52cdf74..fd88b51 100644 --- a/frontend/src/pages/blocks/[number].tsx +++ b/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() { ), }, - ] + ], []) + + 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 (
@@ -210,13 +216,7 @@ export default function BlockDetailPage() { 0 - ? 'No indexed block transactions were returned for this page yet.' - : 'This block does not contain any indexed transactions.' - } + emptyMessage={transactionsEmptyMessage} keyExtractor={(transaction) => transaction.hash} /> {block.transaction_count > 0 ? (