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 01/18] 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 02/18] 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 03/18] 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 04/18] 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 05/18] 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 06/18] 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 07/18] 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 08/18] 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 09/18] 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 10/18] 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 11/18] 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 12/18] 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 13/18] 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 14/18] 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 15/18] 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 16/18] 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 17/18] 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 18/18] 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">