First pass at burnt chart

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/special/Blocks.tsx

@@ -1,5 +1,7 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext, useMemo } 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 {
@@ -14,6 +16,35 @@ import { RuntimeContext } from "../useRuntime";
 
 const MAX_BLOCK_HISTORY = 20;
 
+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;
 };
@@ -41,10 +72,31 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
     _readBlock();
   }, [provider, 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]);
+
   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>
+          <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} />
@@ -73,29 +125,6 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
           </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}