From 9f146f710062ac0eb8e6eb6fbd7eb6ce5f986427 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 3 Jul 2021 22:42:06 -0300
Subject: [PATCH] Add block navigation buttons; extract latest block hook

---
 src/Block.tsx         |  8 ++++++-
 src/Home.tsx          | 28 +++-------------------
 src/useLatestBlock.ts | 55 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 26 deletions(-)
 create mode 100644 src/useLatestBlock.ts

diff --git a/src/Block.tsx b/src/Block.tsx
index 44ae998..ace4653 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -17,6 +17,7 @@ import BlockLink from "./components/BlockLink";
 import AddressLink from "./components/AddressLink";
 import TransactionValue from "./components/TransactionValue";
 import HexValue from "./components/HexValue";
+import { useLatestBlockNumber } from "./useLatestBlock";
 
 type BlockParams = {
   blockNumberOrHash: string;
@@ -96,6 +97,8 @@ const Block: React.FC = () => {
     }
   }, [block]);
 
+  const latestBlockNumber = useLatestBlockNumber();
+
   return (
     <StandardFrame>
       <StandardSubtitle>
@@ -119,7 +122,10 @@ const Block: React.FC = () => {
               </NavButton>
               <NavButton
                 blockNum={block.number + 1}
-                disabled={block.number === 0}
+                disabled={
+                  latestBlockNumber === undefined ||
+                  block.number >= latestBlockNumber
+                }
               >
                 <FontAwesomeIcon icon={faChevronRight} />
               </NavButton>
diff --git a/src/Home.tsx b/src/Home.tsx
index 7b7a814..08f1dc8 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { NavLink, useHistory } from "react-router-dom";
 import { ethers } from "ethers";
 import Logo from "./Logo";
 import Timestamp from "./components/Timestamp";
-import { provider } from "./ethersconfig";
+import { useLatestBlock } from "./useLatestBlock";
 
 const Home: React.FC = () => {
   const [search, setSearch] = useState<string>();
@@ -24,29 +24,7 @@ const Home: React.FC = () => {
     history.push(`/search?q=${search}`);
   };
 
-  const [latestBlock, setLatestBlock] = useState<ethers.providers.Block>();
-  useEffect(() => {
-    const readLatestBlock = async () => {
-      const blockNum = await provider.getBlockNumber();
-      const _raw = await provider.send("erigon_getHeaderByNumber", [blockNum]);
-      const _block = provider.formatter.block(_raw);
-      setLatestBlock(_block);
-    };
-    readLatestBlock();
-
-    const listener = async (blockNumber: number) => {
-      const _raw = await provider.send("erigon_getHeaderByNumber", [
-        blockNumber,
-      ]);
-      const _block = provider.formatter.block(_raw);
-      setLatestBlock(_block);
-    };
-
-    provider.on("block", listener);
-    return () => {
-      provider.removeListener("block", listener);
-    };
-  }, []);
+  const latestBlock = useLatestBlock();
 
   document.title = "Home | Otterscan";
 
diff --git a/src/useLatestBlock.ts b/src/useLatestBlock.ts
new file mode 100644
index 0000000..fba4011
--- /dev/null
+++ b/src/useLatestBlock.ts
@@ -0,0 +1,55 @@
+import { useState, useEffect } from "react";
+import { ethers } from "ethers";
+import { provider } from "./ethersconfig";
+
+export const useLatestBlock = () => {
+  const [latestBlock, setLatestBlock] = useState<ethers.providers.Block>();
+
+  useEffect(() => {
+    const readLatestBlock = async () => {
+      const blockNum = await provider.getBlockNumber();
+      const _raw = await provider.send("erigon_getHeaderByNumber", [blockNum]);
+      const _block = provider.formatter.block(_raw);
+      setLatestBlock(_block);
+    };
+    readLatestBlock();
+
+    const listener = async (blockNumber: number) => {
+      const _raw = await provider.send("erigon_getHeaderByNumber", [
+        blockNumber,
+      ]);
+      const _block = provider.formatter.block(_raw);
+      setLatestBlock(_block);
+    };
+
+    provider.on("block", listener);
+    return () => {
+      provider.removeListener("block", listener);
+    };
+  }, []);
+
+  return latestBlock;
+};
+
+export const useLatestBlockNumber = () => {
+  const [latestBlock, setLatestBlock] = useState<number>();
+
+  useEffect(() => {
+    const readLatestBlock = async () => {
+      const blockNum = await provider.getBlockNumber();
+      setLatestBlock(blockNum);
+    };
+    readLatestBlock();
+
+    const listener = async (blockNumber: number) => {
+      setLatestBlock(blockNumber);
+    };
+
+    provider.on("block", listener);
+    return () => {
+      provider.removeListener("block", listener);
+    };
+  }, []);
+
+  return latestBlock;
+};