From 9ca79e838f62c44727af5074e5b4c254ab9f5100 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 18 Feb 2022 04:06:36 -0300
Subject: [PATCH 1/2] Fix block number not found

---
 src/Block.tsx                    | 10 +++++++---
 src/components/BlockNotFound.tsx | 16 ++++++++++++++++
 src/special/london/Blocks.tsx    |  3 +++
 src/useErigonHooks.ts            | 13 ++++++++-----
 4 files changed, 34 insertions(+), 8 deletions(-)
 create mode 100644 src/components/BlockNotFound.tsx

diff --git a/src/Block.tsx b/src/Block.tsx
index 473ef75..0b96cda 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -25,6 +25,7 @@ import { useLatestBlockNumber } from "./useLatestBlock";
 import { blockTxsURL } from "./url";
 import { useBlockData } from "./useErigonHooks";
 import { useETHUSDOracle } from "./usePriceOracle";
+import BlockNotFound from "./components/BlockNotFound";
 
 const Block: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
@@ -35,10 +36,10 @@ const Block: React.FC = () => {
 
   const block = useBlockData(provider, blockNumberOrHash);
   useEffect(() => {
-    if (block) {
-      document.title = `Block #${block.number} | Otterscan`;
+    if (block !== undefined) {
+      document.title = `Block #${blockNumberOrHash} | Otterscan`;
     }
-  }, [block]);
+  }, [blockNumberOrHash, block]);
 
   const extraStr = useMemo(() => {
     try {
@@ -71,6 +72,9 @@ const Block: React.FC = () => {
           )}
         </div>
       </StandardSubtitle>
+      {block === null && (
+        <BlockNotFound blockNumberOrHash={blockNumberOrHash} />
+      )}
       {block && (
         <ContentFrame>
           <InfoRow title="Block Height">
diff --git a/src/components/BlockNotFound.tsx b/src/components/BlockNotFound.tsx
new file mode 100644
index 0000000..6a875db
--- /dev/null
+++ b/src/components/BlockNotFound.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import ContentFrame from "../ContentFrame";
+
+type BlockNotFoundProps = {
+  blockNumberOrHash: string;
+};
+
+const BlockNotFound: React.FC<BlockNotFoundProps> = ({ blockNumberOrHash }) => (
+  <>
+    <ContentFrame>
+      <div className="py-4 text-sm">Block "{blockNumberOrHash}" not found.</div>
+    </ContentFrame>
+  </>
+);
+
+export default React.memo(BlockNotFound);
diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx
index 095bbc2..8a00597 100644
--- a/src/special/london/Blocks.tsx
+++ b/src/special/london/Blocks.tsx
@@ -75,6 +75,9 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
         if (_blocks.length > 0 && blockNumber === _blocks[0].number) {
           return _blocks;
         }
+        if (extBlock === null) {
+          return _blocks;
+        }
 
         // Leave the last block because of transition animation
         const newBlocks = [extBlock, ..._blocks].slice(
diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts
index 54e1800..c0d958b 100644
--- a/src/useErigonHooks.ts
+++ b/src/useErigonHooks.ts
@@ -36,7 +36,7 @@ export interface ExtendedBlock extends Block {
 export const readBlock = async (
   provider: JsonRpcProvider,
   blockNumberOrHash: string
-) => {
+): Promise<ExtendedBlock | null> => {
   let blockPromise: Promise<any>;
   if (isHexString(blockNumberOrHash, 32)) {
     blockPromise = provider.send("ots_getBlockDetailsByHash", [
@@ -47,6 +47,9 @@ export const readBlock = async (
   }
 
   const _rawBlock = await blockPromise;
+  if (_rawBlock === null) {
+    return null;
+  }
   const _block = provider.formatter.block(_rawBlock.block);
   const _rawIssuance = _rawBlock.issuance;
 
@@ -160,11 +163,11 @@ export const useBlockTransactions = (
 export const useBlockData = (
   provider: JsonRpcProvider | undefined,
   blockNumberOrHash: string
-) => {
-  const [block, setBlock] = useState<ExtendedBlock>();
+): ExtendedBlock | null | undefined => {
+  const [block, setBlock] = useState<ExtendedBlock | null | undefined>();
   useEffect(() => {
     if (!provider) {
-      return;
+      return undefined;
     }
 
     const _readBlock = async () => {
@@ -199,7 +202,7 @@ export const useTxData = (
           return;
         }
 
-        let _block: ExtendedBlock | undefined;
+        let _block: ExtendedBlock | null | undefined;
         if (_response.blockNumber) {
           _block = await readBlock(provider, _response.blockNumber.toString());
         }

From 088781babb36703e77744678a0166345595c85b6 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 18 Feb 2022 04:11:10 -0300
Subject: [PATCH 2/2] Fix negative block numbers

---
 src/components/BlockNotFound.tsx | 8 +++-----
 src/useErigonHooks.ts            | 6 +++++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/BlockNotFound.tsx b/src/components/BlockNotFound.tsx
index 6a875db..b1ddee8 100644
--- a/src/components/BlockNotFound.tsx
+++ b/src/components/BlockNotFound.tsx
@@ -6,11 +6,9 @@ type BlockNotFoundProps = {
 };
 
 const BlockNotFound: React.FC<BlockNotFoundProps> = ({ blockNumberOrHash }) => (
-  <>
-    <ContentFrame>
-      <div className="py-4 text-sm">Block "{blockNumberOrHash}" not found.</div>
-    </ContentFrame>
-  </>
+  <ContentFrame>
+    <div className="py-4 text-sm">Block "{blockNumberOrHash}" not found.</div>
+  </ContentFrame>
 );
 
 export default React.memo(BlockNotFound);
diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts
index c0d958b..ad9b0b8 100644
--- a/src/useErigonHooks.ts
+++ b/src/useErigonHooks.ts
@@ -43,7 +43,11 @@ export const readBlock = async (
       blockNumberOrHash,
     ]);
   } else {
-    blockPromise = provider.send("ots_getBlockDetails", [blockNumberOrHash]);
+    const blockNumber = parseInt(blockNumberOrHash);
+    if (isNaN(blockNumber) || blockNumber < 0) {
+      return null;
+    }
+    blockPromise = provider.send("ots_getBlockDetails", [blockNumber]);
   }
 
   const _rawBlock = await blockPromise;