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