Merge pull request #6417 from MetaMask/metrics-updates

Metrics updates

ui/app/components/app/send/send-footer/send-footer.component.js

@@ -27,6 +27,7 @@ export default class SendFooter extends Component {
     unapprovedTxs: PropTypes.object,
     update: PropTypes.func,
     sendErrors: PropTypes.object,
+    gasChangedLabel: PropTypes.string,
   }
 
   static contextTypes = {
@@ -57,6 +58,7 @@ export default class SendFooter extends Component {
       update,
       toAccounts,
       history,
+      gasChangedLabel,
     } = this.props
     const { metricsEvent } = this.context
 
@@ -91,6 +93,9 @@ export default class SendFooter extends Component {
             action: 'Edit Screen',
             name: 'Complete',
           },
+          customVariables: {
+            gasChanged: gasChangedLabel,
+          },
         })
         history.push(CONFIRM_TRANSACTION_ROUTE)
       })

ui/app/components/app/send/send-footer/send-footer.container.js

@@ -31,10 +31,21 @@ import {
   constructTxParams,
   constructUpdatedTx,
 } from './send-footer.utils'
+import {
+  getRenderableEstimateDataForSmallButtonsFromGWEI,
+  getDefaultActiveButtonIndex,
+} from '../../../../selectors/custom-gas'
 
 export default connect(mapStateToProps, mapDispatchToProps)(SendFooter)
 
 function mapStateToProps (state) {
+  const gasButtonInfo = getRenderableEstimateDataForSmallButtonsFromGWEI(state)
+  const gasPrice = getGasPrice(state)
+  const activeButtonIndex = getDefaultActiveButtonIndex(gasButtonInfo, gasPrice)
+  const gasChangedLabel = activeButtonIndex >= 0
+    ? gasButtonInfo[activeButtonIndex].labelKey
+    : 'custom'
+
   return {
     amount: getSendAmount(state),
     data: getSendHexData(state),
@@ -50,6 +61,7 @@ function mapStateToProps (state) {
     tokenBalance: getTokenBalance(state),
     unapprovedTxs: getUnapprovedTxs(state),
     sendErrors: getSendErrors(state),
+    gasChangedLabel,
   }
 }
 

ui/app/components/app/send/send-footer/tests/send-footer-container.test.js

@@ -46,6 +46,10 @@ proxyquire('../send-footer.container.js', {
   },
   './send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` },
   './send-footer.utils': utilsStubs,
+  '../../../../selectors/custom-gas': {
+    getRenderableEstimateDataForSmallButtonsFromGWEI: (s) => ([{ labelKey: `mockLabel:${s}` }]),
+    getDefaultActiveButtonIndex: () => 0,
+  },
 })
 
 describe('send-footer container', () => {
@@ -68,6 +72,7 @@ describe('send-footer container', () => {
         tokenBalance: 'mockTokenBalance:mockState',
         unapprovedTxs: 'mockUnapprovedTxs:mockState',
         sendErrors: 'mockSendErrors:mockState',
+        gasChangedLabel: 'mockLabel:mockState',
       })
     })
 

ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js

@@ -112,7 +112,7 @@ export default class TransactionViewBalance extends PureComponent {
               eventOpts: {
                 category: 'Navigation',
                 action: 'Home',
-                name: 'Clicked Send',
+                name: selectedToken ? 'Clicked Send: Token' : 'Clicked Send: Eth',
               },
             })
             history.push(SEND_ROUTE)

ui/app/helpers/utils/metametrics.util.js

@@ -23,6 +23,7 @@ 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_GAS_CHANGED = 'gasChanged'
 
 const METAMETRICS_CUSTOM_NETWORK = 'network'
 const METAMETRICS_CUSTOM_ENVIRONMENT_TYPE = 'environmentType'
