Adding gas limit section on advance gas fee modal (#12865)

app/_locales/en/messages.json

@@ -1132,6 +1132,9 @@
     "message": "Gas limit must be at least $1",
     "description": "$1 is the custom gas limit, in decimal."
   },
+  "gasLimitV2": {
+    "message": "Gas limit"
+  },
   "gasOption": {
     "message": "Gas option"
   },

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+
+import { useGasFeeContext } from '../../../../contexts/gasFee';
+import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+import Box from '../../../ui/box';
+import Button from '../../../ui/button';
+import FormField from '../../../ui/form-field';
+import I18nValue from '../../../ui/i18n-value';
+import Typography from '../../../ui/typography';
+
+import { useAdvanceGasFeePopoverContext } from '../context';
+
+const AdvancedGasFeeGasLimit = () => {
+  const t = useI18nContext();
+  const {
+    setDirty,
+    setGasLimit: setGasLimitInContext,
+  } = useAdvanceGasFeePopoverContext();
+  const { gasLimit: gasLimitInTransaction } = useGasFeeContext();
+  const [isEditing, setEditing] = useState(false);
+  const [gasLimit, setGasLimit] = useState(gasLimitInTransaction);
+
+  const updateGasLimit = (value) => {
+    setGasLimit(value);
+    setDirty(true);
+  };
+
+  useEffect(() => {
+    setGasLimitInContext(gasLimit);
+  }, [gasLimit, setGasLimitInContext]);
+
+  if (isEditing) {
+    return (
+      <FormField
+        onChange={updateGasLimit}
+        titleText={t('gasLimitV2')}
+        value={gasLimit}
+        numeric
+      />
+    );
+  }
+
+  return (
+    <Typography tag={TYPOGRAPHY.Paragraph} variant={TYPOGRAPHY.H7}>
+      <Box
+        display="flex"
+        alignItems="center"
+        className="advanced-gas-fee-gas-limit"
+      >
+        <strong>
+          <I18nValue messageKey="gasLimitV2" />
+        </strong>
+        <span>{gasLimit}</span>
+        <Button
+          className="advanced-gas-fee-gas-limit__edit-link"
+          onClick={() => setEditing(true)}
+          type="link"
+        >
+          <I18nValue messageKey="edit" />
+        </Button>
+      </Box>
+    </Typography>
+  );
+};
+
+export default AdvancedGasFeeGasLimit;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
+
+import { GAS_ESTIMATE_TYPES } from '../../../../../shared/constants/gas';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import mockEstimates from '../../../../../test/data/mock-estimates.json';
+import mockState from '../../../../../test/data/mock-state.json';
+import { GasFeeContextProvider } from '../../../../contexts/gasFee';
+import configureStore from '../../../../store/store';
+
+import { AdvanceGasFeePopoverContextProvider } from '../context';
+import AdvancedGasFeeGasLimit from './advanced-gas-fee-gas-limit';
+
+jest.mock('../../../../store/actions', () => ({
+  disconnectGasFeeEstimatePoller: jest.fn(),
+  getGasFeeEstimatesAndStartPolling: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve()),
+  addPollingTokenToAppState: jest.fn(),
+  removePollingTokenFromAppState: jest.fn(),
+}));
+
+const render = (txProps) => {
+  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(
+    <GasFeeContextProvider
+      transaction={{
+        userFeeLevel: 'custom',
+        txParams: { gas: '0x5208' },
+        ...txProps,
+      }}
+    >
+      <AdvanceGasFeePopoverContextProvider>
+        <AdvancedGasFeeGasLimit />
+      </AdvanceGasFeePopoverContextProvider>
+    </GasFeeContextProvider>,
+    store,
+  );
+};
+
+describe('AdvancedGasFeeGasLimit', () => {
+  it('should show GasLimit from transaction', () => {
+    render();
+    expect(screen.getByText('21000')).toBeInTheDocument();
+  });
+
+  it('should show input when edit link is clicked', () => {
+    render();
+    expect(document.getElementsByTagName('input')).toHaveLength(0);
+    fireEvent.click(screen.queryByText('Edit'));
+    expect(document.getElementsByTagName('input')[0]).toHaveValue(21000);
+  });
+});

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.js

