Add block base fee info to tx details page

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!,

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">

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;