@@ -43,6 +44,7 @@ const customVariableNameIdMap = {
   [METAMETRICS_CUSTOM_RPC_CHAIN_ID]: 2,
   [METAMETRICS_CUSTOM_ERROR_FIELD]: 1,
   [METAMETRICS_CUSTOM_ERROR_MESSAGE]: 2,
+  [METAMETRICS_CUSTOM_GAS_CHANGED]: 1,
 }
 
 const customDimensionsNameIdMap = {

ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.component.js

@@ -56,7 +56,7 @@ export default class ConfirmDeployContract extends Component {
   render () {
     return (
       <ConfirmTransactionBase
-        action={this.context.t('contractDeployment')}
+        actionKey={'contractDeployment'}
         dataComponent={this.renderData()}
       />
     )

ui/app/pages/confirm-send-ether/confirm-send-ether.component.js

@@ -30,7 +30,7 @@ export default class ConfirmSendEther extends Component {
 
     return (
       <ConfirmTransactionBase
-        action={this.context.t('confirm')}
+        actionKey={'confirm'}
         hideData={hideData}
         onEdit={confirmTransactionData => this.handleEdit(confirmTransactionData)}
       />

ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -64,7 +64,7 @@ export default class ConfirmTransactionBase extends Component {
     updateGasAndCalculate: PropTypes.func,
     customGas: PropTypes.object,
     // Component props
-    action: PropTypes.string,
+    actionKey: PropTypes.string,
     contentComponent: PropTypes.node,
     dataComponent: PropTypes.node,
     detailsComponent: PropTypes.node,
@@ -159,7 +159,7 @@ export default class ConfirmTransactionBase extends Component {
   }
 
   handleEditGas () {
-    const { onEditGas, showCustomizeGasModal, action, txData: { origin }, methodData = {} } = this.props
+    const { onEditGas, showCustomizeGasModal, actionKey, txData: { origin }, methodData = {} } = this.props
 
     this.context.metricsEvent({
       eventOpts: {
@@ -169,7 +169,7 @@ export default class ConfirmTransactionBase extends Component {
       },
       customVariables: {
         recipientKnown: null,
-        functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'),
+        functionType: actionKey || getMethodName(methodData.name) || 'contractInteraction',
         origin,
       },
     })
@@ -292,7 +292,7 @@ export default class ConfirmTransactionBase extends Component {
   }
 
   handleEdit () {
-    const { txData, tokenData, tokenProps, onEdit, action, txData: { origin }, methodData = {} } = this.props
+    const { txData, tokenData, tokenProps, onEdit, actionKey, txData: { origin }, methodData = {} } = this.props
 
     this.context.metricsEvent({
       eventOpts: {
@@ -302,7 +302,7 @@ export default class ConfirmTransactionBase extends Component {
       },
       customVariables: {
         recipientKnown: null,
-        functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'),
+        functionType: actionKey || getMethodName(methodData.name) || 'contractInteraction',
         origin,
       },
     })
@@ -331,7 +331,7 @@ export default class ConfirmTransactionBase extends Component {
 
   handleCancel () {
     const { metricsEvent } = this.context
-    const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction, action, txData: { origin }, methodData = {} } = this.props
+    const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction, actionKey, txData: { origin }, methodData = {} } = this.props
 
     if (onCancel) {
       metricsEvent({
@@ -342,7 +342,7 @@ export default class ConfirmTransactionBase extends Component {
         },
         customVariables: {
           recipientKnown: null,
-          functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'),
+          functionType: actionKey || getMethodName(methodData.name) || 'contractInteraction',
           origin,
         },
       })
@@ -358,7 +358,7 @@ export default class ConfirmTransactionBase extends Component {
 
   handleSubmit () {
     const { metricsEvent } = this.context
-    const { txData: { origin }, sendTransaction, clearConfirmTransaction, txData, history, onSubmit, action, metaMetricsSendCount = 0, setMetaMetricsSendCount, methodData = {} } = this.props
+    const { txData: { origin }, sendTransaction, clearConfirmTransaction, txData, history, onSubmit, actionKey, metaMetricsSendCount = 0, setMetaMetricsSendCount, methodData = {} } = this.props
     const { submitting } = this.state
 
     if (submitting) {
@@ -377,7 +377,7 @@ export default class ConfirmTransactionBase extends Component {
         },
         customVariables: {
           recipientKnown: null,
-          functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'),
+          functionType: actionKey || getMethodName(methodData.name) || 'contractInteraction',
           origin,
         },
       })
@@ -517,7 +517,7 @@ export default class ConfirmTransactionBase extends Component {
       valid: propsValid = true,
       errorMessage,
       errorKey: propsErrorKey,
-      action,
+      actionKey,
       title,
       subtitle,
       hideSubtitle,
@@ -543,7 +543,7 @@ export default class ConfirmTransactionBase extends Component {
         toName={toName}
         toAddress={toAddress}
         showEdit={onEdit && !isTxReprice}
-        action={action || getMethodName(name) || this.context.t('contractInteraction')}
+        action={this.context.t(actionKey) || getMethodName(name) || this.context.t('contractInteraction')}
         title={title}
         titleComponent={this.renderTitleComponent()}
         subtitle={subtitle}

ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js

@@ -36,6 +36,20 @@ export default class ImportWithSeedPhrase extends PureComponent {
       .join(' ')
   }
 
+  componentWillMount () {
+    window.onbeforeunload = () => this.context.metricsEvent({
+      eventOpts: {
+        category: 'Onboarding',
+        action: 'Import Seed Phrase',
+        name: 'Close window on import screen',
+      },
+      customVariables: {
+        errorLabel: 'Seed Phrase Error',
+        errorMessage: this.state.seedPhraseError,
+      },
+    })
+  }
+
   handleSeedPhraseChange (seedPhrase) {
     let seedPhraseError = ''
 
@@ -172,6 +186,10 @@ export default class ImportWithSeedPhrase extends PureComponent {
                   action: 'Import Seed Phrase',
                   name: 'Go Back from Onboarding Import',
                 },
+                customVariables: {
+                  errorLabel: 'Seed Phrase Error',
+                  errorMessage: seedPhraseError,
+                },
               })
               this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE)
             }}