@@ -0,0 +1 @@
+export { default } from './advanced-gas-fee-gas-limit';

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

@@ -0,0 +1,14 @@
+.advanced-gas-fee-gas-limit {
+  white-space: nowrap;
+
+  > * {
+    margin-right: 4px;
+  }
+
+  a.advanced-gas-fee-gas-limit__edit-link {
+    @include H7;
+
+    padding: 0;
+    width: auto;
+  }
+}

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

@@ -7,6 +7,7 @@ import Popover from '../../ui/popover';
 
 import { AdvanceGasFeePopoverContextProvider } from './context';
 import AdvancedGasFeeInputs from './advanced-gas-fee-inputs';
+import AdvancedGasFeeGasLimit from './advanced-gas-fee-gas-limit';
 import AdvancedGasFeeSaveButton from './advanced-gas-fee-save';
 
 const AdvancedGasFeePopover = () => {
@@ -28,8 +29,10 @@ const AdvancedGasFeePopover = () => {
         onClose={closeAllModals}
         footer={<AdvancedGasFeeSaveButton />}
       >
-        <Box className="advanced-gas-fee-popover__wrapper">
+        <Box className="advanced-gas-fee-popover__wrapper" margin={4}>
           <AdvancedGasFeeInputs />
+          <div className="advanced-gas-fee-popover__separator" />
+          <AdvancedGasFeeGasLimit />
         </Box>
       </Popover>
     </AdvanceGasFeePopoverContextProvider>

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-save/advanced-gas-fee-save.js

@@ -14,16 +14,18 @@ const AdvancedGasFeeSaveButton = () => {
   const { updateTransaction } = useGasFeeContext();
   const {
     isDirty,
+    gasLimit,
     maxFeePerGas,
     maxPriorityFeePerGas,
   } = useAdvanceGasFeePopoverContext();
 
   const onSave = () => {
-    updateTransaction(
+    updateTransaction({
-      PRIORITY_LEVELS.CUSTOM,
+      estimateUsed: PRIORITY_LEVELS.CUSTOM,
-      decGWEIToHexWEI(maxFeePerGas),
+      maxFeePerGas: decGWEIToHexWEI(maxFeePerGas),
-      decGWEIToHexWEI(maxPriorityFeePerGas),
+      maxPriorityFeePerGas: decGWEIToHexWEI(maxPriorityFeePerGas),
-    );
+      gasLimit,
+    });
     closeModal('advancedGasFee');
   };
 

ui/components/app/advanced-gas-fee-popover/context/advanceGasFeePopover.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 export const AdvanceGasFeePopoverContext = createContext({});
 
 export const AdvanceGasFeePopoverContextProvider = ({ children }) => {
+  const [gasLimit, setGasLimit] = useState();
   const [maxFeePerGas, setMaxFeePerGas] = useState();
   const [maxPriorityFeePerGas, setMaxPriorityFeePerGas] = useState();
   const [isDirty, setDirty] = useState();
@@ -11,10 +12,12 @@ export const AdvanceGasFeePopoverContextProvider = ({ children }) => {
   return (
     <AdvanceGasFeePopoverContext.Provider
       value={{
+        gasLimit,
         isDirty,
         maxFeePerGas,
         maxPriorityFeePerGas,
         setDirty,
+        setGasLimit,
         setMaxPriorityFeePerGas,
         setMaxFeePerGas,
       }}

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

@@ -7,4 +7,8 @@
     border-top: 1px solid $ui-grey;
     margin: 24px 0 16px 0;
   }
+
+  .form-field__heading-title > h6 {
+    font-size: $font-size-h7;
+  }
 }

ui/components/app/app-components.scss

@@ -57,6 +57,7 @@
 @import 'loading-network-screen/index';
 @import 'flask/experimental-area/index';
 @import 'advanced-gas-fee-popover/index';
+@import 'advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index';
 @import 'advanced-gas-fee-popover/advanced-gas-fee-inputs/index';
 @import 'advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/index';
 @import 'advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index';

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

@@ -9,7 +9,7 @@ import LoadingHeartBeat from '../../ui/loading-heartbeat';
 import Popover from '../../ui/popover';
 import Typography from '../../ui/typography/typography';
 
-import { COLORS } from '../../../helpers/constants/design-system';
+import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
 import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys';
 import { useGasFeeContext } from '../../../contexts/gasFee';
 import EditGasItem from './edit-gas-item';
@@ -57,7 +57,8 @@ const EditGasFeePopover = () => {
               className="edit-gas-fee-popover__know-more"
               align="center"
               color={COLORS.UI4}
-              fontSize="12px"
+              tag={TYPOGRAPHY.Paragraph}
+              variant={TYPOGRAPHY.H7}
             >
               <I18nValue
                 messageKey="learmMoreAboutGas"

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

@@ -100,7 +100,7 @@ const EditGasItem = ({ priorityLevel }) => {
   return (
     <button
       className={classNames('edit-gas-item', {
-        'edit-gas-item-selected': priorityLevel === estimateUsed,
+        'edit-gas-item--selected': priorityLevel === estimateUsed,
         'edit-gas-item-disabled':
           priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED &&
           !dappSuggestedGasFees,

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

@@ -111,7 +111,7 @@ describe('EditGasItem', () => {
   it('should highlight option is priorityLevel is currently selected', () => {
     renderComponent({ priorityLevel: 'high' }, { userFeeLevel: 'high' });
     expect(
-      document.getElementsByClassName('edit-gas-item-selected'),
+      document.getElementsByClassName('edit-gas-item--selected'),
     ).toHaveLength(1);
   });
 

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

@@ -11,7 +11,7 @@
   height: 32px;
   width: 100%;
 
-  &-selected {
+  &--selected {
     background-color: $ui-1;
   }
 

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

@@ -1,6 +1,9 @@
 import React from 'react';
 
-import { COLORS } from '../../../../helpers/constants/design-system';
+import {
+  COLORS,
+  TYPOGRAPHY,
+} from '../../../../helpers/constants/design-system';
 import { useGasFeeContext } from '../../../../contexts/gasFee';
 import I18nValue from '../../../ui/i18n-value';
 import Typography from '../../../ui/typography/typography';
@@ -14,10 +17,10 @@ const NetworkStatus = () => {
     <div className="network-status">
       <Typography
         color={COLORS.UI4}
-        fontSize="10px"
         fontWeight="bold"
         margin={[3, 0]}
-        variant="h6"
+        tag={TYPOGRAPHY.H6}
+        variant={TYPOGRAPHY.H8}
       >
         <I18nValue messageKey="networkStatus" />
       </Typography>

ui/components/app/gas-timing/gas-timing.component.js

@@ -172,9 +172,7 @@ export default function GasTiming({
           toHumanReadableTime(Number(customEstimatedTime?.upperTimeBound), t),
         ]);
       }
-    }
+    } else if (supportsEIP1559V2) {
-    // code below needs to cleaned-up once EIP_1559_V2 flag is removed
-    else if (supportsEIP1559V2) {
       text = t('gasTimingNegative', [
         toHumanReadableTime(low.maxWaitTimeEstimate, t),
       ]);

ui/components/app/transaction-detail/index.scss

@@ -31,6 +31,7 @@
       background: transparent;
       border: 0;
       padding-inline-end: 0;
+      position: relative;
       white-space: pre;
     }
 
@@ -40,7 +41,18 @@
     }
 
     &__icon {
-      font-size: 1rem;
+      @include Paragraph;
+
+      line-height: 1;
+      position: absolute;
+      left: -16px;
+      top: 0;
+
+      &-custom {
+        font-size: 1.35rem;
+        left: -12px;
+        top: -2px;
+      }
     }
 
     &__label {

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

@@ -7,7 +7,7 @@ import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
 import Typography from '../../ui/typography/typography';
 
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
-import { COLORS } from '../../../helpers/constants/design-system';
+import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
 import { PRIORITY_LEVEL_ICON_MAP } from '../../../helpers/constants/gas';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
@@ -36,7 +36,9 @@ export default function TransactionDetail({
       <div className="transaction-detail">
         <div className="transaction-detail-edit-V2">
           <button onClick={() => openModal('editGasFee')}>
-            <span className="transaction-detail-edit-V2__icon">
+            <span
+              className={`transaction-detail-edit-V2__icon transaction-detail-edit-V2__icon-${estimateUsed}`}
+            >
               {`${PRIORITY_LEVEL_ICON_MAP[estimateUsed]} `}
             </span>
             <span className="transaction-detail-edit-V2__label">
@@ -53,19 +55,32 @@ export default function TransactionDetail({
             <InfoTooltip
               contentText={
                 <div className="transaction-detail-edit-V2__tooltip">
-                  <Typography fontSize="12px" color={COLORS.GREY}>
+                  <Typography
+                    tag={TYPOGRAPHY.Paragraph}
+                    variant={TYPOGRAPHY.H7}
+                    color={COLORS.GREY}
+                  >
                     {t('dappSuggestedTooltip', [transaction.origin])}
                   </Typography>
-                  <Typography fontSize="12px">
+                  <Typography
-                    <b>{t('maxBaseFee')}</b>
+                    tag={TYPOGRAPHY.Paragraph}
+                    variant={TYPOGRAPHY.H7}
+                  >
+                    <strong>{t('maxBaseFee')}</strong>
                     {maxFeePerGas}
                   </Typography>
-                  <Typography fontSize="12px">
+                  <Typography
-                    <b>{t('maxPriorityFee')}</b>
+                    tag={TYPOGRAPHY.Paragraph}
+                    variant={TYPOGRAPHY.H7}
+                  >
+                    <strong>{t('maxPriorityFee')}</strong>
                     {maxPriorityFeePerGas}
                   </Typography>
-                  <Typography fontSize="12px">
+                  <Typography
-                    <b>{t('gasLimit')}</b>
+                    tag={TYPOGRAPHY.Paragraph}
+                    variant={TYPOGRAPHY.H7}
+                  >
+                    <strong>{t('gasLimit')}</strong>
                     {gasLimit}
                   </Typography>
                 </div>

ui/components/ui/typography/typography.js

@@ -20,7 +20,6 @@ export default function Typography({
   children,
   fontWeight = 'normal',
   fontStyle = 'normal',
-  fontSize,
   align,
   boxProps = {},
   margin = [1, 0],
@@ -34,7 +33,6 @@ export default function Typography({
     {
       [`typography--align-${align}`]: Boolean(align),
       [`typography--color-${color}`]: Boolean(color),
-      [`typography--size-${fontSize}`]: Boolean(fontSize),
     },
   );
 
@@ -69,7 +67,6 @@ Typography.propTypes = {
   margin: MultipleSizes,
   fontWeight: PropTypes.oneOf(Object.values(FONT_WEIGHT)),
   fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)),
-  fontSize: PropTypes.string,
   tag: PropTypes.oneOf([
     'p',
     'h1',

ui/components/ui/typography/typography.scss

@@ -33,12 +33,6 @@
     }
   }
 
-  @each $size in design-system.$font-size {
-    &--size-#{$size} {
-      font-size: $size;
-    }
-  }
-
   @each $alignment in design-system.$text-align {
     &--align-#{$alignment} {
       text-align: $alignment;

ui/css/design-system/attributes.scss

@@ -82,4 +82,3 @@ $display: block, grid, flex, inline-block, inline-grid, inline-flex, list-item;
 $text-align: left, right, center, justify, end;
 $font-weight: bold, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900;
 $font-style: normal, italic, oblique;
-$font-size: 10px, 12px;

ui/hooks/gasFeeInput/useGasFeeInputs.js

@@ -23,9 +23,6 @@ import { useMaxPriorityFeePerGasInput } from './useMaxPriorityFeePerGasInput';
 import { useGasEstimates } from './useGasEstimates';
 import { useTransactionFunctions } from './useTransactionFunctions';
 
-// eslint-disable-next-line prefer-destructuring
-const EIP_1559_V2 = process.env.EIP_1559_V2;
-
 /**
  * @typedef {Object} GasFeeInputReturnType
  * @property {DecGweiString} [maxFeePerGas] - the maxFeePerGas input value.
@@ -85,6 +82,8 @@ export function useGasFeeInputs(
     useSelector(checkNetworkAndAccountSupports1559) &&
     !isLegacyTransaction(transaction?.txParams);
 
+  const supportsEIP1559V2 = supportsEIP1559 && EIP_1559_V2_ENABLED;
+
   // We need the gas estimates from the GasFeeController in the background.
   // Calling this hooks initiates polling for new gas estimates and returns the
   // current estimate.
@@ -115,27 +114,31 @@ export function useGasFeeInputs(
     return PRIORITY_LEVELS.CUSTOM;
   });
 
+  const [gasLimit, setGasLimit] = useState(() =>
+    Number(hexToDecimal(transaction?.txParams?.gas ?? '0x0')),
+  );
+
   /**
    * In EIP-1559 V2 designs change to gas estimate is always updated to transaction
    * Thus callback setEstimateToUse can be deprecate in favour of this useEffect
    * so that transaction is source of truth whenever possible.
    */
   useEffect(() => {
-    if (EIP_1559_V2 && transaction?.userFeeLevel) {
+    if (supportsEIP1559V2) {
+      if (transaction?.userFeeLevel) {
         setEstimateUsed(transaction?.userFeeLevel);
         setInternalEstimateToUse(transaction?.userFeeLevel);
       }
+      setGasLimit(Number(hexToDecimal(transaction?.txParams?.gas ?? '0x0')));
+    }
   }, [
     setEstimateUsed,
+    setGasLimit,
     setInternalEstimateToUse,
+    supportsEIP1559V2,
     transaction,
-    userPrefersAdvancedGas,
   ]);
 
-  const [gasLimit, setGasLimit] = useState(() =>
-    Number(hexToDecimal(transaction?.txParams?.gas ?? '0x0')),
-  );
-
   const {
     gasPrice,
     setGasPrice,
@@ -152,7 +155,7 @@ export function useGasFeeInputs(
     maxFeePerGasFiat,
     setMaxFeePerGas,
   } = useMaxFeePerGasInput({
-    EIP_1559_V2,
+    supportsEIP1559V2,
     estimateToUse,
     gasEstimateType,
     gasFeeEstimates,
@@ -166,7 +169,7 @@ export function useGasFeeInputs(
     maxPriorityFeePerGasFiat,
     setMaxPriorityFeePerGas,
   } = useMaxPriorityFeePerGasInput({
-    EIP_1559_V2,
+    supportsEIP1559V2,
     estimateToUse,
     gasEstimateType,
     gasFeeEstimates,
@@ -316,7 +319,7 @@ export function useGasFeeInputs(
     hasGasErrors,
     hasSimulationError,
     supportsEIP1559,
-    supportsEIP1559V2: supportsEIP1559 && EIP_1559_V2_ENABLED,
+    supportsEIP1559V2,
     updateTransaction,
     updateTransactionUsingGasFeeEstimates,
   };

ui/hooks/gasFeeInput/useMaxFeePerGasInput.js

@@ -34,7 +34,7 @@ const getMaxFeePerGasFromTransaction = (transaction) => {
  *  method to update the setMaxFeePerGas.
  */
 export function useMaxFeePerGasInput({
-  EIP_1559_V2,
+  supportsEIP1559V2,
   estimateToUse,
   gasEstimateType,
   gasFeeEstimates,
@@ -67,10 +67,10 @@ export function useMaxFeePerGasInput({
   });
 
   useEffect(() => {
-    if (EIP_1559_V2) {
+    if (supportsEIP1559V2) {
       setMaxFeePerGas(maxFeePerGasFromTransaction);
     }
-  }, [EIP_1559_V2, maxFeePerGasFromTransaction, setMaxFeePerGas]);
+  }, [maxFeePerGasFromTransaction, setMaxFeePerGas, supportsEIP1559V2]);
 
   let gasSettings = {
     gasLimit: decimalToHex(gasLimit),

ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js

@@ -34,7 +34,7 @@ const getMaxPriorityFeePerGasFromTransaction = (transaction) => {
  *  method to update the maxPriorityFeePerGas.
  */
 export function useMaxPriorityFeePerGasInput({
-  EIP_1559_V2,
+  supportsEIP1559V2,
   estimateToUse,
   gasEstimateType,
   gasFeeEstimates,
@@ -63,13 +63,13 @@ export function useMaxPriorityFeePerGasInput({
   });
 
   useEffect(() => {
-    if (EIP_1559_V2) {
+    if (supportsEIP1559V2) {
       setMaxPriorityFeePerGas(maxPriorityFeePerGasFromTransaction);
     }
   }, [
-    EIP_1559_V2,
     maxPriorityFeePerGasFromTransaction,
     setMaxPriorityFeePerGas,
+    supportsEIP1559V2,
   ]);
 
   const maxPriorityFeePerGasToUse =

ui/hooks/gasFeeInput/useTransactionFunctions.js

@@ -11,13 +11,18 @@ import { updateTransaction as updateTransactionFn } from '../../store/actions';
 export const useTransactionFunctions = ({
   defaultEstimateToUse,
   gasFeeEstimates,
-  gasLimit,
+  gasLimit: gasLimitInTransaction,
   transaction,
 }) => {
   const dispatch = useDispatch();
 
   const updateTransaction = useCallback(
-    (estimateUsed, maxFeePerGas, maxPriorityFeePerGas) => {
+    ({
+      estimateUsed,
+      maxFeePerGas,
+      maxPriorityFeePerGas,
+      gasLimit = gasLimitInTransaction,
+    }) => {
       const newGasSettings = {
         gas: decimalToHex(gasLimit),
         gasLimit: decimalToHex(gasLimit),
@@ -42,7 +47,7 @@ export const useTransactionFunctions = ({
 
       dispatch(updateTransactionFn(updatedTxMeta));
     },
-    [defaultEstimateToUse, dispatch, gasLimit, transaction],
+    [defaultEstimateToUse, dispatch, gasLimitInTransaction, transaction],
   );
 
   const updateTransactionUsingGasFeeEstimates = useCallback(
@@ -52,21 +57,21 @@ export const useTransactionFunctions = ({
           maxFeePerGas,
           maxPriorityFeePerGas,
         } = transaction?.dappSuggestedGasFees;
-        updateTransaction(
+        updateTransaction({
-          PRIORITY_LEVELS.DAPP_SUGGESTED,
+          estimateUsed: PRIORITY_LEVELS.DAPP_SUGGESTED,
           maxFeePerGas,
           maxPriorityFeePerGas,
-        );
+        });
       } else {
         const {
           suggestedMaxFeePerGas,
           suggestedMaxPriorityFeePerGas,
         } = gasFeeEstimates[gasFeeEstimateToUse];
-        updateTransaction(
+        updateTransaction({
-          gasFeeEstimateToUse,
+          estimateUsed: gasFeeEstimateToUse,
-          decGWEIToHexWEI(suggestedMaxFeePerGas),
+          maxFeePerGas: decGWEIToHexWEI(suggestedMaxFeePerGas),
-          decGWEIToHexWEI(suggestedMaxPriorityFeePerGas),
+          maxPriorityFeePerGas: decGWEIToHexWEI(suggestedMaxPriorityFeePerGas),
-        );
+        });
       }
     },
     [gasFeeEstimates, transaction?.dappSuggestedGasFees, updateTransaction],

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

@@ -429,9 +429,7 @@ export default class ConfirmTransactionBase extends Component {
     ) : null;
 
     const renderGasDetailsItem = () => {
-      return EIP_1559_V2_ENABLED &&
+      return this.supportsEIP1559V2 ? (
-        supportsEIP1559 &&
-        !isLegacyTransaction(txData) ? (
         <GasDetailsItem
           key="gas_details"
           hexMaximumTransactionFee={hexMaximumTransactionFee}
@@ -968,6 +966,11 @@ export default class ConfirmTransactionBase extends Component {
     this._removeBeforeUnload();
   }
 
+  supportsEIP1559V2 =
+    EIP_1559_V2_ENABLED &&
+    this.props.supportsEIP1559 &&
+    !isLegacyTransaction(this.props.txData);
+
   render() {
     const { t } = this.context;
     const {
@@ -995,7 +998,6 @@ export default class ConfirmTransactionBase extends Component {
       gasFeeIsCustom,
       nativeCurrency,
       hardwareWalletRequiresConnection,
-      supportsEIP1559,
     } = this.props;
     const {
       submitting,
@@ -1035,6 +1037,7 @@ export default class ConfirmTransactionBase extends Component {
         functionType = t('contractInteraction');
       }
     }
+
     return (
       <TransactionModalContextProvider
         actionKey={actionKey}
@@ -1094,11 +1097,7 @@ export default class ConfirmTransactionBase extends Component {
           editingGas={editingGas}
           handleCloseEditGas={() => this.handleCloseEditGas()}
           currentTransaction={txData}
-          supportsEIP1559V2={
+          supportsEIP1559V2={this.supportsEIP1559V2}
-            EIP_1559_V2_ENABLED &&
-            supportsEIP1559 &&
-            !isLegacyTransaction(txData)
-          }
         />
       </TransactionModalContextProvider>
     );

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import { COLORS } from '../../../helpers/constants/design-system';
+import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
 import { hexWEIToDecGWEI } from '../../../helpers/utils/conversions.util';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -47,15 +47,15 @@ const GasDetailsItem = ({
           <InfoTooltip
             contentText={
               <>
-                <Typography fontSize="12px">
+                <Typography tag={TYPOGRAPHY.Paragraph} variant={TYPOGRAPHY.H7}>
                   {t('transactionDetailGasTooltipIntro', [
                     isMainnet ? t('networkNameEthereum') : '',
                   ])}
                 </Typography>
-                <Typography fontSize="12px">
+                <Typography tag={TYPOGRAPHY.Paragraph} variant={TYPOGRAPHY.H7}>
                   {t('transactionDetailGasTooltipExplanation')}
                 </Typography>
-                <Typography fontSize="12px">
+                <Typography tag={TYPOGRAPHY.Paragraph} variant={TYPOGRAPHY.H7}>
                   <a
                     href="https://community.metamask.io/t/what-is-gas-why-do-transactions-take-so-long/3172"
                     target="_blank"

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

@@ -11,6 +11,7 @@ import ActionableMessage from '../../../components/ui/actionable-message/actiona
 import ErrorMessage from '../../../components/ui/error-message';
 import I18nValue from '../../../components/ui/i18n-value';
 import Typography from '../../../components/ui/typography';
+import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
 
 const TransactionAlerts = ({
   userAcknowledgedGasMissing,
@@ -49,10 +50,11 @@ const TransactionAlerts = ({
         <ActionableMessage
           message={
             <Typography
-              className="transaction-alerts__pending-transactions"
               align="left"
-              fontSize="12px"
+              className="transaction-alerts__pending-transactions"
               margin={[0, 0]}
+              tag={TYPOGRAPHY.Paragraph}
+              variant={TYPOGRAPHY.H7}
             >
               <strong>
                 <I18nValue
@@ -89,7 +91,12 @@ const TransactionAlerts = ({
       {estimateUsed === PRIORITY_LEVELS.LOW && (
         <ActionableMessage
           message={
-            <Typography align="left" fontSize="12px" margin={[0, 0]}>
+            <Typography
+              align="left"
+              margin={[0, 0]}
+              tag={TYPOGRAPHY.Paragraph}
+              variant={TYPOGRAPHY.H7}
+            >
               <I18nValue messageKey="lowPriorityMessage" />
             </Typography>
           }