EIP-1559 v2 - small fixes (#13392)

ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js

@@ -54,7 +54,7 @@ const CancelSpeedupPopover = () => {
     const gasUsedLessThanMedium =
       gasFeeEstimates &&
       gasEstimateGreaterThanGasUsedPlusTenPercent(
-        transaction,
+        transaction.txParams,
         gasFeeEstimates,
         PRIORITY_LEVELS.MEDIUM,
       );

ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js

@@ -125,6 +125,7 @@ const EditGasItem = ({ priorityLevel }) => {
               backgroundColor={
                 priorityLevel === estimateUsed ? '#f2f3f4' : '#fff'
               }
+              estimateUsed={priorityLevel}
             />
             <UserPreferencedCurrencyDisplay
               key="editGasSubTextFeeAmount"

ui/components/app/edit-gas-fee-popover/edit-gas-item/useGasItemFeeDetails.js

@@ -106,7 +106,7 @@ export const useGasItemFeeDetails = (priorityLevel) => {
         priorityLevel === PRIORITY_LEVELS.HIGH)
     ) {
       const estimateGreater = !gasEstimateGreaterThanGasUsedPlusTenPercent(
-        transaction,
+        transaction.previousGas || transaction.txParams,
         gasFeeEstimates,
         priorityLevel,
       );

ui/components/app/gas-details-item/gas-details-item.js

@@ -39,7 +39,7 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
       detailTitleColor={COLORS.BLACK}
       detailText={
         <div className="gas-details-item__currency-container">
-          <LoadingHeartBeat />
+          <LoadingHeartBeat estimateUsed={estimateUsed} />
           <UserPreferencedCurrencyDisplay
             type={SECONDARY}
             value={hexMinimumTransactionFee}
@@ -49,7 +49,7 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
       }
       detailTotal={
         <div className="gas-details-item__currency-container">
-          <LoadingHeartBeat />
+          <LoadingHeartBeat estimateUsed={estimateUsed} />
           <UserPreferencedCurrencyDisplay
             type={PRIMARY}
             value={hexMinimumTransactionFee}
@@ -66,7 +66,7 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
               'gas-details-item__gas-fee-warning': estimateUsed === 'high',
             })}
           >
-            <LoadingHeartBeat />
+            <LoadingHeartBeat estimateUsed={estimateUsed} />
             <Box marginRight={1}>
               <strong>
                 {estimateUsed === 'high' && '⚠ '}
@@ -77,7 +77,7 @@ const GasDetailsItem = ({ userAcknowledgedGasMissing = false }) => {
               key="editGasSubTextFeeValue"
               className="gas-details-item__currency-container"
             >
-              <LoadingHeartBeat />
+              <LoadingHeartBeat estimateUsed={estimateUsed} />
               <UserPreferencedCurrencyDisplay
                 key="editGasSubTextFeeAmount"
                 type={PRIMARY}

ui/components/ui/actionable-message/index.scss

@@ -33,6 +33,7 @@
   &__message {
     color: var(--Blue-600);
     text-align: center;
+    width: 100%;
   }
 
   &__actions {

ui/components/ui/loading-heartbeat/index.js

@@ -3,17 +3,24 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { isVolatileGasEstimate } from '../../../helpers/utils/gas';
 import { getGasLoadingAnimationIsShowing } from '../../../ducks/app/app';
 import { useShouldAnimateGasEstimations } from '../../../hooks/useShouldAnimateGasEstimations';
 
 const BASE_CLASS = 'loading-heartbeat';
 const LOADING_CLASS = `${BASE_CLASS}--active`;
 
-export default function LoadingHeartBeat({ backgroundColor = '#fff' }) {
+export default function LoadingHeartBeat({
+  estimateUsed,
+  backgroundColor = '#fff',
+}) {
   useShouldAnimateGasEstimations();
   const active = useSelector(getGasLoadingAnimationIsShowing);
 
-  if (process.env.IN_TEST) {
+  if (
+    process.env.IN_TEST ||
+    (estimateUsed && !isVolatileGasEstimate(estimateUsed))
+  ) {
     return null;
   }
 
@@ -33,4 +40,5 @@ export default function LoadingHeartBeat({ backgroundColor = '#fff' }) {
 
 LoadingHeartBeat.propTypes = {
   backgroundColor: PropTypes.string,
+  estimateUsed: PropTypes.string,
 };

ui/helpers/utils/gas.js

@@ -1,16 +1,17 @@
 import BigNumber from 'bignumber.js';
 import { addHexPrefix } from 'ethereumjs-util';
 
+import { GAS_RECOMMENDATIONS } from '../../../shared/constants/gas';
 import { multiplyCurrencies } from '../../../shared/modules/conversion.utils';
 import { bnGreaterThan } from './util';
 import { hexWEIToDecGWEI } from './conversions.util';
 
 export const gasEstimateGreaterThanGasUsedPlusTenPercent = (
-  transaction,
+  gasUsed,
   gasFeeEstimates,
   estimate,
 ) => {
-  let { maxFeePerGas: maxFeePerGasInTransaction } = transaction.txParams;
+  let { maxFeePerGas: maxFeePerGasInTransaction } = gasUsed;
   maxFeePerGasInTransaction = new BigNumber(
     hexWEIToDecGWEI(addTenPercentAndRound(maxFeePerGasInTransaction)),
   );
@@ -53,3 +54,11 @@ export function addTenPercent(hexStringValue, conversionOptions = {}) {
 export function addTenPercentAndRound(hexStringValue) {
   return addTenPercent(hexStringValue, { numberOfDecimals: 0 });
 }
+
+export function isVolatileGasEstimate(estimate) {
+  return [
+    GAS_RECOMMENDATIONS.HIGH,
+    GAS_RECOMMENDATIONS.MEDIUM,
+    GAS_RECOMMENDATIONS.LOW,
+  ].includes(estimate);
+}

ui/helpers/utils/gas.test.js

@@ -10,10 +10,8 @@ describe('Gas utils', () => {
     const compareGas = (estimateValues) => {
       return gasEstimateGreaterThanGasUsedPlusTenPercent(
         {
-          txParams: {
+          maxFeePerGas: '0x59682f10',
-            maxFeePerGas: '0x59682f10',
+          maxPriorityFeePerGas: '0x59682f00',
-            maxPriorityFeePerGas: '0x59682f00',
-          },
         },
         {
           medium: estimateValues,

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -365,7 +365,7 @@ export default class ConfirmTransactionBase extends Component {
       ) {
         return (
           <div className="confirm-page-container-content__total-value">
-            <LoadingHeartBeat />
+            <LoadingHeartBeat estimateUsed={this.props.txData?.userFeeLevel} />
             <UserPreferencedCurrencyDisplay
               type={PRIMARY}
               key="total-detail-value"
@@ -387,7 +387,7 @@ export default class ConfirmTransactionBase extends Component {
       ) {
         return (
           <div className="confirm-page-container-content__total-value">
-            <LoadingHeartBeat />
+            <LoadingHeartBeat estimateUsed={this.props.txData?.userFeeLevel} />
             <UserPreferencedCurrencyDisplay
               type={SECONDARY}
               key="total-detail-text"
@@ -608,7 +608,9 @@ export default class ConfirmTransactionBase extends Component {
                 subTitle={t('transactionDetailGasTotalSubtitle')}
                 subText={
                   <div className="confirm-page-container-content__total-amount">
-                    <LoadingHeartBeat />
+                    <LoadingHeartBeat
+                      estimateUsed={this.props.txData?.userFeeLevel}
+                    />
                     <strong key="editGasSubTextAmountLabel">
                       {t('editGasSubTextAmountLabel')}
                     </strong>{' '}