Merge branch 'feature/chart-improvements' into develop

src/special/london/Blocks.tsx

@@ -7,7 +7,6 @@ import React, {
 } 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 {
@@ -20,40 +19,12 @@ import {
 import BlockRow from "./BlockRow";
 import { ExtendedBlock, readBlock } from "../../useErigonHooks";
 import { RuntimeContext } from "../../useRuntime";
+import { options, toChartData } from "./chart";
 
 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;
@@ -100,23 +71,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
     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]);
+  const data = useMemo(() => toChartData(blocks), [blocks]);
 
   // On page reload, pre-populate the last N blocks
   useEffect(

src/special/london/chart.ts

@@ -0,0 +1,66 @@
+import { ethers } from "ethers";
+import { ChartData, ChartOptions } from "chart.js";
+import { ExtendedBlock } from "../../useErigonHooks";
+
+export 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`,
+      },
+    },
+    yBaseFee: {
+      position: "right",
+      beginAtZero: true,
+      title: {
+        display: true,
+        text: "Base fee",
+      },
+      grid: {
+        drawOnChartArea: false
+      }
+    },
+  },
+};
+
+export const toChartData = (blocks: ExtendedBlock[]): ChartData => ({
+  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,
+    },
+    {
+      label: "Base fee (Gwei)",
+      data: blocks.map(b => b.baseFeePerGas!.toNumber()).reverse(),
+      yAxisID: "yBaseFee",
+      borderColor: "#FCA5A5",
+      tension: 0.2
+    }
+  ],
+});