Metametrics (#6171)

* Add metametrics provider and util.

* Add backend api and state for participating in metametrics.

* Add frontend action for participating in metametrics.

* Add metametrics opt-in screen.

* Add metametrics events to first time flow.

* Add metametrics events for route changes

* Add metametrics events for send and confirm screens

* Add metametrics events to dropdowns, transactions, log in and out, settings, sig requests and main screen

* Ensures each log in is measured as a new visit by metametrics.

* Ensure metametrics is called with an empty string for dimensions params if specified

* Adds opt in metametrics modal after unlock for existing users

* Adds settings page toggle for opting in and out of MetaMetrics

* Switch metametrics dimensions to page level scope

* Lint, test and translation fixes for metametrics.

* Update design for metametrics opt-in screen

* Complete responsive styling of metametrics-opt-in modal

* Use new chart image on metrics opt in screens

* Incorporate the metametrics opt-in screen into the new onboarding flow

* Update e2e tests to accomodate metametrics changes

* Mock out metametrics network requests in integration tests

* Fix tx-list integration test to support metametrics provider.

* Send number of tokens and accounts data with every metametrics event.

* Update metametrics event descriptor schema and add new events.

* Fix import tos bug and send gas button bug due to metametrics changes.

* Various small fixes on the metametrics branch.

* Add origin custom variable type to metametrics.util

* Fix names of onboarding complete actions (metametrics).

* Fix names of Metrics Options actions (metametrics).

* Clean up code related to metametrics.

* Fix bad merge conflict resolution and improve promise handling in sendMetaMetrics event and confrim tx base

* Don't send a second metrics event if user has gone back during first time flow.

* Collect metametrics on going back from onboarding create/import.

* Add missing custom variable constants for metametrics

* Fix metametrics provider

* Make height of opt-in modal responsive.

* Adjust text content for opt-in modal.

* Update metametrics event names and clean up code in opt-in-modal

* Put phishing warning step next to last in onboarding flow

* Link terms of service on create and import screens of first time flow

* Add subtext to options on the onboarding select action screen.

* Fix styling of bullet points on end of onboarding screen.

* Combine phishing warning and congratulations screens.

* Fix placement of users if unlocking after an incomplete onboarding import flow.

* Fix capitalization in opt-in screen

* Fix last onboarding screen translations

* Add link to 'Learn More' on the last screen of onboarding

* Code clean up: metametrics branch

* Update e2e tests for phishing warning step removal

* e2e tests passing on metametrics branch

* Different tracking urls for metametrics on development and prod

4 files changed, 113 insertions, 4 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index d4860bbfb..53d46b6f8 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -470,15 +470,21 @@
     "message": "Tips on storing it safely"
   },
   "endOfFlowMessage3": {
-    "message": "Save a backup in multiple places"
+    "message": "Save a backup in multiple places."
   },
   "endOfFlowMessage4": {
-    "message": "Never tell anyone"
+    "message": "Never share the phrase with anyone."
   },
   "endOfFlowMessage5": {
-    "message": "If you need to back your seed phrase again, you can find it in Settings -> Security."
+    "message": "Be careful of phishing! MetaMask will never spontaneously ask for your seed phrase."
   },
   "endOfFlowMessage6": {
+    "message": "If you need to back your up seed phrase again, you can find it in Settings -> Security."
+  },
+  "endOfFlowMessage7": {
+    "message": "If you ever have questions or see something fishy, email support@metamask.io."
+  },
+  "endOfFlowMessage8": {
     "message": "MetaMask cannot recover your seedphrase. Learn more."
   },
   "ensNameNotFound": {
@@ -689,6 +695,9 @@
   "importWallet": {
     "message": "Import Wallet"
   },
+  "importYourExisting": {
+    "message": "Import your existing wallet using a 12 word seed phrase"
+  },
   "imported": {
     "message": "Imported",
     "description": "status showing that an account has been fully loaded into the keyring"
@@ -1000,6 +1009,12 @@
   "originalTotal": {
     "message": "Original Total"
   },
+  "participateInMetaMetrics": {
+    "message": "Participate in MetaMetrics"
+  },
+  "participateInMetaMetricsDesciption": {
+    "message": "Participate in MetaMetrics to help us make MetaMask better"
+  },
   "password": {
     "message": "Password"
   },
@@ -1435,6 +1450,9 @@
   "testFaucet": {
     "message": "Test Faucet"
   },
+  "thisWillCreate": {
+    "message": "This will create a new wallet and seed phrase"
+  },
   "tips": {
     "message": "Tips"
   },
diff --git a/app/images/metrics-chart.svg b/app/images/metrics-chart.svg
new file mode 100644
index 000000000..e18934244
--- /dev/null
+++ b/app/images/metrics-chart.svg
@@ -0,0 +1,8 @@
+<svg width="95" height="82" viewBox="0 0 95 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.848145" y="35.7778" width="17.7707" height="27.2222" rx="4" fill="#C4C4C4"/>
+<rect x="24.542" y="17.8889" width="17.7707" height="45.1111" rx="4" fill="#C4C4C4"/>
+<rect x="48.2363" width="17.7707" height="63" rx="4" fill="#C4C4C4"/>
+<ellipse cx="74.5222" cy="61.0554" rx="19.6218" ry="20.6111" fill="white"/>
+<path d="M74.2257 45.1111C66.0108 45.1111 59.3428 52.1153 59.3428 60.7444C59.3428 69.3736 66.0108 76.3777 74.2257 76.3777C82.4407 76.3777 89.1086 69.3736 89.1086 60.7444C89.1086 52.1153 82.4407 45.1111 74.2257 45.1111ZM82.4407 70.4382C81.8005 70.046 81.1071 69.7098 80.4136 69.4296C79.8268 69.2055 79.2934 68.9253 78.7066 68.7012C77.1063 67.9167 76.8929 67.3564 76.8929 67.3003C76.8929 67.2443 76.8929 67.1883 76.8929 67.1322V67.0762V66.3478C76.8929 66.3478 79.8802 66.4598 81.3204 64.9469C81.3204 64.9469 79.24 64.3306 79.6134 60.3522C79.9868 56.3738 79.1333 52.8997 76.1461 53.2359C76.1461 53.2359 74.8125 51.5549 72.1986 52.6196C71.2918 52.9558 68.8913 53.9083 68.998 59.3436C69.1047 64.8349 67.131 64.8349 67.131 64.8349C67.131 64.8349 68.1445 66.4038 71.6119 66.3478V66.684C71.6119 66.796 71.6119 66.9641 71.5585 67.0762C71.5585 67.1322 71.5585 67.1883 71.5585 67.2443C71.5585 67.3564 71.3451 67.9167 69.7448 68.6451C69.158 68.9253 68.6246 69.1494 68.0378 69.3736C67.3443 69.6537 66.6509 69.9899 66.0108 70.3822C63.4503 68.0288 61.8499 64.5547 61.8499 60.6884C61.8499 53.5161 67.3977 47.6886 74.2257 47.6886C81.0537 47.6886 86.6015 53.5161 86.6015 60.6884C86.6015 64.6107 85.0012 68.0848 82.4407 70.4382Z" fill="#C4C4C4"/>
+<path d="M74.5518 64.0034H76.1523V65.5557H74.5518V64.0034ZM72.5913 60.1362C72.6343 59.1157 72.9906 58.3924 73.6602 57.9663C74.0827 57.6942 74.6019 57.5581 75.2178 57.5581C76.027 57.5581 76.6984 57.7515 77.2319 58.1382C77.769 58.5249 78.0376 59.0978 78.0376 59.8569C78.0376 60.3224 77.9212 60.7145 77.6885 61.0332C77.5524 61.2266 77.291 61.4736 76.9043 61.7744L76.5229 62.0698C76.3153 62.231 76.1774 62.4189 76.1094 62.6338C76.0664 62.7699 76.0431 62.9811 76.0396 63.2676H74.5894C74.6108 62.6624 74.6681 62.2453 74.7612 62.0161C74.8543 61.7834 75.0942 61.5166 75.481 61.2158L75.873 60.9097C76.002 60.813 76.1058 60.7074 76.1846 60.5928C76.3278 60.3958 76.3994 60.1792 76.3994 59.9429C76.3994 59.6707 76.3188 59.4237 76.1577 59.2017C76.0002 58.9761 75.7101 58.8633 75.2876 58.8633C74.8722 58.8633 74.5768 59.0011 74.4014 59.2769C74.2295 59.5526 74.1436 59.839 74.1436 60.1362H72.5913Z" fill="white"/>
+</svg>
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index 584b6bc51..f92341353 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -1,6 +1,6 @@
 const ObservableStore = require('obs-store')
 const normalizeAddress = require('eth-sig-util').normalize
-const { isValidAddress } = require('ethereumjs-util')
+const { isValidAddress, sha3, bufferToHex } = require('ethereumjs-util')
 const extend = require('xtend')
 
 
@@ -42,6 +42,8 @@ class PreferencesController {
       // perform sensitive operations.
       featureFlags: {},
       knownMethodData: {},
+      participateInMetaMetrics: null,
+      firstTimeFlowType: null,
       currentLocale: opts.initLangCode,
       identities: {},
       lostIdentities: {},
@@ -52,6 +54,8 @@ class PreferencesController {
       },
       completedOnboarding: false,
       completedUiMigration: true,
+      metaMetricsId: null,
+      metaMetricsSendCount: 0,
     }, opts.initState)
 
     this.diagnostics = opts.diagnostics
@@ -92,6 +96,44 @@ class PreferencesController {
     this.store.updateState({ useBlockie: val })
   }
 
+  /**
+   * Setter for the `participateInMetaMetrics` property
+   *
+   * @param {boolean} bool Whether or not the user wants to participate in MetaMetrics
+   * @returns {string|null} the string of the new metametrics id, or null if not set
+   *
+   */
+  setParticipateInMetaMetrics (bool) {
+    this.store.updateState({ participateInMetaMetrics: bool })
+    let metaMetricsId = null
+    if (bool && !this.store.getState().metaMetricsId) {
+      metaMetricsId = bufferToHex(sha3(String(Date.now()) + String(Math.round(Math.random() * Number.MAX_SAFE_INTEGER))))
+      this.store.updateState({ metaMetricsId })
+    } else if (bool === false) {
+      this.store.updateState({ metaMetricsId })
+    }
+    return metaMetricsId
+  }
+
+  setMetaMetricsSendCount (val) {
+    this.store.updateState({ metaMetricsSendCount: val })
+  }
+
+  getMetaMetricsSendCount () {
+    return this.store.getState().metaMetricsSendCount
+  }
+
+  /**
+   * Setter for the `firstTimeFlowType` property
+   *
+   * @param {String} type Indicates the type of first time flow - create or import - the user wishes to follow
+   *
+   */
+   setFirstTimeFlowType (type) {
+     this.store.updateState({ firstTimeFlowType: type })
+   }
+
+
   getSuggestedTokens () {
     return this.store.getState().suggestedTokens
   }
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 41c3e3642..653868066 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -385,6 +385,9 @@ module.exports = class MetamaskController extends EventEmitter {
       getState: (cb) => cb(null, this.getState()),
       setCurrentCurrency: this.setCurrentCurrency.bind(this),
       setUseBlockie: this.setUseBlockie.bind(this),
+      setParticipateInMetaMetrics: this.setParticipateInMetaMetrics.bind(this),
+      setMetaMetricsSendCount: this.setMetaMetricsSendCount.bind(this),
+      setFirstTimeFlowType: this.setFirstTimeFlowType.bind(this),
       setCurrentLocale: this.setCurrentLocale.bind(this),
       markAccountsFound: this.markAccountsFound.bind(this),
       markPasswordForgotten: this.markPasswordForgotten.bind(this),
@@ -1625,6 +1628,44 @@ module.exports = class MetamaskController extends EventEmitter {
   }
 
   /**
+   * Sets whether or not the user will have usage data tracked with MetaMetrics
+   * @param {boolean} bool - True for users that wish to opt-in, false for users that wish to remain out.
+   * @param {Function} cb - A callback function called when complete.
+   */
+  setParticipateInMetaMetrics (bool, cb) {
+    try {
+      const metaMetricsId = this.preferencesController.setParticipateInMetaMetrics(bool)
+      cb(null, metaMetricsId)
+    } catch (err) {
+      cb(err)
+    }
+  }
+
+  setMetaMetricsSendCount (val, cb) {
+    try {
+      this.preferencesController.setMetaMetricsSendCount(val)
+      cb(null)
+    } catch (err) {
+      cb(err)
+    }
+  }
+
+  /**
+   * Sets the type of first time flow the user wishes to follow: create or import
+   * @param {String} type - Indicates the type of first time flow the user wishes to follow
+   * @param {Function} cb - A callback function called when complete.
+   */
+  setFirstTimeFlowType (type, cb) {
+    try {
+      this.preferencesController.setFirstTimeFlowType(type)
+      cb(null)
+    } catch (err) {
+      cb(err)
+    }
+  }
+
+
+  /**
    * A method for setting a user's current locale, affecting the language rendered.
    * @param {string} key - Locale identifier.
    * @param {Function} cb - A callback function called when complete.