From 69f7968c70caaae8a070b4cf238b2832db103f2c Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 25 Mar 2019 13:49:23 -0230 Subject: Close transaction on close of notification window (#6340) --- ui/app/components/app/signature-request.js | 83 +++++++++++++++------- .../confirm-transaction-base.component.js | 20 +++++- ui/app/store/actions.js | 18 +++-- 3 files changed, 88 insertions(+), 33 deletions(-) diff --git a/ui/app/components/app/signature-request.js b/ui/app/components/app/signature-request.js index 4415ecd4f..e47791b67 100644 --- a/ui/app/components/app/signature-request.js +++ b/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, { diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js index 1da9c34bd..9e749322f 100644 --- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/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 () { diff --git a/ui/app/store/actions.js b/ui/app/store/actions.js index b99b051cb..b2aa28c93 100644 --- a/ui/app/store/actions.js +++ b/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()) -- cgit