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

2 files changed, 294 insertions, 0 deletions

diff --git a/ui/app/metametrics/metametrics.provider.js b/ui/app/metametrics/metametrics.provider.js
new file mode 100644
index 000000000..5ff0294e5
--- /dev/null
+++ b/ui/app/metametrics/metametrics.provider.js
@@ -0,0 +1,106 @@
+import { Component } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import {
+  getCurrentNetworkId,
+  getSelectedAsset,
+  getAccountType,
+  getNumberOfAccounts,
+  getNumberOfTokens,
+} from '../selectors'
+import {
+  txDataSelector,
+} from '../selectors/confirm-transaction'
+import { getEnvironmentType } from '../../../app/scripts/lib/util'
+import {
+  sendMetaMetricsEvent,
+  sendCountIsTrackable,
+} from './metametrics.util'
+
+class MetaMetricsProvider extends Component {
+  static propTypes = {
+    network: PropTypes.string.isRequired,
+    environmentType: PropTypes.string.isRequired,
+    activeCurrency: PropTypes.string.isRequired,
+    accountType: PropTypes.string.isRequired,
+    metaMetricsSendCount: PropTypes.number.isRequired,
+    children: PropTypes.object.isRequired,
+    history: PropTypes.object.isRequired,
+  }
+
+  static childContextTypes = {
+    metricsEvent: PropTypes.func,
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      previousPath: '',
+      currentPath: window.location.href,
+    }
+
+    props.history.listen(locationObj => {
+      this.setState({
+        previousPath: this.state.currentPath,
+        currentPath: window.location.href,
+      })
+    })
+  }
+
+  getChildContext () {
+    const props = this.props
+    const { pathname } = location
+    const { previousPath, currentPath } = this.state
+
+    return {
+      metricsEvent: (config = {}, overrides = {}) => {
+        const { eventOpts = {} } = config
+        const { name = '' } = eventOpts
+        const { pathname: overRidePathName = '' } = overrides
+        const isSendFlow = Boolean(name.match(/^send|^confirm/) || overRidePathName.match(/send|confirm/))
+
+        if (props.participateInMetaMetrics || config.isOptIn) {
+          return sendMetaMetricsEvent({
+            ...props,
+            ...config,
+            previousPath,
+            currentPath,
+            pathname,
+            excludeMetaMetricsId: isSendFlow && !sendCountIsTrackable(props.metaMetricsSendCount + 1),
+            ...overrides,
+          })
+        }
+      },
+    }
+  }
+
+  render () {
+    return this.props.children
+  }
+}
+
+const mapStateToProps = state => {
+  const txData = txDataSelector(state) || {}
+
+  return {
+    network: getCurrentNetworkId(state),
+    environmentType: getEnvironmentType(),
+    activeCurrency: getSelectedAsset(state),
+    accountType: getAccountType(state),
+    confirmTransactionOrigin: txData.origin,
+    metaMetricsId: state.metamask.metaMetricsId,
+    participateInMetaMetrics: state.metamask.participateInMetaMetrics,
+    metaMetricsSendCount: state.metamask.metaMetricsSendCount,
+    numberOfTokens: getNumberOfTokens(state),
+    numberOfAccounts: getNumberOfAccounts(state),
+  }
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps)
+)(MetaMetricsProvider)
+
diff --git a/ui/app/metametrics/metametrics.util.js b/ui/app/metametrics/metametrics.util.js
new file mode 100644
index 000000000..2da7e2da8
--- /dev/null
+++ b/ui/app/metametrics/metametrics.util.js
@@ -0,0 +1,188 @@
+/* eslint camelcase: 0 */
+
+const ethUtil = require('ethereumjs-util')
+
+const inDevelopment = process.env.METAMETRICS_URL === 'development'
+
+const METAMETRICS_BASE_URL = 'https://chromeextensionmm.innocraft.cloud/piwik.php'
+const METAMETRICS_REQUIRED_PARAMS = `?idsite=${inDevelopment ? 1 : 2}&rec=1&apiv=1`
+const METAMETRICS_BASE_FULL = METAMETRICS_BASE_URL + METAMETRICS_REQUIRED_PARAMS
+
+const METAMETRICS_TRACKING_URL = inDevelopment
+  ? 'http://www.metamask.io/metametrics'
+  : 'http://www.metamask.io/metametrics-prod'
+
+const METAMETRICS_CUSTOM_HAD_ERROR = 'hadError'
+const METAMETRICS_CUSTOM_HEX_DATA = 'hexData'
+const METAMETRICS_CUSTOM_FUNCTION_TYPE = 'functionType'
+const METAMETRICS_CUSTOM_GAS_LIMIT_CHANGE = 'gasLimitChange'
+const METAMETRICS_CUSTOM_GAS_PRICE_CHANGE = 'gasPriceChange'
+const METAMETRICS_CUSTOM_RECIPIENT_KNOWN = 'recipientKnown'
+const METAMETRICS_CUSTOM_CONFIRM_SCREEN_ORIGIN = 'origin'
+const METAMETRICS_CUSTOM_FROM_NETWORK = 'fromNetwork'
+const METAMETRICS_CUSTOM_TO_NETWORK = 'toNetwork'
+const METAMETRICS_CUSTOM_ERROR_FIELD = 'errorField'
+const METAMETRICS_CUSTOM_ERROR_MESSAGE = 'errorMessage'
+const METAMETRICS_CUSTOM_RPC_NETWORK_ID = 'networkId'
+const METAMETRICS_CUSTOM_RPC_CHAIN_ID = 'chainId'
+
+const METAMETRICS_CUSTOM_NETWORK = 'network'
+const METAMETRICS_CUSTOM_ENVIRONMENT_TYPE = 'environmentType'
+const METAMETRICS_CUSTOM_ACTIVE_CURRENCY = 'activeCurrency'
+const METAMETRICS_CUSTOM_ACCOUNT_TYPE = 'accountType'
+const METAMETRICS_CUSTOM_NUMBER_OF_TOKENS = 'numberOfTokens'
+const METAMETRICS_CUSTOM_NUMBER_OF_ACCOUNTS = 'numberOfAccounts'
+
+const customVariableNameIdMap = {
+  [METAMETRICS_CUSTOM_HAD_ERROR]: 1,
+  [METAMETRICS_CUSTOM_HEX_DATA]: 2,
+  [METAMETRICS_CUSTOM_FUNCTION_TYPE]: 3,
+  [METAMETRICS_CUSTOM_GAS_LIMIT_CHANGE]: 4,
+  [METAMETRICS_CUSTOM_GAS_PRICE_CHANGE]: 5,
+  [METAMETRICS_CUSTOM_RECIPIENT_KNOWN]: 6,
+  [METAMETRICS_CUSTOM_CONFIRM_SCREEN_ORIGIN]: 7,
+  [METAMETRICS_CUSTOM_FROM_NETWORK]: 8,
+  [METAMETRICS_CUSTOM_TO_NETWORK]: 9,
+  [METAMETRICS_CUSTOM_RPC_NETWORK_ID]: 10,
+  [METAMETRICS_CUSTOM_RPC_CHAIN_ID]: 11,
+  [METAMETRICS_CUSTOM_ERROR_FIELD]: 12,
+  [METAMETRICS_CUSTOM_ERROR_MESSAGE]: 13,
+}
+
+const customDimensionsNameIdMap = {
+  [METAMETRICS_CUSTOM_NETWORK]: 5,
+  [METAMETRICS_CUSTOM_ENVIRONMENT_TYPE]: 6,
+  [METAMETRICS_CUSTOM_ACTIVE_CURRENCY]: 7,
+  [METAMETRICS_CUSTOM_ACCOUNT_TYPE]: 8,
+  [METAMETRICS_CUSTOM_NUMBER_OF_TOKENS]: 9,
+  [METAMETRICS_CUSTOM_NUMBER_OF_ACCOUNTS]: 10,
+}
+
+function composeUrlRefParamAddition (previousPath, confirmTransactionOrigin) {
+  const externalOrigin = confirmTransactionOrigin && confirmTransactionOrigin !== 'MetaMask'
+  return `&urlref=${externalOrigin ? 'EXTERNAL' : encodeURIComponent(previousPath.replace(/chrome-extension:\/\/\w+/, METAMETRICS_TRACKING_URL))}`
+}
+
+function composeCustomDimensionParamAddition (customDimensions) {
+  const customDimensionParamStrings = Object.keys(customDimensions).reduce((acc, name) => {
+    return [...acc, `dimension${customDimensionsNameIdMap[name]}=${customDimensions[name]}`]
+  }, [])
+  return `&${customDimensionParamStrings.join('&')}`
+}
+
+function composeCustomVarParamAddition (customVariables) {
+  const customVariableIdValuePairs = Object.keys(customVariables).reduce((acc, name) => {
+    return {
+      [customVariableNameIdMap[name]]: [name, customVariables[name]],
+      ...acc,
+    }
+  }, {})
+  return `&cvar=${encodeURIComponent(JSON.stringify(customVariableIdValuePairs))}`
+}
+
+function composeParamAddition (paramValue, paramName) {
+  return paramValue !== 0 && !paramValue
+    ? ''
+    : `&${paramName}=${paramValue}`
+}
+
+function composeUrl (config, permissionPreferences = {}) {
+  const {
+    eventOpts = {},
+    customVariables = '',
+    pageOpts = '',
+    network,
+    environmentType,
+    activeCurrency,
+    accountType,
+    numberOfTokens,
+    numberOfAccounts,
+    previousPath = '',
+    currentPath,
+    metaMetricsId,
+    confirmTransactionOrigin,
+    url: configUrl,
+    excludeMetaMetricsId,
+    isNewVisit,
+  } = config
+  const base = METAMETRICS_BASE_FULL
+
+  const e_c = composeParamAddition(eventOpts.category, 'e_c')
+  const e_a = composeParamAddition(eventOpts.action, 'e_a')
+  const e_n = composeParamAddition(eventOpts.name, 'e_n')
+  const new_visit = isNewVisit ? `&new_visit=1` : ''
+
+  const cvar = customVariables && composeCustomVarParamAddition(customVariables) || ''
+
+  const action_name = ''
+
+  const urlref = previousPath && composeUrlRefParamAddition(previousPath, confirmTransactionOrigin)
+
+  const dimensions = !pageOpts.hideDimensions ? composeCustomDimensionParamAddition({
+    network,
+    environmentType,
+    activeCurrency,
+    accountType,
+    numberOfTokens: customVariables && customVariables.numberOfTokens || numberOfTokens,
+    numberOfAccounts: customVariables && customVariables.numberOfAccounts || numberOfAccounts,
+  }) : ''
+  const url = configUrl || `&url=${encodeURIComponent(currentPath.replace(/chrome-extension:\/\/\w+/, METAMETRICS_TRACKING_URL))}`
+  const _id = metaMetricsId && !excludeMetaMetricsId ? `&_id=${metaMetricsId.slice(2, 18)}` : ''
+  const rand = `&rand=${String(Math.random()).slice(2)}`
+  const pv_id = `&pv_id=${ethUtil.bufferToHex(ethUtil.sha3(url || currentPath.match(/chrome-extension:\/\/\w+\/(.+)/)[0])).slice(2, 8)}`
+  const uid = metaMetricsId && !excludeMetaMetricsId
+    ? `&uid=${metaMetricsId.slice(2, 18)}`
+    : excludeMetaMetricsId
+      ? '&uid=0000000000000000'
+      : ''
+
+  return [ base, e_c, e_a, e_n, cvar, action_name, urlref, dimensions, url, _id, rand, pv_id, uid, new_visit ].join('')
+}
+
+export function sendMetaMetricsEvent (config, permissionPreferences) {
+  return fetch(composeUrl(config, permissionPreferences), {
+    'headers': {},
+    'method': 'GET',
+  })
+}
+
+export function verifyUserPermission (config, props) {
+  const {
+    eventOpts = {},
+  } = config
+  const { userPermissionPreferences } = props
+  const {
+    allowAll,
+    allowNone,
+    allowSendMetrics,
+  } = userPermissionPreferences
+
+  if (allowNone) {
+    return false
+  } else if (allowAll) {
+    return true
+  } else if (allowSendMetrics && eventOpts.name === 'send') {
+    return true
+  } else {
+    return false
+  }
+}
+
+const trackableSendCounts = {
+  1: true,
+  10: true,
+  30: true,
+  50: true,
+  100: true,
+  250: true,
+  500: true,
+  1000: true,
+  2500: true,
+  5000: true,
+  10000: true,
+  25000: true,
+}
+
+export function sendCountIsTrackable (sendCount) {
+  return Boolean(trackableSendCounts[sendCount])
+}