From 49315ec7e7d4bf2ab8ed578024d47fc36366d501 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 29 Jul 2021 01:24:39 -0300
Subject: [PATCH 01/19] London countdown

---
 src/App.tsx               |  4 +++
 src/Home.tsx              |  5 ++++
 src/special/Countdown.tsx | 52 +++++++++++++++++++++++++++++++++++++++
 src/special/London.tsx    | 29 ++++++++++++++++++++++
 4 files changed, 90 insertions(+)
 create mode 100644 src/special/Countdown.tsx
 create mode 100644 src/special/London.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 72326ee..b7f3620 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import Home from "./Home";
 import Search from "./Search";
 import Title from "./Title";
 import ConnectionErrorPanel from "./ConnectionErrorPanel";
+import London from "./special/London";
 import Footer from "./Footer";
 import { ConnectionStatus } from "./types";
 import { RuntimeContext, useRuntime } from "./useRuntime";
@@ -36,6 +37,9 @@ const App = () => {
                 <Route path="/search" exact>
                   <Search />
                 </Route>
+                <Route path="/special/london" exact>
+                  <London />
+                </Route>
                 <Route>
                   <div className="mb-auto">
                     <Title />
diff --git a/src/Home.tsx b/src/Home.tsx
index d4f3afa..fc969a2 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -54,6 +54,11 @@ const Home: React.FC = () => {
         >
           Search
         </button>
+        <div className="mx-auto mt-5 mb-5 text-lg text-link-blue hover:text-link-blue-hover font-bold">
+          <NavLink to="/special/london">
+            Check the special dashboard for EIP-1559
+          </NavLink>
+        </div>
         {latestBlock && (
           <NavLink
             className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
diff --git a/src/special/Countdown.tsx b/src/special/Countdown.tsx
new file mode 100644
index 0000000..0d41dbb
--- /dev/null
+++ b/src/special/Countdown.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react";
+import { ethers } from "ethers";
+
+type CountdownProps = {
+  provider: ethers.providers.JsonRpcProvider;
+  currentBlock: ethers.providers.Block;
+  targetBlock: number;
+};
+
+const Countdown: React.FC<CountdownProps> = ({
+  provider,
+  currentBlock,
+  targetBlock,
+}) => {
+  const [targetTimestamp, setTargetTimestamp] = useState<number>();
+
+  useEffect(() => {
+    const calcTime = async () => {
+      const diff = targetBlock - currentBlock.number;
+      const _prevBlock = await provider.getBlock(currentBlock.number - diff);
+      const _targetTimestamp =
+        currentBlock.timestamp +
+        (currentBlock.timestamp - _prevBlock.timestamp);
+      setTargetTimestamp(_targetTimestamp);
+    };
+    calcTime();
+  }, [provider, currentBlock, targetBlock]);
+
+  return (
+    <div className="w-full h-full flex">
+      <div className="m-auto text-center">
+        <h1 className="text-6xl mb-10">London Network Upgrade</h1>
+        <h2 className="text-5xl">
+          {ethers.utils.commify(targetBlock - currentBlock.number)}
+        </h2>
+        <h6 className="text-sm mb-10">Block remaining</h6>
+        <h2 className="inline-flex space-x-10 text-base mb-10">
+          <div>Current block: {ethers.utils.commify(currentBlock.number)}</div>
+          <div>Target block: {ethers.utils.commify(targetBlock)}</div>
+        </h2>
+        {targetTimestamp && (
+          <div className="text-lg">
+            {new Date(targetTimestamp * 1000).toLocaleDateString()} @{" "}
+            {new Date(targetTimestamp * 1000).toLocaleTimeString()} (Estimative)
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(Countdown);
diff --git a/src/special/London.tsx b/src/special/London.tsx
new file mode 100644
index 0000000..77b48cc
--- /dev/null
+++ b/src/special/London.tsx
@@ -0,0 +1,29 @@
+import React, { useContext } from "react";
+import { useLatestBlock } from "../useLatestBlock";
+import { RuntimeContext } from "../useRuntime";
+import Countdown from "./Countdown";
+
+const londonBlockNumber = 12965000;
+
+const London: React.FC = () => {
+  const { provider } = useContext(RuntimeContext);
+  const block = useLatestBlock(provider);
+  if (!block) {
+    return <></>;
+  }
+
+  // Display countdown
+  if (provider && block.number < londonBlockNumber) {
+    return (
+      <Countdown
+        provider={provider}
+        currentBlock={block}
+        targetBlock={londonBlockNumber}
+      />
+    );
+  }
+
+  return <div className="w-full h-full"></div>;
+};
+
+export default React.memo(London);

From 97e46108cc7113b16f5a923c0ac302d78e68a1e4 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 29 Jul 2021 03:05:05 -0300
Subject: [PATCH 02/19] Set london hardfork block numbers per network id

---
 src/special/London.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/special/London.tsx b/src/special/London.tsx
index 77b48cc..65e7ba4 100644
--- a/src/special/London.tsx
+++ b/src/special/London.tsx
@@ -3,22 +3,29 @@ import { useLatestBlock } from "../useLatestBlock";
 import { RuntimeContext } from "../useRuntime";
 import Countdown from "./Countdown";
 
-const londonBlockNumber = 12965000;
+const londonBlockNumber: { [chainId: string]: number } = {
+  "1": 12965000,
+  "3": 10499401,
+  "4": 8897988,
+  "5": 5062605,
+};
 
 const London: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
   const block = useLatestBlock(provider);
-  if (!block) {
+  if (!provider || !block) {
     return <></>;
   }
 
   // Display countdown
-  if (provider && block.number < londonBlockNumber) {
+  const targetBlockNumber =
+    londonBlockNumber[provider.network.chainId.toString()];
+  if (block.number < targetBlockNumber) {
     return (
       <Countdown
         provider={provider}
         currentBlock={block}
-        targetBlock={londonBlockNumber}
+        targetBlock={targetBlockNumber}
       />
     );
   }

From aba239bf8c489f339ba67cc9cfe2e1bd94af334d Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 29 Jul 2021 15:09:28 -0300
Subject: [PATCH 03/19] First iteration at showing incoming blocks

---
 src/special/BlockRecord.tsx | 55 +++++++++++++++++++++++
 src/special/Blocks.tsx      | 65 +++++++++++++++++++++++++++
 src/special/London.tsx      |  3 +-
 src/useErigonHooks.ts       | 90 +++++++++++++++++++------------------
 4 files changed, 168 insertions(+), 45 deletions(-)
 create mode 100644 src/special/BlockRecord.tsx
 create mode 100644 src/special/Blocks.tsx

diff --git a/src/special/BlockRecord.tsx b/src/special/BlockRecord.tsx
new file mode 100644
index 0000000..01a499a
--- /dev/null
+++ b/src/special/BlockRecord.tsx
@@ -0,0 +1,55 @@
+import { ethers } from "ethers";
+import React from "react";
+import BlockLink from "../components/BlockLink";
+import { ExtendedBlock } from "../useErigonHooks";
+
+const ELASTICITY_MULTIPLIER = 2;
+
+type BlockRecordProps = {
+  block: ExtendedBlock;
+};
+
+const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => {
+  const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
+  const burntFees =
+    block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
+  const netFeeReward = block && block.feeReward.sub(burntFees ?? 0);
+  const totalReward = block.blockReward.add(netFeeReward ?? 0);
+
+  return (
+    <div className="grid grid-cols-8 px-3 py-2">
+      <div>
+        <BlockLink blockTag={block.number} />
+      </div>
+      <div className="text-right">{block.baseFeePerGas?.toString()} wei</div>
+      <div
+        className={`text-right ${
+          block.gasUsed.gt(gasTarget)
+            ? "text-green-500"
+            : block.gasUsed.lt(gasTarget)
+            ? "text-red-500"
+            : ""
+        }`}
+      >
+        {ethers.utils.commify(block.gasUsed.toString())}
+      </div>
+      <div className="text-right">
+        {ethers.utils.commify(
+          ethers.utils.formatUnits(
+            block.gasUsed.mul(block.baseFeePerGas!).toString(),
+            9
+          )
+        )}{" "}
+        Gwei
+      </div>
+      <div className="text-right">
+        {ethers.utils.commify(gasTarget.toString())}
+      </div>
+      <div className="text-right col-span-2">
+        {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(BlockRecord);
diff --git a/src/special/Blocks.tsx b/src/special/Blocks.tsx
new file mode 100644
index 0000000..d1cc325
--- /dev/null
+++ b/src/special/Blocks.tsx
@@ -0,0 +1,65 @@
+import React, { useState, useEffect, useContext } from "react";
+import { ethers } from "ethers";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBurn, faGasPump } from "@fortawesome/free-solid-svg-icons";
+import BlockRecord from "./BlockRecord";
+import { ExtendedBlock, readBlock } from "../useErigonHooks";
+import { RuntimeContext } from "../useRuntime";
+
+const MAX_BLOCK_HISTORY = 10;
+
+type BlocksProps = {
+  latestBlock: ethers.providers.Block;
+};
+
+const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
+  const { provider } = useContext(RuntimeContext);
+  const [blocks, setBlock] = useState<ExtendedBlock[]>([]);
+
+  useEffect(() => {
+    if (!provider) {
+      return;
+    }
+
+    const _readBlock = async () => {
+      const extBlock = await readBlock(provider, latestBlock.number.toString());
+      setBlock((_blocks) => {
+        if (_blocks.length > 0 && latestBlock.number === _blocks[0].number) {
+          return _blocks;
+        }
+        return [extBlock, ..._blocks].slice(0, MAX_BLOCK_HISTORY);
+      });
+    };
+    _readBlock();
+  }, [provider, latestBlock]);
+
+  return (
+    <div className="w-full h-full">
+      <div className="m-10 divide-y-2">
+        <div className="grid grid-cols-8 px-3 py-2">
+          <div>Block</div>
+          <div className="text-right">Base fee</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 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">Gas target</div>
+          <div className="text-right col-span-2">Rewards</div>
+        </div>
+        {blocks.map((b) => (
+          <BlockRecord key={b.hash} block={b} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(Blocks);
diff --git a/src/special/London.tsx b/src/special/London.tsx
index 65e7ba4..b4d211c 100644
--- a/src/special/London.tsx
+++ b/src/special/London.tsx
@@ -2,6 +2,7 @@ import React, { useContext } from "react";
 import { useLatestBlock } from "../useLatestBlock";
 import { RuntimeContext } from "../useRuntime";
 import Countdown from "./Countdown";
+import Blocks from "./Blocks";
 
 const londonBlockNumber: { [chainId: string]: number } = {
   "1": 12965000,
@@ -30,7 +31,7 @@ const London: React.FC = () => {
     );
   }
 
-  return <div className="w-full h-full"></div>;
+  return <Blocks latestBlock={block} />;
 };
 
 export default React.memo(London);
diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts
index ecbda33..d11d2f5 100644
--- a/src/useErigonHooks.ts
+++ b/src/useErigonHooks.ts
@@ -13,6 +13,49 @@ export interface ExtendedBlock extends ethers.providers.Block {
   totalDifficulty: BigNumber;
 }
 
+export const readBlock = async (
+  provider: ethers.providers.JsonRpcProvider,
+  blockNumberOrHash: string
+) => {
+  let blockPromise: Promise<any>;
+  if (ethers.utils.isHexString(blockNumberOrHash, 32)) {
+    blockPromise = provider.send("eth_getBlockByHash", [
+      blockNumberOrHash,
+      false,
+    ]);
+  } else {
+    blockPromise = provider.send("eth_getBlockByNumber", [
+      blockNumberOrHash,
+      false,
+    ]);
+  }
+  const [_rawBlock, _rawIssuance, _rawReceipts] = await Promise.all([
+    blockPromise,
+    provider.send("erigon_issuance", [blockNumberOrHash]),
+    provider.send("eth_getBlockReceipts", [blockNumberOrHash]),
+  ]);
+  const receipts = (_rawReceipts as any[]).map((r) =>
+    provider.formatter.receipt(r)
+  );
+  const fees = receipts.reduce(
+    (acc, r) => acc.add(r.effectiveGasPrice.mul(r.gasUsed)),
+    BigNumber.from(0)
+  );
+
+  const _block = provider.formatter.block(_rawBlock);
+  const extBlock: ExtendedBlock = {
+    blockReward: provider.formatter.bigNumber(_rawIssuance.blockReward ?? 0),
+    unclesReward: provider.formatter.bigNumber(_rawIssuance.uncleReward ?? 0),
+    feeReward: fees,
+    size: provider.formatter.number(_rawBlock.size),
+    sha3Uncles: _rawBlock.sha3Uncles,
+    stateRoot: _rawBlock.stateRoot,
+    totalDifficulty: provider.formatter.bigNumber(_rawBlock.totalDifficulty),
+    ..._block,
+  };
+  return extBlock;
+};
+
 export const useBlockData = (
   provider: ethers.providers.JsonRpcProvider | undefined,
   blockNumberOrHash: string
@@ -23,52 +66,11 @@ export const useBlockData = (
       return;
     }
 
-    const readBlock = async () => {
-      let blockPromise: Promise<any>;
-      if (ethers.utils.isHexString(blockNumberOrHash, 32)) {
-        blockPromise = provider.send("eth_getBlockByHash", [
-          blockNumberOrHash,
-          false,
-        ]);
-      } else {
-        blockPromise = provider.send("eth_getBlockByNumber", [
-          blockNumberOrHash,
-          false,
-        ]);
-      }
-      const [_rawBlock, _rawIssuance, _rawReceipts] = await Promise.all([
-        blockPromise,
-        provider.send("erigon_issuance", [blockNumberOrHash]),
-        provider.send("eth_getBlockReceipts", [blockNumberOrHash]),
-      ]);
-      const receipts = (_rawReceipts as any[]).map((r) =>
-        provider.formatter.receipt(r)
-      );
-      const fees = receipts.reduce(
-        (acc, r) => acc.add(r.effectiveGasPrice.mul(r.gasUsed)),
-        BigNumber.from(0)
-      );
-
-      const _block = provider.formatter.block(_rawBlock);
-      const extBlock: ExtendedBlock = {
-        blockReward: provider.formatter.bigNumber(
-          _rawIssuance.blockReward ?? 0
-        ),
-        unclesReward: provider.formatter.bigNumber(
-          _rawIssuance.uncleReward ?? 0
-        ),
-        feeReward: fees,
-        size: provider.formatter.number(_rawBlock.size),
-        sha3Uncles: _rawBlock.sha3Uncles,
-        stateRoot: _rawBlock.stateRoot,
-        totalDifficulty: provider.formatter.bigNumber(
-          _rawBlock.totalDifficulty
-        ),
-        ..._block,
-      };
+    const _readBlock = async () => {
+      const extBlock = await readBlock(provider, blockNumberOrHash);
       setBlock(extBlock);
     };
-    readBlock();
+    _readBlock();
   }, [provider, blockNumberOrHash]);
 
   return block;

From 3b6992bb6d10e885fe5a4b0d13af7a9d0517df14 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 29 Jul 2021 15:53:52 -0300
Subject: [PATCH 04/19] Add block enter/leave animation

---
 package-lock.json      | 19 +++++++++++++++++++
 package.json           |  1 +
 src/special/Blocks.tsx | 41 +++++++++++++++++++++++++++++++++++++----
 3 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 030da6f..c007f44 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@fortawesome/free-regular-svg-icons": "^5.15.3",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
         "@fortawesome/react-fontawesome": "^0.1.14",
+        "@headlessui/react": "^1.4.0",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
@@ -2106,6 +2107,18 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.0.tgz",
+      "integrity": "sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "license": "ISC",
@@ -20444,6 +20457,12 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@headlessui/react": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.0.tgz",
+      "integrity": "sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==",
+      "requires": {}
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "requires": {
diff --git a/package.json b/package.json
index 45622fc..ba22ba7 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
+    "@headlessui/react": "^1.4.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
diff --git a/src/special/Blocks.tsx b/src/special/Blocks.tsx
index d1cc325..afceb33 100644
--- a/src/special/Blocks.tsx
+++ b/src/special/Blocks.tsx
@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useContext } from "react";
 import { ethers } from "ethers";
+import { Transition } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBurn, faGasPump } from "@fortawesome/free-solid-svg-icons";
 import BlockRecord from "./BlockRecord";
 import { ExtendedBlock, readBlock } from "../useErigonHooks";
 import { RuntimeContext } from "../useRuntime";
 
-const MAX_BLOCK_HISTORY = 10;
+const MAX_BLOCK_HISTORY = 20;
 
 type BlocksProps = {
   latestBlock: ethers.providers.Block;
@@ -27,7 +28,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
         if (_blocks.length > 0 && latestBlock.number === _blocks[0].number) {
           return _blocks;
         }
-        return [extBlock, ..._blocks].slice(0, MAX_BLOCK_HISTORY);
+        return [extBlock, ..._blocks].slice(0, MAX_BLOCK_HISTORY + 1);
       });
     };
     _readBlock();
@@ -54,8 +55,40 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
           <div className="text-right">Gas target</div>
           <div className="text-right col-span-2">Rewards</div>
         </div>
-        {blocks.map((b) => (
-          <BlockRecord key={b.hash} block={b} />
+        <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-10 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-36 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 col-span-2">
+            <div className="w-56 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 block={b} />
+          </Transition>
         ))}
       </div>
     </div>

From 894b1370f13fed2cb76eb5506d191b431c18fbc4 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 29 Jul 2021 22:56:06 -0300
Subject: [PATCH 05/19] Fix bottom margin overlapping

---
 src/special/Blocks.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/special/Blocks.tsx b/src/special/Blocks.tsx
index afceb33..e5deccc 100644
--- a/src/special/Blocks.tsx
+++ b/src/special/Blocks.tsx
@@ -35,7 +35,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
   }, [provider, latestBlock]);
 
   return (
-    <div className="w-full h-full">
+    <div className="w-full mb-auto">
       <div className="m-10 divide-y-2">
         <div className="grid grid-cols-8 px-3 py-2">
           <div>Block</div>

From 16d22d5f730e11549fb4c2659f833bf851a9fce1 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 29 Jul 2021 23:05:23 -0300
Subject: [PATCH 06/19] Column reorder; add column icons

---
 src/special/BlockRecord.tsx | 14 ++++++------
 src/special/Blocks.tsx      | 43 +++++++++++++++++++++++++------------
 2 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/special/BlockRecord.tsx b/src/special/BlockRecord.tsx
index 01a499a..1cd20d4 100644
--- a/src/special/BlockRecord.tsx
+++ b/src/special/BlockRecord.tsx
@@ -21,7 +21,6 @@ const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => {
       <div>
         <BlockLink blockTag={block.number} />
       </div>
-      <div className="text-right">{block.baseFeePerGas?.toString()} wei</div>
       <div
         className={`text-right ${
           block.gasUsed.gt(gasTarget)
@@ -33,6 +32,13 @@ const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => {
       >
         {ethers.utils.commify(block.gasUsed.toString())}
       </div>
+      <div className="text-right">
+        {ethers.utils.commify(gasTarget.toString())}
+      </div>
+      <div className="text-right">{block.baseFeePerGas?.toString()} wei</div>
+      <div className="text-right col-span-2">
+        {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
+      </div>
       <div className="text-right">
         {ethers.utils.commify(
           ethers.utils.formatUnits(
@@ -42,12 +48,6 @@ const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => {
         )}{" "}
         Gwei
       </div>
-      <div className="text-right">
-        {ethers.utils.commify(gasTarget.toString())}
-      </div>
-      <div className="text-right col-span-2">
-        {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
-      </div>
     </div>
   );
 };
diff --git a/src/special/Blocks.tsx b/src/special/Blocks.tsx
index e5deccc..575845f 100644
--- a/src/special/Blocks.tsx
+++ b/src/special/Blocks.tsx
@@ -2,7 +2,12 @@ import React, { useState, useEffect, useContext } from "react";
 import { ethers } from "ethers";
 import { Transition } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBurn, faGasPump } from "@fortawesome/free-solid-svg-icons";
+import {
+  faBurn,
+  faCoins,
+  faCube,
+  faGasPump,
+} from "@fortawesome/free-solid-svg-icons";
 import BlockRecord from "./BlockRecord";
 import { ExtendedBlock, readBlock } from "../useErigonHooks";
 import { RuntimeContext } from "../useRuntime";
@@ -38,42 +43,52 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
     <div className="w-full mb-auto">
       <div className="m-10 divide-y-2">
         <div className="grid grid-cols-8 px-3 py-2">
-          <div>Block</div>
-          <div className="text-right">Base fee</div>
+          <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">Gas target</div>
-          <div className="text-right col-span-2">Rewards</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">
-            <div className="w-20 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-20 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>
         {blocks.map((b, i) => (
           <Transition

From aac878180af2116129122c8926188732f1787f95 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 29 Jul 2021 23:07:50 -0300
Subject: [PATCH 07/19] Hover highlight

---
 src/special/BlockRecord.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/special/BlockRecord.tsx b/src/special/BlockRecord.tsx
index 1cd20d4..6263a8e 100644
--- a/src/special/BlockRecord.tsx
+++ b/src/special/BlockRecord.tsx
@@ -17,7 +17,7 @@ const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => {
   const totalReward = block.blockReward.add(netFeeReward ?? 0);
 
   return (
-    <div className="grid grid-cols-8 px-3 py-2">
+    <div className="grid grid-cols-8 px-3 py-2 hover:bg-gray-100">
       <div>
         <BlockLink blockTag={block.number} />
       </div>

From 94faa79edef125024f36875becf88733a7e5c69c Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 29 Jul 2021 23:31:28 -0300
Subject: [PATCH 08/19] Fix type 2 gas column display raising exceptions

---
 src/BlockTransactions.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx
index 30d39c0..2ce687b 100644
--- a/src/BlockTransactions.tsx
+++ b/src/BlockTransactions.tsx
@@ -63,10 +63,18 @@ const BlockTransactions: React.FC = () => {
             to: t.to,
             createdContractAddress: _receipts[i].contractAddress,
             value: t.value,
-            fee: provider.formatter
-              .bigNumber(_receipts[i].gasUsed)
-              .mul(t.gasPrice!),
-            gasPrice: t.gasPrice!,
+            fee:
+              t.type !== 2
+                ? provider.formatter
+                    .bigNumber(_receipts[i].gasUsed)
+                    .mul(t.gasPrice!)
+                : provider.formatter
+                    .bigNumber(_receipts[i].gasUsed)
+                    .mul(t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!)),
+            gasPrice:
+              t.type !== 2
+                ? t.gasPrice!
+                : t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!),
             data: t.data,
             status: provider.formatter.number(_receipts[i].status),
           };

From 5bab1f383bae4a1b4d86df7de90b9813b8ecf34f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 29 Jul 2021 23:32:29 -0300
Subject: [PATCH 09/19] Display age column

---
 src/components/TimestampAge.tsx | 7 +++++--
 src/special/BlockRecord.tsx     | 4 ++++
 src/special/Blocks.tsx          | 4 ++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/TimestampAge.tsx b/src/components/TimestampAge.tsx
index 7849c14..20f4784 100644
--- a/src/components/TimestampAge.tsx
+++ b/src/components/TimestampAge.tsx
@@ -1,11 +1,14 @@
 import React from "react";
 
 type TimestampAgeProps = {
+  now?: number | undefined;
   timestamp: number;
 };
 
-const TimestampAge: React.FC<TimestampAgeProps> = ({ timestamp }) => {
-  const now = Date.now() / 1000;
+const TimestampAge: React.FC<TimestampAgeProps> = ({ now, timestamp }) => {
+  if (now === undefined) {
+    now = Date.now() / 1000;
+  }
   let diff = now - timestamp;
 
   let desc = "";
diff --git a/src/special/BlockRecord.tsx b/src/special/BlockRecord.tsx
index 6263a8e..22d3943 100644
--- a/src/special/BlockRecord.tsx
+++ b/src/special/BlockRecord.tsx
@@ -1,6 +1,7 @@
 import { ethers } from "ethers";
 import React from "react";
 import BlockLink from "../components/BlockLink";
+import TimestampAge from "../components/TimestampAge";
 import { ExtendedBlock } from "../useErigonHooks";
 
 const ELASTICITY_MULTIPLIER = 2;
@@ -48,6 +49,9 @@ const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => {
         )}{" "}
         Gwei
       </div>
+      <div className="text-right">
+        <TimestampAge timestamp={block.timestamp} />
+      </div>
     </div>
   );
 };
diff --git a/src/special/Blocks.tsx b/src/special/Blocks.tsx
index 575845f..0fd4525 100644
--- a/src/special/Blocks.tsx
+++ b/src/special/Blocks.tsx
@@ -69,6 +69,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
             </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>
@@ -89,6 +90,9 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
           <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

From a30498cf1d06d9e75775457aa63b3698521bde18 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 29 Jul 2021 23:38:58 -0300
Subject: [PATCH 10/19] Adjust margin

---
 src/special/Blocks.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/special/Blocks.tsx b/src/special/Blocks.tsx
index 0fd4525..03f7dbc 100644
--- a/src/special/Blocks.tsx
+++ b/src/special/Blocks.tsx
@@ -41,7 +41,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
 
   return (
     <div className="w-full mb-auto">
-      <div className="m-10 divide-y-2">
+      <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">

From cfaee9ccf214e5e36f5e62cd8dc7ee14e28c96a1 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 29 Jul 2021 23:46:59 -0300
Subject: [PATCH 11/19] Add dynamic refresh of age column

---
 src/special/BlockRecord.tsx | 5 +++--
 src/special/Blocks.tsx      | 4 +++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/special/BlockRecord.tsx b/src/special/BlockRecord.tsx
index 22d3943..da8ec3f 100644
--- a/src/special/BlockRecord.tsx
+++ b/src/special/BlockRecord.tsx
@@ -7,10 +7,11 @@ import { ExtendedBlock } from "../useErigonHooks";
 const ELASTICITY_MULTIPLIER = 2;
 
 type BlockRecordProps = {
+  now: number;
   block: ExtendedBlock;
 };
 
-const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => {
+const BlockRecord: React.FC<BlockRecordProps> = ({ now, block }) => {
   const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
   const burntFees =
     block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
@@ -50,7 +51,7 @@ const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => {
         Gwei
       </div>
       <div className="text-right">
-        <TimestampAge timestamp={block.timestamp} />
+        <TimestampAge now={now / 1000} timestamp={block.timestamp} />
       </div>
     </div>
   );
diff --git a/src/special/Blocks.tsx b/src/special/Blocks.tsx
index 03f7dbc..04828c9 100644
--- a/src/special/Blocks.tsx
+++ b/src/special/Blocks.tsx
@@ -21,6 +21,7 @@ type BlocksProps = {
 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) {
@@ -29,6 +30,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
 
     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;
@@ -106,7 +108,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-10"
           >
-            <BlockRecord block={b} />
+            <BlockRecord now={now} block={b} />
           </Transition>
         ))}
       </div>

From 1a21ef5e5abbc19131cfc11e8b0cb8b820772a9f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 30 Jul 2021 03:26:24 -0300
Subject: [PATCH 12/19] First pass at burnt chart

---
 package-lock.json      | 32 +++++++++++++++++
 package.json           |  2 ++
 src/special/Blocks.tsx | 79 +++++++++++++++++++++++++++++-------------
 3 files changed, 88 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c007f44..c192693 100644
--- a/package-lock.json
+++ b/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": {
diff --git a/package.json b/package.json
index ba22ba7..6392c67 100644
--- a/package.json
+++ b/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",
diff --git a/src/special/Blocks.tsx b/src/special/Blocks.tsx
index 04828c9..188873b 100644
--- a/src/special/Blocks.tsx
+++ b/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}

From 7e73f12c750228caec8110243c98cabb8fa47e84 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 30 Jul 2021 04:41:29 -0300
Subject: [PATCH 13/19] Move refactoring

---
 src/App.tsx                              | 2 +-
 src/special/{ => london}/BlockRecord.tsx | 6 +++---
 src/special/{ => london}/Blocks.tsx      | 4 ++--
 src/special/{ => london}/Countdown.tsx   | 0
 src/special/{ => london}/London.tsx      | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)
 rename src/special/{ => london}/BlockRecord.tsx (91%)
 rename src/special/{ => london}/Blocks.tsx (97%)
 rename src/special/{ => london}/Countdown.tsx (100%)
 rename src/special/{ => london}/London.tsx (88%)

diff --git a/src/App.tsx b/src/App.tsx
index b7f3620..4f1333d 100644
--- a/src/App.tsx
+++ b/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";
diff --git a/src/special/BlockRecord.tsx b/src/special/london/BlockRecord.tsx
similarity index 91%
rename from src/special/BlockRecord.tsx
rename to src/special/london/BlockRecord.tsx
index da8ec3f..1b23e65 100644
--- a/src/special/BlockRecord.tsx
+++ b/src/special/london/BlockRecord.tsx
@@ -1,8 +1,8 @@
 import { ethers } from "ethers";
 import React from "react";
-import BlockLink from "../components/BlockLink";
-import TimestampAge from "../components/TimestampAge";
-import { ExtendedBlock } from "../useErigonHooks";
+import BlockLink from "../../components/BlockLink";
+import TimestampAge from "../../components/TimestampAge";
+import { ExtendedBlock } from "../../useErigonHooks";
 
 const ELASTICITY_MULTIPLIER = 2;
 
diff --git a/src/special/Blocks.tsx b/src/special/london/Blocks.tsx
similarity index 97%
rename from src/special/Blocks.tsx
rename to src/special/london/Blocks.tsx
index 188873b..c7f5bb5 100644
--- a/src/special/Blocks.tsx
+++ b/src/special/london/Blocks.tsx
@@ -11,8 +11,8 @@ import {
   faGasPump,
 } from "@fortawesome/free-solid-svg-icons";
 import BlockRecord from "./BlockRecord";
-import { ExtendedBlock, readBlock } from "../useErigonHooks";
-import { RuntimeContext } from "../useRuntime";
+import { ExtendedBlock, readBlock } from "../../useErigonHooks";
+import { RuntimeContext } from "../../useRuntime";
 
 const MAX_BLOCK_HISTORY = 20;
 
diff --git a/src/special/Countdown.tsx b/src/special/london/Countdown.tsx
similarity index 100%
rename from src/special/Countdown.tsx
rename to src/special/london/Countdown.tsx
diff --git a/src/special/London.tsx b/src/special/london/London.tsx
similarity index 88%
rename from src/special/London.tsx
rename to src/special/london/London.tsx
index b4d211c..965d05c 100644
--- a/src/special/London.tsx
+++ b/src/special/london/London.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
-import { useLatestBlock } from "../useLatestBlock";
-import { RuntimeContext } from "../useRuntime";
+import { useLatestBlock } from "../../useLatestBlock";
+import { RuntimeContext } from "../../useRuntime";
 import Countdown from "./Countdown";
 import Blocks from "./Blocks";
 

From ba91e640fee0e05c05749de4a215575f7cc291ab Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 30 Jul 2021 04:42:39 -0300
Subject: [PATCH 14/19] Renames

---
 src/special/london/{BlockRecord.tsx => BlockRow.tsx} | 6 +++---
 src/special/london/Blocks.tsx                        | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename src/special/london/{BlockRecord.tsx => BlockRow.tsx} (92%)

diff --git a/src/special/london/BlockRecord.tsx b/src/special/london/BlockRow.tsx
similarity index 92%
rename from src/special/london/BlockRecord.tsx
rename to src/special/london/BlockRow.tsx
index 1b23e65..890446c 100644
--- a/src/special/london/BlockRecord.tsx
+++ b/src/special/london/BlockRow.tsx
@@ -6,12 +6,12 @@ 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);
diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx
index c7f5bb5..3e9732f 100644
--- a/src/special/london/Blocks.tsx
+++ b/src/special/london/Blocks.tsx
@@ -10,7 +10,7 @@ import {
   faCube,
   faGasPump,
 } from "@fortawesome/free-solid-svg-icons";
-import BlockRecord from "./BlockRecord";
+import BlockRow from "./BlockRow";
 import { ExtendedBlock, readBlock } from "../../useErigonHooks";
 import { RuntimeContext } from "../../useRuntime";
 
@@ -137,7 +137,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-10"
           >
-            <BlockRecord now={now} block={b} />
+            <BlockRow now={now} block={b} />
           </Transition>
         ))}
       </div>

From 15cbd3944587c095e8d894ebb866e7b2ee3a6b8f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 30 Jul 2021 04:46:39 -0300
Subject: [PATCH 15/19] Small fixes

---
 src/special/london/Blocks.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx
index 3e9732f..1cbead2 100644
--- a/src/special/london/Blocks.tsx
+++ b/src/special/london/Blocks.tsx
@@ -66,7 +66,16 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
         if (_blocks.length > 0 && latestBlock.number === _blocks[0].number) {
           return _blocks;
         }
-        return [extBlock, ..._blocks].slice(0, MAX_BLOCK_HISTORY + 1);
+
+        // 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) => a.number - b.number);
+        return newBlocks;
       });
     };
     _readBlock();

From 81a2771f38ea6b462092e2ac7f318082eea37bf5 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 30 Jul 2021 04:55:21 -0300
Subject: [PATCH 16/19] Small refactorings

---
 src/special/london/Blocks.tsx | 37 +++++++++++++++++++++++------------
 src/special/london/London.tsx | 10 ++--------
 src/special/london/params.ts  |  6 ++++++
 3 files changed, 32 insertions(+), 21 deletions(-)
 create mode 100644 src/special/london/params.ts

diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx
index 1cbead2..e510d5d 100644
--- a/src/special/london/Blocks.tsx
+++ b/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(() => {
-    if (!provider) {
-      return;
-    }
+  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 {
diff --git a/src/special/london/London.tsx b/src/special/london/London.tsx
index 965d05c..0663796 100644
--- a/src/special/london/London.tsx
+++ b/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);
diff --git a/src/special/london/params.ts b/src/special/london/params.ts
new file mode 100644
index 0000000..4f04caf
--- /dev/null
+++ b/src/special/london/params.ts
@@ -0,0 +1,6 @@
+export const londonBlockNumber: { [chainId: string]: number } = {
+  "1": 12965000,
+  "3": 10499401,
+  "4": 8897988,
+  "5": 5062605,
+};

From ba2bfb12ee1dd2ef2f41a4369dbccdc177dce4b3 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 30 Jul 2021 05:05:31 -0300
Subject: [PATCH 17/19] Preload prev blocks on page reload

---
 src/special/london/Blocks.tsx | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx
index e510d5d..e94f01e 100644
--- a/src/special/london/Blocks.tsx
+++ b/src/special/london/Blocks.tsx
@@ -22,6 +22,8 @@ import { RuntimeContext } from "../../useRuntime";
 
 const MAX_BLOCK_HISTORY = 20;
 
+const PREV_BLOCK_COUNT = 15;
+
 const options: ChartOptions = {
   animation: false,
   plugins: {
@@ -67,6 +69,11 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
         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) => {
@@ -85,7 +92,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
         return newBlocks;
       });
     },
-    [provider]
+    [provider, targetBlockNumber]
   );
 
   useEffect(() => {
@@ -110,6 +117,24 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
     };
   }, [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">

From a738ad2ae32bc8c36297a281ac14507a06c5574f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 30 Jul 2021 05:18:28 -0300
Subject: [PATCH 18/19] Better formatting

---
 src/Home.tsx                    | 12 +++++++++++-
 src/special/london/BlockRow.tsx |  6 +++---
 src/special/london/Blocks.tsx   |  8 +++++++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/Home.tsx b/src/Home.tsx
index fc969a2..c7a7a3f 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -1,6 +1,8 @@
 import React, { useState, useContext } from "react";
 import { NavLink, useHistory } from "react-router-dom";
 import { ethers } from "ethers";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBurn } from "@fortawesome/free-solid-svg-icons";
 import Logo from "./Logo";
 import Timestamp from "./components/Timestamp";
 import { RuntimeContext } from "./useRuntime";
@@ -56,7 +58,15 @@ const Home: React.FC = () => {
         </button>
         <div className="mx-auto mt-5 mb-5 text-lg text-link-blue hover:text-link-blue-hover font-bold">
           <NavLink to="/special/london">
-            Check the special dashboard for EIP-1559
+            <div className="flex space-x-2 items-baseline text-orange-500 hover:text-orange-700 hover:underline">
+              <span>
+                <FontAwesomeIcon icon={faBurn} />
+              </span>
+              <span>Check the special dashboard for EIP-1559</span>
+              <span>
+                <FontAwesomeIcon icon={faBurn} />
+              </span>
+            </div>
           </NavLink>
         </div>
         {latestBlock && (
diff --git a/src/special/london/BlockRow.tsx b/src/special/london/BlockRow.tsx
index 890446c..6331cdb 100644
--- a/src/special/london/BlockRow.tsx
+++ b/src/special/london/BlockRow.tsx
@@ -34,14 +34,14 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
       >
         {ethers.utils.commify(block.gasUsed.toString())}
       </div>
-      <div className="text-right">
+      <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 col-span-2">
         {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
       </div>
-      <div className="text-right">
+      <div className="text-right line-through text-orange-500">
         {ethers.utils.commify(
           ethers.utils.formatUnits(
             block.gasUsed.mul(block.baseFeePerGas!).toString(),
@@ -50,7 +50,7 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
         )}{" "}
         Gwei
       </div>
-      <div className="text-right">
+      <div className="text-right text-gray-400">
         <TimestampAge now={now / 1000} timestamp={block.timestamp} />
       </div>
     </div>
diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx
index e94f01e..6ef00ba 100644
--- a/src/special/london/Blocks.tsx
+++ b/src/special/london/Blocks.tsx
@@ -15,6 +15,7 @@ import {
   faCoins,
   faCube,
   faGasPump,
+  faHistory,
 } from "@fortawesome/free-solid-svg-icons";
 import BlockRow from "./BlockRow";
 import { ExtendedBlock, readBlock } from "../../useErigonHooks";
@@ -168,7 +169,12 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
             </span>
             <span>Burnt fees</span>
           </div>
-          <div className="text-right">Age</div>
+          <div className="text-right flex space-x-1 justify-end items-baseline">
+            <span className="text-gray-500">
+              <FontAwesomeIcon icon={faHistory} />
+            </span>
+            <span>Age</span>
+          </div>
         </div>
         {blocks.map((b, i) => (
           <Transition

From 114749704a78f25e97e020e6058e2c7a4d67aaaa Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 30 Jul 2021 05:33:02 -0300
Subject: [PATCH 19/19] Add title to london special dashboard

---
 src/special/london/Blocks.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx
index 6ef00ba..a5398f1 100644
--- a/src/special/london/Blocks.tsx
+++ b/src/special/london/Blocks.tsx
@@ -139,6 +139,15 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
   return (
     <div className="w-full mb-auto">
       <div className="px-9 pt-3 pb-12 divide-y-2">
+        <div className="flex justify-center items-baseline space-x-2 px-3 pb-2 text-lg text-orange-500 ">
+          <span>
+            <FontAwesomeIcon icon={faBurn} />
+          </span>
+          <span>London Hardfork is here. Watch the base fees burn.</span>
+          <span>
+            <FontAwesomeIcon icon={faBurn} />
+          </span>
+        </div>
         <div>
           <Line data={data} height={100} options={options} />
         </div>