Provide EIP 1559 fields in transaction history (#11464)

app/_locales/en/messages.json

@@ -2451,6 +2451,15 @@
   "transactionFee": {
     "message": "Transaction Fee"
   },
+  "transactionHistoryBaseFee": {
+    "message": "Base fee (GWEI)"
+  },
+  "transactionHistoryEffectiveGasPrice": {
+    "message": "Effective gas price"
+  },
+  "transactionHistoryPriorityFee": {
+    "message": "Priority fee (GWEI)"
+  },
   "transactionResubmitted": {
     "message": "Transaction resubmitted with gas fee increased to $1 at $2"
   },

ui/components/app/transaction-breakdown/transaction-breakdown.component.js

@@ -23,6 +23,9 @@ export default class TransactionBreakdown extends PureComponent {
     gasPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     gasUsed: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     totalInHex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    baseFee: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    priorityFee: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    effectiveGasPrice: PropTypes.number,
   };
 
   static defaultProps = {
@@ -42,6 +45,9 @@ export default class TransactionBreakdown extends PureComponent {
       totalInHex,
       gasUsed,
       isTokenApprove,
+      baseFee,
+      priorityFee,
+      effectiveGasPrice,
     } = this.props;
     return (
       <div className={classnames('transaction-breakdown', className)}>
@@ -85,35 +91,83 @@ export default class TransactionBreakdown extends PureComponent {
             />
           </TransactionBreakdownRow>
         )}
-        <TransactionBreakdownRow title={t('gasPrice')}>
-          {typeof gasPrice === 'undefined' ? (
-            '?'
-          ) : (
-            <CurrencyDisplay
+        {process.env.SHOW_EIP_1559_UI && (
+          <TransactionBreakdownRow title={t('transactionHistoryBaseFee')}>
+            {typeof baseFee === 'undefined' ? (
+              '?'
+            ) : (
+              <CurrencyDisplay
+                className="transaction-breakdown__value"
+                data-testid="transaction-breakdown__base-fee"
+                currency={nativeCurrency}
+                denomination={GWEI}
+                value={baseFee}
+                hideLabel
+              />
+            )}
+          </TransactionBreakdownRow>
+        )}
+        {process.env.SHOW_EIP_1559_UI && (
+          <TransactionBreakdownRow title={t('transactionHistoryPriorityFee')}>
+            {typeof priorityFee === 'undefined' ? (
+              '?'
+            ) : (
+              <CurrencyDisplay
+                className="transaction-breakdown__value"
+                data-testid="transaction-breakdown__priority-fee"
+                currency={nativeCurrency}
+                denomination={GWEI}
+                value={priorityFee}
+                hideLabel
+              />
+            )}
+          </TransactionBreakdownRow>
+        )}
+        {!process.env.SHOW_EIP_1559_UI && (
+          <TransactionBreakdownRow title={t('gasPrice')}>
+            {typeof gasPrice === 'undefined' ? (
+              '?'
+            ) : (
+              <CurrencyDisplay
+                className="transaction-breakdown__value"
+                data-testid="transaction-breakdown__gas-price"
+                currency={nativeCurrency}
+                denomination={GWEI}
+                value={gasPrice}
+                hideLabel
+              />
+            )}
+          </TransactionBreakdownRow>
+        )}
+        <TransactionBreakdownRow
+          title={t('transactionHistoryEffectiveGasPrice')}
+        >
+          <UserPreferencedCurrencyDisplay
+            className="transaction-breakdown__value transaction-breakdown__value--effective-gas-price"
+            type={PRIMARY}
+            value={effectiveGasPrice}
+          />
+          {showFiat && (
+            <UserPreferencedCurrencyDisplay
               className="transaction-breakdown__value"
-              data-testid="transaction-breakdown__gas-price"
-              currency={nativeCurrency}
-              denomination={GWEI}
-              value={gasPrice}
-              hideLabel
+              type={SECONDARY}
+              value={effectiveGasPrice}
             />
           )}
         </TransactionBreakdownRow>
         <TransactionBreakdownRow title={t('total')}>
-          <div>
+          <UserPreferencedCurrencyDisplay
+            className="transaction-breakdown__value transaction-breakdown__value--eth-total"
+            type={PRIMARY}
+            value={totalInHex}
+          />
+          {showFiat && (
             <UserPreferencedCurrencyDisplay
-              className="transaction-breakdown__value transaction-breakdown__value--eth-total"
-              type={PRIMARY}
+              className="transaction-breakdown__value"
+              type={SECONDARY}
               value={totalInHex}
             />
-            {showFiat && (
-              <UserPreferencedCurrencyDisplay
-                className="transaction-breakdown__value"
-                type={SECONDARY}
-                value={totalInHex}
-              />
-            )}
-          </div>
+          )}
         </TransactionBreakdownRow>
       </div>
     );