diff --git a/frontend/src/hooks/useBlockTransactions.ts b/frontend/src/hooks/useBlockTransactions.ts index 7bbec81..65e03cb 100644 --- a/frontend/src/hooks/useBlockTransactions.ts +++ b/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,