fixes

app/scripts/controllers/transactions/index.js

@@ -264,7 +264,7 @@ export default class TransactionController extends EventEmitter {
   addTransaction(txMeta) {
     this.txStateManager.addTransaction(txMeta);
     this.emit(`${txMeta.id}:unapproved`, txMeta);
-    this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.ADDED);
+    this.trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.ADDED);
   }
 
   /**
@@ -915,7 +915,7 @@ export default class TransactionController extends EventEmitter {
       // sign transaction
       const rawTx = await this.signTransaction(txId);
       await this.publishTransaction(txId, rawTx);
-      this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.APPROVED);
+      this.trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.APPROVED);
       // must set transaction to submitted/failed before releasing lock
       nonceLock.releaseLock();
     } catch (err) {
@@ -1011,7 +1011,7 @@ export default class TransactionController extends EventEmitter {
 
     this.txStateManager.setTxStatusSubmitted(txId);
 
-    this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.SUBMITTED);
+    this.trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.SUBMITTED);
   }
 
   /**
@@ -1070,7 +1070,7 @@ export default class TransactionController extends EventEmitter {
         // metricsParams.error = TODO: figure out a way to get the on-chain failure reason
       }
 
-      this._trackTransactionMetricsEvent(
+      this.trackTransactionMetricsEvent(
         txMeta,
         TRANSACTION_EVENTS.FINALIZED,
         metricsParams,
@@ -1112,7 +1112,7 @@ export default class TransactionController extends EventEmitter {
   async cancelTransaction(txId) {
     const txMeta = this.txStateManager.getTransaction(txId);
     this.txStateManager.setTxStatusRejected(txId);
-    this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.REJECTED);
+    this.trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.REJECTED);
   }
 
   /**
@@ -1525,21 +1525,15 @@ export default class TransactionController extends EventEmitter {
 
     const gasParamsInGwei = this._getGasValuesInGWEI(gasParams);
 
-<<<<<<< HEAD
     const { eip1559V2Enabled: eip1559V2 } = this.preferencesStore.getState();
 
-=======
->>>>>>> 59d9745b1 (merge)
     const properties = {
       chain_id: chainId,
       referrer,
       source,
       network,
       type,
-<<<<<<< HEAD
       eip1559V2,
-=======
->>>>>>> 59d9745b1 (merge)
     };
 
     const sensitiveProperties = {
@@ -1683,11 +1677,7 @@ export default class TransactionController extends EventEmitter {
    * @param {TransactionMetaMetricsEventString} event - the name of the transaction event
    * @param {Object} extraParams - optional props and values to include in sensitiveProperties
    */
