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, 44 insertions, 6 deletions

diff --git a/ui/app/components/send/send-footer/send-footer.component.js b/ui/app/components/send/send-footer/send-footer.component.js
index b78b56373..d943b4b22 100644
--- a/ui/app/components/send/send-footer/send-footer.component.js
+++ b/ui/app/components/send/send-footer/send-footer.component.js
@@ -26,11 +26,13 @@ export default class SendFooter extends Component {
     tokenBalance: PropTypes.string,
     unapprovedTxs: PropTypes.object,
     update: PropTypes.func,
+    sendErrors: PropTypes.object,
   }
 
   static contextTypes = {
     t: PropTypes.func,
-  }
+    metricsEvent: PropTypes.func,
+  };
 
   onCancel () {
     this.props.clearSend()
@@ -56,6 +58,7 @@ export default class SendFooter extends Component {
       toAccounts,
       history,
     } = this.props
+    const { metricsEvent } = this.context
 
     // Should not be needed because submit should be disabled if there are errors.
     // const noErrors = !amountError && toError === null
@@ -66,7 +69,6 @@ export default class SendFooter extends Component {
 
     // TODO: add nickname functionality
     addToAddressBookIfNew(to, toAccounts)
-
     const promise = editingTransactionId
       ? update({
         amount,
@@ -82,13 +84,44 @@ export default class SendFooter extends Component {
       : sign({ data, selectedToken, to, amount, from, gas, gasPrice })
 
     Promise.resolve(promise)
-      .then(() => history.push(CONFIRM_TRANSACTION_ROUTE))
+      .then(() => {
+        metricsEvent({
+          eventOpts: {
+            category: 'Transactions',
+            action: 'Edit Screen',
+            name: 'Complete',
+          },
+        })
+        history.push(CONFIRM_TRANSACTION_ROUTE)
+      })
   }
 
   formShouldBeDisabled () {
     const { data, inError, selectedToken, tokenBalance, gasTotal, to } = this.props
     const missingTokenBalance = selectedToken && !tokenBalance
-    return inError || !gasTotal || missingTokenBalance || !(data || to)
+    const shouldBeDisabled = inError || !gasTotal || missingTokenBalance || !(data || to)
+    return shouldBeDisabled
+  }
+
+  componentDidUpdate (prevProps) {
+    const { inError, sendErrors } = this.props
+    const { metricsEvent } = this.context
+    if (!prevProps.inError && inError) {
+      const errorField = Object.keys(sendErrors).find(key => sendErrors[key])
+      const errorMessage = sendErrors[errorField]
+
+      metricsEvent({
+        eventOpts: {
+          category: 'Transactions',
+          action: 'Edit Screen',
+          name: 'Error',
+        },
+        customVariables: {
+          errorField,
+          errorMessage,
+        },
+      })
+    }
   }
 
   render () {
diff --git a/ui/app/components/send/send-footer/send-footer.container.js b/ui/app/components/send/send-footer/send-footer.container.js
index 60de4d030..0c6120cc5 100644
--- a/ui/app/components/send/send-footer/send-footer.container.js
+++ b/ui/app/components/send/send-footer/send-footer.container.js
@@ -21,6 +21,7 @@ import {
   getSendHexData,
   getTokenBalance,
   getUnapprovedTxs,
+  getSendErrors,
 } from '../send.selectors'
 import {
   isSendFormInError,
@@ -48,6 +49,7 @@ function mapStateToProps (state) {
     toAccounts: getSendToAccounts(state),
     tokenBalance: getTokenBalance(state),
     unapprovedTxs: getUnapprovedTxs(state),
+    sendErrors: getSendErrors(state),
   }
 }
 
diff --git a/ui/app/components/send/send-footer/tests/send-footer-component.test.js b/ui/app/components/send/send-footer/tests/send-footer-component.test.js
index 65e4bb654..4b63e422d 100644
--- a/ui/app/components/send/send-footer/tests/send-footer-component.test.js
+++ b/ui/app/components/send/send-footer/tests/send-footer-component.test.js
@@ -45,7 +45,8 @@ describe('SendFooter Component', function () {
       tokenBalance={'mockTokenBalance'}
       unapprovedTxs={['mockTx']}
       update={propsMethodSpies.update}
-    />, { context: { t: str => str } })
+      sendErrors={{}}
+    />, { context: { t: str => str, metricsEvent: () => ({}) } })
   })
 
   afterEach(() => {
@@ -201,7 +202,7 @@ describe('SendFooter Component', function () {
         tokenBalance={'mockTokenBalance'}
         unapprovedTxs={['mockTx']}
         update={propsMethodSpies.update}
-      />, { context: { t: str => str } })
+      />, { context: { t: str => str, metricsEvent: () => ({}) } })
     })
 
     afterEach(() => {
diff --git a/ui/app/components/send/send-footer/tests/send-footer-container.test.js b/ui/app/components/send/send-footer/tests/send-footer-container.test.js
index daefa5103..70cb28df3 100644
--- a/ui/app/components/send/send-footer/tests/send-footer-container.test.js
+++ b/ui/app/components/send/send-footer/tests/send-footer-container.test.js
@@ -42,6 +42,7 @@ proxyquire('../send-footer.container.js', {
     getTokenBalance: (s) => `mockTokenBalance:${s}`,
     getSendHexData: (s) => `mockHexData:${s}`,
     getUnapprovedTxs: (s) => `mockUnapprovedTxs:${s}`,
+    getSendErrors: (s) => `mockSendErrors:${s}`,
   },
   './send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` },
   './send-footer.utils': utilsStubs,
@@ -66,6 +67,7 @@ describe('send-footer container', () => {
         toAccounts: 'mockToAccounts:mockState',
         tokenBalance: 'mockTokenBalance:mockState',
         unapprovedTxs: 'mockUnapprovedTxs:mockState',
+        sendErrors: 'mockSendErrors:mockState',
       })
     })