From 7758c49f2d666da190180b36633dbd9344e32ac5 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 23 Jul 2021 01:18:34 -0300
Subject: [PATCH 01/50] Update submodules

---
 4bytes      | 2 +-
 trustwallet | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/4bytes b/4bytes
index 3fde3a1..8113821 160000
--- a/4bytes
+++ b/4bytes
@@ -1 +1 @@
-Subproject commit 3fde3a1b2e002736e9a5e0c35df5bbe386a18d55
+Subproject commit 81138213c12364db38d5acbb40c0cf46f2ecdbfe
diff --git a/trustwallet b/trustwallet
index 011ccb8..5b803d3 160000
--- a/trustwallet
+++ b/trustwallet
@@ -1 +1 @@
-Subproject commit 011ccb88adc70c27b0d4fc0a10564199efd0a81f
+Subproject commit 5b803d37011ff89b287630a9ce90f96f8ed3311f

From 8d04e5e6ab3cda309b65034c312dcd7e2bc406db Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 23 Jul 2021 01:23:32 -0300
Subject: [PATCH 02/50] Fix right margin

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

diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index f965ecc..b81fd9d 100644
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@@ -21,7 +21,7 @@ const Logs: React.FC<LogsProps> = ({ txData }) => (
           <div className="w-full space-y-2">
             <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
               <div className="font-bold text-right">Address</div>
-              <div className="col-span-11">
+              <div className="col-span-11 mr-auto">
                 <DecoratedAddressLink
                   address={l.address}
                   miner={l.address === txData.miner}

From aa98aea9f94255b9df50ead5b42372e2eeb7a364 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 23 Jul 2021 01:28:44 -0300
Subject: [PATCH 03/50] Fix singular "Confirmation"

---
 src/components/BlockConfirmations.tsx | 16 ++++++++++++++++
 src/transaction/Details.tsx           |  5 ++---
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/components/BlockConfirmations.tsx

diff --git a/src/components/BlockConfirmations.tsx b/src/components/BlockConfirmations.tsx
new file mode 100644
index 0000000..4846d09
--- /dev/null
+++ b/src/components/BlockConfirmations.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+type BlockConfirmationsProps = {
+  confirmations: number;
+};
+
+const BlockConfirmations: React.FC<BlockConfirmationsProps> = ({
+  confirmations,
+}) => (
+  <span className="rounded text-xs bg-gray-100 text-gray-500 px-2 py-1">
+    {confirmations} Block{" "}
+    {confirmations === 1 ? "Confirmation" : "Confirmations"}
+  </span>
+);
+
+export default React.memo(BlockConfirmations);
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 4204908..30bcbbd 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -8,6 +8,7 @@ import {
 import ContentFrame from "../ContentFrame";
 import InfoRow from "../components/InfoRow";
 import BlockLink from "../components/BlockLink";
+import BlockConfirmations from "../components/BlockConfirmations";
 import AddressHighlighter from "../components/AddressHighlighter";
 import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import Copy from "../components/Copy";
@@ -53,9 +54,7 @@ const Details: React.FC<DetailsProps> = ({
     <InfoRow title="Block">
       <div className="flex items-baseline space-x-2">
         <BlockLink blockTag={txData.blockNumber} />
-        <span className="rounded text-xs bg-gray-100 text-gray-500 px-2 py-1">
-          {txData.confirmations} Block Confirmations
-        </span>
+        <BlockConfirmations confirmations={txData.confirmations} />
       </div>
     </InfoRow>
     <InfoRow title="Timestamp">

From 50d63efbce581a71003b80c342f3c2eb47c73f93 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 23 Jul 2021 01:35:18 -0300
Subject: [PATCH 04/50] Update tailwindcss version to 2.2.6

---
 package-lock.json | 174 ++++++++++++++++++++++++----------------------
 package.json      |   2 +-
 2 files changed, 90 insertions(+), 86 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 71853e7..030da6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,7 +45,7 @@
       "devDependencies": {
         "autoprefixer": "^9.8.6",
         "postcss": "^7.0.36",
-        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4"
+        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.6"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -2077,15 +2077,6 @@
         "react": ">=16.x"
       }
     },
-    "node_modules/@fullhuman/postcss-purgecss": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
-      "integrity": "sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA==",
-      "dev": true,
-      "dependencies": {
-        "purgecss": "^3.1.3"
-      }
-    },
     "node_modules/@hapi/address": {
       "version": "2.1.4",
       "license": "BSD-3-Clause"
@@ -5751,11 +5742,12 @@
       }
     },
     "node_modules/color": {
-      "version": "3.1.3",
-      "license": "MIT",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
       "dependencies": {
-        "color-convert": "^1.9.1",
-        "color-string": "^1.5.4"
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
       }
     },
     "node_modules/color-convert": {
@@ -5774,8 +5766,9 @@
       "license": "MIT"
     },
     "node_modules/color-string": {
-      "version": "1.5.4",
-      "license": "MIT",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
+      "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
       "dependencies": {
         "color-name": "^1.0.0",
         "simple-swizzle": "^0.2.2"
@@ -6808,9 +6801,9 @@
       }
     },
     "node_modules/didyoumean": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.1.tgz",
-      "integrity": "sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
     "node_modules/diff-sequences": {
@@ -8270,15 +8263,15 @@
       "license": "MIT"
     },
     "node_modules/fast-glob": {
-      "version": "3.2.5",
-      "license": "MIT",
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
+      "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.0",
+        "glob-parent": "^5.1.2",
         "merge2": "^1.3.0",
-        "micromatch": "^4.0.2",
-        "picomatch": "^2.2.1"
+        "micromatch": "^4.0.4"
       },
       "engines": {
         "node": ">=8"
@@ -8864,8 +8857,9 @@
       }
     },
     "node_modules/glob-parent": {
-      "version": "5.1.1",
-      "license": "ISC",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -11228,14 +11222,15 @@
       "license": "MIT"
     },
     "node_modules/micromatch": {
-      "version": "4.0.2",
-      "license": "MIT",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
       "dependencies": {
         "braces": "^3.0.1",
-        "picomatch": "^2.0.5"
+        "picomatch": "^2.2.3"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=8.6"
       }
     },
     "node_modules/micromatch/node_modules/braces": {
@@ -12367,8 +12362,9 @@
       "license": "MIT"
     },
     "node_modules/picomatch": {
-      "version": "2.2.2",
-      "license": "MIT",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
+      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
       "engines": {
         "node": ">=8.6"
       },
@@ -13822,9 +13818,9 @@
       }
     },
     "node_modules/purgecss": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-3.1.3.tgz",
-      "integrity": "sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
+      "integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
       "dev": true,
       "dependencies": {
         "commander": "^6.0.0",
@@ -13846,9 +13842,9 @@
       }
     },
     "node_modules/purgecss/node_modules/postcss": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.1.tgz",
-      "integrity": "sha512-9qH0MGjsSm+fjxOi3GnwViL1otfi7qkj+l/WX5gcRGmZNGsIcqc+A5fBkE6PUobEQK4APqYVaES+B3Uti98TCw==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
+      "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
       "dev": true,
       "dependencies": {
         "colorette": "^1.2.2",
@@ -15929,14 +15925,16 @@
     },
     "node_modules/simple-swizzle": {
       "version": "0.2.2",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
       "dependencies": {
         "is-arrayish": "^0.3.1"
       }
     },
     "node_modules/simple-swizzle/node_modules/is-arrayish": {
       "version": "0.3.2",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
     },
     "node_modules/sisteransi": {
       "version": "1.0.5",
@@ -16715,23 +16713,22 @@
     },
     "node_modules/tailwindcss": {
       "name": "@tailwindcss/postcss7-compat",
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.4.tgz",
-      "integrity": "sha512-lFIBdD1D2w3RgHFg7kNB7U5LOlfbd+KXTzcLyC/RlQ9eVko6GjNCKpN/kdmfF9wiGxbSDT/3mousXeMZdOOuBg==",
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.6.tgz",
+      "integrity": "sha512-xrJqqVimKtNpyaaMapky3iFRCvEaA3PbdGG4HqHvyEdTLnfqKrRAv0znhqGeQlzFIL4P3w546cjWLYNtbvazFw==",
       "dev": true,
       "dependencies": {
-        "@fullhuman/postcss-purgecss": "^3.1.3",
         "arg": "^5.0.0",
         "autoprefixer": "^9",
         "bytes": "^3.0.0",
         "chalk": "^4.1.1",
         "chokidar": "^3.5.2",
-        "color": "^3.1.3",
+        "color": "^3.2.0",
         "cosmiconfig": "^7.0.0",
         "detective": "^5.2.0",
-        "didyoumean": "^1.2.1",
+        "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.5",
+        "fast-glob": "^3.2.7",
         "fs-extra": "^10.0.0",
         "glob-parent": "^6.0.0",
         "html-tags": "^3.1.0",
@@ -16750,6 +16747,7 @@
         "postcss-selector-parser": "^6.0.6",
         "postcss-value-parser": "^4.1.0",
         "pretty-hrtime": "^1.0.3",
+        "purgecss": "^4.0.3",
         "quick-lru": "^5.1.1",
         "reduce-css-calc": "^2.1.8",
         "resolve": "^1.20.0",
@@ -20422,15 +20420,6 @@
         "prop-types": "^15.7.2"
       }
     },
-    "@fullhuman/postcss-purgecss": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
-      "integrity": "sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA==",
-      "dev": true,
-      "requires": {
-        "purgecss": "^3.1.3"
-      }
-    },
     "@hapi/address": {
       "version": "2.1.4"
     },
@@ -22947,10 +22936,12 @@
       }
     },
     "color": {
-      "version": "3.1.3",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
       "requires": {
-        "color-convert": "^1.9.1",
-        "color-string": "^1.5.4"
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
       }
     },
     "color-convert": {
@@ -22968,7 +22959,9 @@
       "version": "1.1.4"
     },
     "color-string": {
-      "version": "1.5.4",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
+      "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
       "requires": {
         "color-name": "^1.0.0",
         "simple-swizzle": "^0.2.2"
@@ -23658,9 +23651,9 @@
       }
     },
     "didyoumean": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.1.tgz",
