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

7 files changed, 233 insertions, 3 deletions

diff --git a/ui/app/components/modals/customize-gas/customize-gas.component.js b/ui/app/components/modals/customize-gas/customize-gas.component.js
index 3f526bd43..4e2e20660 100644
--- a/ui/app/components/modals/customize-gas/customize-gas.component.js
+++ b/ui/app/components/modals/customize-gas/customize-gas.component.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import BigNumber from 'bignumber.js'
 import GasModalCard from '../../customize-gas-modal/gas-modal-card'
 import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants'
 import Button from '../../button'
@@ -14,6 +15,7 @@ import {
 export default class CustomizeGas extends Component {
   static contextTypes = {
     t: PropTypes.func,
+    metricsEvent: PropTypes.func,
   }
 
   static propTypes = {
@@ -73,9 +75,9 @@ export default class CustomizeGas extends Component {
   }
 
   render () {
-    const { t } = this.context
+    const { t, metricsEvent } = this.context
     const { hideModal } = this.props
-    const { gasPrice, gasLimit } = this.state
+    const { gasPrice, gasLimit, originalGasPrice, originalGasLimit } = this.state
     const { valid, errorKey } = this.validate()
 
     return (
@@ -128,7 +130,24 @@ export default class CustomizeGas extends Component {
               <Button
                 type="primary"
                 className="customize-gas__save"
-                onClick={() => this.handleSave()}
+                onClick={() => {
+                  metricsEvent({
+                    eventOpts: {
+                      category: 'Activation',
+                      action: 'userCloses',
+                      name: 'closeCustomizeGas',
+                    },
+                    pageOpts: {
+                      section: 'customizeGasModal',
+                      component: 'customizeGasSaveButton',
+                    },
+                    customVariables: {
+                      gasPriceChange: (new BigNumber(gasPrice)).minus(new BigNumber(originalGasPrice)).toString(10),
+                      gasLimitChange: (new BigNumber(gasLimit)).minus(new BigNumber(originalGasLimit)).toString(10),
+                    },
+                  })
+                  this.handleSave()
+                }}
                 style={{ marginRight: '10px' }}
                 disabled={!valid}
               >
diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss
index 45453a582..555da87ef 100644
--- a/ui/app/components/modals/index.scss
+++ b/ui/app/components/modals/index.scss
@@ -7,3 +7,5 @@
 @import './qr-scanner/index';
 
 @import './transaction-confirmed/index';
+
+@import './metametrics-opt-in-modal/index';
diff --git a/ui/app/components/modals/metametrics-opt-in-modal/index.js b/ui/app/components/modals/metametrics-opt-in-modal/index.js
new file mode 100644
index 000000000..47f946757
--- /dev/null
+++ b/ui/app/components/modals/metametrics-opt-in-modal/index.js
@@ -0,0 +1 @@
+export { default } from './metametrics-opt-in-modal.container'
diff --git a/ui/app/components/modals/metametrics-opt-in-modal/index.scss b/ui/app/components/modals/metametrics-opt-in-modal/index.scss
new file mode 100644
index 000000000..88b6d7a4d
--- /dev/null
+++ b/ui/app/components/modals/metametrics-opt-in-modal/index.scss
@@ -0,0 +1,30 @@
+.metametrics-opt-in-modal {
+  .metametrics-opt-in__main {
+    justify-content: center;
+    margin-left: 3%;
+    margin-right: 0%;
+    max-height: 75vh;
+
+    @media screen and (max-width: 575px) {
+      max-height: 100vh;
+    }
+  }
+
+
+  .metametrics-opt-in__title {
+    font-size: 38px;
+  }
+
+  .metametrics-opt-in__content {
+    padding-right: 6px;
+  }
+
+  .metametrics-opt-in__footer {
+    @media screen and (max-width: 575px) {
+      margin-top: 10px;
+      justify-content: center;
+      margin-left: 2%;
+      max-height: 520px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
new file mode 100644
index 000000000..36f1ed92d
--- /dev/null
+++ b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
@@ -0,0 +1,135 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import PageContainerFooter from '../../page-container/page-container-footer'
+
+export default class MetaMetricsOptInModal extends Component {
+  static propTypes = {
+    setParticipateInMetaMetrics: PropTypes.func,
+    hideModal: PropTypes.func,
+  }
+
+  static contextTypes = {
+    metricsEvent: PropTypes.func,
+  }
+
+  render () {
+    const { metricsEvent } = this.context
+    const { setParticipateInMetaMetrics, hideModal } = this.props
+
+    return (
+      <div className="metametrics-opt-in metametrics-opt-in-modal">
+        <div className="metametrics-opt-in__main">
+          <div className="metametrics-opt-in__content">
+            <div className="app-header__logo-container">
+              <img
+                className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+                src="/images/logo/metamask-logo-horizontal.svg"
+                height={30}
+              />
+              <img
+                className="app-header__metafox-logo app-header__metafox-logo--icon"
+                src="/images/logo/metamask-fox.svg"
+                height={42}
+                width={42}
+              />
+            </div>
+            <div className="metametrics-opt-in__body-graphic">
+              <img src="images/metrics-chart.svg" />
+            </div>
+            <div className="metametrics-opt-in__title">Help Us Improve MetaMask</div>
+            <div className="metametrics-opt-in__body">
+              <div className="metametrics-opt-in__description">
+               MetaMask would like to gather usage data to better understand how our users interact with the extension. This data
+               will be used to continually improve the usability and user experience of our product and the etheruem ecosystem.
+              </div>
+              <div className="metametrics-opt-in__description">
+               MetaMask will..
+              </div>
+
+              <div className="metametrics-opt-in__committments">
+                <div className="metametrics-opt-in__row">
+                  <i className="fa fa-check" />
+                  <div className="metametrics-opt-in__row-description">
+                    Always allow you to opt-out via Settings
+                  </div>
+                </div>
+                <div className="metametrics-opt-in__row">
+                  <i className="fa fa-check" />
+                  <div className="metametrics-opt-in__row-description">
+                    Send anonymized click & pageview events
+                  </div>
+                </div>
+                <div className="metametrics-opt-in__row">
+                  <i className="fa fa-check" />
+                  <div className="metametrics-opt-in__row-description">
+                    Maintain a public aggregate dashboard to educate the community
+                  </div>
+                </div>
+                <div className="metametrics-opt-in__row metametrics-opt-in__break-row">
+                  <i className="fa fa-times" />
+                  <div className="metametrics-opt-in__row-description">
+                    <span className="metametrics-opt-in__bold">Never</span> collect keys, addresses, transactions, balances, hashes, or any personal information
+                  </div>
+                </div>
+                <div className="metametrics-opt-in__row">
+                  <i className="fa fa-times" />
+                  <div className="metametrics-opt-in__row-description">
+                    <span className="metametrics-opt-in__bold">Never</span> collect your full IP address
+                  </div>
+                </div>
+                <div className="metametrics-opt-in__row">
+                  <i className="fa fa-times" />
+                  <div className="metametrics-opt-in__row-description">
+                    <span className="metametrics-opt-in__bold">Never</span> sell data for profit. Ever!
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="metametrics-opt-in__bottom-text">
+              This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our Privacy Policy here.
+            </div>
+          </div>
+          <div className="metametrics-opt-in__footer">
+            <PageContainerFooter
+              onCancel={() => {
+                setParticipateInMetaMetrics(false)
+                  .then(() => {
+                    metricsEvent({
+                      eventOpts: {
+                        category: 'Onboarding',
+                        action: 'Metrics Option',
+                        name: 'Metrics Opt Out',
+                      },
+                      isOptIn: true,
+                    }, {
+                      excludeMetaMetricsId: true,
+                    })
+                    hideModal()
+                  })
+              }}
+              cancelText={'No Thanks'}
+              hideCancel={false}
+              onSubmit={() => {
+                setParticipateInMetaMetrics(true)
+                  .then(() => {
+                    metricsEvent({
+                      eventOpts: {
+                        category: 'Onboarding',
+                        action: 'Metrics Option',
+                        name: 'Metrics Opt In',
+                      },
+                      isOptIn: true,
+                    })
+                    hideModal()
+                  })
+              }}
+              submitText={'I agree'}
+              submitButtonType={'confirm'}
+              disabled={false}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js
new file mode 100644
index 000000000..525806b75
--- /dev/null
+++ b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js
@@ -0,0 +1,24 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import MetaMetricsOptInModal from './metametrics-opt-in-modal.component'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+import { setParticipateInMetaMetrics } from '../../../actions'
+
+const mapStateToProps = (state, ownProps) => {
+  const { unapprovedTxCount } = ownProps
+
+  return {
+    unapprovedTxCount,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)),
+  }
+}
+
+export default compose(
+  withModalProps,
+  connect(mapStateToProps, mapDispatchToProps),
+)(MetaMetricsOptInModal)
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 08bf205ef..8ab599a71 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -25,6 +25,8 @@ import ConfirmRemoveAccount from './confirm-remove-account'
 import ConfirmResetAccount from './confirm-reset-account'
 import TransactionConfirmed from './transaction-confirmed'
 import CancelTransaction from './cancel-transaction'
+
+import MetaMetricsOptInModal from './metametrics-opt-in-modal'
 import RejectTransactions from './reject-transactions'
 import ClearApprovedOrigins from './clear-approved-origins'
 import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container'
@@ -213,6 +215,23 @@ const MODALS = {
     },
   },
 
+  METAMETRICS_OPT_IN_MODAL: {
+    contents: h(MetaMetricsOptInModal),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+      width: '100%',
+      height: '100%',
+      top: '0px',
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+      top: '10%',
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
   OLD_UI_NOTIFICATION_MODAL: {
     contents: [
       h(NotifcationModal, {