Add close window support to signature requests. Move logic to actions

ui/app/actions.js

@@ -10,6 +10,8 @@ const {
 const ethUtil = require('ethereumjs-util')
 const { fetchLocale } = require('../i18n-helper')
 const log = require('loglevel')
+const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../app/scripts/lib/enums')
+const { hasUnconfirmedTransactions } = require('./helpers/confirm-transaction/util')
 
 var actions = {
   _setBackgroundConnection: _setBackgroundConnection,
@@ -743,7 +745,7 @@ function setCurrentCurrency (currencyCode) {
 
 function signMsg (msgData) {
   log.debug('action - signMsg')
-  return (dispatch) => {
+  return (dispatch, getState) => {
     dispatch(actions.showLoadingIndication())
 
     return new Promise((resolve, reject) => {
@@ -760,6 +762,12 @@ function signMsg (msgData) {
         }
 
         dispatch(actions.completedTx(msgData.metamaskId))
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
         return resolve(msgData)
       })
     })
@@ -768,7 +776,7 @@ function signMsg (msgData) {
 
 function signPersonalMsg (msgData) {
   log.debug('action - signPersonalMsg')
-  return dispatch => {
+  return (dispatch, getState) => {
     dispatch(actions.showLoadingIndication())
 
     return new Promise((resolve, reject) => {
@@ -785,6 +793,12 @@ function signPersonalMsg (msgData) {
         }
 
         dispatch(actions.completedTx(msgData.metamaskId))
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
         return resolve(msgData)
       })
     })
@@ -793,7 +807,7 @@ function signPersonalMsg (msgData) {
 
 function signTypedMsg (msgData) {
   log.debug('action - signTypedMsg')
-  return (dispatch) => {
+  return (dispatch, getState) => {
     dispatch(actions.showLoadingIndication())
 
     return new Promise((resolve, reject) => {
@@ -810,6 +824,12 @@ function signTypedMsg (msgData) {
         }
 
         dispatch(actions.completedTx(msgData.metamaskId))
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
         return resolve(msgData)
       })
     })
@@ -1003,7 +1023,7 @@ function clearSend () {
 
 function sendTx (txData) {
   log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`)
-  return (dispatch) => {
+  return (dispatch, getState) => {
     log.debug(`actions calling background.approveTransaction`)
     background.approveTransaction(txData.id, (err) => {
       if (err) {
@@ -1011,6 +1031,11 @@ function sendTx (txData) {
         return log.error(err.message)
       }
       dispatch(actions.completedTx(txData.id))
+
+      if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+        !hasUnconfirmedTransactions(getState())) {
+        return global.platform.closeCurrentWindow()
+      }
     })
   }
 }
@@ -1059,7 +1084,7 @@ function updateTransaction (txData) {
 
 function updateAndApproveTx (txData) {
   log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
-  return dispatch => {
+  return (dispatch, getState) => {
     log.debug(`actions calling background.updateAndApproveTx`)
     dispatch(actions.showLoadingIndication())
 
@@ -1084,6 +1109,12 @@ function updateAndApproveTx (txData) {
         dispatch(actions.clearSend())
         dispatch(actions.completedTx(txData.id))
         dispatch(actions.hideLoadingIndication())
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
         return txData
       })
   }
@@ -1112,7 +1143,7 @@ function txError (err) {
 }
 
 function cancelMsg (msgData) {
-  return dispatch => {
+  return (dispatch, getState) => {
     dispatch(actions.showLoadingIndication())
 
     return new Promise((resolve, reject) => {
@@ -1126,6 +1157,12 @@ function cancelMsg (msgData) {
         }
 
         dispatch(actions.completedTx(msgData.id))
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
         return resolve(msgData)
       })
     })
@@ -1133,7 +1170,7 @@ function cancelMsg (msgData) {
 }
 
 function cancelPersonalMsg (msgData) {
-  return dispatch => {
+  return (dispatch, getState) => {
     dispatch(actions.showLoadingIndication())
 
     return new Promise((resolve, reject) => {
@@ -1147,6 +1184,12 @@ function cancelPersonalMsg (msgData) {
         }
 
         dispatch(actions.completedTx(id))
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
         return resolve(msgData)
       })
     })
@@ -1154,7 +1197,7 @@ function cancelPersonalMsg (msgData) {
 }
 
 function cancelTypedMsg (msgData) {
-  return dispatch => {
+  return (dispatch, getState) => {
     dispatch(actions.showLoadingIndication())
 
     return new Promise((resolve, reject) => {
@@ -1168,6 +1211,12 @@ function cancelTypedMsg (msgData) {
         }
 
         dispatch(actions.completedTx(id))
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
         return resolve(msgData)
       })
     })
@@ -1175,7 +1224,7 @@ function cancelTypedMsg (msgData) {
 }
 
 function cancelTx (txData) {
-  return dispatch => {
+  return (dispatch, getState) => {
     log.debug(`background.cancelTransaction`)
     dispatch(actions.showLoadingIndication())
 
@@ -1194,6 +1243,12 @@ function cancelTx (txData) {
         dispatch(actions.clearSend())
         dispatch(actions.completedTx(txData.id))
         dispatch(actions.hideLoadingIndication())
+
+        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+          !hasUnconfirmedTransactions(getState())) {
+          return global.platform.closeCurrentWindow()
+        }
+
         return txData
       })
   }

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

@@ -8,9 +8,6 @@ import {
   INSUFFICIENT_FUNDS_ERROR_KEY,
   TRANSACTION_ERROR_KEY,
 } from '../../../constants/error-keys'
-import {
-  ENVIRONMENT_TYPE_NOTIFICATION,
-} from '../../../../../app/scripts/lib/enums'
 
 export default class ConfirmTransactionBase extends Component {
   static contextTypes = {
@@ -253,12 +250,8 @@ export default class ConfirmTransactionBase extends Component {
     } else {
       cancelTransaction(txData)
         .then(() => {
-          if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
-            return global.platform.closeCurrentWindow()
-          } else {
           clearConfirmTransaction()
           history.push(DEFAULT_ROUTE)
-          }
         })
     }
   }
@@ -271,12 +264,8 @@ export default class ConfirmTransactionBase extends Component {
     } else {
       sendTransaction(txData)
         .then(() => {
-          if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
-            return global.platform.closeCurrentWindow()
-          } else {
           clearConfirmTransaction()
           history.push(DEFAULT_ROUTE)
-          }
         })
     }
   }

ui/app/components/pages/home.js

@@ -27,19 +27,17 @@ const {
   NOTICE_ROUTE,
 } = require('../../routes')
 
+const { unconfirmedTransactionsCountSelector } = require('../../selectors/confirm-transaction')
+
 class Home extends Component {
   componentDidMount () {
     const {
       history,
-      unapprovedTxs = {},
+      unconfirmedTransactionsCount = 0,
-      unapprovedMsgCount = 0,
-      unapprovedPersonalMsgCount = 0,
-      unapprovedTypedMessagesCount = 0,
     } = this.props
 
     // unapprovedTxs and unapproved messages
-    if (Object.keys(unapprovedTxs).length ||
+    if (unconfirmedTransactionsCount > 0) {
-      unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) {
       history.push(CONFIRM_TRANSACTION_ROUTE)
     }
   }
@@ -167,6 +165,7 @@ Home.propTypes = {
   isPopup: PropTypes.bool,
   isMouseUser: PropTypes.bool,
   t: PropTypes.func,
+  unconfirmedTransactionsCount: PropTypes.number,
 }
 
 function mapStateToProps (state) {
@@ -230,6 +229,7 @@ function mapStateToProps (state) {
 
     // state needed to get account dropdown temporarily rendering from app bar
     selected,
+    unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
   }
 }
 

ui/app/helpers/confirm-transaction/util.js

@@ -16,6 +16,8 @@ import {
   conversionGreaterThan,
 } from '../../conversion-util'
 
+import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction'
+
 export function getTokenData (data = {}) {
   return abiDecoder.decodeMethod(data)
 }
@@ -131,3 +133,7 @@ export function convertTokenToFiat ({
     conversionRate: totalExchangeRate,
   })
 }
+
+export function hasUnconfirmedTransactions (state) {
+  return unconfirmedTransactionsCountSelector(state) > 0
+}

ui/app/selectors/confirm-transaction.js

@@ -62,6 +62,34 @@ export const unconfirmedTransactionsHashSelector = createSelector(
   }
 )
 
+const unapprovedMsgCountSelector = state => state.metamask.unapprovedMsgCount
+const unapprovedPersonalMsgCountSelector = state => state.metamask.unapprovedPersonalMsgCount
+const unapprovedTypedMessagesCountSelector = state => state.metamask.unapprovedTypedMessagesCount
+
+export const unconfirmedTransactionsCountSelector = createSelector(
+  unapprovedTxsSelector,
+  unapprovedMsgCountSelector,
+  unapprovedPersonalMsgCountSelector,
+  unapprovedTypedMessagesCountSelector,
+  networkSelector,
+  (
+    unapprovedTxs = {},
+    unapprovedMsgCount = 0,
+    unapprovedPersonalMsgCount = 0,
+    unapprovedTypedMessagesCount = 0,
+    network
+  ) => {
+    const filteredUnapprovedTxIds = Object.keys(unapprovedTxs).filter(txId => {
+      const { metamaskNetworkId } = unapprovedTxs[txId]
+      return metamaskNetworkId === network
+    })
+
+    return filteredUnapprovedTxIds.length + unapprovedTypedMessagesCount + unapprovedMsgCount +
+      unapprovedPersonalMsgCount
+  }
+)
+
+
 export const currentCurrencySelector = state => state.metamask.currentCurrency
 export const conversionRateSelector = state => state.metamask.conversionRate
 
@@ -156,7 +184,6 @@ export const sendTokenTokenAmountAndToAddressSelector = createSelector(
   }
 )
 
-
 export const contractExchangeRateSelector = createSelector(
   contractExchangeRatesSelector,
   tokenAddressSelector,