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

1 files changed, 188 insertions, 0 deletions

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])
+}