Add block navigation buttons; extract latest block hook

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>

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>();
+  const latestBlock = useLatestBlock();
-  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);
-    };
-  }, []);
 
   document.title = "Home | Otterscan";
 

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;
+};