Add max fee per gas/max priority fee per gas

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,

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

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>

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;