EIP-1559 v2 - small fixes (#13392)

2024-12-23 01:39:44 +01:00 · 2022-01-26 23:48:43 +05:30 · 2022-01-26 23:48:43 +05:30 · a0e97f4681
commit a0e97f4681
parent fcd5f89e2f
9 changed files with 36 additions and 17 deletions
--- a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js
+++ b/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,
      );
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js
+++ b/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"
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/useGasItemFeeDetails.js
+++ b/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,
      );
--- a/ui/components/app/gas-details-item/gas-details-item.js
+++ b/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}
--- a/ui/components/ui/actionable-message/index.scss
+++ b/ui/components/ui/actionable-message/index.scss
@ -33,6 +33,7 @@
  &__message {
    color: var(--Blue-600);
    text-align: center;
+    width: 100%;
  }

  &__actions {
--- a/ui/components/ui/loading-heartbeat/index.js
+++ b/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,
 };
--- a/ui/helpers/utils/gas.js
+++ b/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);
+}
--- a/ui/helpers/utils/gas.test.js
+++ b/ui/helpers/utils/gas.test.js
@ -10,10 +10,8 @@ describe('Gas utils', () => {
    const compareGas = (estimateValues) => {
      return gasEstimateGreaterThanGasUsedPlusTenPercent(
        {
-          txParams: {
-            maxFeePerGas: '0x59682f10',
-            maxPriorityFeePerGas: '0x59682f00',
-          },
+          maxFeePerGas: '0x59682f10',
+          maxPriorityFeePerGas: '0x59682f00',
        },
        {
          medium: estimateValues,
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/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>{' '}