Small refactorings

src/special/london/Blocks.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useContext, useMemo } from "react";
+import React, {
+  useState,
+  useEffect,
+  useContext,
+  useMemo,
+  useCallback,
+} from "react";
 import { ethers } from "ethers";
 import { Line } from "react-chartjs-2";
 import { ChartData, ChartOptions } from "chart.js";
@@ -47,23 +53,24 @@ const options: ChartOptions = {
 
 type BlocksProps = {
   latestBlock: ethers.providers.Block;
+  targetBlockNumber: number;
 };
 
-const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
+const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
   const { provider } = useContext(RuntimeContext);
   const [blocks, setBlock] = useState<ExtendedBlock[]>([]);
   const [now, setNow] = useState<number>(Date.now());
 
-  useEffect(() => {
+  const addBlock = useCallback(
+    async (blockNumber: number) => {
       if (!provider) {
         return;
       }
 
-    const _readBlock = async () => {
-      const extBlock = await readBlock(provider, latestBlock.number.toString());
+      const extBlock = await readBlock(provider, blockNumber.toString());
       setNow(Date.now());
       setBlock((_blocks) => {
-        if (_blocks.length > 0 && latestBlock.number === _blocks[0].number) {
+        if (_blocks.length > 0 && blockNumber === _blocks[0].number) {
           return _blocks;
         }
 
@@ -74,12 +81,16 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
         );
 
         // Little hack to fix out of order block notifications
-        newBlocks.sort((a, b) => a.number - b.number);
+        newBlocks.sort((a, b) => b.number - a.number);
         return newBlocks;
       });
-    };
-    _readBlock();
-  }, [provider, latestBlock]);
+    },
+    [provider]
+  );
+
+  useEffect(() => {
+    addBlock(latestBlock.number);
+  }, [addBlock, latestBlock]);
 
   const data: ChartData = useMemo(() => {
     return {

src/special/london/London.tsx

@@ -3,13 +3,7 @@ import { useLatestBlock } from "../../useLatestBlock";
 import { RuntimeContext } from "../../useRuntime";
 import Countdown from "./Countdown";
 import Blocks from "./Blocks";
-
-const londonBlockNumber: { [chainId: string]: number } = {
-  "1": 12965000,
-  "3": 10499401,
-  "4": 8897988,
-  "5": 5062605,
-};
+import { londonBlockNumber } from "./params";
 
 const London: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
@@ -31,7 +25,7 @@ const London: React.FC = () => {
     );
   }
 
-  return <Blocks latestBlock={block} />;
+  return <Blocks latestBlock={block} targetBlockNumber={targetBlockNumber} />;
 };
 
 export default React.memo(London);

src/special/london/params.ts

@@ -0,0 +1,6 @@
+export const londonBlockNumber: { [chainId: string]: number } = {
+  "1": 12965000,
+  "3": 10499401,
+  "4": 8897988,
+  "5": 5062605,
+};