Guard block transaction fetch state

frontend/src/hooks/useBlockTransactions.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { transactionsApi, type Transaction } from '@/services/api/transactions'
 
@@ -16,9 +16,14 @@ export function useBlockTransactions({ blockNumber, chainId, enabled }: UseBlock
   const [error, setError] = useState(false)
   const [hasNextPage, setHasNextPage] = useState(false)
   const [page, setPage] = useState(1)
+  const previousBlockNumberRef = useRef(blockNumber)
 
-  const loadTransactions = useCallback(async () => {
+  useEffect(() => {
     if (!enabled) {
+      previousBlockNumberRef.current = blockNumber
+      if (page !== 1) {
+        setPage(1)
+      }
       setTransactions([])
       setLoading(false)
       setError(false)
@@ -26,37 +31,40 @@ export function useBlockTransactions({ blockNumber, chainId, enabled }: UseBlock
       return
     }
 
+    if (previousBlockNumberRef.current !== blockNumber) {
+      previousBlockNumberRef.current = blockNumber
+      if (page !== 1) {
+        setPage(1)
+        return
+      }
+    }
+
+    let cancelled = false
     setLoading(true)
     setError(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])
+    void (async () => {
+      const result = await transactionsApi.listByBlockSafe(
+        chainId,
+        blockNumber,
+        page,
+        DEFAULT_BLOCK_TRANSACTION_PAGE_SIZE,
+      )
 
-  useEffect(() => {
-    if (!enabled) {
-      setPage(1)
-      setTransactions([])
+      if (cancelled) {
+        return
+      }
+
+      setTransactions(result.items)
+      setHasNextPage(result.hasNextPage)
+      setError(!result.ok)
       setLoading(false)
-      setError(false)
-      setHasNextPage(false)
-      return
+    })()
+
+    return () => {
+      cancelled = true
     }
-
-    setPage(1)
-  }, [blockNumber, enabled])
-
-  useEffect(() => {
-    void loadTransactions()
-  }, [loadTransactions])
+  }, [blockNumber, chainId, enabled, page])
 
   return {
     transactions,