London countdown

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 />

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"

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);

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);