EIP-1559 V2 UI fixes (#13222)

3 years ago · 0c531f8b01
parent 10dc686505
commit 0c531f8b01
25 changed files with 102 additions and 99 deletions
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -1730,15 +1730,6 @@
  "metametricsTitle": {
    "message": "Join 6M+ users to improve MetaMask"
  },
-  "minimum": {
-    "message": "minimum"
-  },
-  "minimumCancelSpeedupGasFee": {
-    "message": "+10%"
-  },
-  "minimumEstimate": {
-    "message": "10% Minimum"
-  },
  "mismatchedChain": {
    "message": "The network details for this chain ID do not match our records. We recommend that you $1 before proceeding.",
    "description": "$1 is a clickable link with text defined by the 'mismatchedChainLinkText' key"
@ -3113,6 +3104,9 @@
  "syncWithThreeBoxDisabled": {
    "message": "3Box has been disabled due to an error during the initial sync"
  },
+  "tenPercentIncreased": {
+    "message": "10% increase"
+  },
  "terms": {
    "message": "Terms of Use"
  },
--- a/shared/constants/gas.js
+++ b/shared/constants/gas.js
@ -34,7 +34,7 @@ export const GAS_RECOMMENDATIONS = {
 * These represent types of gas estimation
 */
 export const PRIORITY_LEVELS = {
-  MINIMUM: 'minimum',
+  TEN_PERCENT_INCREASED: 'tenPercentIncreased',
  LOW: 'low',
  MEDIUM: 'medium',
  HIGH: 'high',
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-save/advanced-gas-fee-save.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-save/advanced-gas-fee-save.js
@ -10,7 +10,7 @@ import { useAdvancedGasFeePopoverContext } from '../context';
 import { decGWEIToHexWEI } from '../../../../../shared/modules/conversion.utils';

 const AdvancedGasFeeSaveButton = () => {
-  const { closeModal } = useTransactionModalContext();
+  const { closeAllModals } = useTransactionModalContext();
  const { updateTransaction } = useGasFeeContext();
  const {
    gasLimit,
@ -26,7 +26,7 @@ const AdvancedGasFeeSaveButton = () => {
      maxPriorityFeePerGas: decGWEIToHexWEI(maxPriorityFeePerGas),
      gasLimit,
    });
-    closeModal('advancedGasFee');
+    closeAllModals();
  };

  return (
--- a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js
+++ b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js
@ -34,7 +34,7 @@ const CancelSpeedupPopover = () => {
    speedUpTransaction,
    transaction,
    updateTransaction,
-    updateTransactionToMinimumGasFee,
+    updateTransactionToTenPercentIncreasedGasFee,
    updateTransactionUsingEstimate,
  } = useGasFeeContext();
  const t = useI18nContext();
@ -50,7 +50,7 @@ const CancelSpeedupPopover = () => {
      return;
    }
    // If gas used previously + 10% is less than medium estimated gas
-    // estimate is set to medium, else estimate is set to minimum
+    // estimate is set to medium, else estimate is set to tenPercentIncreased
    const gasUsedLessThanMedium =
      gasFeeEstimates &&
      gasEstimateGreaterThanGasUsedPlusTenPercent(
@ -62,7 +62,7 @@ const CancelSpeedupPopover = () => {
      updateTransactionUsingEstimate(PRIORITY_LEVELS.MEDIUM);
      return;
    }
-    updateTransactionToMinimumGasFee();
+    updateTransactionToTenPercentIncreasedGasFee();
  }, [
    appIsLoading,
    currentModal,
@ -70,7 +70,7 @@ const CancelSpeedupPopover = () => {
    gasFeeEstimates,
    transaction,
    updateTransaction,
-    updateTransactionToMinimumGasFee,
+    updateTransactionToTenPercentIncreasedGasFee,
    updateTransactionUsingEstimate,
  ]);

--- a/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js
+++ b/ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js
@ -50,7 +50,7 @@ const render = (props) => {
  return renderWithProvider(
    <GasFeeContextProvider
      transaction={{
-        userFeeLevel: 'minimum',
+        userFeeLevel: 'tenPercentIncreased',
        txParams: {
          gas: '0x5208',
          maxFeePerGas: '0x59682f10',
--- a/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js
+++ b/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js
@ -41,9 +41,9 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
  ) {
    icon = 'swapSuggested';
    title = 'swapSuggested';
-  } else if (estimateUsed === PRIORITY_LEVELS.MINIMUM) {
+  } else if (estimateUsed === PRIORITY_LEVELS.TEN_PERCENT_INCREASED) {
    icon = undefined;
-    title = 'minimumEstimate';
+    title = 'tenPercentIncreased';
  }

  return (
@ -64,7 +64,7 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
        <InfoTooltip
          contentText={
            <div className="edit-gas-fee-button__tooltip">
-              <Typography variant={TYPOGRAPHY.H7} color={COLORS.GREY}>
+              <Typography variant={TYPOGRAPHY.H7} color={COLORS.NEUTRAL_GREY}>
                {t('dappSuggestedTooltip', [transaction.origin])}
              </Typography>
              <Typography variant={TYPOGRAPHY.H7}>
--- a/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.test.js
+++ b/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.test.js
@ -73,9 +73,11 @@ describe('EditGasFeeButton', () => {
    expect(screen.queryByText('Aggressive')).toBeInTheDocument();
  });

-  it('should render edit link with text 10% Minimum if minimum gas estimates are selected', () => {
-    render({ contextProps: { transaction: { userFeeLevel: 'minimum' } } });
-    expect(screen.queryByText('10% Minimum')).toBeInTheDocument();
+  it('should render edit link with text 10% increase if tenPercentIncreased gas estimates are selected', () => {
+    render({
+      contextProps: { transaction: { userFeeLevel: 'tenPercentIncreased' } },
+    });
+    expect(screen.queryByText('10% increase')).toBeInTheDocument();
  });

  it('should render edit link with text Site suggested if site suggested estimated are used', () => {
@ -111,7 +113,7 @@ describe('EditGasFeeButton', () => {
        transaction: {},
      },
    });
-    expect(screen.queryByText('⚙')).toBeInTheDocument();
+    expect(screen.queryByText('⚙️')).toBeInTheDocument();
    expect(screen.queryByText('Advanced')).toBeInTheDocument();
    expect(screen.queryByText('Edit')).toBeInTheDocument();
  });
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js
@ -67,7 +67,9 @@ const EditGasFeePopover = () => {
            </div>
            {(editGasMode === EDIT_GAS_MODES.CANCEL ||
              editGasMode === EDIT_GAS_MODES.SPEED_UP) && (
-              <EditGasItem priorityLevel={PRIORITY_LEVELS.MINIMUM} />
+              <EditGasItem
+                priorityLevel={PRIORITY_LEVELS.TEN_PERCENT_INCREASED}
+              />
            )}
            {editGasMode === EDIT_GAS_MODES.MODIFY_IN_PLACE && (
              <EditGasItem priorityLevel={PRIORITY_LEVELS.LOW} />
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.test.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.test.js
@ -85,7 +85,7 @@ describe('EditGasFeePopover', () => {
    expect(screen.queryByText('🦊')).toBeInTheDocument();
    expect(screen.queryByText('🦍')).toBeInTheDocument();
    expect(screen.queryByText('🌐')).toBeInTheDocument();
-    expect(screen.queryByText('⚙')).toBeInTheDocument();
+    expect(screen.queryByText('⚙️')).toBeInTheDocument();
    expect(screen.queryByText('Low')).toBeInTheDocument();
    expect(screen.queryByText('Market')).toBeInTheDocument();
    expect(screen.queryByText('Aggressive')).toBeInTheDocument();
@ -127,7 +127,7 @@ describe('EditGasFeePopover', () => {
    expect(screen.queryByText('🦍')).not.toBeInTheDocument();
    expect(screen.queryByText('🌐')).not.toBeInTheDocument();
    expect(screen.queryByText('🔄')).toBeInTheDocument();
-    expect(screen.queryByText('⚙')).toBeInTheDocument();
+    expect(screen.queryByText('⚙️')).toBeInTheDocument();
    expect(screen.queryByText('Low')).not.toBeInTheDocument();
    expect(screen.queryByText('Market')).toBeInTheDocument();
    expect(screen.queryByText('Aggressive')).not.toBeInTheDocument();
@ -173,17 +173,17 @@ describe('EditGasFeePopover', () => {
    expect(screen.queryByText('Low')).not.toBeInTheDocument();
  });

-  it('should show minimum option for cancel gas mode', () => {
+  it('should show tenPercentIncreased option for cancel gas mode', () => {
    render({
      contextProps: { editGasMode: EDIT_GAS_MODES.CANCEL },
    });
-    expect(screen.queryByText('(minimum)')).toBeInTheDocument();
+    expect(screen.queryByText('10% increase')).toBeInTheDocument();
  });

-  it('should show minimum option for speedup gas mode', () => {
+  it('should show tenPercentIncreased option for speedup gas mode', () => {
    render({
      contextProps: { editGasMode: EDIT_GAS_MODES.SPEED_UP },
    });
-    expect(screen.queryByText('(minimum)')).toBeInTheDocument();
+    expect(screen.queryByText('10% increase')).toBeInTheDocument();
  });
 });
--- 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
@ -6,43 +6,34 @@ import {
  EDIT_GAS_MODES,
  PRIORITY_LEVELS,
 } from '../../../../../shared/constants/gas';
-import {
-  ALIGN_ITEMS,
-  DISPLAY,
-} from '../../../../helpers/constants/design-system';
 import { PRIORITY_LEVEL_ICON_MAP } from '../../../../helpers/constants/gas';
 import { PRIMARY } from '../../../../helpers/constants/common';
 import { toHumanReadableTime } from '../../../../helpers/utils/util';
 import { useGasFeeContext } from '../../../../contexts/gasFee';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useTransactionModalContext } from '../../../../contexts/transaction-modal';
-import Box from '../../../ui/box';
 import EditGasToolTip from '../edit-gas-tooltip/edit-gas-tooltip';
+import I18nValue from '../../../ui/i18n-value';
 import InfoTooltip from '../../../ui/info-tooltip';
 import LoadingHeartBeat from '../../../ui/loading-heartbeat';
 import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display';

 import { useGasItemFeeDetails } from './useGasItemFeeDetails';

-const getTitleAndIcon = (priorityLevel, t, editGasMode) => {
+const getTitleAndIcon = (priorityLevel, editGasMode) => {
  let icon = priorityLevel;
-  let title = t(priorityLevel);
+  let title = priorityLevel;
  if (priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED) {
-    title = t('dappSuggestedShortLabel');
-  } else if (priorityLevel === PRIORITY_LEVELS.MINIMUM) {
+    title = 'dappSuggestedShortLabel';
+  } else if (priorityLevel === PRIORITY_LEVELS.TEN_PERCENT_INCREASED) {
    icon = null;
-    title = (
-      <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.CENTER}>
-        {t('minimumCancelSpeedupGasFee')}
-        <span className="edit-gas-item__name__sufix">({t('minimum')})</span>
-      </Box>
-    );
+    title = 'tenPercentIncreased';
  } else if (
    priorityLevel === PRIORITY_LEVELS.HIGH &&
    editGasMode === EDIT_GAS_MODES.SWAPS
  ) {
    icon = 'swapSuggested';
-    title = t('swapSuggested');
+    title = 'swapSuggested';
  }
  return { title, icon };
 };
@ -52,7 +43,7 @@ const EditGasItem = ({ priorityLevel }) => {
    editGasMode,
    estimateUsed,
    gasLimit,
-    updateTransactionToMinimumGasFee,
+    updateTransactionToTenPercentIncreasedGasFee,
    updateTransactionUsingDAPPSuggestedValues,
    updateTransactionUsingEstimate,
    transaction,
@ -84,8 +75,8 @@ const EditGasItem = ({ priorityLevel }) => {
    } else {
      closeModal('editGasFee');

-      if (priorityLevel === PRIORITY_LEVELS.MINIMUM) {
-        updateTransactionToMinimumGasFee();
+      if (priorityLevel === PRIORITY_LEVELS.TEN_PERCENT_INCREASED) {
+        updateTransactionToTenPercentIncreasedGasFee();
      } else if (priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED) {
        updateTransactionUsingDAPPSuggestedValues();
      } else {
@ -94,7 +85,7 @@ const EditGasItem = ({ priorityLevel }) => {
    }
  };

-  const { title, icon } = getTitleAndIcon(priorityLevel, t, editGasMode);
+  const { title, icon } = getTitleAndIcon(priorityLevel, editGasMode);

  return (
    <button
@ -115,7 +106,7 @@ const EditGasItem = ({ priorityLevel }) => {
            {PRIORITY_LEVEL_ICON_MAP[icon]}
          </span>
        )}
-        {title}
+        <I18nValue messageKey={title} />
      </span>
      <span
        className={`edit-gas-item__time-estimate edit-gas-item__time-estimate-${priorityLevel}`}
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.test.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.test.js
@ -158,7 +158,7 @@ describe('EditGasItem', () => {
    expect(
      screen.queryByRole('button', { name: 'custom' }),
    ).toBeInTheDocument();
-    expect(screen.queryByText('⚙')).toBeInTheDocument();
+    expect(screen.queryByText('⚙️')).toBeInTheDocument();
    expect(screen.queryByText('Advanced')).toBeInTheDocument();
    // below value of custom gas fee estimate is default obtained from state.metamask.advancedGasFee
    expect(screen.queryByTitle('0.001575 ETH')).toBeInTheDocument();
@ -166,18 +166,17 @@ describe('EditGasItem', () => {

  it('should renders +10% gas estimate option for priorityLevel minimum', () => {
    renderComponent({
-      componentProps: { priorityLevel: 'minimum' },
+      componentProps: { priorityLevel: 'tenPercentIncreased' },
      transactionProps: {
-        userFeeLevel: 'minimum',
+        userFeeLevel: 'tenPercentIncreased',
        previousGas: ESTIMATE_MOCK,
      },
      contextProps: { editGasMode: EDIT_GAS_MODES.CANCEL },
    });
    expect(
-      screen.queryByRole('button', { name: 'minimum' }),
+      screen.queryByRole('button', { name: 'tenPercentIncreased' }),
    ).toBeInTheDocument();
-    expect(screen.queryByText('+10%')).toBeInTheDocument();
-    expect(screen.queryByText('(minimum)')).toBeInTheDocument();
+    expect(screen.queryByText('10% increase')).toBeInTheDocument();
    expect(screen.queryByTitle('0.00003465 ETH')).toBeInTheDocument();
  });
 });
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss
@ -11,7 +11,7 @@
  height: 32px;
  width: 100%;

-  &:hover {
+  &:hover:not([disabled]) {
    background-color: var(--primary-2);
  }

@ -45,7 +45,7 @@
    margin-right: 4px;

    &-custom {
-      font-size: 32px;
+      font-size: 22px;
      line-height: 1;
    }
  }
--- 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
@ -65,7 +65,7 @@ export const useGasItemFeeDetails = (priorityLevel) => {
      maxPriorityFeePerGas = advancedGasFeeValues.priorityFee;
    }
  } else if (
-    priorityLevel === PRIORITY_LEVELS.MINIMUM &&
+    priorityLevel === PRIORITY_LEVELS.TEN_PERCENT_INCREASED &&
    transaction.previousGas
  ) {
    maxFeePerGas = hexWEIToDecGWEI(
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/index.scss
+++ b/ui/components/app/edit-gas-fee-popover/network-statistics/index.scss
@ -7,6 +7,7 @@
    height: 56px;
    display: flex;
    align-items: center;
+    justify-content: space-around;

    &__separator {
      border-left: 1px solid var(--ui-2);
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.js
+++ b/ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.js
@ -1,30 +1,20 @@
 import React from 'react';
 import { uniq } from 'lodash';
-import { toBigNumber } from '../../../../../../shared/modules/conversion.utils';
+import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../../helpers/utils/util';
 import { useGasFeeContext } from '../../../../../contexts/gasFee';
 import I18nValue from '../../../../ui/i18n-value';
 import { PriorityFeeTooltip } from '../tooltips';

-function roundToDecimalPlacesRemovingExtraZeroes(
-  numberish,
-  numberOfDecimalPlaces,
-) {
-  return toBigNumber.dec(
-    toBigNumber.dec(numberish).toFixed(numberOfDecimalPlaces),
-  );
-}
-
 export default function LatestPriorityFeeField() {
  const { gasFeeEstimates } = useGasFeeContext();

  const renderPriorityFeeRange = () => {
    const { latestPriorityFeeRange } = gasFeeEstimates;
    if (latestPriorityFeeRange) {
-      const formattedRange = uniq(
-        latestPriorityFeeRange.map((priorityFee) =>
-          roundToDecimalPlacesRemovingExtraZeroes(priorityFee, 1),
-        ),
-      ).join(' - ');
+      const formattedRange = uniq([
+        roundToDecimalPlacesRemovingExtraZeroes(latestPriorityFeeRange[0], 1),
+        roundToDecimalPlacesRemovingExtraZeroes(latestPriorityFeeRange[1], 0),
+      ]).join(' - ');
      return `${formattedRange} GWEI`;
    }
    return null;
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.test.js
+++ b/ui/components/app/edit-gas-fee-popover/network-statistics/latest-priority-fee-field/latest-priority-fee-field.test.js
@ -17,11 +17,11 @@ const renderComponent = (gasFeeEstimates) => {
 };

 describe('LatestPriorityFeeField', () => {
-  it('should render a version of latest priority fee range pulled from context, rounded to 1 decimal place', () => {
+  it('should render a version of latest priority fee range pulled from context, lower range rounded to 1 decimal place', () => {
    const { getByText } = renderComponent({
      latestPriorityFeeRange: ['1.000001668', '2.5634234'],
    });
-    expect(getByText('1 - 2.6 GWEI')).toBeInTheDocument();
+    expect(getByText('1 - 3 GWEI')).toBeInTheDocument();
  });

  it('should render nothing if gasFeeEstimates are empty', () => {
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
+++ b/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
@ -5,6 +5,7 @@ import {
  FONT_WEIGHT,
  TYPOGRAPHY,
 } from '../../../../helpers/constants/design-system';
+import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util';
 import { useGasFeeContext } from '../../../../contexts/gasFee';
 import I18nValue from '../../../ui/i18n-value';
 import Typography from '../../../ui/typography/typography';
@ -31,7 +32,10 @@ const NetworkStatistics = () => {
          <span className="network-statistics__info__field-data">
            <BaseFeeTooltip>
              {gasFeeEstimates?.estimatedBaseFee &&
-                `${gasFeeEstimates?.estimatedBaseFee} GWEI`}
+                `${roundToDecimalPlacesRemovingExtraZeroes(
+                  gasFeeEstimates?.estimatedBaseFee,
+                  0,
+                )} GWEI`}
            </BaseFeeTooltip>
          </span>
          <span className="network-statistics__info__field-label">
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.test.js
+++ b/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.test.js
@ -17,17 +17,17 @@ const renderComponent = (gasFeeEstimates) => {
 };

 describe('NetworkStatistics', () => {
-  it('should render the latest base fee', () => {
+  it('should render the latest base fee without decimals', () => {
    const { getByText } = renderComponent({
      estimatedBaseFee: '50.0112',
    });
-    expect(getByText('50.0112 GWEI')).toBeInTheDocument();
+    expect(getByText('50 GWEI')).toBeInTheDocument();
  });

-  it('should render the latest priority fee range', () => {
+  it('should render a version of latest priority fee range pulled from context, lower range rounded to 1 decimal place', () => {
    const { getByText } = renderComponent({
      latestPriorityFeeRange: ['1.000001668', '2.5634234'],
    });
-    expect(getByText('1 - 2.6 GWEI')).toBeInTheDocument();
+    expect(getByText('1 - 3 GWEI')).toBeInTheDocument();
  });
 });
--- a/ui/helpers/constants/gas.js
+++ b/ui/helpers/constants/gas.js
@ -38,5 +38,5 @@ export const PRIORITY_LEVEL_ICON_MAP = {
  high: '🦍',
  dappSuggested: '🌐',
  swapSuggested: '🔄',
-  custom: '⚙',
+  custom: '⚙️',
 };
--- a/ui/helpers/utils/util.js
+++ b/ui/helpers/utils/util.js
@ -19,6 +19,7 @@ import {
  TRUNCATED_NAME_CHAR_LIMIT,
  TRUNCATED_ADDRESS_END_CHARS,
 } from '../../../shared/constants/labels';
+import { toBigNumber } from '../../../shared/modules/conversion.utils';

 // formatData :: ( date: <Unix Timestamp> ) -> String
 export function formatDate(date, format = "M/d/y 'at' T") {
@ -558,3 +559,12 @@ export function getAssetImageURL(image, ipfsGateway) {
  }
  return image;
 }
+
+export function roundToDecimalPlacesRemovingExtraZeroes(
+  numberish,
+  numberOfDecimalPlaces,
+) {
+  return toBigNumber.dec(
+    toBigNumber.dec(numberish).toFixed(numberOfDecimalPlaces),
+  );
+}
--- a/ui/hooks/gasFeeInput/useGasFeeInputs.js
+++ b/ui/hooks/gasFeeInput/useGasFeeInputs.js
@ -248,7 +248,7 @@ export function useGasFeeInputs(
    cancelTransaction,
    speedUpTransaction,
    updateTransaction,
-    updateTransactionToMinimumGasFee,
+    updateTransactionToTenPercentIncreasedGasFee,
    updateTransactionUsingDAPPSuggestedValues,
    updateTransactionUsingEstimate,
  } = useTransactionFunctions({
@ -350,7 +350,7 @@ export function useGasFeeInputs(
    cancelTransaction,
    speedUpTransaction,
    updateTransaction,
-    updateTransactionToMinimumGasFee,
+    updateTransactionToTenPercentIncreasedGasFee,
    updateTransactionUsingDAPPSuggestedValues,
    updateTransactionUsingEstimate,
  };
--- a/ui/hooks/gasFeeInput/useTransactionFunction.test.js
+++ b/ui/hooks/gasFeeInput/useTransactionFunction.test.js
@ -70,23 +70,23 @@ describe('useMaxPriorityFeePerGasInput', () => {
    expect(mock).toHaveBeenCalledTimes(1);
  });

-  it('should invoke action updateTransaction with 10% increased fee when updateTransactionToMinimumGasFee callback is invoked', () => {
+  it('should invoke action updateTransaction with 10% increased fee when updateTransactionToTenPercentIncreasedGasFee callback is invoked', () => {
    const mock = jest
      .spyOn(Actions, 'updateTransaction')
      .mockImplementation(() => ({ type: '' }));
    const { result } = renderUseTransactionFunctions();
-    result.current.updateTransactionToMinimumGasFee();
+    result.current.updateTransactionToTenPercentIncreasedGasFee();
    expect(mock).toHaveBeenCalledTimes(1);
    expect(mock).toHaveBeenCalledWith({
      txParams: {
        estimateSuggested: 'medium',
-        estimateUsed: 'minimum',
+        estimateUsed: 'tenPercentIncreased',
        gas: '5208',
        gasLimit: '5208',
        maxFeePerGas: '0x582c',
        maxPriorityFeePerGas: '0x582c',
      },
-      userFeeLevel: 'minimum',
+      userFeeLevel: 'tenPercentIncreased',
    });
  });

--- a/ui/hooks/gasFeeInput/useTransactionFunctions.js
+++ b/ui/hooks/gasFeeInput/useTransactionFunctions.js
@ -111,12 +111,12 @@ export const useTransactionFunctions = ({
    );
  }, [dispatch, estimatedBaseFee, transaction]);

-  const updateTransactionToMinimumGasFee = useCallback(() => {
+  const updateTransactionToTenPercentIncreasedGasFee = useCallback(() => {
    const { gas: gasLimit, maxFeePerGas, maxPriorityFeePerGas } =
      transaction.previousGas || transaction.txParams;

    updateTransaction({
-      estimateUsed: PRIORITY_LEVELS.MINIMUM,
+      estimateUsed: PRIORITY_LEVELS.TEN_PERCENT_INCREASED,
      gasLimit,
      maxFeePerGas: addTenPercentAndRound(maxFeePerGas),
      maxPriorityFeePerGas: addTenPercentAndRound(maxPriorityFeePerGas),
@ -157,7 +157,7 @@ export const useTransactionFunctions = ({
    cancelTransaction,
    speedUpTransaction,
    updateTransaction,
-    updateTransactionToMinimumGasFee,
+    updateTransactionToTenPercentIncreasedGasFee,
    updateTransactionUsingDAPPSuggestedValues,
    updateTransactionUsingEstimate,
  };
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@ -26,6 +26,7 @@ import {
 } from '../../../helpers/constants/design-system';
 import { SECOND } from '../../../../shared/constants/time';
 import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
+import GasDetailsItem from '../../../components/app/gas-details-item';
 import LedgerInstructionField from '../../../components/app/ledger-instruction-field';

 export default class ConfirmApproveContent extends Component {
@ -95,12 +96,16 @@ export default class ConfirmApproveContent extends Component {
      >
        {showHeader && (
          <div className="confirm-approve-content__card-header">
-            <div className="confirm-approve-content__card-header__symbol">
-              {symbol}
-            </div>
-            <div className="confirm-approve-content__card-header__title">
-              {title}
-            </div>
+            {!supportsEIP1559V2 && (
+              <>
+                <div className="confirm-approve-content__card-header__symbol">
+                  {symbol}
+                </div>
+                <div className="confirm-approve-content__card-header__title">
+                  {title}
+                </div>
+              </>
+            )}
            {showEdit && (!showAdvanceGasFeeOptions || !supportsEIP1559V2) && (
              <Box width={BLOCK_SIZES.ONE_SIXTH}>
                <Button
@ -134,7 +139,11 @@ export default class ConfirmApproveContent extends Component {
      hexTransactionTotal,
      txData,
      isMultiLayerFeeNetwork,
+      supportsEIP1559V2,
    } = this.props;
+    if (!isMultiLayerFeeNetwork && supportsEIP1559V2) {
+      return <GasDetailsItem />;
+    }
    return (
      <div className="confirm-approve-content__transaction-details-content">
        {isMultiLayerFeeNetwork ? (
--- a/ui/pages/confirm-approve/confirm-approve-content/index.scss
+++ b/ui/pages/confirm-approve/confirm-approve-content/index.scss
@ -151,6 +151,7 @@
    margin-top: 20px;
    align-items: center;
    position: relative;
+    justify-content: flex-end;

    &__symbol {
      width: auto;