From 75b032590b1df15627ec3249b5733fb1a01ba84b Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Thu, 28 Oct 2021 10:06:16 -0700
Subject: [PATCH] Adding metrics event for Advanced Options (EditGasDisplay)
 (#12507)

---
 .../edit-gas-display.component.js                 | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js
index f95f6ebc7..e7b7da25e 100644
--- a/ui/components/app/edit-gas-display/edit-gas-display.component.js
+++ b/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 ? (