-<<<<<<< HEAD
   _trackTransactionMetricsEvent(txMeta, event, extraParams = {}) {
-=======
-  trackTransactionMetricsEvent(txMeta, event, extraParams = {}) {
->>>>>>> 59d9745b1 (merge)
     if (!txMeta) {
       return;
     }
@@ -1718,7 +1708,7 @@ export default class TransactionController extends EventEmitter {
       // If the user rejects a transaction, finalize the transaction added
       // event fragment. with the abandoned flag set.
       case TRANSACTION_EVENTS.REJECTED:
-        id = `transaction-added-${txMeta.id}`;
+        id = `transaction-rejected-${txMeta.id}`;
         this.updateEventFragment(id, { properties, sensitiveProperties });
         this.finalizeEventFragment(id, {
           abandoned: true,
@@ -1731,6 +1721,11 @@ export default class TransactionController extends EventEmitter {
         this.updateEventFragment(id, { properties, sensitiveProperties });
         this.finalizeEventFragment(`transaction-submitted-${txMeta.id}`);
         break;
+      case TRANSACTION_EVENTS.UI_ACTION:
+        id = `transaction-ui_action-${txMeta.id}`;
+        this.updateEventFragment(id, { properties, sensitiveProperties });
+        this.finalizeEventFragment(`transaction-ui_action-${txMeta.id}`);
+        break;
       default:
         break;
     }
@@ -1755,14 +1750,14 @@ export default class TransactionController extends EventEmitter {
   _failTransaction(txId, error) {
     this.txStateManager.setTxStatusFailed(txId, error);
     const txMeta = this.txStateManager.getTransaction(txId);
-    this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.FINALIZED, {
+    this.trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.FINALIZED, {
       error: error.message,
     });
   }
 
   _dropTransaction(txId) {
     this.txStateManager.setTxStatusDropped(txId);
     const txMeta = this.txStateManager.getTransaction(txId);
-    this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.FINALIZED);
+    this.trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.FINALIZED);
   }
 }

shared/constants/transaction.js

@@ -249,6 +249,10 @@ export const TRANSACTION_GROUP_CATEGORIES = {
  *  ones, are added to the controller state in an unapproved status. When this
  *  happens we fire the Transaction Added event to show that the transaction
  *  has been added to the user's MetaMask.
+ * @property {'Transaction UI Action'} UI_ACTION - When an unapproved transaction
+ *  is in the controller state, MetaMask will render a confirmation screen for
+ *  that transaction. User may do actions on transaction in UI like changing gas
+ *  fee estimate, etc.
  * @property {'Transaction Approved'} APPROVED - When an unapproved transaction
  *  is in the controller state, MetaMask will render a confirmation screen for
  *  that transaction. If the user approves the transaction we fire this event
@@ -285,4 +289,5 @@ export const TRANSACTION_EVENTS = {
   FINALIZED: 'Transaction Finalized',
   REJECTED: 'Transaction Rejected',
   SUBMITTED: 'Transaction Submitted',
+  UI_ACTION: 'Transaction UI Action',
 };

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

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
+import { MetaMetricsContext } from '../../../../contexts/metametrics';
 import Box from '../../../ui/box';
 import Typography from '../../../ui/typography';
 import CheckBox from '../../../ui/check-box';
@@ -12,7 +13,6 @@ import {
 } from '../../../../helpers/constants/design-system';
 import { getAdvancedGasFeeValues } from '../../../../selectors';
 import { setAdvancedGasFee } from '../../../../store/actions';
-import { useTransactionMetrics } from '../../../../hooks/useTransactionMetrics';
 
 import { useAdvancedGasFeePopoverContext } from '../context';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
@@ -26,7 +26,7 @@ const AdvancedGasFeeDefaults = () => {
     maxPriorityFeePerGas,
   } = useAdvancedGasFeePopoverContext();
   const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues);
-  const { captureTransactionMetricsForEIP1559V2 } = useTransactionMetrics();
+  const metricsEvent = useContext(MetaMetricsContext);
 
   const [isDefaultSettingsSelected, setDefaultSettingsSelected] = useState(
     Boolean(advancedGasFeeValues) &&
@@ -43,23 +43,28 @@ const AdvancedGasFeeDefaults = () => {
   }, [advancedGasFeeValues, maxBaseFee, maxPriorityFeePerGas]);
 
   const handleUpdateDefaultSettings = () => {
+    let defaults;
     if (isDefaultSettingsSelected) {
-      dispatch(setAdvancedGasFee(null));
+      defaults = null;
       setDefaultSettingsSelected(false);
     } else {
-      const defaults = {
+      defaults = {
         maxBaseFee,
         priorityFee: maxPriorityFeePerGas,
       };
-      captureTransactionMetricsForEIP1559V2({
-        action: 'Advanced gas fee modal',
-        name: 'Saved Advanced Defaults',
-        variables: {
-          defaults,
-        },
-      });
       dispatch(setAdvancedGasFee(defaults));
     }
+    metricsEvent({
+      eventOpts: {
+        category: 'Settings',
+        action: 'Saved Advanced Defaults',
+        name: 'Advanced gas fee modal',
+      },
+      customVariables: {
+        defaults,
+      },
+    });
+    dispatch(setAdvancedGasFee(defaults));
   };
 
   return (

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

@@ -23,8 +23,6 @@ const AdvancedGasFeeGasLimit = () => {
   const t = useI18nContext();
   const {
     setGasLimit: setGasLimitInContext,
-    initialGasValues,
-    updateInitialGasValue,
   } = useAdvancedGasFeePopoverContext();
   const {
     gasLimit: gasLimitInTransaction,
@@ -38,13 +36,6 @@ const AdvancedGasFeeGasLimit = () => {
     setGasLimit(value);
   };
 
-  useEffect(() => {
-    if (!initialGasValues.gasLimit) {
-      updateInitialGasValue({ gasLimit });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   useEffect(() => {
     setGasLimitInContext(gasLimit);
     const error = validateGasLimit(gasLimit, minimumGasLimitDec);

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

@@ -49,12 +49,10 @@ const BaseFeeInput = () => {
 
   const { gasFeeEstimates, estimateUsed, maxFeePerGas } = useGasFeeContext();
   const {
-    initialGasValues,
     maxPriorityFeePerGas,
     setErrorValue,
     setMaxFeePerGas,
     setMaxBaseFee,
-    updateInitialGasValue,
   } = useAdvancedGasFeePopoverContext();
 
   const {
@@ -90,13 +88,6 @@ const BaseFeeInput = () => {
     [setBaseFee],
   );
 
-  useEffect(() => {
-    if (!initialGasValues.maxFeePerGas) {
-      updateInitialGasValue({ maxFeePerGas: baseFee });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   useEffect(() => {
     setMaxFeePerGas(baseFee);
     const error = validateBaseFee(

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

@@ -45,10 +45,8 @@ const PriorityFeeInput = () => {
   const t = useI18nContext();
   const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues);
   const {
-    initialGasValues,
     setErrorValue,
     setMaxPriorityFeePerGas,
-    updateInitialGasValue,
   } = useAdvancedGasFeePopoverContext();
   const {
     estimateUsed,
@@ -99,13 +97,6 @@ const PriorityFeeInput = () => {
     setPriorityFeeError,
   ]);
 
-  useEffect(() => {
-    if (!initialGasValues.maxPriorityFeePerGas) {
-      updateInitialGasValue({ maxPriorityFeePerGas: priorityFee });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <Box margin={[0, 2]}>
       <FormField

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

@@ -1,27 +1,22 @@
 import React from 'react';
-import BigNumber from 'bignumber.js';
 
 import { PRIORITY_LEVELS } from '../../../../../shared/constants/gas';
 import { decGWEIToHexWEI } from '../../../../../shared/modules/conversion.utils';
 import { useTransactionModalContext } from '../../../../contexts/transaction-modal';
 import { useGasFeeContext } from '../../../../contexts/gasFee';
-import { useTransactionMetrics } from '../../../../hooks/useTransactionMetrics';
+import { useTransactionEventFragment } from '../../../../hooks/useTransactionEventFragment';
 import Button from '../../../ui/button';
 import I18nValue from '../../../ui/i18n-value';
 
 import { useAdvancedGasFeePopoverContext } from '../context';
 
-const getDifference = (num1, num2) =>
-  new BigNumber(num1, 10).minus(new BigNumber(num2, 10)).toNumber();
-
 const AdvancedGasFeeSaveButton = () => {
   const { closeAllModals } = useTransactionModalContext();
-  const { captureTransactionMetricsForEIP1559V2 } = useTransactionMetrics();
+  const { captureTransactionEvent } = useTransactionEventFragment();
   const { updateTransaction } = useGasFeeContext();
   const {
     gasLimit,
     hasErrors,
-    initialGasValues,
     maxFeePerGas,
     maxPriorityFeePerGas,
   } = useAdvancedGasFeePopoverContext();
@@ -36,26 +31,11 @@ const AdvancedGasFeeSaveButton = () => {
       estimateUsed: PRIORITY_LEVELS.CUSTOM,
       ...gasValues,
     });
-    captureTransactionMetricsForEIP1559V2({
-      action: 'Advanced gas fee modal',
-      name: 'Transaction Approved',
-      variables: gasValues,
-    });
-    captureTransactionMetricsForEIP1559V2({
-      action: 'Advanced gas fee modal',
-      name: 'Transaction Added',
+    captureTransactionEvent({
+      action: 'Transaction Updated with new Custom Estimates',
+      screen: 'Advanced gas fee modal',
       variables: {
-        differences: {
-          gasLimit: getDifference(gasLimit, initialGasValues.gasLimit),
-          maxFeePerGas: getDifference(
-            maxFeePerGas,
-            initialGasValues.maxFeePerGas,
-          ),
-          maxPriorityFeePerGas: getDifference(
-            maxPriorityFeePerGas,
-            initialGasValues.maxPriorityFeePerGas,
-          ),
-        },
+        gasValues,
       },
     });
     closeAllModals();

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

@@ -7,16 +7,11 @@ export const AdvancedGasFeePopoverContextProvider = ({ children }) => {
   const [gasLimit, setGasLimit] = useState();
   const [maxFeePerGas, setMaxFeePerGas] = useState();
   const [maxPriorityFeePerGas, setMaxPriorityFeePerGas] = useState();
-  const [initialGasValues, setInitialGasValues] = useState({});
   const [errors, setErrors] = useState({
     maxFeePerGas: false,
     maxPriorityFeePerGas: false,
   });
 
-  const updateInitialGasValue = (value) => {
-    setInitialGasValues({ ...initialGasValues, ...value });
-  };
-
   const setErrorValue = useCallback(
     (field, value) => {
       if (errors[field] !== value) {
@@ -36,12 +31,10 @@ export const AdvancedGasFeePopoverContextProvider = ({ children }) => {
         maxPriorityFeePerGas,
         setErrorValue,
         maxBaseFee,
-        initialGasValues,
         setGasLimit,
         setMaxPriorityFeePerGas,
         setMaxFeePerGas,
         setMaxBaseFee,
-        updateInitialGasValue,
       }}
     >
       {children}