Refactor block transaction drilldown state

frontend/src/hooks/useBlockTransactions.ts

@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import { transactionsApi, type Transaction } from '@/services/api/transactions'
+
+const DEFAULT_BLOCK_TRANSACTION_PAGE_SIZE = 25
+
+interface UseBlockTransactionsOptions {
+  blockNumber: number
+  chainId: number
+  enabled: boolean
+}
+
+export function useBlockTransactions({ blockNumber, chainId, enabled }: UseBlockTransactionsOptions) {
+  const [transactions, setTransactions] = useState<Transaction[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+  const [hasNextPage, setHasNextPage] = useState(false)
+  const [page, setPage] = useState(1)
+
+  const loadTransactions = useCallback(async () => {
+    if (!enabled) {
+      setTransactions([])
+      setLoading(false)
+      setError(false)
+      setHasNextPage(false)
+      return
+    }
+
+    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)
+    }
+  }, [blockNumber, chainId, enabled, page])
+
+  useEffect(() => {
+    if (!enabled) {
+      setPage(1)
+      setTransactions([])
+      setLoading(false)
+      setError(false)
+      setHasNextPage(false)
+      return
+    }
+
+    setPage(1)
+  }, [blockNumber, enabled])
+
+  useEffect(() => {
+    void loadTransactions()
+  }, [loadTransactions])
+
+  return {
+    transactions,
+    loading,
+    error,
+    hasNextPage,
+    page,
+    setPage,
+  }
+}