From d7621eec5945b737863a68fc9e1787ceb522b896 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Tue, 3 Aug 2021 01:34:14 -0300
Subject: [PATCH] Add server side pagination support

---
 src/BlockTransactions.tsx | 17 +++++------------
 src/useErigonHooks.ts     |  8 ++++++--
 2 files changed, 11 insertions(+), 14 deletions(-)

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