Add server side pagination support

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 (
     <StandardFrame>
       <BlockTransactionHeader blockTag={blockNumber.toNumber()} />
       <BlockTransactionResults
-        page={page}
-        total={total ?? 0}
+        page={txs}
+        total={totalTxs ?? 0}
         pageNumber={pageNumber}
       />
     </StandardFrame>

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<number>();
   const [txs, setTxs] = useState<ProcessedTransaction[]>();
@@ -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];
 };