Adding metrics event for Advanced Options (EditGasDisplay) (#12507)

ui/components/app/edit-gas-display/edit-gas-display.component.js

@@ -34,6 +34,8 @@ import ActionableMessage from '../../ui/actionable-message/actionable-message';
 import { I18nContext } from '../../../contexts/i18n';
 import GasTiming from '../gas-timing';
 
+import { useMetricEvent } from '../../../hooks/useMetricEvent';
+
 export default function EditGasDisplay({
   mode = EDIT_GAS_MODES.MODIFY_IN_PLACE,
   showEducationButton = false,
@@ -119,6 +121,14 @@ export default function EditGasDisplay({
     errorKey = 'gasEstimatesUnavailableWarning';
   }
 
+  const clickedAdvancedOptionsMetricsEvent = useMetricEvent({
+    eventOpts: {
+      category: 'Transactions',
+      action: 'Edit Screen',
+      name: 'Clicked "Advanced Options"',
+    },
+  });
+
   return (
     <div className="edit-gas-display">
       <div className="edit-gas-display__content">
@@ -250,7 +260,10 @@ export default function EditGasDisplay({
           !showAdvancedInlineGasIfPossible && (
             <button
               className="edit-gas-display__advanced-button"
-              onClick={() => setShowAdvancedForm(!showAdvancedForm)}
+              onClick={() => {
+                setShowAdvancedForm(!showAdvancedForm);
+                clickedAdvancedOptionsMetricsEvent();
+              }}
             >
               {t('advancedOptions')}{' '}
               {showAdvancedForm ? (