Fix block number not found

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">

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);

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(

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());
         }