Merge branch 'feature/burn-chart' into feature/special-london

package-lock.json

@@ -29,10 +29,12 @@
         "@types/react-blockies": "^1.4.1",
         "@types/react-dom": "^17.0.9",
         "@types/react-router-dom": "^5.1.8",
+        "chart.js": "^3.5.0",
         "ethers": "^5.4.1",
         "query-string": "^7.0.1",
         "react": "^17.0.2",
         "react-blockies": "^1.4.1",
+        "react-chartjs-2": "^3.0.4",
         "react-dom": "^17.0.2",
         "react-error-boundary": "^3.1.3",
         "react-image": "^4.0.3",
@@ -5514,6 +5516,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/chart.js": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.0.tgz",
+      "integrity": "sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA=="
+    },
     "node_modules/check-types": {
       "version": "11.1.2",
       "license": "MIT"
@@ -14064,6 +14071,18 @@
         "react": ">=15.0.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.4.tgz",
+      "integrity": "sha512-pcbFNpkPMTkGXXJ7k7hnukbRD0ZV01qB6JQY1ontITc2IYvhGlK6BBDy28VeydYs1Dl/c5ZpRgRVEtT5GUnxcQ==",
+      "dependencies": {
+        "lodash": "^4.17.19"
+      },
+      "peerDependencies": {
+        "chart.js": "^3.1.0",
+        "react": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "11.0.4",
       "license": "MIT",
@@ -22785,6 +22804,11 @@
     "char-regex": {
       "version": "1.0.2"
     },
+    "chart.js": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.0.tgz",
+      "integrity": "sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA=="
+    },
     "check-types": {
       "version": "11.1.2"
     },
@@ -28459,6 +28483,14 @@
         "prop-types": "^15.5.10"
       }
     },
