Changes in gas loading animation in EIP-1559 V2 (#13016)

app/_locales/en/messages.json

@@ -820,15 +820,18 @@
   "editGasLow": {
     "message": "Low"
   },
+  "editGasMaxBaseFeeGWEIImbalance": {
+    "message": "Max base fee cannot be lower than priority fee"
+  },
   "editGasMaxBaseFeeHigh": {
     "message": "Max base fee is higher than necessary"
   },
-  "editGasMaxBaseFeeImbalance": {
-    "message": "Max base fee cannot be lower than priority fee"
-  },
   "editGasMaxBaseFeeLow": {
     "message": "Max base fee is low for current network conditions"
   },
+  "editGasMaxBaseFeeMultiplierImbalance": {
+    "message": "Multiplier is low relative to Priority fee"
+  },
   "editGasMaxFeeHigh": {
     "message": "Max fee is higher than necessary"
   },

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import Box from '../../../ui/box';
 import I18nValue from '../../../ui/i18n-value';
+import LoadingHeartBeat from '../../../ui/loading-heartbeat';
 
 const AdvancedGasFeeInputSubtext = ({ latest, historical }) => {
   return (
@@ -11,14 +12,20 @@ const AdvancedGasFeeInputSubtext = ({ latest, historical }) => {
         <span className="advanced-gas-fee-input-subtext__label">
           <I18nValue messageKey="currentTitle" />
         </span>
-        <span>{latest}</span>
+        <span className="advanced-gas-fee-input-subtext__value">
+          <LoadingHeartBeat />
+          {latest}
+        </span>
         <img src="./images/high-arrow.svg" alt="" />
       </Box>
       <Box>
         <span className="advanced-gas-fee-input-subtext__label">
           <I18nValue messageKey="twelveHrTitle" />
         </span>
-        <span>{historical}</span>
+        <span className="advanced-gas-fee-input-subtext__value">
+          <LoadingHeartBeat />
+          {historical}
+        </span>
       </Box>
     </Box>
   );

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js

@@ -1,8 +1,48 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 
+import { GAS_ESTIMATE_TYPES } from '../../../../../shared/constants/gas';
+import mockEstimates from '../../../../../test/data/mock-estimates.json';
+import mockState from '../../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import configureStore from '../../../../store/store';
 import AdvancedGasFeeInputSubtext from './advanced-gas-fee-input-subtext';
 
+jest.mock('../../../../store/actions', () => ({
+  disconnectGasFeeEstimatePoller: jest.fn(),
+  getGasFeeEstimatesAndStartPolling: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve()),
+  addPollingTokenToAppState: jest.fn(),
+  removePollingTokenFromAppState: jest.fn(),
+}));
+
+const render = () => {
+  const store = configureStore({
+    metamask: {
+      ...mockState.metamask,
+      accounts: {
+        [mockState.metamask.selectedAddress]: {
+          address: mockState.metamask.selectedAddress,
+          balance: '0x1F4',
+        },
+      },
+      advancedGasFee: { priorityFee: 100 },
+      featureFlags: { advancedInlineGas: true },
+      gasFeeEstimates:
+        mockEstimates[GAS_ESTIMATE_TYPES.FEE_MARKET].gasFeeEstimates,
+    },
+  });
+
+  return renderWithProvider(
+    <AdvancedGasFeeInputSubtext
+      latest="Latest Value"
+      historical="Historical value"
+    />,
+    store,
+  );
+};
+
 describe('AdvancedGasFeeInputSubtext', () => {
   it('should renders latest and historical values passed', () => {
     render(

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss

@@ -10,6 +10,10 @@
     margin-right: 4px;
   }
 
+  &__value {
+    position: relative;
+  }
+
   img {
     height: 16px;
     margin-right: 8px;

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js

@@ -41,9 +41,16 @@ const multiplyCurrencyValues = (baseFee, value, numberOfDecimals) =>
     multiplierBase: 10,
   }).toNumber();
 
-const validateBaseFee = (value, gasFeeEstimates, maxPriorityFeePerGas) => {
+const validateBaseFee = (
+  editingInGwei,
+  value,
+  gasFeeEstimates,
+  maxPriorityFeePerGas,
+) => {
   if (bnGreaterThan(maxPriorityFeePerGas, value)) {
-    return 'editGasMaxBaseFeeImbalance';
+    return editingInGwei
+      ? 'editGasMaxBaseFeeGWEIImbalance'
+      : 'editGasMaxBaseFeeMultiplierImbalance';
   }
   if (
     gasFeeEstimates?.low &&
@@ -145,14 +152,20 @@ const BaseFeeInput = () => {
   useEffect(() => {
     setMaxFeePerGas(maxBaseFeeGWEI);
     const error = validateBaseFee(
+      editingInGwei,
       maxBaseFeeGWEI,
       gasFeeEstimates,
       maxPriorityFeePerGas,
     );
 
     setBaseFeeError(error);
-    setErrorValue('maxFeePerGas', error === 'editGasMaxBaseFeeImbalance');
+    setErrorValue(
+      'maxFeePerGas',
+      error === 'editGasMaxBaseFeeGWEIImbalance' ||
+        error === 'editGasMaxBaseFeeMultiplierImbalance',
+    );
   }, [
+    editingInGwei,
     gasFeeEstimates,
     maxBaseFeeGWEI,
     maxPriorityFeePerGas,

ui/components/app/confirm-page-container/confirm-page-container-content/index.scss

@@ -91,7 +91,9 @@
     margin-top: auto;
   }
 
-  &__currency-container {
+  &__currency-container,
+  &__total-amount,
+  &__total-value {
     position: relative;
   }
 }

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

@@ -5,7 +5,6 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useTransactionModalContext } from '../../../contexts/transaction-modal';
 import ErrorMessage from '../../ui/error-message';
 import I18nValue from '../../ui/i18n-value';
-import LoadingHeartBeat from '../../ui/loading-heartbeat';
 import Popover from '../../ui/popover';
 import Typography from '../../ui/typography/typography';
 
@@ -29,7 +28,6 @@ const EditGasFeePopover = () => {
       className="edit-gas-fee-popover"
     >
       <>
-        {process.env.IN_TEST ? null : <LoadingHeartBeat />}
         <div className="edit-gas-fee-popover__wrapper">
           <div className="edit-gas-fee-popover__content">
             {balanceError && (

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

@@ -12,6 +12,7 @@ import {
   decimalToHex,
   hexWEIToDecGWEI,
 } from '../../../../helpers/utils/conversions.util';
+import LoadingHeartBeat from '../../../ui/loading-heartbeat';
 import { getAdvancedGasFeeValues } from '../../../../selectors';
 import { toHumanReadableTime } from '../../../../helpers/utils/util';
 import { useGasFeeContext } from '../../../../contexts/gasFee';
@@ -138,11 +139,14 @@ const EditGasItem = ({ priorityLevel }) => {
         className={`edit-gas-item__fee-estimate edit-gas-item__fee-estimate-${priorityLevel}`}
       >
         {hexMaximumTransactionFee ? (
-          <UserPreferencedCurrencyDisplay
-            key="editGasSubTextFeeAmount"
-            type={PRIMARY}
-            value={hexMaximumTransactionFee}
-          />
+          <div className="edit-gas-item__maxfee">
+            <LoadingHeartBeat />
+            <UserPreferencedCurrencyDisplay
+              key="editGasSubTextFeeAmount"
+              type={PRIMARY}
+              value={hexMaximumTransactionFee}
+            />
+          </div>
         ) : (
           '--'
         )}

ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss

@@ -39,6 +39,10 @@
     }
   }
 
+  &__maxfee {
+    position: relative;
+  }
+
   &__time-estimate {
     display: inline-block;
     text-align: left;

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

@@ -11,6 +11,8 @@ export default function LoadingHeartBeat() {
   useShouldAnimateGasEstimations();
   const active = useSelector(getGasLoadingAnimationIsShowing);
 
+  if (process.env.IN_TEST) return null;
+
   return (
     <div
       className={classNames('loading-heartbeat', {

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

@@ -365,12 +365,15 @@ export default class ConfirmTransactionBase extends Component {
         secondaryTotalTextOverride === undefined
       ) {
         return (
-          <UserPreferencedCurrencyDisplay
-            type={PRIMARY}
-            key="total-detail-value"
-            value={hexTransactionTotal}
-            hideLabel={!useNativeCurrencyAsPrimaryCurrency}
-          />
+          <div className="confirm-page-container-content__total-value">
+            <LoadingHeartBeat />
+            <UserPreferencedCurrencyDisplay
+              type={PRIMARY}
+              key="total-detail-value"
+              value={hexTransactionTotal}
+              hideLabel={!useNativeCurrencyAsPrimaryCurrency}
+            />
+          </div>
         );
       }
       return useNativeCurrencyAsPrimaryCurrency
@@ -384,12 +387,15 @@ export default class ConfirmTransactionBase extends Component {
         secondaryTotalTextOverride === undefined
       ) {
         return (
-          <UserPreferencedCurrencyDisplay
-            type={SECONDARY}
-            key="total-detail-text"
-            value={hexTransactionTotal}
-            hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
-          />
+          <div className="confirm-page-container-content__total-value">
+            <LoadingHeartBeat />
+            <UserPreferencedCurrencyDisplay
+              type={SECONDARY}
+              key="total-detail-text"
+              value={hexTransactionTotal}
+              hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
+            />
+          </div>
         );
       }
       return useNativeCurrencyAsPrimaryCurrency
@@ -612,12 +618,13 @@ export default class ConfirmTransactionBase extends Component {
                 detailTotal={renderTotalDetailTotal()}
                 subTitle={t('transactionDetailGasTotalSubtitle')}
                 subText={
-                  <>
+                  <div className="confirm-page-container-content__total-amount">
+                    <LoadingHeartBeat />
                     <strong key="editGasSubTextAmountLabel">
                       {t('editGasSubTextAmountLabel')}
                     </strong>
                     {renderTotalMaxAmount()}
-                  </>
+                  </div>
                 }
               />
             ),

ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js

@@ -17,8 +17,6 @@ import TransactionDetailItem from '../../../components/app/transaction-detail-it
 import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display';
 import { useGasFeeContext } from '../../../contexts/gasFee';
 
-const HeartBeat = () => (process.env.IN_TEST ? null : <LoadingHeartBeat />);
-
 const GasDetailsItem = ({
   hexMaximumTransactionFee,
   hexMinimumTransactionFee,
@@ -73,7 +71,7 @@ const GasDetailsItem = ({
       detailTitleColor={COLORS.BLACK}
       detailText={
         <div className="gas-details-item__currency-container">
-          <HeartBeat />
+          <LoadingHeartBeat />
           <UserPreferencedCurrencyDisplay
             type={SECONDARY}
             value={hexMinimumTransactionFee}
@@ -83,7 +81,7 @@ const GasDetailsItem = ({
       }
       detailTotal={
         <div className="gas-details-item__currency-container">
-          <HeartBeat />
+          <LoadingHeartBeat />
           <UserPreferencedCurrencyDisplay
             type={PRIMARY}
             value={hexMinimumTransactionFee}
@@ -100,6 +98,7 @@ const GasDetailsItem = ({
               'gas-details-item__gas-fee-warning': estimateUsed === 'high',
             })}
           >
+            <LoadingHeartBeat />
             <Box marginRight={1}>
               <strong>
                 {estimateUsed === 'high' && '⚠ '}
@@ -110,7 +109,7 @@ const GasDetailsItem = ({
               key="editGasSubTextFeeValue"
               className="gas-details-item__currency-container"
             >
-              <HeartBeat />
+              <LoadingHeartBeat />
               <UserPreferencedCurrencyDisplay
                 key="editGasSubTextFeeAmount"
                 type={PRIMARY}

ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.scss

@@ -11,7 +11,8 @@
     color: $secondary-1;
   }
 
-  &__currency-container {
+  &__currency-container,
+  &__gasfee-label {
     position: relative;
   }
 }