diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx index f8a3bf9..4835fd3 100644 --- a/src/BlockTransactions.tsx +++ b/src/BlockTransactions.tsx @@ -36,26 +36,19 @@ const BlockTransactions: React.FC = () => { const [totalTxs, txs] = useBlockTransactions( provider, - blockNumber.toNumber() + blockNumber.toNumber(), + pageNumber - 1, + PAGE_SIZE ); - const page = useMemo(() => { - if (!txs) { - return undefined; - } - const pageStart = (pageNumber - 1) * PAGE_SIZE; - return txs.slice(pageStart, pageStart + PAGE_SIZE); - }, [txs, pageNumber]); - const total = totalTxs; - document.title = `Block #${blockNumber} Txns | Otterscan`; return ( diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts index 56677af..0c9c7c5 100644 --- a/src/useErigonHooks.ts +++ b/src/useErigonHooks.ts @@ -66,7 +66,9 @@ export const readBlock = async ( export const useBlockTransactions = ( provider: ethers.providers.JsonRpcProvider | undefined, - blockNumber: number + blockNumber: number, + pageNumber: number, + pageSize: number ): [number | undefined, ProcessedTransaction[] | undefined] => { const [totalTxs, setTotalTxs] = useState(); const [txs, setTxs] = useState(); @@ -79,6 +81,8 @@ export const useBlockTransactions = ( const readBlock = async () => { const result = await provider.send("ots_getBlockTransactions", [ blockNumber, + pageNumber, + pageSize, ]); const _block = provider.formatter.blockWithTransactions( result.fullblock @@ -139,7 +143,7 @@ export const useBlockTransactions = ( setTxs(processedTxs); }; readBlock(); - }, [provider, blockNumber]); + }, [provider, blockNumber, pageNumber, pageSize]); return [totalTxs, txs]; };