+    "react-chartjs-2": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.4.tgz",
+      "integrity": "sha512-pcbFNpkPMTkGXXJ7k7hnukbRD0ZV01qB6JQY1ontITc2IYvhGlK6BBDy28VeydYs1Dl/c5ZpRgRVEtT5GUnxcQ==",
+      "requires": {
+        "lodash": "^4.17.19"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "requires": {

package.json

@@ -25,10 +25,12 @@
     "@types/react-blockies": "^1.4.1",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.8",
+    "chart.js": "^3.5.0",
     "ethers": "^5.4.1",
     "query-string": "^7.0.1",
     "react": "^17.0.2",
     "react-blockies": "^1.4.1",
+    "react-chartjs-2": "^3.0.4",
     "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.3",
     "react-image": "^4.0.3",

src/App.tsx

@@ -5,7 +5,7 @@ import Home from "./Home";
 import Search from "./Search";
 import Title from "./Title";
 import ConnectionErrorPanel from "./ConnectionErrorPanel";
-import London from "./special/London";
+import London from "./special/london/London";
 import Footer from "./Footer";
 import { ConnectionStatus } from "./types";
 import { RuntimeContext, useRuntime } from "./useRuntime";

src/special/Blocks.tsx

@@ -1,119 +0,0 @@
-import React, { useState, useEffect, useContext } from "react";
-import { ethers } from "ethers";
-import { Transition } from "@headlessui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faBurn,
-  faCoins,
-  faCube,
-  faGasPump,
-} from "@fortawesome/free-solid-svg-icons";
-import BlockRecord from "./BlockRecord";
-import { ExtendedBlock, readBlock } from "../useErigonHooks";
-import { RuntimeContext } from "../useRuntime";
-
-const MAX_BLOCK_HISTORY = 20;
-
-type BlocksProps = {
-  latestBlock: ethers.providers.Block;
-};
-
-const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
-  const { provider } = useContext(RuntimeContext);
-  const [blocks, setBlock] = useState<ExtendedBlock[]>([]);
-  const [now, setNow] = useState<number>(Date.now());
-
-  useEffect(() => {
-    if (!provider) {
-      return;
-    }
-
-    const _readBlock = async () => {
-      const extBlock = await readBlock(provider, latestBlock.number.toString());
-      setNow(Date.now());
-      setBlock((_blocks) => {
-        if (_blocks.length > 0 && latestBlock.number === _blocks[0].number) {
-          return _blocks;
-        }
-        return [extBlock, ..._blocks].slice(0, MAX_BLOCK_HISTORY + 1);
-      });
-    };
-    _readBlock();
-  }, [provider, latestBlock]);
-
-  return (
-    <div className="w-full mb-auto">
-      <div className="px-9 pt-3 pb-12 divide-y-2">
-        <div className="grid grid-cols-8 px-3 py-2">
-          <div className="flex space-x-1 items-baseline">
-            <span className="text-gray-500">
-              <FontAwesomeIcon icon={faCube} />
-            </span>
-            <span>Block</span>
-          </div>
-          <div className="text-right flex space-x-1 justify-end items-baseline">
-            <span className="text-gray-500">
-              <FontAwesomeIcon icon={faGasPump} />
-            </span>
-            <span>Gas used</span>
-          </div>
-          <div className="text-right">Gas target</div>
-          <div className="text-right">Base fee</div>
-          <div className="text-right col-span-2 flex space-x-1 justify-end items-baseline">
-            <span className="text-yellow-400">
-              <FontAwesomeIcon icon={faCoins} />
-            </span>
-            <span>Rewards</span>
-          </div>
-          <div className="text-right flex space-x-1 justify-end items-baseline">
-            <span className="text-orange-500">
-              <FontAwesomeIcon icon={faBurn} />
-            </span>
-            <span>Burnt fees</span>
-          </div>
-          <div className="text-right">Age</div>
-        </div>
-        <div className="grid grid-cols-8 px-3 py-3 animate-pulse items-center">
-          <div>
-            <div className="w-20 h-4 bg-gray-200 rounded-md"></div>
-          </div>
-          <div className="justify-self-end">
-            <div className="w-20 h-4 bg-gray-200 rounded-md"></div>
-          </div>
-          <div className="justify-self-end">
-            <div className="w-20 h-4 bg-gray-200 rounded-md"></div>
-          </div>
-          <div className="justify-self-end">
-            <div className="w-10 h-4 bg-gray-200 rounded-md"></div>
-          </div>
-          <div className="justify-self-end col-span-2">
-            <div className="w-56 h-4 bg-gray-200 rounded-md"></div>
-          </div>
-          <div className="justify-self-end">
-            <div className="w-36 h-4 bg-gray-200 rounded-md"></div>
-          </div>
-          <div className="justify-self-end">
-            <div className="w-36 h-4 bg-gray-200 rounded-md"></div>
-          </div>
-        </div>
-        {blocks.map((b, i) => (
-          <Transition
-            key={b.hash}
-            show={i < MAX_BLOCK_HISTORY}
-            appear
-            enter="transition transform ease-out duration-500"
-            enterFrom="opacity-0 -translate-y-10"
-            enterTo="opacity-100 translate-y-0"
-            leave="transition transform ease-out duration-1000"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 translate-y-10"
-          >
-            <BlockRecord now={now} block={b} />
-          </Transition>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default React.memo(Blocks);

src/special/london/BlockRow.tsx

@@ -1,17 +1,17 @@
 import { ethers } from "ethers";
 import React from "react";
-import BlockLink from "../components/BlockLink";
+import BlockLink from "../../components/BlockLink";
-import TimestampAge from "../components/TimestampAge";
+import TimestampAge from "../../components/TimestampAge";
-import { ExtendedBlock } from "../useErigonHooks";
+import { ExtendedBlock } from "../../useErigonHooks";
 
 const ELASTICITY_MULTIPLIER = 2;
 
-type BlockRecordProps = {
+type BlockRowProps = {
   now: number;
   block: ExtendedBlock;
 };
 
-const BlockRecord: React.FC<BlockRecordProps> = ({ now, block }) => {
+const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
   const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
   const burntFees =
     block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
@@ -57,4 +57,4 @@ const BlockRecord: React.FC<BlockRecordProps> = ({ now, block }) => {
   );
 };
 
-export default React.memo(BlockRecord);
+export default React.memo(BlockRow);

src/special/london/Blocks.tsx

@@ -0,0 +1,193 @@
+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";
+import { Transition } from "@headlessui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faBurn,
+  faCoins,
+  faCube,
+  faGasPump,
+} from "@fortawesome/free-solid-svg-icons";
+import BlockRow from "./BlockRow";
+import { ExtendedBlock, readBlock } from "../../useErigonHooks";
+import { RuntimeContext } from "../../useRuntime";
+
+const MAX_BLOCK_HISTORY = 20;
+
+const PREV_BLOCK_COUNT = 15;
+
+const options: ChartOptions = {
+  animation: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+  scales: {
+    x: {
+      ticks: {
+        callback: function (v) {
+          // @ts-ignore
+          return ethers.utils.commify(this.getLabelForValue(v));
+        },
+      },
+    },
+    y: {
+      beginAtZero: true,
+      title: {
+        display: true,
+        text: "Burnt fees",
+      },
+      ticks: {
+        callback: (v) => `${v} Gwei`,
+      },
+    },
+  },
+};
+
+type BlocksProps = {
+  latestBlock: ethers.providers.Block;
+  targetBlockNumber: number;
+};
+
+const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
+  const { provider } = useContext(RuntimeContext);
+  const [blocks, setBlock] = useState<ExtendedBlock[]>([]);
+  const [now, setNow] = useState<number>(Date.now());
+
+  const addBlock = useCallback(
+    async (blockNumber: number) => {
+      if (!provider) {
+        return;
+      }
+
+      // Skip blocks before the hard fork during the transition
+      if (blockNumber < targetBlockNumber) {
+        return;
+      }
+
+      const extBlock = await readBlock(provider, blockNumber.toString());
+      setNow(Date.now());
+      setBlock((_blocks) => {
+        if (_blocks.length > 0 && blockNumber === _blocks[0].number) {
+          return _blocks;
+        }
+
+        // Leave the last block because of transition animation
+        const newBlocks = [extBlock, ..._blocks].slice(
+          0,
+          MAX_BLOCK_HISTORY + 1
+        );
+
+        // Little hack to fix out of order block notifications
+        newBlocks.sort((a, b) => b.number - a.number);
+        return newBlocks;
+      });
+    },
+    [provider, targetBlockNumber]
+  );
+
+  useEffect(() => {
+    addBlock(latestBlock.number);
+  }, [addBlock, latestBlock]);
+
+  const data: ChartData = useMemo(() => {
+    return {
+      labels: blocks.map((b) => b.number.toString()).reverse(),
+      datasets: [
+        {
+          label: "Burnt fees (Gwei)",
+          data: blocks
+            .map((b) => b.gasUsed.mul(b.baseFeePerGas!).toNumber() / 1e9)
+            .reverse(),
+          fill: true,
+          backgroundColor: "#FDBA74",
+          borderColor: "#F97316",
+          tension: 0.2,
+        },
+      ],
+    };
+  }, [blocks]);
+
+  // On page reload, pre-populate the last N blocks
+  useEffect(
+    () => {
+      const addPreviousBlocks = async () => {
+        for (
+          let i = latestBlock.number - PREV_BLOCK_COUNT;
+          i < latestBlock.number;
+          i++
+        ) {
+          await addBlock(i);
+        }
+      };
+      addPreviousBlocks();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return (
+    <div className="w-full mb-auto">
+      <div className="px-9 pt-3 pb-12 divide-y-2">
+        <div>
+          <Line data={data} height={100} options={options} />
+        </div>
+        <div className="mt-5 grid grid-cols-8 px-3 py-2">
+          <div className="flex space-x-1 items-baseline">
+            <span className="text-gray-500">
+              <FontAwesomeIcon icon={faCube} />
+            </span>
+            <span>Block</span>
+          </div>
+          <div className="text-right flex space-x-1 justify-end items-baseline">
+            <span className="text-gray-500">
+              <FontAwesomeIcon icon={faGasPump} />
+            </span>
+            <span>Gas used</span>
+          </div>
+          <div className="text-right">Gas target</div>
+          <div className="text-right">Base fee</div>
+          <div className="text-right col-span-2 flex space-x-1 justify-end items-baseline">
+            <span className="text-yellow-400">
+              <FontAwesomeIcon icon={faCoins} />
+            </span>
+            <span>Rewards</span>
+          </div>
+          <div className="text-right flex space-x-1 justify-end items-baseline">
+            <span className="text-orange-500">
+              <FontAwesomeIcon icon={faBurn} />
+            </span>
+            <span>Burnt fees</span>
+          </div>
+          <div className="text-right">Age</div>
+        </div>
+        {blocks.map((b, i) => (
+          <Transition
+            key={b.hash}
+            show={i < MAX_BLOCK_HISTORY}
+            appear
+            enter="transition transform ease-out duration-500"
+            enterFrom="opacity-0 -translate-y-10"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition transform ease-out duration-1000"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-10"
+          >
+            <BlockRow now={now} block={b} />
+          </Transition>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(Blocks);

src/special/london/London.tsx

@@ -1,15 +1,9 @@
 import React, { useContext } from "react";
-import { useLatestBlock } from "../useLatestBlock";
+import { useLatestBlock } from "../../useLatestBlock";
-import { RuntimeContext } from "../useRuntime";
+import { RuntimeContext } from "../../useRuntime";
 import Countdown from "./Countdown";
 import Blocks from "./Blocks";
-
+import { londonBlockNumber } from "./params";
-const londonBlockNumber: { [chainId: string]: number } = {
-  "1": 12965000,
-  "3": 10499401,
-  "4": 8897988,
-  "5": 5062605,
-};
 
 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,
+};