From bcdd52f55a84bb928432fdafe25be68bf62792a2 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 18 Apr 2022 11:31:44 -0500
Subject: [PATCH] Dark Mode: Implement Metrics (#14455)

---
 app/scripts/controllers/metametrics.js              |  1 +
 app/scripts/controllers/metametrics.test.js         |  6 ++++++
 shared/constants/metametrics.js                     |  3 +++
 .../experimental-tab/experimental-tab.component.js  | 13 ++++++++++++-
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/scripts/controllers/metametrics.js b/app/scripts/controllers/metametrics.js
index d3960b01a..555576d00 100644
--- a/app/scripts/controllers/metametrics.js
+++ b/app/scripts/controllers/metametrics.js
@@ -560,6 +560,7 @@ export default class MetaMetricsController {
       [TRAITS.NUMBER_OF_TOKENS]: this._getNumberOfTokens(metamaskState),
       [TRAITS.OPENSEA_API_ENABLED]: metamaskState.openSeaEnabled,
       [TRAITS.THREE_BOX_ENABLED]: metamaskState.threeBoxSyncingAllowed,
+      [TRAITS.THEME]: metamaskState.theme || 'default',
     };
 
     if (!this.previousTraits) {
diff --git a/app/scripts/controllers/metametrics.test.js b/app/scripts/controllers/metametrics.test.js
index 10a40cc21..37269d6fc 100644
--- a/app/scripts/controllers/metametrics.test.js
+++ b/app/scripts/controllers/metametrics.test.js
@@ -681,6 +681,7 @@ describe('MetaMetricsController', function () {
         openSeaEnabled: true,
         threeBoxSyncingAllowed: false,
         useCollectibleDetection: false,
+        theme: 'default',
       });
 
       assert.deepEqual(traits, {
@@ -693,6 +694,7 @@ describe('MetaMetricsController', function () {
         [TRAITS.NUMBER_OF_TOKENS]: 5,
         [TRAITS.OPENSEA_API_ENABLED]: true,
         [TRAITS.THREE_BOX_ENABLED]: false,
+        [TRAITS.THEME]: 'default',
       });
     });
 
@@ -713,6 +715,7 @@ describe('MetaMetricsController', function () {
         identities: [{}, {}],
         threeBoxSyncingAllowed: false,
         useCollectibleDetection: false,
+        theme: 'default',
       });
 
       const updatedTraits = metaMetricsController._buildUserTraitsObject({
@@ -732,6 +735,7 @@ describe('MetaMetricsController', function () {
         identities: [{}, {}, {}],
         threeBoxSyncingAllowed: false,
         useCollectibleDetection: false,
+        theme: 'default',
       });
 
       assert.deepEqual(updatedTraits, {
@@ -759,6 +763,7 @@ describe('MetaMetricsController', function () {
         identities: [{}, {}],
         threeBoxSyncingAllowed: false,
         useCollectibleDetection: true,
+        theme: 'default',
       });
 
       const updatedTraits = metaMetricsController._buildUserTraitsObject({
@@ -776,6 +781,7 @@ describe('MetaMetricsController', function () {
         identities: [{}, {}],
         threeBoxSyncingAllowed: false,
         useCollectibleDetection: true,
+        theme: 'default',
       });
 
       assert.equal(updatedTraits, null);
diff --git a/shared/constants/metametrics.js b/shared/constants/metametrics.js
index 5a8041c9f..5636b5d67 100644
--- a/shared/constants/metametrics.js
+++ b/shared/constants/metametrics.js
@@ -176,6 +176,7 @@
  * we identify the opensea_api_enabled trait
  * @property {'three_box_enabled'} THREE_BOX_ENABLED - when 3box feature is
  *  toggled we identify the 3box_enabled trait
+ * @property {'theme'} THEME - when the user's theme changes we identify the theme trait
  */
 
 /**
@@ -193,6 +194,7 @@ export const TRAITS = {
   NUMBER_OF_TOKENS: 'number_of_tokens',
   OPENSEA_API_ENABLED: 'opensea_api_enabled',
   THREE_BOX_ENABLED: 'three_box_enabled',
+  THEME: 'theme',
 };
 
 /**
@@ -215,6 +217,7 @@ export const TRAITS = {
  *  API enabled?
  * @property {boolean} [three_box_enabled] - does the user have 3box sync
  *  enabled?
+ * @property {string} [theme] - which theme the user has selected
  */
 
 // Mixpanel converts the zero address value to a truly anonymous event, which
diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js
index e8efda0f4..0ce66ea80 100644
--- a/ui/pages/settings/experimental-tab/experimental-tab.component.js
+++ b/ui/pages/settings/experimental-tab/experimental-tab.component.js
@@ -247,6 +247,17 @@ export default class ExperimentalTab extends PureComponent {
       },
     ];
 
+    const onChange = (newTheme) => {
+      this.context.trackEvent({
+        category: 'Settings',
+        event: 'Theme Changed',
+        properties: {
+          theme_selected: newTheme,
+        },
+      });
+      setTheme(newTheme);
+    };
+
     return (
       <div className="settings-page__content-row">
         <div className="settings-page__content-item">
@@ -261,7 +272,7 @@ export default class ExperimentalTab extends PureComponent {
               id="select-theme"
               options={themesOptions}
               selectedOption={theme}
-              onChange={async (newTheme) => setTheme(newTheme)}
+              onChange={onChange}
             />
           </div>
         </div>