-      "integrity": "sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
     "diff-sequences": {
@@ -24626,14 +24619,15 @@
       "version": "3.1.3"
     },
     "fast-glob": {
-      "version": "3.2.5",
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
+      "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.0",
+        "glob-parent": "^5.1.2",
         "merge2": "^1.3.0",
-        "micromatch": "^4.0.2",
-        "picomatch": "^2.2.1"
+        "micromatch": "^4.0.4"
       }
     },
     "fast-json-stable-stringify": {
@@ -25012,7 +25006,9 @@
       }
     },
     "glob-parent": {
-      "version": "5.1.1",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -26545,10 +26541,12 @@
       "version": "0.1.1"
     },
     "micromatch": {
-      "version": "4.0.2",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
       "requires": {
         "braces": "^3.0.1",
-        "picomatch": "^2.0.5"
+        "picomatch": "^2.2.3"
       },
       "dependencies": {
         "braces": {
@@ -27275,7 +27273,9 @@
       "version": "2.1.0"
     },
     "picomatch": {
-      "version": "2.2.2"
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
+      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw=="
     },
     "pify": {
       "version": "4.0.1"
@@ -28290,9 +28290,9 @@
       "version": "2.1.1"
     },
     "purgecss": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-3.1.3.tgz",
-      "integrity": "sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
+      "integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
       "dev": true,
       "requires": {
         "commander": "^6.0.0",
@@ -28308,9 +28308,9 @@
           "dev": true
         },
         "postcss": {
-          "version": "8.3.1",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.1.tgz",
-          "integrity": "sha512-9qH0MGjsSm+fjxOi3GnwViL1otfi7qkj+l/WX5gcRGmZNGsIcqc+A5fBkE6PUobEQK4APqYVaES+B3Uti98TCw==",
+          "version": "8.3.6",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
+          "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
           "dev": true,
           "requires": {
             "colorette": "^1.2.2",
@@ -29729,12 +29729,16 @@
     },
     "simple-swizzle": {
       "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
       "requires": {
         "is-arrayish": "^0.3.1"
       },
       "dependencies": {
         "is-arrayish": {
-          "version": "0.3.2"
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
         }
       }
     },
@@ -30274,23 +30278,22 @@
       }
     },
     "tailwindcss": {
-      "version": "npm:@tailwindcss/postcss7-compat@2.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.4.tgz",
-      "integrity": "sha512-lFIBdD1D2w3RgHFg7kNB7U5LOlfbd+KXTzcLyC/RlQ9eVko6GjNCKpN/kdmfF9wiGxbSDT/3mousXeMZdOOuBg==",
+      "version": "npm:@tailwindcss/postcss7-compat@2.2.6",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.6.tgz",
+      "integrity": "sha512-xrJqqVimKtNpyaaMapky3iFRCvEaA3PbdGG4HqHvyEdTLnfqKrRAv0znhqGeQlzFIL4P3w546cjWLYNtbvazFw==",
       "dev": true,
       "requires": {
-        "@fullhuman/postcss-purgecss": "^3.1.3",
         "arg": "^5.0.0",
         "autoprefixer": "^9",
         "bytes": "^3.0.0",
         "chalk": "^4.1.1",
         "chokidar": "^3.5.2",
-        "color": "^3.1.3",
+        "color": "^3.2.0",
         "cosmiconfig": "^7.0.0",
         "detective": "^5.2.0",
-        "didyoumean": "^1.2.1",
+        "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.5",
+        "fast-glob": "^3.2.7",
         "fs-extra": "^10.0.0",
         "glob-parent": "^6.0.0",
         "html-tags": "^3.1.0",
@@ -30309,6 +30312,7 @@
         "postcss-selector-parser": "^6.0.6",
         "postcss-value-parser": "^4.1.0",
         "pretty-hrtime": "^1.0.3",
+        "purgecss": "^4.0.3",
         "quick-lru": "^5.1.1",
         "reduce-css-calc": "^2.1.8",
         "resolve": "^1.20.0",
diff --git a/package.json b/package.json
index f9454c1..45622fc 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,6 @@
   "devDependencies": {
     "autoprefixer": "^9.8.6",
     "postcss": "^7.0.36",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4"
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.6"
   }
 }

From e6083e5cd58434a71e20da0b41cbaaf4b666acd0 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 23 Jul 2021 19:20:49 -0300
Subject: [PATCH 05/50] Move nav bar up

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

diff --git a/src/Block.tsx b/src/Block.tsx
index c1578a8..b776b4c 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -107,18 +107,13 @@ const Block: React.FC = () => {
   return (
     <StandardFrame>
       <StandardSubtitle>
-        Block{" "}
-        <span className="text-base text-gray-500">
-          #{params.blockNumberOrHash}
-        </span>
-      </StandardSubtitle>
-      {block && (
-        <ContentFrame>
-          <InfoRow title="Block Height">
-            <div className="flex space-x-1 items-baseline">
-              <span className="font-bold mr-1">
-                {ethers.utils.commify(block.number)}
-              </span>
+        <div className="flex space-x-1 items-baseline">
+          <span>Block</span>
+          <span className="text-base text-gray-500">
+            #{params.blockNumberOrHash}
+          </span>
+          {block && (
+            <div className="pl-2 self-center flex space-x-1">
               <NavButton
                 blockNum={block.number - 1}
                 disabled={block.number === 0}
@@ -145,6 +140,15 @@ const Block: React.FC = () => {
                 <FontAwesomeIcon icon={faChevronRight} />
               </NavButton>
             </div>
+          )}
+        </div>
+      </StandardSubtitle>
+      {block && (
+        <ContentFrame>
+          <InfoRow title="Block Height">
+            <span className="font-bold">
+              {ethers.utils.commify(block.number)}
+            </span>
           </InfoRow>
           <InfoRow title="Timestamp">
             <Timestamp value={block.timestamp} />

From 6c763b481751b5cbc3d1b4c1b81ad030bdf15071 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 23 Jul 2021 19:46:21 -0300
Subject: [PATCH 06/50] Extract and apply block navigation to block txs page

---
 src/Block.tsx                           | 41 ++++----------------
 src/BlockTransactionHeader.tsx          | 35 ++++++++++++-----
 src/Home.tsx                            |  3 +-
 src/block/NavBlock.tsx                  | 51 +++++++++++++++++++++++++
 src/{components => block}/NavButton.tsx |  6 ++-
 src/components/BlockLink.tsx            |  3 +-
 src/url.ts                              |  8 ++++
 7 files changed, 101 insertions(+), 46 deletions(-)
 create mode 100644 src/block/NavBlock.tsx
 rename src/{components => block}/NavButton.tsx (76%)

diff --git a/src/Block.tsx b/src/Block.tsx
index b776b4c..87da28d 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -1,15 +1,10 @@
 import React, { useEffect, useState, useMemo, useContext } from "react";
 import { useParams, NavLink } from "react-router-dom";
 import { ethers, BigNumber } from "ethers";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faChevronLeft,
-  faChevronRight,
-} from "@fortawesome/free-solid-svg-icons";
 import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
+import NavBlock from "./block/NavBlock";
 import ContentFrame from "./ContentFrame";
-import NavButton from "./components/NavButton";
 import Timestamp from "./components/Timestamp";
 import GasValue from "./components/GasValue";
 import BlockLink from "./components/BlockLink";
@@ -18,6 +13,7 @@ import TransactionValue from "./components/TransactionValue";
 import HexValue from "./components/HexValue";
 import { RuntimeContext } from "./useRuntime";
 import { useLatestBlockNumber } from "./useLatestBlock";
+import { blockTxsURL } from "./url";
 
 type BlockParams = {
   blockNumberOrHash: string;
@@ -113,33 +109,10 @@ const Block: React.FC = () => {
             #{params.blockNumberOrHash}
           </span>
           {block && (
-            <div className="pl-2 self-center flex space-x-1">
-              <NavButton
-                blockNum={block.number - 1}
-                disabled={block.number === 0}
-              >
-                <FontAwesomeIcon icon={faChevronLeft} />
-              </NavButton>
-              <NavButton
-                blockNum={block.number + 1}
-                disabled={
-                  latestBlockNumber === undefined ||
-                  block.number >= latestBlockNumber
-                }
-              >
-                <FontAwesomeIcon icon={faChevronRight} />
-              </NavButton>
-              <NavButton
-                blockNum={latestBlockNumber!}
-                disabled={
-                  latestBlockNumber === undefined ||
-                  block.number >= latestBlockNumber
-                }
-              >
-                <FontAwesomeIcon icon={faChevronRight} />
-                <FontAwesomeIcon icon={faChevronRight} />
-              </NavButton>
-            </div>
+            <NavBlock
+              blockNumber={block.number}
+              latestBlockNumber={latestBlockNumber}
+            />
           )}
         </div>
       </StandardSubtitle>
@@ -156,7 +129,7 @@ const Block: React.FC = () => {
           <InfoRow title="Transactions">
             <NavLink
               className="bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white rounded-lg px-2 py-1 text-xs"
-              to={`/block/${block.number}/txs`}
+              to={blockTxsURL(block.number)}
             >
               {block.transactions.length} transactions
             </NavLink>{" "}
diff --git a/src/BlockTransactionHeader.tsx b/src/BlockTransactionHeader.tsx
index 65a8288..e3f22fc 100644
--- a/src/BlockTransactionHeader.tsx
+++ b/src/BlockTransactionHeader.tsx
@@ -1,7 +1,11 @@
-import React from "react";
+import React, { useContext } from "react";
 import { ethers } from "ethers";
 import StandardSubtitle from "./StandardSubtitle";
 import BlockLink from "./components/BlockLink";
+import NavBlock from "./block/NavBlock";
+import { RuntimeContext } from "./useRuntime";
+import { useLatestBlockNumber } from "./useLatestBlock";
+import { blockTxsURL } from "./url";
 
 type BlockTransactionHeaderProps = {
   blockTag: ethers.providers.BlockTag;
@@ -9,13 +13,26 @@ type BlockTransactionHeaderProps = {
 
 const BlockTransactionHeader: React.FC<BlockTransactionHeaderProps> = ({
   blockTag,
-}) => (
-  <>
-    <StandardSubtitle>Transactions</StandardSubtitle>
-    <div className="pb-2 text-sm text-gray-500">
-      For Block <BlockLink blockTag={blockTag} />
-    </div>
-  </>
-);
+}) => {
+  const { provider } = useContext(RuntimeContext);
+  const latestBlockNumber = useLatestBlockNumber(provider);
+
+  return (
+    <StandardSubtitle>
+      <div className="flex space-x-1 items-baseline">
+        <span>Transactions</span>
+        <div className="flex space-x-1 text-sm text-gray-500">
+          <span>For Block</span>
+          <BlockLink blockTag={blockTag} />
+          <NavBlock
+            blockNumber={blockTag as number}
+            latestBlockNumber={latestBlockNumber}
+            urlBuilder={blockTxsURL}
+          />
+        </div>
+      </div>
+    </StandardSubtitle>
+  );
+};
 
 export default React.memo(BlockTransactionHeader);
diff --git a/src/Home.tsx b/src/Home.tsx
index 7d74fcd..d4f3afa 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -5,6 +5,7 @@ import Logo from "./Logo";
 import Timestamp from "./components/Timestamp";
 import { RuntimeContext } from "./useRuntime";
 import { useLatestBlock } from "./useLatestBlock";
+import { blockURL } from "./url";
 
 const Home: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
@@ -56,7 +57,7 @@ const Home: React.FC = () => {
         {latestBlock && (
           <NavLink
             className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
-            to={`/block/${latestBlock.number}`}
+            to={blockURL(latestBlock.number)}
           >
             <div>Latest block: {ethers.utils.commify(latestBlock.number)}</div>
             <Timestamp value={latestBlock.timestamp} />
diff --git a/src/block/NavBlock.tsx b/src/block/NavBlock.tsx
new file mode 100644
index 0000000..32a1dee
--- /dev/null
+++ b/src/block/NavBlock.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { ethers } from "ethers";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faChevronLeft,
+  faChevronRight,
+} from "@fortawesome/free-solid-svg-icons";
+import NavButton from "./NavButton";
+
+type NavBlockProps = {
+  blockNumber: number;
+  latestBlockNumber: number | undefined;
+  urlBuilder?: (blockNumber: ethers.providers.BlockTag) => string;
+};
+
+const NavBlock: React.FC<NavBlockProps> = ({
+  blockNumber,
+  latestBlockNumber,
+  urlBuilder,
+}) => (
+  <div className="pl-2 self-center flex space-x-1">
+    <NavButton
+      blockNum={blockNumber - 1}
+      disabled={blockNumber === 0}
+      urlBuilder={urlBuilder}
+    >
+      <FontAwesomeIcon icon={faChevronLeft} />
+    </NavButton>
+    <NavButton
+      blockNum={blockNumber + 1}
+      disabled={
+        latestBlockNumber === undefined || blockNumber >= latestBlockNumber
+      }
+      urlBuilder={urlBuilder}
+    >
+      <FontAwesomeIcon icon={faChevronRight} />
+    </NavButton>
+    <NavButton
+      blockNum={latestBlockNumber!}
+      disabled={
+        latestBlockNumber === undefined || blockNumber >= latestBlockNumber
+      }
+      urlBuilder={urlBuilder}
+    >
+      <FontAwesomeIcon icon={faChevronRight} />
+      <FontAwesomeIcon icon={faChevronRight} />
+    </NavButton>
+  </div>
+);
+
+export default React.memo(NavBlock);
diff --git a/src/components/NavButton.tsx b/src/block/NavButton.tsx
similarity index 76%
rename from src/components/NavButton.tsx
rename to src/block/NavButton.tsx
index a9c1a9d..edc85c4 100644
--- a/src/components/NavButton.tsx
+++ b/src/block/NavButton.tsx
@@ -1,13 +1,17 @@
+import { ethers } from "ethers";
 import { NavLink } from "react-router-dom";
+import { blockURL } from "../url";
 
 type NavButtonProps = {
   blockNum: number;
   disabled?: boolean;
+  urlBuilder?: (blockNumber: ethers.providers.BlockTag) => string;
 };
 
 const NavButton: React.FC<NavButtonProps> = ({
   blockNum,
   disabled,
+  urlBuilder,
   children,
 }) => {
   if (disabled) {
@@ -21,7 +25,7 @@ const NavButton: React.FC<NavButtonProps> = ({
   return (
     <NavLink
       className="transition-colors bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white disabled:bg-link-blue disabled:text-gray-400 disabled:cursor-default rounded px-2 py-1 text-xs"
-      to={`/block/${blockNum}`}
+      to={urlBuilder ? urlBuilder(blockNum) : blockURL(blockNum)}
     >
       {children}
     </NavLink>
diff --git a/src/components/BlockLink.tsx b/src/components/BlockLink.tsx
index f9a8866..155553f 100644
--- a/src/components/BlockLink.tsx
+++ b/src/components/BlockLink.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 import { ethers } from "ethers";
+import { blockURL } from "../url";
 
 type BlockLinkProps = {
   blockTag: ethers.providers.BlockTag;
@@ -18,7 +19,7 @@ const BlockLink: React.FC<BlockLinkProps> = ({ blockTag }) => {
       className={`text-link-blue hover:text-link-blue-hover ${
         isNum ? "font-blocknum" : "font-hash"
       }`}
-      to={`/block/${blockTag}`}
+      to={blockURL(blockTag)}
     >
       {text}
     </NavLink>
diff --git a/src/url.ts b/src/url.ts
index 0586dbe..3807d69 100644
--- a/src/url.ts
+++ b/src/url.ts
@@ -1,3 +1,5 @@
+import { ethers } from "ethers";
+
 export const fourBytesURL = (
   assetsURLPrefix: string,
   fourBytes: string
@@ -7,3 +9,9 @@ export const tokenLogoURL = (
   assetsURLPrefix: string,
   address: string
 ): string => `${assetsURLPrefix}/assets/${address}/logo.png`;
+
+export const blockURL = (blockNum: ethers.providers.BlockTag) =>
+  `/block/${blockNum}`;
+
+export const blockTxsURL = (blockNum: ethers.providers.BlockTag) =>
+  `/block/${blockNum}/txs`;

From 30597fc4ba387c70347155a060c948d178633f67 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 23 Jul 2021 19:48:34 -0300
Subject: [PATCH 07/50] Move refactoring

---
 src/BlockTransactions.tsx                   |  4 ++--
 src/{ => block}/BlockTransactionHeader.tsx  | 12 +++++------
 src/{ => block}/BlockTransactionResults.tsx | 22 ++++++++++-----------
 3 files changed, 19 insertions(+), 19 deletions(-)
 rename src/{ => block}/BlockTransactionHeader.tsx (76%)
 rename src/{ => block}/BlockTransactionResults.tsx (76%)

diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx
index b427415..30d39c0 100644
--- a/src/BlockTransactions.tsx
+++ b/src/BlockTransactions.tsx
@@ -3,8 +3,8 @@ import { useParams, useLocation } from "react-router";
 import { ethers } from "ethers";
 import queryString from "query-string";
 import StandardFrame from "./StandardFrame";
-import BlockTransactionHeader from "./BlockTransactionHeader";
-import BlockTransactionResults from "./BlockTransactionResults";
+import BlockTransactionHeader from "./block/BlockTransactionHeader";
+import BlockTransactionResults from "./block/BlockTransactionResults";
 import {
   InternalOperation,
   OperationType,
diff --git a/src/BlockTransactionHeader.tsx b/src/block/BlockTransactionHeader.tsx
similarity index 76%
rename from src/BlockTransactionHeader.tsx
rename to src/block/BlockTransactionHeader.tsx
index e3f22fc..a15c463 100644
--- a/src/BlockTransactionHeader.tsx
+++ b/src/block/BlockTransactionHeader.tsx
@@ -1,11 +1,11 @@
 import React, { useContext } from "react";
 import { ethers } from "ethers";
-import StandardSubtitle from "./StandardSubtitle";
-import BlockLink from "./components/BlockLink";
-import NavBlock from "./block/NavBlock";
-import { RuntimeContext } from "./useRuntime";
-import { useLatestBlockNumber } from "./useLatestBlock";
-import { blockTxsURL } from "./url";
+import StandardSubtitle from "../StandardSubtitle";
+import BlockLink from "../components/BlockLink";
+import NavBlock from "./NavBlock";
+import { RuntimeContext } from "../useRuntime";
+import { useLatestBlockNumber } from "../useLatestBlock";
+import { blockTxsURL } from "../url";
 
 type BlockTransactionHeaderProps = {
   blockTag: ethers.providers.BlockTag;
diff --git a/src/BlockTransactionResults.tsx b/src/block/BlockTransactionResults.tsx
similarity index 76%
rename from src/BlockTransactionResults.tsx
rename to src/block/BlockTransactionResults.tsx
index 74e2783..5937199 100644
--- a/src/BlockTransactionResults.tsx
+++ b/src/block/BlockTransactionResults.tsx
@@ -1,15 +1,15 @@
 import React, { useContext } from "react";
-import ContentFrame from "./ContentFrame";
-import PageControl from "./search/PageControl";
-import ResultHeader from "./search/ResultHeader";
-import PendingResults from "./search/PendingResults";
-import TransactionItem from "./search/TransactionItem";
-import { useFeeToggler } from "./search/useFeeToggler";
-import { RuntimeContext } from "./useRuntime";
-import { SelectionContext, useSelection } from "./useSelection";
-import { useENSCache } from "./useReverseCache";
-import { ProcessedTransaction } from "./types";
-import { PAGE_SIZE } from "./params";
+import ContentFrame from "../ContentFrame";
+import PageControl from "../search/PageControl";
+import ResultHeader from "../search/ResultHeader";
+import PendingResults from "../search/PendingResults";
+import TransactionItem from "../search/TransactionItem";
+import { useFeeToggler } from "../search/useFeeToggler";
+import { RuntimeContext } from "../useRuntime";
+import { SelectionContext, useSelection } from "../useSelection";
+import { useENSCache } from "../useReverseCache";
+import { ProcessedTransaction } from "../types";
+import { PAGE_SIZE } from "../params";
 
 type BlockTransactionResultsProps = {
   page?: ProcessedTransaction[];

From 76182a4efebb88d6aa309586b030407a6af0fc41 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 24 Jul 2021 00:21:15 -0300
Subject: [PATCH 08/50] Remove safeguards and fix small bugs to allow running
 otterscan against testnets; testing on goerli

---
 src/Block.tsx      | 8 ++++++--
 src/Title.tsx      | 6 ++++--
 src/useProvider.ts | 5 +----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/Block.tsx b/src/Block.tsx
index 87da28d..3064c99 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -67,8 +67,12 @@ const Block: React.FC = () => {
 
       const _block = provider.formatter.block(_rawBlock);
       const extBlock: ExtendedBlock = {
-        blockReward: provider.formatter.bigNumber(_rawIssuance.blockReward),
-        unclesReward: provider.formatter.bigNumber(_rawIssuance.uncleReward),
+        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,
diff --git a/src/Title.tsx b/src/Title.tsx
index c64fdbd..46e1e5c 100644
--- a/src/Title.tsx
+++ b/src/Title.tsx
@@ -1,9 +1,11 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useContext } from "react";
 import { Link, useHistory } from "react-router-dom";
 import useKeyboardShortcut from "use-keyboard-shortcut";
 import PriceBox from "./PriceBox";
+import { RuntimeContext } from "./useRuntime";
 
 const Title: React.FC = () => {
+  const { provider } = useContext(RuntimeContext);
   const [search, setSearch] = useState<string>();
   const [canSubmit, setCanSubmit] = useState<boolean>(false);
   const history = useHistory();
@@ -43,7 +45,7 @@ const Title: React.FC = () => {
         </div>
       </Link>
       <div className="flex items-baseline space-x-3">
-        <PriceBox />
+        {provider?.network.chainId === 1 && <PriceBox />}
         <form
           className="flex"
           onSubmit={handleSubmit}
diff --git a/src/useProvider.ts b/src/useProvider.ts
index 9ce1445..c6a3a5c 100644
--- a/src/useProvider.ts
+++ b/src/useProvider.ts
@@ -33,10 +33,7 @@ export const useProvider = (
     setConnStatus(ConnectionStatus.CONNECTING);
 
     const tryToConnect = async () => {
-      const provider = new ethers.providers.JsonRpcProvider(
-        erigonURL,
-        "mainnet"
-      );
+      const provider = new ethers.providers.JsonRpcProvider(erigonURL);
 
       // Check if it is at least a regular ETH node
       let blockNumber: number = 0;

From 26f66cb4fb6bdf8318b3fef3221aa75b267bfd0f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 24 Jul 2021 05:33:13 -0300
Subject: [PATCH 09/50] Add different highlight color on testnets

---
 src/Footer.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/Footer.tsx b/src/Footer.tsx
index 61d59d7..a934b37 100644
--- a/src/Footer.tsx
+++ b/src/Footer.tsx
@@ -5,7 +5,13 @@ const Footer: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
 
   return (
-    <div className="w-full px-2 py-1 border-t border-t-gray-100 text-xs bg-link-blue text-gray-200 text-center">
+    <div
+      className={`w-full px-2 py-1 border-t border-t-gray-100 text-xs ${
+        provider?.network.chainId === 1
+          ? "bg-link-blue text-gray-200"
+          : "bg-orange-400 text-white"
+      } text-center`}
+    >
       {provider ? (
         <>Using Erigon node at {provider.connection.url}</>
       ) : (

From fddfbfc29b9c54cab27fec6a5200a86c0dad7b81 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 24 Jul 2021 05:46:48 -0300
Subject: [PATCH 10/50] Display warning header when not on mainnet

---
 src/App.tsx           |  2 ++
 src/WarningHeader.tsx | 28 ++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/WarningHeader.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 4a4c323..72326ee 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import React, { Suspense } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import WarningHeader from "./WarningHeader";
 import Home from "./Home";
 import Search from "./Search";
 import Title from "./Title";
@@ -26,6 +27,7 @@ const App = () => {
       ) : (
         <RuntimeContext.Provider value={runtime}>
           <div className="h-screen flex flex-col">
+            <WarningHeader />
             <Router>
               <Switch>
                 <Route path="/" exact>
diff --git a/src/WarningHeader.tsx b/src/WarningHeader.tsx
new file mode 100644
index 0000000..b21c249
--- /dev/null
+++ b/src/WarningHeader.tsx
@@ -0,0 +1,28 @@
+import React, { useContext } from "react";
+import { RuntimeContext } from "./useRuntime";
+
+const WarningHeader: React.FC = () => {
+  const { provider } = useContext(RuntimeContext);
+  const chainId = provider?.network.chainId;
+  if (chainId === 1) {
+    return <></>;
+  }
+
+  let chainMsg = `ChainID: ${chainId}`;
+  if (chainId === 3) {
+    chainMsg = "Ropsten Testnet";
+  } else if (chainId === 4) {
+    chainMsg = "Rinkeby Testnet";
+  } else if (chainId === 5) {
+    chainMsg = "Görli Testnet";
+  } else if (chainId === 42) {
+    chainMsg = "Kovan Testnet";
+  }
+  return (
+    <div className="w-full bg-orange-400 text-white text-center font-bold px-2 py-1">
+      You are on {chainMsg}
+    </div>
+  );
+};
+
+export default React.memo(WarningHeader);

From 2ae3429d51e9585dd327cb545ffef5c05bdd852f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 26 Jul 2021 19:59:07 -0300
Subject: [PATCH 11/50] Extract custom hook

---
 src/Block.tsx         | 70 +++--------------------------------------
 src/useErigonHooks.ts | 73 ++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 76 insertions(+), 67 deletions(-)

diff --git a/src/Block.tsx b/src/Block.tsx
index 3064c99..00ca0dc 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState, useMemo, useContext } from "react";
+import React, { useEffect, useMemo, useContext } from "react";
 import { useParams, NavLink } from "react-router-dom";
-import { ethers, BigNumber } from "ethers";
+import { ethers } from "ethers";
 import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
 import NavBlock from "./block/NavBlock";
@@ -14,79 +14,17 @@ import HexValue from "./components/HexValue";
 import { RuntimeContext } from "./useRuntime";
 import { useLatestBlockNumber } from "./useLatestBlock";
 import { blockTxsURL } from "./url";
+import { useBlockData } from "./useErigonHooks";
 
 type BlockParams = {
   blockNumberOrHash: string;
 };
 
-interface ExtendedBlock extends ethers.providers.Block {
-  blockReward: BigNumber;
-  unclesReward: BigNumber;
-  feeReward: BigNumber;
-  size: number;
-  sha3Uncles: string;
-  stateRoot: string;
-  totalDifficulty: BigNumber;
-}
-
 const Block: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
   const params = useParams<BlockParams>();
 
-  const [block, setBlock] = useState<ExtendedBlock>();
-  useEffect(() => {
-    if (!provider) {
-      return;
-    }
-
-    const readBlock = async () => {
-      let blockPromise: Promise<any>;
-      if (ethers.utils.isHexString(params.blockNumberOrHash, 32)) {
-        blockPromise = provider.send("eth_getBlockByHash", [
-          params.blockNumberOrHash,
-          false,
-        ]);
-      } else {
-        blockPromise = provider.send("eth_getBlockByNumber", [
-          params.blockNumberOrHash,
-          false,
-        ]);
-      }
-      const [_rawBlock, _rawIssuance, _rawReceipts] = await Promise.all([
-        blockPromise,
-        provider.send("erigon_issuance", [params.blockNumberOrHash]),
-        provider.send("eth_getBlockReceipts", [params.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,
-      };
-      setBlock(extBlock);
-    };
-    readBlock();
-  }, [provider, params.blockNumberOrHash]);
-
+  const block = useBlockData(provider, params.blockNumberOrHash);
   useEffect(() => {
     if (block) {
       document.title = `Block #${block.number} | Otterscan`;
diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts
index 50d4bf3..ecbda33 100644
--- a/src/useErigonHooks.ts
+++ b/src/useErigonHooks.ts
@@ -1,8 +1,79 @@
-import { ethers } from "ethers";
+import { ethers, BigNumber } from "ethers";
 import { useState, useEffect } from "react";
 import { getInternalOperations } from "./nodeFunctions";
 import { TransactionData, InternalOperation } from "./types";
 
+export interface ExtendedBlock extends ethers.providers.Block {
+  blockReward: BigNumber;
+  unclesReward: BigNumber;
+  feeReward: BigNumber;
+  size: number;
+  sha3Uncles: string;
+  stateRoot: string;
+  totalDifficulty: BigNumber;
+}
+
+export const useBlockData = (
+  provider: ethers.providers.JsonRpcProvider | undefined,
+  blockNumberOrHash: string
+) => {
+  const [block, setBlock] = useState<ExtendedBlock>();
+  useEffect(() => {
+    if (!provider) {
+      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,
+      };
+      setBlock(extBlock);
+    };
+    readBlock();
+  }, [provider, blockNumberOrHash]);
+
+  return block;
+};
+
 export const useInternalOperations = (
   provider: ethers.providers.JsonRpcProvider | undefined,
   txData: TransactionData | undefined

From bc8bf0cf9352523743d10134f45328595a435f92 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 26 Jul 2021 20:46:11 -0300
Subject: [PATCH 12/50] Add burned fees info; subtract from fees received by
 miner

---
 src/Block.tsx | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/Block.tsx b/src/Block.tsx
index 00ca0dc..9e061e7 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useContext } from "react";
 import { useParams, NavLink } from "react-router-dom";
-import { ethers } from "ethers";
+import { BigNumber, ethers } from "ethers";
 import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
 import NavBlock from "./block/NavBlock";
@@ -10,6 +10,7 @@ import GasValue from "./components/GasValue";
 import BlockLink from "./components/BlockLink";
 import DecoratedAddressLink from "./components/DecoratedAddressLink";
 import TransactionValue from "./components/TransactionValue";
+import FormattedBalance from "./components/FormattedBalance";
 import HexValue from "./components/HexValue";
 import { RuntimeContext } from "./useRuntime";
 import { useLatestBlockNumber } from "./useLatestBlock";
@@ -39,6 +40,9 @@ const Block: React.FC = () => {
       console.error(err);
     }
   }, [block]);
+  const burnedFees =
+    block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
+  const netFeeReward = block && block.feeReward.sub(burnedFees ?? 0);
 
   const latestBlockNumber = useLatestBlockNumber(provider);
 
@@ -81,12 +85,18 @@ const Block: React.FC = () => {
             <DecoratedAddressLink address={block.miner} miner />
           </InfoRow>
           <InfoRow title="Block Reward">
-            <TransactionValue value={block.blockReward.add(block.feeReward)} />
+            <TransactionValue
+              value={block.blockReward.add(netFeeReward ?? 0)}
+            />
             {!block.feeReward.isZero() && (
               <>
                 {" "}
                 (<TransactionValue value={block.blockReward} hideUnit /> +{" "}
-                <TransactionValue value={block.feeReward} hideUnit />)
+                <TransactionValue
+                  value={netFeeReward ?? BigNumber.from(0)}
+                  hideUnit
+                />
+                )
               </>
             )}
           </InfoRow>
@@ -102,6 +112,24 @@ const Block: React.FC = () => {
           <InfoRow title="Size">
             {ethers.utils.commify(block.size)} bytes
           </InfoRow>
+          {block.baseFeePerGas && (
+            <InfoRow title="Base Fee">
+              <span>
+                <FormattedBalance value={block.baseFeePerGas} decimals={9} />{" "}
+                Gwei (
+                <FormattedBalance
+                  value={block.baseFeePerGas}
+                  decimals={0}
+                />{" "}
+                wei)
+              </span>
+            </InfoRow>
+          )}
+          {burnedFees && (
+            <InfoRow title="Burned Fees">
+              <FormattedBalance value={burnedFees} /> Ether
+            </InfoRow>
+          )}
           <InfoRow title="Gas Used">
             <GasValue value={block.gasUsed} />
           </InfoRow>

From e967abf61e67def44d54e79cbccf845783d3119e Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 26 Jul 2021 20:47:25 -0300
Subject: [PATCH 13/50] Add max fee per gas/max priority fee per gas

---
 src/Transaction.tsx                |  3 +++
 src/components/TransactionType.tsx | 30 ++++++++++++++++++++++++++++++
 src/transaction/Details.tsx        | 24 ++++++++++++++++++++++++
 src/types.ts                       |  3 +++
 4 files changed, 60 insertions(+)
 create mode 100644 src/components/TransactionType.tsx

diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 55de7ac..5e8bb3f 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -92,7 +92,10 @@ const Transaction: React.FC = () => {
         value: _response.value,
         tokenTransfers,
         tokenMetas,
+        type: _response.type ?? 0,
         fee: _response.gasPrice!.mul(_receipt.gasUsed),
+        maxFeePerGas: _response.maxFeePerGas,
+        maxPriorityFeePerGas: _response.maxPriorityFeePerGas,
         gasPrice: _response.gasPrice!,
         gasLimit: _response.gasLimit,
         gasUsed: _receipt.gasUsed,
diff --git a/src/components/TransactionType.tsx b/src/components/TransactionType.tsx
new file mode 100644
index 0000000..ab4c58a
--- /dev/null
+++ b/src/components/TransactionType.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+type TransactionTypeProps = {
+  type: number;
+};
+
+const TransactionType: React.FC<TransactionTypeProps> = ({ type }) => {
+  let description: string;
+  switch (type) {
+    case 0:
+      description = "legacy";
+      break;
+    case 1:
+      description = "EIP-2930";
+      break;
+    case 2:
+      description = "EIP-1559";
+      break;
+    default:
+      description = "unknown";
+  }
+
+  return (
+    <span>
+      {type} <span className="font-bold">({description})</span>
+    </span>
+  );
+};
+
+export default React.memo(TransactionType);
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 30bcbbd..0b2277f 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -15,6 +15,7 @@ import Copy from "../components/Copy";
 import Timestamp from "../components/Timestamp";
 import InternalTransactionOperation from "../components/InternalTransactionOperation";
 import MethodName from "../components/MethodName";
+import TransactionType from "../components/TransactionType";
 import GasValue from "../components/GasValue";
 import FormattedBalance from "../components/FormattedBalance";
 import TokenTransferItem from "../TokenTransferItem";
@@ -130,6 +131,29 @@ const Details: React.FC<DetailsProps> = ({
         {ethers.utils.formatEther(txData.value)} Ether
       </span>
     </InfoRow>
+    <InfoRow title="Type (EIP-2718)">
+      <TransactionType type={txData.type} />
+    </InfoRow>
+    {txData.type === 2 && (
+      <>
+        <InfoRow title="Max Fee Per Gas">
+          <span>
+            <FormattedBalance value={txData.maxFeePerGas!} /> Ether (
+            <FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei)
+          </span>
+        </InfoRow>
+        <InfoRow title="Max Priority Fee Per Gas">
+          <span>
+            <FormattedBalance value={txData.maxPriorityFeePerGas!} /> Ether (
+            <FormattedBalance
+              value={txData.maxPriorityFeePerGas!}
+              decimals={9}
+            />{" "}
+            Gwei)
+          </span>
+        </InfoRow>
+      </>
+    )}
     <InfoRow title="Transaction Fee">
       <FormattedBalance value={txData.fee} /> Ether
     </InfoRow>
diff --git a/src/types.ts b/src/types.ts
index ac53edd..144b9c3 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -49,6 +49,9 @@ export type TransactionData = {
   value: BigNumber;
   tokenTransfers: TokenTransfer[];
   tokenMetas: TokenMetas;
+  type: number;
+  maxFeePerGas?: BigNumber | undefined;
+  maxPriorityFeePerGas?: BigNumber | undefined;
   fee: BigNumber;
   gasPrice: BigNumber;
   gasLimit: BigNumber;

From 91dd933aa2bf9518e3454843a9d51058439f872c Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 04:24:48 -0300
Subject: [PATCH 14/50] Squash block gas used/limit info; add percentage bar

---
 src/Block.tsx              | 37 +++++++++++++++++++++----------------
 src/components/InfoRow.tsx |  2 +-
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/Block.tsx b/src/Block.tsx
index 9e061e7..91951ec 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -5,6 +5,7 @@ import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
 import NavBlock from "./block/NavBlock";
 import ContentFrame from "./ContentFrame";
+import InfoRow from "./components/InfoRow";
 import Timestamp from "./components/Timestamp";
 import GasValue from "./components/GasValue";
 import BlockLink from "./components/BlockLink";
@@ -43,6 +44,8 @@ const Block: React.FC = () => {
   const burnedFees =
     block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
   const netFeeReward = block && block.feeReward.sub(burnedFees ?? 0);
+  const gasUsedPerc =
+    block && block.gasUsed.mul(10000).div(block.gasLimit).toNumber() / 100;
 
   const latestBlockNumber = useLatestBlockNumber(provider);
 
@@ -130,11 +133,24 @@ const Block: React.FC = () => {
               <FormattedBalance value={burnedFees} /> Ether
             </InfoRow>
           )}
-          <InfoRow title="Gas Used">
-            <GasValue value={block.gasUsed} />
-          </InfoRow>
-          <InfoRow title="Gas Limit">
-            <GasValue value={block.gasLimit} />
+          <InfoRow title="Gas Used/Limit">
+            <div className="flex space-x-3 items-baseline">
+              <div>
+                <GasValue value={block.gasUsed} /> /{" "}
+                <GasValue value={block.gasLimit} />
+              </div>
+              <div className="self-center w-40 border rounded border-gray-200">
+                <div className="w-full h-5 rounded bg-gradient-to-r from-red-400 via-yellow-300 to-green-400 relative">
+                  <div
+                    className="absolute top-0 right-0 bg-white h-full rounded-r"
+                    style={{ width: `${100 - gasUsedPerc!}%` }}
+                  ></div>
+                  <div className="w-full h-full absolute flex mix-blend-multiply text-sans text-gray-600">
+                    <span className="m-auto">{gasUsedPerc}%</span>
+                  </div>
+                </div>
+              </div>
+            </div>
           </InfoRow>
           <InfoRow title="Extra Data">
             {extraStr} (Hex:{" "}
@@ -162,15 +178,4 @@ const Block: React.FC = () => {
   );
 };
 
-type InfoRowProps = {
-  title: string;
-};
-
-const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => (
-  <div className="grid grid-cols-4 py-4 text-sm">
-    <div>{title}:</div>
-    <div className="col-span-3">{children}</div>
-  </div>
-);
-
 export default React.memo(Block);
diff --git a/src/components/InfoRow.tsx b/src/components/InfoRow.tsx
index d3758b3..eb40eb6 100644
--- a/src/components/InfoRow.tsx
+++ b/src/components/InfoRow.tsx
@@ -5,7 +5,7 @@ type InfoRowProps = React.PropsWithChildren<{
 }>;
 
 const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => (
-  <div className="grid grid-cols-4 py-4 text-sm">
+  <div className="grid grid-cols-4 py-4 text-sm items-baseline">
     <div>{title}:</div>
     <div className="col-span-3">{children}</div>
   </div>

From d893eb8545583d84258c6bff4ae8104de17fb1cb Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 04:27:08 -0300
Subject: [PATCH 15/50] Reorder difficult/total difficult fields

---
 src/Block.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Block.tsx b/src/Block.tsx
index 91951ec..afa68f4 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -106,12 +106,6 @@ const Block: React.FC = () => {
           <InfoRow title="Uncles Reward">
             <TransactionValue value={block.unclesReward} />
           </InfoRow>
-          <InfoRow title="Difficult">
-            {ethers.utils.commify(block.difficulty)}
-          </InfoRow>
-          <InfoRow title="Total Difficult">
-            {ethers.utils.commify(block.totalDifficulty.toString())}
-          </InfoRow>
           <InfoRow title="Size">
             {ethers.utils.commify(block.size)} bytes
           </InfoRow>
@@ -157,6 +151,12 @@ const Block: React.FC = () => {
             <span className="font-data">{block.extraData}</span>)
           </InfoRow>
           <InfoRow title="Ether Price">N/A</InfoRow>
+          <InfoRow title="Difficult">
+            {ethers.utils.commify(block.difficulty)}
+          </InfoRow>
+          <InfoRow title="Total Difficult">
+            {ethers.utils.commify(block.totalDifficulty.toString())}
+          </InfoRow>
           <InfoRow title="Hash">
             <HexValue value={block.hash} />
           </InfoRow>

From e354973a6382bfa4aa4268e7164c85f9a47d9a2c Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 04:29:36 -0300
Subject: [PATCH 16/50] Squash tx gas used/limit info

---
 src/transaction/Details.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 0b2277f..71cef91 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -170,14 +170,11 @@ const Details: React.FC<DetailsProps> = ({
         )}
       </div>
     </InfoRow>
+    <InfoRow title="Gas Used/Limit">
+      <GasValue value={txData.gasUsed} /> / <GasValue value={txData.gasLimit} />{" "}
+      ({(txData.gasUsedPerc * 100).toFixed(2)}%)
+    </InfoRow>
     <InfoRow title="Ether Price">N/A</InfoRow>
-    <InfoRow title="Gas Limit">
-      <GasValue value={txData.gasLimit} />
-    </InfoRow>
-    <InfoRow title="Gas Used by Transaction">
-      <GasValue value={txData.gasUsed} /> (
-      {(txData.gasUsedPerc * 100).toFixed(2)}%)
-    </InfoRow>
     <InfoRow title="Nonce">{txData.nonce}</InfoRow>
     <InfoRow title="Position in Block">
       <span className="rounded px-2 py-1 bg-gray-100 text-gray-500 text-xs">

From e214117f47fab35b8e58e0ac6ea2755df6efea5f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 04:40:38 -0300
Subject: [PATCH 17/50] Extract PercentageBar component; apply percentage bar
 to tx gas usage

---
 src/Block.tsx                    | 13 ++-----------
 src/components/PercentageBar.tsx | 21 +++++++++++++++++++++
 src/transaction/Details.tsx      | 10 ++++++++--
 3 files changed, 31 insertions(+), 13 deletions(-)
 create mode 100644 src/components/PercentageBar.tsx

diff --git a/src/Block.tsx b/src/Block.tsx
index afa68f4..83ab187 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -8,6 +8,7 @@ import ContentFrame from "./ContentFrame";
 import InfoRow from "./components/InfoRow";
 import Timestamp from "./components/Timestamp";
 import GasValue from "./components/GasValue";
+import PercentageBar from "./components/PercentageBar";
 import BlockLink from "./components/BlockLink";
 import DecoratedAddressLink from "./components/DecoratedAddressLink";
 import TransactionValue from "./components/TransactionValue";
@@ -133,17 +134,7 @@ const Block: React.FC = () => {
                 <GasValue value={block.gasUsed} /> /{" "}
                 <GasValue value={block.gasLimit} />
               </div>
-              <div className="self-center w-40 border rounded border-gray-200">
-                <div className="w-full h-5 rounded bg-gradient-to-r from-red-400 via-yellow-300 to-green-400 relative">
-                  <div
-                    className="absolute top-0 right-0 bg-white h-full rounded-r"
-                    style={{ width: `${100 - gasUsedPerc!}%` }}
-                  ></div>
-                  <div className="w-full h-full absolute flex mix-blend-multiply text-sans text-gray-600">
-                    <span className="m-auto">{gasUsedPerc}%</span>
-                  </div>
-                </div>
-              </div>
+              <PercentageBar perc={gasUsedPerc!} />
             </div>
           </InfoRow>
           <InfoRow title="Extra Data">
diff --git a/src/components/PercentageBar.tsx b/src/components/PercentageBar.tsx
new file mode 100644
index 0000000..a868784
--- /dev/null
+++ b/src/components/PercentageBar.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+type PercentageBarProps = {
+  perc: number;
+};
+
+const PercentageBar: React.FC<PercentageBarProps> = ({ perc }) => (
+  <div className="self-center w-40 border rounded border-gray-200">
+    <div className="w-full h-5 rounded bg-gradient-to-r from-red-400 via-yellow-300 to-green-400 relative">
+      <div
+        className="absolute top-0 right-0 bg-white h-full rounded-r"
+        style={{ width: `${100 - perc}%` }}
+      ></div>
+      <div className="w-full h-full absolute flex mix-blend-multiply text-sans text-gray-600">
+        <span className="m-auto">{perc}%</span>
+      </div>
+    </div>
+  </div>
+);
+
+export default React.memo(PercentageBar);
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 71cef91..2619204 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -20,6 +20,7 @@ import GasValue from "../components/GasValue";
 import FormattedBalance from "../components/FormattedBalance";
 import TokenTransferItem from "../TokenTransferItem";
 import { TransactionData, InternalOperation } from "../types";
+import PercentageBar from "../components/PercentageBar";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -171,8 +172,13 @@ const Details: React.FC<DetailsProps> = ({
       </div>
     </InfoRow>
     <InfoRow title="Gas Used/Limit">
-      <GasValue value={txData.gasUsed} /> / <GasValue value={txData.gasLimit} />{" "}
-      ({(txData.gasUsedPerc * 100).toFixed(2)}%)
+      <div className="flex space-x-3 items-baseline">
+        <div>
+          <GasValue value={txData.gasUsed} /> /{" "}
+          <GasValue value={txData.gasLimit} />
+        </div>
+        <PercentageBar perc={Math.round(txData.gasUsedPerc * 10000) / 100} />
+      </div>
     </InfoRow>
     <InfoRow title="Ether Price">N/A</InfoRow>
     <InfoRow title="Nonce">{txData.nonce}</InfoRow>

From 31287796f0b55ee1212ad678d055e826777aa467 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 04:53:55 -0300
Subject: [PATCH 18/50] Remove unnecessary field

---
 src/Transaction.tsx         | 4 +---
 src/transaction/Details.tsx | 8 +++++++-
 src/types.ts                | 3 +--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 5e8bb3f..ae4fb54 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -97,10 +97,8 @@ const Transaction: React.FC = () => {
         maxFeePerGas: _response.maxFeePerGas,
         maxPriorityFeePerGas: _response.maxPriorityFeePerGas,
         gasPrice: _response.gasPrice!,
-        gasLimit: _response.gasLimit,
         gasUsed: _receipt.gasUsed,
-        gasUsedPerc:
-          _receipt.gasUsed.toNumber() / _response.gasLimit.toNumber(),
+        gasLimit: _response.gasLimit,
         nonce: _response.nonce,
         data: _response.data,
         logs: _receipt.logs,
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 2619204..65a4592 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -177,7 +177,13 @@ const Details: React.FC<DetailsProps> = ({
           <GasValue value={txData.gasUsed} /> /{" "}
           <GasValue value={txData.gasLimit} />
         </div>
-        <PercentageBar perc={Math.round(txData.gasUsedPerc * 10000) / 100} />
+        <PercentageBar
+          perc={
+            Math.round(
+              (txData.gasUsed.toNumber() / txData.gasLimit.toNumber()) * 10000
+            ) / 100
+          }
+        />
       </div>
     </InfoRow>
     <InfoRow title="Ether Price">N/A</InfoRow>
diff --git a/src/types.ts b/src/types.ts
index 144b9c3..64fba94 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -54,9 +54,8 @@ export type TransactionData = {
   maxPriorityFeePerGas?: BigNumber | undefined;
   fee: BigNumber;
   gasPrice: BigNumber;
-  gasLimit: BigNumber;
   gasUsed: BigNumber;
-  gasUsedPerc: number;
+  gasLimit: BigNumber;
   nonce: number;
   data: string;
   logs: ethers.providers.Log[];

From 9484ed59e2eb916e5301e19e53c15d0600838fe2 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 14:49:40 -0300
Subject: [PATCH 19/50] Add block base fee info to tx details page

---
 src/Transaction.tsx         |  1 +
 src/transaction/Details.tsx | 13 +++++++++++++
 src/types.ts                |  1 +
 3 files changed, 15 insertions(+)

diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index ae4fb54..ad940fe 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -94,6 +94,7 @@ const Transaction: React.FC = () => {
         tokenMetas,
         type: _response.type ?? 0,
         fee: _response.gasPrice!.mul(_receipt.gasUsed),
+        blockBaseFeePerGas: _block.baseFeePerGas,
         maxFeePerGas: _response.maxFeePerGas,
         maxPriorityFeePerGas: _response.maxPriorityFeePerGas,
         gasPrice: _response.gasPrice!,
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 65a4592..27d1197 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -135,6 +135,19 @@ const Details: React.FC<DetailsProps> = ({
     <InfoRow title="Type (EIP-2718)">
       <TransactionType type={txData.type} />
     </InfoRow>
+    {txData.blockBaseFeePerGas && (
+      <InfoRow title="Block Base Fee">
+        <span>
+          <FormattedBalance value={txData.blockBaseFeePerGas} decimals={9} />{" "}
+          Gwei (
+          <FormattedBalance
+            value={txData.blockBaseFeePerGas}
+            decimals={0}
+          />{" "}
+          wei)
+        </span>
+      </InfoRow>
+    )}
     {txData.type === 2 && (
       <>
         <InfoRow title="Max Fee Per Gas">
diff --git a/src/types.ts b/src/types.ts
index 64fba94..482828e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -53,6 +53,7 @@ export type TransactionData = {
   maxFeePerGas?: BigNumber | undefined;
   maxPriorityFeePerGas?: BigNumber | undefined;
   fee: BigNumber;
+  blockBaseFeePerGas?: BigNumber | undefined | null;
   gasPrice: BigNumber;
   gasUsed: BigNumber;
   gasLimit: BigNumber;

From eaa018e207bb68603095f29e3acf80b0acf1fdcb Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 16:09:40 -0300
Subject: [PATCH 20/50] Reorder fields

---
 src/transaction/Details.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 27d1197..e8e1159 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -150,12 +150,6 @@ const Details: React.FC<DetailsProps> = ({
     )}
     {txData.type === 2 && (
       <>
-        <InfoRow title="Max Fee Per Gas">
-          <span>
-            <FormattedBalance value={txData.maxFeePerGas!} /> Ether (
-            <FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei)
-          </span>
-        </InfoRow>
         <InfoRow title="Max Priority Fee Per Gas">
           <span>
             <FormattedBalance value={txData.maxPriorityFeePerGas!} /> Ether (
@@ -166,6 +160,12 @@ const Details: React.FC<DetailsProps> = ({
             Gwei)
           </span>
         </InfoRow>
+        <InfoRow title="Max Fee Per Gas">
+          <span>
+            <FormattedBalance value={txData.maxFeePerGas!} /> Ether (
+            <FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei)
+          </span>
+        </InfoRow>
       </>
     )}
     <InfoRow title="Transaction Fee">

From 873541ec647dab211f6e5fec0f3d330183c4212d Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 16:27:06 -0300
Subject: [PATCH 21/50] Add hyperlinks to EIP tx types

---
 src/components/ExternalLink.tsx    | 23 +++++++++++++++++++++++
 src/components/TransactionType.tsx | 15 ++++++++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ExternalLink.tsx

diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
new file mode 100644
index 0000000..5232a9d
--- /dev/null
+++ b/src/components/ExternalLink.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+
+type ExternalLinkProps = {
+  href: string;
+};
+
+const ExternalLink: React.FC<ExternalLinkProps> = ({ href, children }) => (
+  <a
+    className="text-link-blue hover:text-link-blue-hover"
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <span className="inline-flex items-center space-x-1">
+      <span>{children}</span>
+      <FontAwesomeIcon icon={faExternalLinkAlt} size="1x" />
+    </span>
+  </a>
+);
+
+export default ExternalLink;
diff --git a/src/components/TransactionType.tsx b/src/components/TransactionType.tsx
index ab4c58a..e7faa6c 100644
--- a/src/components/TransactionType.tsx
+++ b/src/components/TransactionType.tsx
@@ -1,20 +1,29 @@
 import React from "react";
+import ExternalLink from "./ExternalLink";
 
 type TransactionTypeProps = {
   type: number;
 };
 
 const TransactionType: React.FC<TransactionTypeProps> = ({ type }) => {
-  let description: string;
+  let description: React.ReactNode;
   switch (type) {
     case 0:
       description = "legacy";
       break;
     case 1:
-      description = "EIP-2930";
+      description = (
+        <ExternalLink href="https://eips.ethereum.org/EIPS/eip-2930">
+          EIP-2930
+        </ExternalLink>
+      );
       break;
     case 2:
-      description = "EIP-1559";
+      description = (
+        <ExternalLink href="https://eips.ethereum.org/EIPS/eip-1559">
+          EIP-1559
+        </ExternalLink>
+      );
       break;
     default:
       description = "unknown";

From 8cacd01f4260d58cae09ca6991c1feb40a7597a1 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 16:36:34 -0300
Subject: [PATCH 22/50] Enable rich info on InfoRow component title; add EIP
 hyperlink to tx type

---
 src/components/ExternalLink.tsx |  4 ++--
 src/components/InfoRow.tsx      |  2 +-
 src/transaction/Details.tsx     | 13 ++++++++++++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
index 5232a9d..51769a8 100644
--- a/src/components/ExternalLink.tsx
+++ b/src/components/ExternalLink.tsx
@@ -13,9 +13,9 @@ const ExternalLink: React.FC<ExternalLinkProps> = ({ href, children }) => (
     target="_blank"
     rel="noopener noreferrer"
   >
-    <span className="inline-flex items-center space-x-1">
+    <span className="inline-flex items-baseline space-x-1">
       <span>{children}</span>
-      <FontAwesomeIcon icon={faExternalLinkAlt} size="1x" />
+      <FontAwesomeIcon icon={faExternalLinkAlt} size="sm" />
     </span>
   </a>
 );
diff --git a/src/components/InfoRow.tsx b/src/components/InfoRow.tsx
index eb40eb6..947eec7 100644
--- a/src/components/InfoRow.tsx
+++ b/src/components/InfoRow.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 type InfoRowProps = React.PropsWithChildren<{
-  title: string;
+  title: React.ReactNode;
 }>;
 
 const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => (
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index e8e1159..86b0c0e 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -21,6 +21,7 @@ import FormattedBalance from "../components/FormattedBalance";
 import TokenTransferItem from "../TokenTransferItem";
 import { TransactionData, InternalOperation } from "../types";
 import PercentageBar from "../components/PercentageBar";
+import ExternalLink from "../components/ExternalLink";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -132,7 +133,17 @@ const Details: React.FC<DetailsProps> = ({
         {ethers.utils.formatEther(txData.value)} Ether
       </span>
     </InfoRow>
-    <InfoRow title="Type (EIP-2718)">
+    <InfoRow
+      title={
+        <>
+          Type (
+          <ExternalLink href="https://eips.ethereum.org/EIPS/eip-2718">
+            EIP-2718
+          </ExternalLink>
+          )
+        </>
+      }
+    >
       <TransactionType type={txData.type} />
     </InfoRow>
     {txData.blockBaseFeePerGas && (

From f0e96990efea88be5dd390afbf7c0ad8903e9698 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 18:44:50 -0300
Subject: [PATCH 23/50] Add burnt/miner fee split info

---
 src/transaction/Details.tsx     | 388 +++++++++++++++++---------------
 src/transaction/RewardSplit.tsx |  54 +++++
 2 files changed, 256 insertions(+), 186 deletions(-)
 create mode 100644 src/transaction/RewardSplit.tsx

diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 86b0c0e..1a1cd64 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -16,6 +16,7 @@ import Timestamp from "../components/Timestamp";
 import InternalTransactionOperation from "../components/InternalTransactionOperation";
 import MethodName from "../components/MethodName";
 import TransactionType from "../components/TransactionType";
+import RewardSplit from "./RewardSplit";
 import GasValue from "../components/GasValue";
 import FormattedBalance from "../components/FormattedBalance";
 import TokenTransferItem from "../TokenTransferItem";
@@ -33,198 +34,213 @@ const Details: React.FC<DetailsProps> = ({
   txData,
   internalOps,
   sendsEthToMiner,
-}) => (
-  <ContentFrame tabs>
-    <InfoRow title="Transaction Hash">
-      <div className="flex items-baseline space-x-2">
-        <span className="font-hash">{txData.transactionHash}</span>
-        <Copy value={txData.transactionHash} />
-      </div>
-    </InfoRow>
-    <InfoRow title="Status">
-      {txData.status ? (
-        <span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-green-50 text-green-500 text-xs">
-          <FontAwesomeIcon icon={faCheckCircle} size="1x" />
-          <span>Success</span>
-        </span>
-      ) : (
-        <span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-red-50 text-red-500 text-xs">
-          <FontAwesomeIcon icon={faTimesCircle} size="1x" />
-          <span>Fail</span>
-        </span>
-      )}
-    </InfoRow>
-    <InfoRow title="Block">
-      <div className="flex items-baseline space-x-2">
-        <BlockLink blockTag={txData.blockNumber} />
-        <BlockConfirmations confirmations={txData.confirmations} />
-      </div>
-    </InfoRow>
-    <InfoRow title="Timestamp">
-      <Timestamp value={txData.timestamp} />
-    </InfoRow>
-    <InfoRow title="From">
-      <div className="flex items-baseline space-x-2 -ml-1">
-        <AddressHighlighter address={txData.from}>
-          <DecoratedAddressLink
-            address={txData.from}
-            miner={txData.from === txData.miner}
-            txFrom
-          />
-        </AddressHighlighter>
-        <Copy value={txData.from} />
-      </div>
-    </InfoRow>
-    <InfoRow title={txData.to ? "Interacted With (To)" : "Contract Created"}>
-      {txData.to ? (
-        <div className="flex items-baseline space-x-2 -ml-1">
-          <AddressHighlighter address={txData.to}>
-            <DecoratedAddressLink
-              address={txData.to}
-              miner={txData.to === txData.miner}
-              txTo
-            />
-          </AddressHighlighter>
-          <Copy value={txData.to} />
-        </div>
-      ) : (
-        <div className="flex items-baseline space-x-2 -ml-1">
-          <AddressHighlighter address={txData.createdContractAddress!}>
-            <DecoratedAddressLink
-              address={txData.createdContractAddress!}
-              creation
-              txTo
-            />
-          </AddressHighlighter>
-          <Copy value={txData.createdContractAddress!} />
-        </div>
-      )}
-      {internalOps && (
-        <div className="mt-2 space-y-1">
-          {internalOps.map((op, i) => (
-            <InternalTransactionOperation
-              key={i}
-              txData={txData}
-              internalOp={op}
-            />
-          ))}
-        </div>
-      )}
-    </InfoRow>
-    <InfoRow title="Transaction Action">
-      <MethodName data={txData.data} />
-    </InfoRow>
-    {txData.tokenTransfers.length > 0 && (
-      <InfoRow title={`Tokens Transferred (${txData.tokenTransfers.length})`}>
-        <div>
-          {txData.tokenTransfers.map((t, i) => (
-            <TokenTransferItem
-              key={i}
-              t={t}
-              txData={txData}
-              tokenMetas={txData.tokenMetas}
-            />
-          ))}
+}) => {
+  const hasEIP1559 =
+    txData.blockBaseFeePerGas !== undefined &&
+    txData.blockBaseFeePerGas !== null;
+
+  return (
+    <ContentFrame tabs>
+      <InfoRow title="Transaction Hash">
+        <div className="flex items-baseline space-x-2">
+          <span className="font-hash">{txData.transactionHash}</span>
+          <Copy value={txData.transactionHash} />
         </div>
       </InfoRow>
-    )}
-    <InfoRow title="Value">
-      <span className="rounded bg-gray-100 px-2 py-1 text-xs">
-        {ethers.utils.formatEther(txData.value)} Ether
-      </span>
-    </InfoRow>
-    <InfoRow
-      title={
-        <>
-          Type (
-          <ExternalLink href="https://eips.ethereum.org/EIPS/eip-2718">
-            EIP-2718
-          </ExternalLink>
-          )
-        </>
-      }
-    >
-      <TransactionType type={txData.type} />
-    </InfoRow>
-    {txData.blockBaseFeePerGas && (
-      <InfoRow title="Block Base Fee">
-        <span>
-          <FormattedBalance value={txData.blockBaseFeePerGas} decimals={9} />{" "}
-          Gwei (
-          <FormattedBalance
-            value={txData.blockBaseFeePerGas}
-            decimals={0}
-          />{" "}
-          wei)
-        </span>
-      </InfoRow>
-    )}
-    {txData.type === 2 && (
-      <>
-        <InfoRow title="Max Priority Fee Per Gas">
-          <span>
-            <FormattedBalance value={txData.maxPriorityFeePerGas!} /> Ether (
-            <FormattedBalance
-              value={txData.maxPriorityFeePerGas!}
-              decimals={9}
-            />{" "}
-            Gwei)
+      <InfoRow title="Status">
+        {txData.status ? (
+          <span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-green-50 text-green-500 text-xs">
+            <FontAwesomeIcon icon={faCheckCircle} size="1x" />
+            <span>Success</span>
           </span>
-        </InfoRow>
-        <InfoRow title="Max Fee Per Gas">
-          <span>
-            <FormattedBalance value={txData.maxFeePerGas!} /> Ether (
-            <FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei)
-          </span>
-        </InfoRow>
-      </>
-    )}
-    <InfoRow title="Transaction Fee">
-      <FormattedBalance value={txData.fee} /> Ether
-    </InfoRow>
-    <InfoRow title="Gas Price">
-      <div className="flex items-baseline space-x-1">
-        <span>
-          <FormattedBalance value={txData.gasPrice} /> Ether (
-          <FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei)
-        </span>
-        {sendsEthToMiner && (
-          <span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">
-            Flashbots
+        ) : (
+          <span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-red-50 text-red-500 text-xs">
+            <FontAwesomeIcon icon={faTimesCircle} size="1x" />
+            <span>Fail</span>
           </span>
         )}
-      </div>
-    </InfoRow>
-    <InfoRow title="Gas Used/Limit">
-      <div className="flex space-x-3 items-baseline">
-        <div>
-          <GasValue value={txData.gasUsed} /> /{" "}
-          <GasValue value={txData.gasLimit} />
+      </InfoRow>
+      <InfoRow title="Block">
+        <div className="flex items-baseline space-x-2">
+          <BlockLink blockTag={txData.blockNumber} />
+          <BlockConfirmations confirmations={txData.confirmations} />
         </div>
-        <PercentageBar
-          perc={
-            Math.round(
-              (txData.gasUsed.toNumber() / txData.gasLimit.toNumber()) * 10000
-            ) / 100
-          }
+      </InfoRow>
+      <InfoRow title="Timestamp">
+        <Timestamp value={txData.timestamp} />
+      </InfoRow>
+      <InfoRow title="From">
+        <div className="flex items-baseline space-x-2 -ml-1">
+          <AddressHighlighter address={txData.from}>
+            <DecoratedAddressLink
+              address={txData.from}
+              miner={txData.from === txData.miner}
+              txFrom
+            />
+          </AddressHighlighter>
+          <Copy value={txData.from} />
+        </div>
+      </InfoRow>
+      <InfoRow title={txData.to ? "Interacted With (To)" : "Contract Created"}>
+        {txData.to ? (
+          <div className="flex items-baseline space-x-2 -ml-1">
+            <AddressHighlighter address={txData.to}>
+              <DecoratedAddressLink
+                address={txData.to}
+                miner={txData.to === txData.miner}
+                txTo
+              />
+            </AddressHighlighter>
+            <Copy value={txData.to} />
+          </div>
+        ) : (
+          <div className="flex items-baseline space-x-2 -ml-1">
+            <AddressHighlighter address={txData.createdContractAddress!}>
+              <DecoratedAddressLink
+                address={txData.createdContractAddress!}
+                creation
+                txTo
+              />
+            </AddressHighlighter>
+            <Copy value={txData.createdContractAddress!} />
+          </div>
+        )}
+        {internalOps && (
+          <div className="mt-2 space-y-1">
+            {internalOps.map((op, i) => (
+              <InternalTransactionOperation
+                key={i}
+                txData={txData}
+                internalOp={op}
+              />
+            ))}
+          </div>
+        )}
+      </InfoRow>
+      <InfoRow title="Transaction Action">
+        <MethodName data={txData.data} />
+      </InfoRow>
+      {txData.tokenTransfers.length > 0 && (
+        <InfoRow title={`Tokens Transferred (${txData.tokenTransfers.length})`}>
+          <div>
+            {txData.tokenTransfers.map((t, i) => (
+              <TokenTransferItem
+                key={i}
+                t={t}
+                txData={txData}
+                tokenMetas={txData.tokenMetas}
+              />
+            ))}
+          </div>
+        </InfoRow>
+      )}
+      <InfoRow title="Value">
+        <span className="rounded bg-gray-100 px-2 py-1 text-xs">
+          {ethers.utils.formatEther(txData.value)} Ether
+        </span>
+      </InfoRow>
+      <InfoRow
+        title={
+          <>
+            Type (
+            <ExternalLink href="https://eips.ethereum.org/EIPS/eip-2718">
+              EIP-2718
+            </ExternalLink>
+            )
+          </>
+        }
+      >
+        <TransactionType type={txData.type} />
+      </InfoRow>
+      {hasEIP1559 && (
+        <InfoRow title="Block Base Fee">
+          <span>
+            <FormattedBalance value={txData.blockBaseFeePerGas!} decimals={9} />{" "}
+            Gwei (
+            <FormattedBalance
+              value={txData.blockBaseFeePerGas!}
+              decimals={0}
+            />{" "}
+            wei)
+          </span>
+        </InfoRow>
+      )}
+      {txData.type === 2 && (
+        <>
+          <InfoRow title="Max Priority Fee Per Gas">
+            <span>
+              <FormattedBalance value={txData.maxPriorityFeePerGas!} /> Ether (
+              <FormattedBalance
+                value={txData.maxPriorityFeePerGas!}
+                decimals={9}
+              />{" "}
+              Gwei)
+            </span>
+          </InfoRow>
+          <InfoRow title="Max Fee Per Gas">
+            <span>
+              <FormattedBalance value={txData.maxFeePerGas!} /> Ether (
+              <FormattedBalance
+                value={txData.maxFeePerGas!}
+                decimals={9}
+              />{" "}
+              Gwei)
+            </span>
+          </InfoRow>
+        </>
+      )}
+      <InfoRow title="Transaction Fee">
+        <div className="space-y-2">
+          <div>
+            <FormattedBalance value={txData.fee} /> Ether
+          </div>
+          {hasEIP1559 && <RewardSplit txData={txData} />}
+        </div>
+      </InfoRow>
+      <InfoRow title="Gas Price">
+        <div className="flex items-baseline space-x-1">
+          <span>
+            <FormattedBalance value={txData.gasPrice} /> Ether (
+            <FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei)
+          </span>
+          {sendsEthToMiner && (
+            <span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">
+              Flashbots
+            </span>
+          )}
+        </div>
+      </InfoRow>
+      <InfoRow title="Gas Used/Limit">
+        <div className="flex space-x-3 items-baseline">
+          <div>
+            <GasValue value={txData.gasUsed} /> /{" "}
+            <GasValue value={txData.gasLimit} />
+          </div>
+          <PercentageBar
+            perc={
+              Math.round(
+                (txData.gasUsed.toNumber() / txData.gasLimit.toNumber()) * 10000
+              ) / 100
+            }
+          />
+        </div>
+      </InfoRow>
+      <InfoRow title="Ether Price">N/A</InfoRow>
+      <InfoRow title="Nonce">{txData.nonce}</InfoRow>
+      <InfoRow title="Position in Block">
+        <span className="rounded px-2 py-1 bg-gray-100 text-gray-500 text-xs">
+          {txData.transactionIndex}
+        </span>
+      </InfoRow>
+      <InfoRow title="Input Data">
+        <textarea
+          className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
+          value={txData.data}
+          readOnly
         />
-      </div>
-    </InfoRow>
-    <InfoRow title="Ether Price">N/A</InfoRow>
-    <InfoRow title="Nonce">{txData.nonce}</InfoRow>
-    <InfoRow title="Position in Block">
-      <span className="rounded px-2 py-1 bg-gray-100 text-gray-500 text-xs">
-        {txData.transactionIndex}
-      </span>
-    </InfoRow>
-    <InfoRow title="Input Data">
-      <textarea
-        className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
-        value={txData.data}
-        readOnly
-      />
-    </InfoRow>
-  </ContentFrame>
-);
+      </InfoRow>
+    </ContentFrame>
+  );
+};
 
 export default React.memo(Details);
diff --git a/src/transaction/RewardSplit.tsx b/src/transaction/RewardSplit.tsx
new file mode 100644
index 0000000..37069fc
--- /dev/null
+++ b/src/transaction/RewardSplit.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBurn, faCoins } from "@fortawesome/free-solid-svg-icons";
+import FormattedBalance from "../components/FormattedBalance";
+import { TransactionData } from "../types";
+
+type RewardSplitProps = {
+  txData: TransactionData;
+};
+
+const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
+  const burntFees = txData.blockBaseFeePerGas!.mul(txData.gasUsed);
+  const minerReward = txData.gasPrice.mul(txData.gasUsed).sub(burntFees);
+  const burntPerc =
+    burntFees.mul(10000).div(txData.gasPrice.mul(txData.gasUsed)).toNumber() /
+    100;
+
+  return (
+    <div className="inline-flex space-x-2">
+      <span className="flex space-x-1 text-orange-500">
+        <span title="Burnt fees">
+          <FontAwesomeIcon icon={faBurn} size="1x" />
+        </span>
+        <span>
+          <span className="line-through">
+            <FormattedBalance value={burntFees} />
+          </span>{" "}
+          Ether
+        </span>
+      </span>
+      <span className="flex space-x-1">
+        <span className="text-yellow-300" title="Miner fees">
+          <FontAwesomeIcon icon={faCoins} size="1x" />
+        </span>
+        <span>
+          <FormattedBalance value={minerReward} /> Ether
+        </span>
+      </span>
+      <div className="self-center w-40 border rounded border-gray-200">
+        <div className="w-full h-5 rounded bg-orange-500 relative">
+          <div
+            className="absolute top-0 right-0 bg-yellow-200 h-full rounded-r"
+            style={{ width: `${100 - burntPerc}%` }}
+          ></div>
+          <div className="w-full h-full absolute flex mix-blend-multiply text-sans text-gray-600">
+            <span className="m-auto">{burntPerc}%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(RewardSplit);

From 7ea23b02ed1a160aeb570da8bde7f70a0474bc53 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 19:00:50 -0300
Subject: [PATCH 24/50] Fix textarea alignment

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

diff --git a/src/components/InfoRow.tsx b/src/components/InfoRow.tsx
index 947eec7..4651923 100644
--- a/src/components/InfoRow.tsx
+++ b/src/components/InfoRow.tsx
@@ -5,7 +5,7 @@ type InfoRowProps = React.PropsWithChildren<{
 }>;
 
 const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => (
-  <div className="grid grid-cols-4 py-4 text-sm items-baseline">
+  <div className="grid grid-cols-4 py-4 text-sm">
     <div>{title}:</div>
     <div className="col-span-3">{children}</div>
   </div>

From c7b36152a810f40407a7f9136c9c51c55242dfa5 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 19:16:02 -0300
Subject: [PATCH 25/50] Burnt fees new layout

---
 src/transaction/Details.tsx     |  2 +-
 src/transaction/RewardSplit.tsx | 63 +++++++++++++++++++++------------
 2 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 1a1cd64..d7491f8 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -190,7 +190,7 @@ const Details: React.FC<DetailsProps> = ({
         </>
       )}
       <InfoRow title="Transaction Fee">
-        <div className="space-y-2">
+        <div className="space-y-3">
           <div>
             <FormattedBalance value={txData.fee} /> Ether
           </div>
diff --git a/src/transaction/RewardSplit.tsx b/src/transaction/RewardSplit.tsx
index 37069fc..a9ffd85 100644
--- a/src/transaction/RewardSplit.tsx
+++ b/src/transaction/RewardSplit.tsx
@@ -1,6 +1,10 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBurn, faCoins } from "@fortawesome/free-solid-svg-icons";
+import {
+  faAngleRight,
+  faBurn,
+  faCoins,
+} from "@fortawesome/free-solid-svg-icons";
 import FormattedBalance from "../components/FormattedBalance";
 import { TransactionData } from "../types";
 
@@ -16,37 +20,50 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
     100;
 
   return (
-    <div className="inline-flex space-x-2">
-      <span className="flex space-x-1 text-orange-500">
-        <span title="Burnt fees">
-          <FontAwesomeIcon icon={faBurn} size="1x" />
-        </span>
-        <span>
-          <span className="line-through">
-            <FormattedBalance value={burntFees} />
-          </span>{" "}
-          Ether
-        </span>
-      </span>
-      <span className="flex space-x-1">
-        <span className="text-yellow-300" title="Miner fees">
-          <FontAwesomeIcon icon={faCoins} size="1x" />
-        </span>
-        <span>
-          <FormattedBalance value={minerReward} /> Ether
-        </span>
-      </span>
-      <div className="self-center w-40 border rounded border-gray-200">
+    <div className="space-y-2">
+      <div
+        className="self-center w-40 border rounded border-gray-200"
+        title="Burnt Fees Percentage"
+      >
         <div className="w-full h-5 rounded bg-orange-500 relative">
           <div
             className="absolute top-0 right-0 bg-yellow-200 h-full rounded-r"
             style={{ width: `${100 - burntPerc}%` }}
           ></div>
-          <div className="w-full h-full absolute flex mix-blend-multiply text-sans text-gray-600">
+          <div className="w-full h-full absolute flex mix-blend-multiply text-sans text-orange-800">
             <span className="m-auto">{burntPerc}%</span>
           </div>
         </div>
       </div>
+      <div className="flex items-baseline space-x-1 text-sm">
+        <span className="text-gray-500">
+          <FontAwesomeIcon icon={faAngleRight} size="1x" />
+        </span>
+        <span className="flex space-x-1 text-orange-500">
+          <span title="Burnt fees">
+            <FontAwesomeIcon icon={faBurn} size="1x" />
+          </span>
+          <span>
+            <span className="line-through">
+              <FormattedBalance value={burntFees} />
+            </span>{" "}
+            Ether
+          </span>
+        </span>
+      </div>
+      <div className="flex items-baseline space-x-1 text-sm">
+        <span className="text-gray-500">
+          <FontAwesomeIcon icon={faAngleRight} size="1x" />
+        </span>
+        <span className="flex space-x-1">
+          <span className="text-yellow-300" title="Miner fees">
+            <FontAwesomeIcon icon={faCoins} size="1x" />
+          </span>
+          <span>
+            <FormattedBalance value={minerReward} /> Ether
+          </span>
+        </span>
+      </div>
     </div>
   );
 };

From 1e34e7fc8dbe397f77b76f344071e7e5e9037664 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 21:28:02 -0300
Subject: [PATCH 26/50] New gauge style

---
 src/components/PercentageGauge.tsx | 34 ++++++++++++
 src/transaction/RewardSplit.tsx    | 83 +++++++++++++-----------------
 2 files changed, 71 insertions(+), 46 deletions(-)
 create mode 100644 src/components/PercentageGauge.tsx

diff --git a/src/components/PercentageGauge.tsx b/src/components/PercentageGauge.tsx
new file mode 100644
index 0000000..23af8f7
--- /dev/null
+++ b/src/components/PercentageGauge.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+type PercentageGaugeProps = {
+  perc: number;
+  bgFull: string;
+  bgPerc: string;
+  textPerc: string;
+};
+
+const PercentageGauge: React.FC<PercentageGaugeProps> = ({
+  perc,
+  bgFull,
+  bgPerc,
+  textPerc,
+}) => (
+  <div className="w-60 h-6 border-l-2 border-gray-400 relative">
+    <div className="flex absolute w-full h-full">
+      <div className={`my-auto h-5 rounded-r-lg w-full ${bgFull}`}></div>
+    </div>
+    <div className="flex absolute w-full h-full">
+      <div
+        className={`my-auto h-5 rounded-r-lg ${bgPerc}`}
+        style={{ width: `${perc}%` }}
+      ></div>
+    </div>
+    <div
+      className={`flex absolute w-full h-full mix-blend-multiply text-sans ${textPerc}`}
+    >
+      <span className="m-auto">{perc}%</span>
+    </div>
+  </div>
+);
+
+export default React.memo(PercentageGauge);
diff --git a/src/transaction/RewardSplit.tsx b/src/transaction/RewardSplit.tsx
index a9ffd85..9005d12 100644
--- a/src/transaction/RewardSplit.tsx
+++ b/src/transaction/RewardSplit.tsx
@@ -1,12 +1,9 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faAngleRight,
-  faBurn,
-  faCoins,
-} from "@fortawesome/free-solid-svg-icons";
+import { faBurn, faCoins } from "@fortawesome/free-solid-svg-icons";
 import FormattedBalance from "../components/FormattedBalance";
 import { TransactionData } from "../types";
+import PercentageGauge from "../components/PercentageGauge";
 
 type RewardSplitProps = {
   txData: TransactionData;
@@ -20,49 +17,43 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
     100;
 
   return (
-    <div className="space-y-2">
-      <div
-        className="self-center w-40 border rounded border-gray-200"
-        title="Burnt Fees Percentage"
-      >
-        <div className="w-full h-5 rounded bg-orange-500 relative">
-          <div
-            className="absolute top-0 right-0 bg-yellow-200 h-full rounded-r"
-            style={{ width: `${100 - burntPerc}%` }}
-          ></div>
-          <div className="w-full h-full absolute flex mix-blend-multiply text-sans text-orange-800">
-            <span className="m-auto">{burntPerc}%</span>
-          </div>
+    <div className="inline-block">
+      <div className="grid grid-cols-2 gap-x-2 gap-y-1 items-center text-sm">
+        <PercentageGauge
+          perc={burntPerc}
+          bgFull="bg-orange-100"
+          bgPerc="bg-orange-500"
+          textPerc="text-orange-800"
+        />
+        <div className="flex items-baseline space-x-1">
+          <span className="flex space-x-1 text-orange-500">
+            <span title="Burnt fees">
+              <FontAwesomeIcon icon={faBurn} size="1x" />
+            </span>
+            <span>
+              <span className="line-through">
+                <FormattedBalance value={burntFees} />
+              </span>{" "}
+              Ether
+            </span>
+          </span>
         </div>
-      </div>
-      <div className="flex items-baseline space-x-1 text-sm">
-        <span className="text-gray-500">
-          <FontAwesomeIcon icon={faAngleRight} size="1x" />
-        </span>
-        <span className="flex space-x-1 text-orange-500">
-          <span title="Burnt fees">
-            <FontAwesomeIcon icon={faBurn} size="1x" />
+        <PercentageGauge
+          perc={100 - burntPerc}
+          bgFull="bg-yellow-100"
+          bgPerc="bg-yellow-300"
+          textPerc="text-yellow-700"
+        />
+        <div className="flex items-baseline space-x-1">
+          <span className="flex space-x-1">
+            <span className="text-yellow-300" title="Miner fees">
+              <FontAwesomeIcon icon={faCoins} size="1x" />
+            </span>
+            <span>
+              <FormattedBalance value={minerReward} /> Ether
+            </span>
           </span>
-          <span>
-            <span className="line-through">
-              <FormattedBalance value={burntFees} />
-            </span>{" "}
-            Ether
-          </span>
-        </span>
-      </div>
-      <div className="flex items-baseline space-x-1 text-sm">
-        <span className="text-gray-500">
-          <FontAwesomeIcon icon={faAngleRight} size="1x" />
-        </span>
-        <span className="flex space-x-1">
-          <span className="text-yellow-300" title="Miner fees">
-            <FontAwesomeIcon icon={faCoins} size="1x" />
-          </span>
-          <span>
-            <FormattedBalance value={minerReward} /> Ether
-          </span>
-        </span>
+        </div>
       </div>
     </div>
   );

From 71f8e5ad3bebb6a043f216ce8831f0c3e73d8dce Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 21:54:21 -0300
Subject: [PATCH 27/50] Reorder fields

---
 src/transaction/Details.tsx | 42 ++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index d7491f8..7346b0c 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -152,19 +152,6 @@ const Details: React.FC<DetailsProps> = ({
       >
         <TransactionType type={txData.type} />
       </InfoRow>
-      {hasEIP1559 && (
-        <InfoRow title="Block Base Fee">
-          <span>
-            <FormattedBalance value={txData.blockBaseFeePerGas!} decimals={9} />{" "}
-            Gwei (
-            <FormattedBalance
-              value={txData.blockBaseFeePerGas!}
-              decimals={0}
-            />{" "}
-            wei)
-          </span>
-        </InfoRow>
-      )}
       {txData.type === 2 && (
         <>
           <InfoRow title="Max Priority Fee Per Gas">
@@ -189,14 +176,6 @@ const Details: React.FC<DetailsProps> = ({
           </InfoRow>
         </>
       )}
-      <InfoRow title="Transaction Fee">
-        <div className="space-y-3">
-          <div>
-            <FormattedBalance value={txData.fee} /> Ether
-          </div>
-          {hasEIP1559 && <RewardSplit txData={txData} />}
-        </div>
-      </InfoRow>
       <InfoRow title="Gas Price">
         <div className="flex items-baseline space-x-1">
           <span>
@@ -225,6 +204,27 @@ const Details: React.FC<DetailsProps> = ({
           />
         </div>
       </InfoRow>
+      {hasEIP1559 && (
+        <InfoRow title="Block Base Fee">
+          <span>
+            <FormattedBalance value={txData.blockBaseFeePerGas!} decimals={9} />{" "}
+            Gwei (
+            <FormattedBalance
+              value={txData.blockBaseFeePerGas!}
+              decimals={0}
+            />{" "}
+            wei)
+          </span>
+        </InfoRow>
+      )}
+      <InfoRow title="Transaction Fee">
+        <div className="space-y-3">
+          <div>
+            <FormattedBalance value={txData.fee} /> Ether
+          </div>
+          {hasEIP1559 && <RewardSplit txData={txData} />}
+        </div>
+      </InfoRow>
       <InfoRow title="Ether Price">N/A</InfoRow>
       <InfoRow title="Nonce">{txData.nonce}</InfoRow>
       <InfoRow title="Position in Block">

From 247ea475c8f00b6022bfd08941455905b7cfd1ca Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 21:59:21 -0300
Subject: [PATCH 28/50] Highlight burnt fees per block

---
 src/Block.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/Block.tsx b/src/Block.tsx
index 83ab187..a515036 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useMemo, useContext } from "react";
 import { useParams, NavLink } from "react-router-dom";
 import { BigNumber, ethers } from "ethers";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBurn } from "@fortawesome/free-solid-svg-icons";
 import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
 import NavBlock from "./block/NavBlock";
@@ -42,9 +44,9 @@ const Block: React.FC = () => {
       console.error(err);
     }
   }, [block]);
-  const burnedFees =
+  const burntFees =
     block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
-  const netFeeReward = block && block.feeReward.sub(burnedFees ?? 0);
+  const netFeeReward = block && block.feeReward.sub(burntFees ?? 0);
   const gasUsedPerc =
     block && block.gasUsed.mul(10000).div(block.gasLimit).toNumber() / 100;
 
@@ -123,9 +125,21 @@ const Block: React.FC = () => {
               </span>
             </InfoRow>
           )}
-          {burnedFees && (
-            <InfoRow title="Burned Fees">
-              <FormattedBalance value={burnedFees} /> Ether
+          {burntFees && (
+            <InfoRow title="Burnt Fees">
+              <div className="flex items-baseline space-x-1">
+                <span className="flex space-x-1 text-orange-500">
+                  <span title="Burnt fees">
+                    <FontAwesomeIcon icon={faBurn} size="1x" />
+                  </span>
+                  <span>
+                    <span className="line-through">
+                      <FormattedBalance value={burntFees} />
+                    </span>{" "}
+                    Ether
+                  </span>
+                </span>
+              </div>
             </InfoRow>
           )}
           <InfoRow title="Gas Used/Limit">

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 29/50] 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 30/50] 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 31/50] 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 32/50] 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 33/50] 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 34/50] 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 35/50] 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 36/50] 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 37/50] 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 38/50] 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 39/50] 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 40/50] 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 41/50] 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 42/50] 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 43/50] 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 44/50] 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 45/50] 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 46/50] 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 47/50] 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>

From 3f477b84ec7545bdde248bfa27b4fd541d186ea8 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 30 Jul 2021 05:37:25 -0300
Subject: [PATCH 48/50] Change distribution method

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a31ef23..cd4a40d 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,7 @@ However, you will see that we made many UI improvements.
 
 ## Install instructions
 
-This software is currently available as compile-only form.
+This software is currently distributed as a docker image.
 
 It depends heavily on a working Erigon installation with Otterscan patches applied, so let's begin with it first.
 

From 5e657bec58247c63d0ed8bcc2661bb82d36e1750 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 30 Jul 2021 18:02:11 -0300
Subject: [PATCH 49/50] Wording fixes

---
 src/Home.tsx                  | 2 +-
 src/special/london/Blocks.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Home.tsx b/src/Home.tsx
index c7a7a3f..9bee0e9 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -62,7 +62,7 @@ const Home: React.FC = () => {
               <span>
                 <FontAwesomeIcon icon={faBurn} />
               </span>
-              <span>Check the special dashboard for EIP-1559</span>
+              <span>Check out the special dashboard for EIP-1559</span>
               <span>
                 <FontAwesomeIcon icon={faBurn} />
               </span>
diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx
index a5398f1..7dc5f9a 100644
--- a/src/special/london/Blocks.tsx
+++ b/src/special/london/Blocks.tsx
@@ -143,7 +143,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
           <span>
             <FontAwesomeIcon icon={faBurn} />
           </span>
-          <span>London Hardfork is here. Watch the base fees burn.</span>
+          <span>EIP-1559 is activated. Watch the fees burn.</span>
           <span>
             <FontAwesomeIcon icon={faBurn} />
           </span>

From 2a113a2e0138009867f5c07172b19da9f408d9a5 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 30 Jul 2021 18:33:45 -0300
Subject: [PATCH 50/50] Fix typo

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

diff --git a/src/special/london/Countdown.tsx b/src/special/london/Countdown.tsx
index 0d41dbb..718aa22 100644
--- a/src/special/london/Countdown.tsx
+++ b/src/special/london/Countdown.tsx
@@ -33,7 +33,7 @@ const Countdown: React.FC<CountdownProps> = ({
         <h2 className="text-5xl">
           {ethers.utils.commify(targetBlock - currentBlock.number)}
         </h2>
-        <h6 className="text-sm mb-10">Block remaining</h6>
+        <h6 className="text-sm mb-10">Blocks 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>