Merge branch 'feature/chart-tweaks' into develop

src/special/london/Blip.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import { Transition } from "@headlessui/react";
+
+type BlipProps = {
+  value: number;
+};
+
+const Blip: React.FC<BlipProps> = ({ value }) => {
+  const [show, setShow] = useState<boolean>(true);
+
+  return (
+    <Transition
+      show
+      appear
+      enter="transition transform ease-in duration-1000 translate-x-full pl-3"
+      enterFrom="opacity-100 translate-y-0"
+      enterTo="opacity-0 -translate-y-5"
+      afterEnter={() => setShow(false)}
+    >
+      {show && value !== 0 && (
+        <div
+          className={`absolute bottom-0 font-bold ${
+            value > 0 ? "text-green-500" : "text-red-500"
+          } text-3xl`}
+        >
+          {value > 0 ? `+${value}` : `-${value}`}
+        </div>
+      )}
+    </Transition>
+  );
+};
+
+export default React.memo(Blip);

src/special/london/BlockRow.tsx

@@ -1,17 +1,19 @@
-import { ethers } from "ethers";
 import React from "react";
+import { ethers } from "ethers";
 import BlockLink from "../../components/BlockLink";
 import TimestampAge from "../../components/TimestampAge";
 import { ExtendedBlock } from "../../useErigonHooks";
+import Blip from "./Blip";
 
 const ELASTICITY_MULTIPLIER = 2;
 
 type BlockRowProps = {
   now: number;
   block: ExtendedBlock;
+  baseFeeDelta: number;
 };
 
-const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
+const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
   const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
   const burntFees =
     block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
@@ -19,7 +21,7 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
   const totalReward = block.blockReward.add(netFeeReward ?? 0);
 
   return (
-    <div className="grid grid-cols-8 px-3 py-2 hover:bg-gray-100">
+    <div className="grid grid-cols-8 gap-x-2 px-3 py-2 hover:bg-gray-100">
       <div>
         <BlockLink blockTag={block.number} />
       </div>
@@ -37,7 +39,12 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
       <div className="text-right text-gray-400">
         {ethers.utils.commify(gasTarget.toString())}
       </div>
-      <div className="text-right">{block.baseFeePerGas?.toString()} wei</div>
+      <div className="text-right">
+        <div className="relative">
+          <span>{block.baseFeePerGas?.toString()} wei</span>
+          <Blip value={baseFeeDelta} />
+        </div>
+      </div>
       <div className="text-right col-span-2">
         {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
       </div>

src/special/london/Blocks.tsx

@@ -106,7 +106,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
         <div>
           <Line data={data} height={100} options={options} />
         </div>
-        <div className="mt-5 grid grid-cols-8 px-3 py-2">
+        <div className="mt-5 grid grid-cols-8 gap-x-2 px-3 py-2">
           <div className="flex space-x-1 items-baseline">
             <span className="text-gray-500">
               <FontAwesomeIcon icon={faCube} />
@@ -140,7 +140,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
             <span>Age</span>
           </div>
         </div>
-        {blocks.map((b, i) => (
+        {blocks.map((b, i, all) => (
           <Transition
             key={b.hash}
             show={i < MAX_BLOCK_HISTORY}
@@ -152,7 +152,15 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-10"
           >
-            <BlockRow now={now} block={b} />
+            <BlockRow
+              now={now}
+              block={b}
+              baseFeeDelta={
+                i < all.length - 1
+                  ? b.baseFeePerGas!.sub(all[i + 1].baseFeePerGas!).toNumber()
+                  : 0
+              }
+            />
           </Transition>
         ))}
       </div>

src/special/london/chart.ts

@@ -51,15 +51,15 @@ export const toChartData = (blocks: ExtendedBlock[]): ChartData => ({
         .map((b) => b.gasUsed.mul(b.baseFeePerGas!).toNumber() / 1e9)
         .reverse(),
       fill: true,
-      backgroundColor: "#FDBA74",
-      borderColor: "#F97316",
+      backgroundColor: "#FDBA7470",
+      borderColor: "#FB923C",
       tension: 0.2,
     },
     {
       label: "Base fee (Gwei)",
       data: blocks.map(b => b.baseFeePerGas!.toNumber()).reverse(),
       yAxisID: "yBaseFee",
-      borderColor: "#FCA5A5",
+      borderColor: "#38BDF8",
       tension: 0.2
     }
   ],