Add burnt/miner fee split info

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,7 +34,12 @@ const Details: React.FC<DetailsProps> = ({
   txData,
   internalOps,
   sendsEthToMiner,
-}) => (
+}) => {
+  const hasEIP1559 =
+    txData.blockBaseFeePerGas !== undefined &&
+    txData.blockBaseFeePerGas !== null;
+
+  return (
     <ContentFrame tabs>
       <InfoRow title="Transaction Hash">
         <div className="flex items-baseline space-x-2">
@@ -146,13 +152,13 @@ const Details: React.FC<DetailsProps> = ({
       >
         <TransactionType type={txData.type} />
       </InfoRow>
-    {txData.blockBaseFeePerGas && (
+      {hasEIP1559 && (
         <InfoRow title="Block Base Fee">
           <span>
-          <FormattedBalance value={txData.blockBaseFeePerGas} decimals={9} />{" "}
+            <FormattedBalance value={txData.blockBaseFeePerGas!} decimals={9} />{" "}
             Gwei (
             <FormattedBalance
-            value={txData.blockBaseFeePerGas}
+              value={txData.blockBaseFeePerGas!}
               decimals={0}
             />{" "}
             wei)
@@ -174,13 +180,22 @@ const Details: React.FC<DetailsProps> = ({
           <InfoRow title="Max Fee Per Gas">
             <span>
               <FormattedBalance value={txData.maxFeePerGas!} /> Ether (
-            <FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei)
+              <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">
@@ -226,5 +241,6 @@ const Details: React.FC<DetailsProps> = ({
       </InfoRow>
     </ContentFrame>
   );
+};
 
 export default React.memo(Details);

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