Close transaction on close of notification window (#6340)

ui/app/components/app/signature-request.js

@@ -2,6 +2,8 @@ const Component = require('react').Component
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../app/scripts/lib/enums'
+import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import Identicon from '../ui/identicon'
 const connect = require('react-redux').connect
 const ethUtil = require('ethereumjs-util')
@@ -47,6 +49,42 @@ function mapDispatchToProps (dispatch) {
   }
 }
 
+function mergeProps (stateProps, dispatchProps, ownProps) {
+  const {
+    signPersonalMessage,
+    signTypedMessage,
+    cancelPersonalMessage,
+    cancelTypedMessage,
+    signMessage,
+    cancelMessage,
+    txData,
+  } = ownProps
+
+  const { type } = txData
+
+  let cancel
+  let sign
+  if (type === 'personal_sign') {
+    cancel = cancelPersonalMessage
+    sign = signPersonalMessage
+  } else if (type === 'eth_signTypedData') {
+    cancel = cancelTypedMessage
+    sign = signTypedMessage
+  } else if (type === 'eth_sign') {
+    cancel = cancelMessage
+    sign = signMessage
+  }
+
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    ...ownProps,
+    txData,
+    cancel,
+    sign,
+  }
+}
+
 SignatureRequest.contextTypes = {
   t: PropTypes.func,
   metricsEvent: PropTypes.func,
@@ -54,7 +92,7 @@ SignatureRequest.contextTypes = {
 
 module.exports = compose(
   withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
+  connect(mapStateToProps, mapDispatchToProps, mergeProps)
 )(SignatureRequest)
 
 
@@ -67,6 +105,24 @@ function SignatureRequest (props) {
   }
 }
 
+SignatureRequest.prototype.componentDidMount = function () {
+  const { clearConfirmTransaction, cancel } = this.props
+  const { metricsEvent } = this.context
+  if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_NOTIFICATION) {
+    window.onbeforeunload = event => {
+      metricsEvent({
+        eventOpts: {
+          category: 'Transactions',
+          action: 'Sign Request',
+          name: 'Cancel Sig Request Via Notification Close',
+        },
+      })
+      clearConfirmTransaction()
+      cancel(event)
+    }
+  }
+}
+
 SignatureRequest.prototype.renderHeader = function () {
   return h('div.request-signature__header', [
 
@@ -233,30 +289,7 @@ SignatureRequest.prototype.renderBody = function () {
 }
 
 SignatureRequest.prototype.renderFooter = function () {
-  const {
-    signPersonalMessage,
-    signTypedMessage,
-    cancelPersonalMessage,
-    cancelTypedMessage,
-    signMessage,
-    cancelMessage,
-  } = this.props
-
-  const { txData } = this.props
-  const { type } = txData
-
-  let cancel
-  let sign
-  if (type === 'personal_sign') {
-    cancel = cancelPersonalMessage
-    sign = signPersonalMessage
-  } else if (type === 'eth_signTypedData') {
-    cancel = cancelTypedMessage
-    sign = signTypedMessage
-  } else if (type === 'eth_sign') {
-    cancel = cancelMessage
-    sign = signMessage
-  }
+  const { cancel, sign } = this.props
 
   return h('div.request-signature__footer', [
     h(Button, {

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

@@ -1,6 +1,8 @@
 import ethUtil from 'ethereumjs-util'
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../app/scripts/lib/enums'
+import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import ConfirmPageContainer, { ConfirmDetailRow } from '../../components/app/confirm-page-container'
 import { isBalanceSufficient } from '../../components/app/send/send.utils'
 import { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE } from '../../helpers/constants/routes'
@@ -474,7 +476,7 @@ export default class ConfirmTransactionBase extends Component {
   }
 
   componentDidMount () {
-    const { txData: { origin } = {} } = this.props
+    const { txData: { origin, id } = {}, cancelTransaction } = this.props
     const { metricsEvent } = this.context
     metricsEvent({
       eventOpts: {
@@ -486,6 +488,22 @@ export default class ConfirmTransactionBase extends Component {
         origin,
       },
     })
+
+    if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_NOTIFICATION) {
+      window.onbeforeunload = () => {
+        metricsEvent({
+          eventOpts: {
+            category: 'Transactions',
+            action: 'Confirm Screen',
+            name: 'Cancel Tx Via Notification Close',
+          },
+          customVariables: {
+            origin,
+          },
+        })
+        cancelTransaction({ id })
+      }
+    }
   }
 
   render () {

ui/app/store/actions.js

@@ -902,6 +902,7 @@ function signMsg (msgData) {
   log.debug('action - signMsg')
   return (dispatch, getState) => {
     dispatch(actions.showLoadingIndication())
+    window.onbeforeunload = null
 
     return new Promise((resolve, reject) => {
       log.debug(`actions calling background.signMessage`)
@@ -933,7 +934,7 @@ function signPersonalMsg (msgData) {
   log.debug('action - signPersonalMsg')
   return (dispatch, getState) => {
     dispatch(actions.showLoadingIndication())
-
+    window.onbeforeunload = null
     return new Promise((resolve, reject) => {
       log.debug(`actions calling background.signPersonalMessage`)
       background.signPersonalMessage(msgData, (err, newState) => {
@@ -964,7 +965,7 @@ function signTypedMsg (msgData) {
   log.debug('action - signTypedMsg')
   return (dispatch, getState) => {
     dispatch(actions.showLoadingIndication())
-
+    window.onbeforeunload = null
     return new Promise((resolve, reject) => {
       log.debug(`actions calling background.signTypedMessage`)
       background.signTypedMessage(msgData, (err, newState) => {
@@ -1168,6 +1169,7 @@ function sendTx (txData) {
   log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`)
   return (dispatch, getState) => {
     log.debug(`actions calling background.approveTransaction`)
+    window.onbeforeunload = null
     background.approveTransaction(txData.id, (err) => {
       if (err) {
         dispatch(actions.txError(err))
@@ -1230,7 +1232,7 @@ function updateAndApproveTx (txData) {
   return (dispatch, getState) => {
     log.debug(`actions calling background.updateAndApproveTx`)
     dispatch(actions.showLoadingIndication())
-
+    window.onbeforeunload = null
     return new Promise((resolve, reject) => {
       background.updateAndApproveTransaction(txData, err => {
         dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
@@ -1292,7 +1294,7 @@ function txError (err) {
 function cancelMsg (msgData) {
   return (dispatch, getState) => {
     dispatch(actions.showLoadingIndication())
-
+    window.onbeforeunload = null
     return new Promise((resolve, reject) => {
       log.debug(`background.cancelMessage`)
       background.cancelMessage(msgData.id, (err, newState) => {
@@ -1319,7 +1321,7 @@ function cancelMsg (msgData) {
 function cancelPersonalMsg (msgData) {
   return (dispatch, getState) => {
     dispatch(actions.showLoadingIndication())
-
+    window.onbeforeunload = null
     return new Promise((resolve, reject) => {
       const id = msgData.id
       background.cancelPersonalMessage(id, (err, newState) => {
@@ -1346,7 +1348,7 @@ function cancelPersonalMsg (msgData) {
 function cancelTypedMsg (msgData) {
   return (dispatch, getState) => {
     dispatch(actions.showLoadingIndication())
-
+    window.onbeforeunload = null
     return new Promise((resolve, reject) => {
       const id = msgData.id
       background.cancelTypedMessage(id, (err, newState) => {
@@ -1374,7 +1376,7 @@ function cancelTx (txData) {
   return (dispatch, getState) => {
     log.debug(`background.cancelTransaction`)
     dispatch(actions.showLoadingIndication())
-
+    window.onbeforeunload = null
     return new Promise((resolve, reject) => {
       background.cancelTransaction(txData.id, err => {
         if (err) {
@@ -1408,6 +1410,7 @@ function cancelTx (txData) {
  */
 function cancelTxs (txDataList) {
   return async (dispatch, getState) => {
+    window.onbeforeunload = null
     dispatch(actions.showLoadingIndication())
     const txIds = txDataList.map(({id}) => id)
     const cancellations = txIds.map((id) => new Promise((resolve, reject) => {
@@ -1810,6 +1813,7 @@ function addTokens (tokens) {
 function removeSuggestedTokens () {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
+    window.onbeforeunload = null
     return new Promise((resolve, reject) => {
       background.removeSuggestedTokens((err, suggestedTokens) => {
         dispatch(actions.hideLoadingIndication())