Merge pull request #1149 from MetaMask/i1114-AddPersonalSign

Add personal_sign

10 files changed, 263 insertions, 87 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 6552e7f5c..89a4fadfa 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -90,6 +90,8 @@ var actions = {
   PREVIOUS_TX: 'PREV_TX',
   signMsg: signMsg,
   cancelMsg: cancelMsg,
+  signPersonalMsg,
+  cancelPersonalMsg,
   sendTx: sendTx,
   signTx: signTx,
   cancelTx: cancelTx,
@@ -178,7 +180,7 @@ function tryUnlockMetamask (password) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     dispatch(actions.unlockInProgress())
-    if (global.METAMASK_DEBUG) console.log(`background.submitPassword`)
+    log.debug(`background.submitPassword`)
     background.submitPassword(password, (err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) {
@@ -206,7 +208,7 @@ function transitionBackward () {
 function confirmSeedWords () {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.clearSeedWordCache`)
+    log.debug(`background.clearSeedWordCache`)
     background.clearSeedWordCache((err, account) => {
       dispatch(actions.hideLoadingIndication())
       if (err) {
@@ -222,7 +224,7 @@ function confirmSeedWords () {
 function createNewVaultAndRestore (password, seed) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.createNewVaultAndRestore`)
+    log.debug(`background.createNewVaultAndRestore`)
     background.createNewVaultAndRestore(password, seed, (err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) return dispatch(actions.displayWarning(err.message))
@@ -234,12 +236,12 @@ function createNewVaultAndRestore (password, seed) {
 function createNewVaultAndKeychain (password) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.createNewVaultAndKeychain`)
+    log.debug(`background.createNewVaultAndKeychain`)
     background.createNewVaultAndKeychain(password, (err) => {
       if (err) {
         return dispatch(actions.displayWarning(err.message))
       }
-      if (global.METAMASK_DEBUG) console.log(`background.placeSeedWords`)
+      log.debug(`background.placeSeedWords`)
       background.placeSeedWords((err) => {
         if (err) {
           return dispatch(actions.displayWarning(err.message))
@@ -260,10 +262,10 @@ function revealSeedConfirmation () {
 function requestRevealSeed (password) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.submitPassword`)
+    log.debug(`background.submitPassword`)
     background.submitPassword(password, (err) => {
       if (err) return dispatch(actions.displayWarning(err.message))
-      if (global.METAMASK_DEBUG) console.log(`background.placeSeedWords`)
+      log.debug(`background.placeSeedWords`)
       background.placeSeedWords((err) => {
         if (err) return dispatch(actions.displayWarning(err.message))
         dispatch(actions.hideLoadingIndication())
@@ -275,7 +277,7 @@ function requestRevealSeed (password) {
 function addNewKeyring (type, opts) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.addNewKeyring`)
+    log.debug(`background.addNewKeyring`)
     background.addNewKeyring(type, opts, (err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) return dispatch(actions.displayWarning(err.message))
@@ -287,11 +289,11 @@ function addNewKeyring (type, opts) {
 function importNewAccount (strategy, args) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication('This may take a while, be patient.'))
-    if (global.METAMASK_DEBUG) console.log(`background.importAccountWithStrategy`)
+    log.debug(`background.importAccountWithStrategy`)
     background.importAccountWithStrategy(strategy, args, (err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) return dispatch(actions.displayWarning(err.message))
-      if (global.METAMASK_DEBUG) console.log(`background.getState`)
+      log.debug(`background.getState`)
       background.getState((err, newState) => {
         if (err) {
           return dispatch(actions.displayWarning(err.message))
@@ -313,7 +315,7 @@ function navigateToNewAccountScreen() {
 }
 
 function addNewAccount () {
-  if (global.METAMASK_DEBUG) console.log(`background.addNewAccount`)
+  log.debug(`background.addNewAccount`)
   return callBackgroundThenUpdate(background.addNewAccount)
 }
 
@@ -326,7 +328,7 @@ function showInfoPage () {
 function setCurrentFiat (currencyCode) {
   return (dispatch) => {
     dispatch(this.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.setCurrentFiat`)
+    log.debug(`background.setCurrentFiat`)
     background.setCurrentCurrency(currencyCode, (err, data) => {
       dispatch(this.hideLoadingIndication())
       if (err) {
@@ -346,14 +348,38 @@ function setCurrentFiat (currencyCode) {
 }
 
 function signMsg (msgData) {
+  log.debug('action - signMsg')
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
 
-    if (global.METAMASK_DEBUG) console.log(`background.signMessage`)
-    background.signMessage(msgData, (err) => {
+    log.debug(`actions calling background.signMessage`)
+    background.signMessage(msgData, (err, newState) => {
+      log.debug('signMessage called back')
+      dispatch(actions.updateMetamaskState(newState))
       dispatch(actions.hideLoadingIndication())
 
+      if (err) log.error(err)
       if (err) return dispatch(actions.displayWarning(err.message))
+
+      dispatch(actions.completedTx(msgData.metamaskId))
+    })
+  }
+}
+
+function signPersonalMsg (msgData) {
+  log.debug('action - signPersonalMsg')
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+
+    log.debug(`actions calling background.signPersonalMessage`)
+    background.signPersonalMessage(msgData, (err, newState) => {
+      log.debug('signPersonalMessage called back')
+      dispatch(actions.updateMetamaskState(newState))
+      dispatch(actions.hideLoadingIndication())
+
+      if (err) log.error(err)
+      if (err) return dispatch(actions.displayWarning(err.message))
+
       dispatch(actions.completedTx(msgData.metamaskId))
     })
   }
@@ -361,7 +387,7 @@ function signMsg (msgData) {
 
 function signTx (txData) {
   return (dispatch) => {
-    if (global.METAMASK_DEBUG) console.log(`background.setGasMultiplier`)
+    log.debug(`background.setGasMultiplier`)
     background.setGasMultiplier(txData.gasMultiplier, (err) => {
       if (err) return dispatch(actions.displayWarning(err.message))
       web3.eth.sendTransaction(txData, (err, data) => {
@@ -376,8 +402,9 @@ function signTx (txData) {
 }
 
 function sendTx (txData) {
+  log.info('actions: sendTx')
   return (dispatch) => {
-    if (global.METAMASK_DEBUG) console.log(`background.approveTransaction`)
+    log.debug(`actions calling background.approveTransaction`)
     background.approveTransaction(txData.id, (err) => {
       if (err) {
         dispatch(actions.txError(err))
@@ -391,7 +418,7 @@ function sendTx (txData) {
 function completedTx (id) {
   return {
     type: actions.COMPLETED_TX,
-    id,
+    value: id,
   }
 }
 
@@ -403,13 +430,19 @@ function txError (err) {
 }
 
 function cancelMsg (msgData) {
-  if (global.METAMASK_DEBUG) console.log(`background.cancelMessage`)
+  log.debug(`background.cancelMessage`)
   background.cancelMessage(msgData.id)
   return actions.completedTx(msgData.id)
 }
 
+function cancelPersonalMsg (msgData) {
+  const id = msgData.id
+  background.cancelPersonalMessage(id)
+  return actions.completedTx(id)
+}
+
 function cancelTx (txData) {
-  if (global.METAMASK_DEBUG) console.log(`background.cancelTransaction`)
+  log.debug(`background.cancelTransaction`)
   background.cancelTransaction(txData.id)
   return actions.completedTx(txData.id)
 }
@@ -505,14 +538,14 @@ function updateMetamaskState (newState) {
 }
 
 function lockMetamask () {
-  if (global.METAMASK_DEBUG) console.log(`background.setLocked`)
+  log.debug(`background.setLocked`)
   return callBackgroundThenUpdate(background.setLocked)
 }
 
 function showAccountDetail (address) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.setSelectedAddress`)
+    log.debug(`background.setSelectedAddress`)
     background.setSelectedAddress(address, (err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) {
@@ -585,7 +618,7 @@ function goBackToInitView () {
 function markNoticeRead (notice) {
   return (dispatch) => {
     dispatch(this.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.markNoticeRead`)
+    log.debug(`background.markNoticeRead`)
     background.markNoticeRead(notice, (err, notice) => {
       dispatch(this.hideLoadingIndication())
       if (err) {
@@ -617,7 +650,7 @@ function clearNotices () {
 }
 
 function markAccountsFound() {
-  if (global.METAMASK_DEBUG) console.log(`background.markAccountsFound`)
+  log.debug(`background.markAccountsFound`)
   return callBackgroundThenUpdate(background.markAccountsFound)
 }
 
@@ -626,7 +659,7 @@ function markAccountsFound() {
 //
 
 function setRpcTarget (newRpc) {
-  if (global.METAMASK_DEBUG) console.log(`background.setRpcTarget`)
+  log.debug(`background.setRpcTarget`)
   background.setRpcTarget(newRpc)
   return {
     type: actions.SET_RPC_TARGET,
@@ -635,7 +668,7 @@ function setRpcTarget (newRpc) {
 }
 
 function setProviderType (type) {
-  if (global.METAMASK_DEBUG) console.log(`background.setProviderType`)
+  log.debug(`background.setProviderType`)
   background.setProviderType(type)
   return {
     type: actions.SET_PROVIDER_TYPE,
@@ -644,7 +677,7 @@ function setProviderType (type) {
 }
 
 function useEtherscanProvider () {
-  if (global.METAMASK_DEBUG) console.log(`background.useEtherscanProvider`)
+  log.debug(`background.useEtherscanProvider`)
   background.useEtherscanProvider()
   return {
     type: actions.USE_ETHERSCAN_PROVIDER,
@@ -701,7 +734,7 @@ function exportAccount (address) {
   return function (dispatch) {
     dispatch(self.showLoadingIndication())
 
-    if (global.METAMASK_DEBUG) console.log(`background.exportAccount`)
+    log.debug(`background.exportAccount`)
     background.exportAccount(address, function (err, result) {
       dispatch(self.hideLoadingIndication())
 
@@ -725,7 +758,7 @@ function showPrivateKey (key) {
 function saveAccountLabel (account, label) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.saveAccountLabel`)
+    log.debug(`background.saveAccountLabel`)
     background.saveAccountLabel(account, label, (err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) {
@@ -747,7 +780,7 @@ function showSendPage () {
 
 function buyEth (address, amount) {
   return (dispatch) => {
-    if (global.METAMASK_DEBUG) console.log(`background.buyEth`)
+    log.debug(`background.buyEth`)
     background.buyEth(address, amount)
     dispatch({
       type: actions.BUY_ETH,
@@ -827,7 +860,7 @@ function coinShiftRquest (data, marketData) {
       if (response.error) return dispatch(actions.displayWarning(response.error))
       var message = `
         Deposit your ${response.depositType} to the address bellow:`
-      if (global.METAMASK_DEBUG) console.log(`background.createShapeShiftTx`)
+      log.debug(`background.createShapeShiftTx`)
       background.createShapeShiftTx(response.deposit, response.depositType)
       dispatch(actions.showQrView(response.deposit, [message].concat(marketData)))
     })
@@ -907,7 +940,7 @@ function callBackgroundThenUpdate (method, ...args) {
 }
 
 function forceUpdateMetamaskState(dispatch){
-  if (global.METAMASK_DEBUG) console.log(`background.getState`)
+  log.debug(`background.getState`)
   background.getState((err, newState) => {
     if (err) {
       return dispatch(actions.displayWarning(err.message))
diff --git a/ui/app/app.js b/ui/app/app.js
index 6e249b09e..63fab5db8 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -64,6 +64,7 @@ function mapStateToProps (state) {
 App.prototype.render = function () {
   var props = this.props
   const { isLoading, loadingMessage, transForward } = props
+  log.debug('Main ui render function')
 
   return (
 
@@ -347,6 +348,7 @@ App.prototype.renderBackButton = function (style, justArrow = false) {
 }
 
 App.prototype.renderPrimary = function () {
+  log.debug('rendering primary')
   var props = this.props
 
   // notices
diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js
new file mode 100644
index 000000000..ffd11ca0b
--- /dev/null
+++ b/ui/app/components/pending-personal-msg-details.js
@@ -0,0 +1,61 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const AccountPanel = require('./account-panel')
+
+module.exports = PendingMsgDetails
+
+inherits(PendingMsgDetails, Component)
+function PendingMsgDetails () {
+  Component.call(this)
+}
+
+PendingMsgDetails.prototype.render = function () {
+  var state = this.props
+  var msgData = state.txData
+
+  var msgParams = msgData.msgParams || {}
+  var address = msgParams.from || state.selectedAddress
+  var identity = state.identities[address] || { address: address }
+  var account = state.accounts[address] || { address: address }
+
+  var { data } = msgParams
+
+  return (
+    h('div', {
+      key: msgData.id,
+      style: {
+        margin: '10px 20px',
+      },
+    }, [
+
+      // account that will sign
+      h(AccountPanel, {
+        showFullAddress: true,
+        identity: identity,
+        account: account,
+        imageifyIdenticons: state.imageifyIdenticons,
+      }),
+
+      // message data
+      h('div', [
+        h('label.font-small', { style: { display: 'block' } }, 'MESSAGE'),
+        h('textarea.font-small', {
+          readOnly: true,
+          style: {
+            width: '315px',
+            maxHeight: '210px',
+            resize: 'none',
+            border: 'none',
+            background: 'white',
+            padding: '3px',
+          },
+          defaultValue: data,
+        }),
+      ]),
+
+    ])
+  )
+}
+
diff --git a/ui/app/components/pending-personal-msg.js b/ui/app/components/pending-personal-msg.js
new file mode 100644
index 000000000..4542adb28
--- /dev/null
+++ b/ui/app/components/pending-personal-msg.js
@@ -0,0 +1,47 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const PendingTxDetails = require('./pending-personal-msg-details')
+
+module.exports = PendingMsg
+
+inherits(PendingMsg, Component)
+function PendingMsg () {
+  Component.call(this)
+}
+
+PendingMsg.prototype.render = function () {
+  var state = this.props
+  var msgData = state.txData
+
+  return (
+
+    h('div', {
+      key: msgData.id,
+    }, [
+
+      // header
+      h('h3', {
+        style: {
+          fontWeight: 'bold',
+          textAlign: 'center',
+        },
+      }, 'Sign Message'),
+
+      // message details
+      h(PendingTxDetails, state),
+
+      // sign + cancel
+      h('.flex-row.flex-space-around', [
+        h('button', {
+          onClick: state.cancelPersonalMessage,
+        }, 'Cancel'),
+        h('button', {
+          onClick: state.signPersonalMessage,
+        }, 'Sign'),
+      ]),
+    ])
+
+  )
+}
+
diff --git a/ui/app/components/transaction-list-item-icon.js b/ui/app/components/transaction-list-item-icon.js
index 90b4ec094..ca2781451 100644
--- a/ui/app/components/transaction-list-item-icon.js
+++ b/ui/app/components/transaction-list-item-icon.js
@@ -15,11 +15,7 @@ TransactionIcon.prototype.render = function () {
   const { transaction, txParams, isMsg } = this.props
   switch (transaction.status) {
     case 'unapproved':
-      return h( !isMsg ? '.unapproved-tx-icon' : 'i.fa.fa-certificate.fa-lg', {
-        style: {
-          width: '24px',
-        },
-      })
+      return h( !isMsg ? '.unapproved-tx-icon' : 'i.fa.fa-certificate.fa-lg')
 
     case 'rejected':
       return h('i.fa.fa-exclamation-triangle.fa-lg.warning', {
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index 646dbb602..2df6c5384 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -12,6 +12,7 @@ const BN = ethUtil.BN
 
 const PendingTx = require('./components/pending-tx')
 const PendingMsg = require('./components/pending-msg')
+const PendingPersonalMsg = require('./components/pending-personal-msg')
 
 module.exports = connect(mapStateToProps)(ConfirmTxScreen)
 
@@ -22,6 +23,7 @@ function mapStateToProps (state) {
     selectedAddress: state.metamask.selectedAddress,
     unapprovedTxs: state.metamask.unapprovedTxs,
     unapprovedMsgs: state.metamask.unapprovedMsgs,
+    unapprovedPersonalMsgs: state.metamask.unapprovedPersonalMsgs,
     index: state.appState.currentView.context,
     warning: state.appState.warning,
     network: state.metamask.network,
@@ -35,15 +37,12 @@ function ConfirmTxScreen () {
 }
 
 ConfirmTxScreen.prototype.render = function () {
-  var state = this.props
+  const props = this.props
+  const { network, provider, unapprovedTxs,
+    unapprovedMsgs, unapprovedPersonalMsgs } = props
 
-  var network = state.network
-  var provider = state.provider
-  var unapprovedTxs = state.unapprovedTxs
-  var unapprovedMsgs = state.unapprovedMsgs
-
-  var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, network)
-  var index = state.index !== undefined && unconfTxList[index] ? state.index : 0
+  var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
+  var index = props.index !== undefined && unconfTxList[index] ? props.index : 0
   var txData = unconfTxList[index] || {}
   var txParams = txData.params || {}
   var isNotification = isPopupOrNotification() === 'notification'
@@ -75,20 +74,20 @@ ConfirmTxScreen.prototype.render = function () {
       }, [
         h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
           style: {
-            display: state.index === 0 ? 'none' : 'inline-block',
+            display: props.index === 0 ? 'none' : 'inline-block',
           },
-          onClick: () => state.dispatch(actions.previousTx()),
+          onClick: () => props.dispatch(actions.previousTx()),
         }),
-        ` ${state.index + 1} of ${unconfTxList.length} `,
+        ` ${props.index + 1} of ${unconfTxList.length} `,
         h('i.fa.fa-arrow-right.fa-lg.cursor-pointer', {
           style: {
-            display: state.index + 1 === unconfTxList.length ? 'none' : 'inline-block',
+            display: props.index + 1 === unconfTxList.length ? 'none' : 'inline-block',
           },
-          onClick: () => state.dispatch(actions.nextTx()),
+          onClick: () => props.dispatch(actions.nextTx()),
         }),
       ]),
 
-      warningIfExists(state.warning),
+      warningIfExists(props.warning),
 
       h(ReactCSSTransitionGroup, {
         className: 'css-transition-group',
@@ -101,16 +100,18 @@ ConfirmTxScreen.prototype.render = function () {
           // Properties
           txData: txData,
           key: txData.id,
-          selectedAddress: state.selectedAddress,
-          accounts: state.accounts,
-          identities: state.identities,
+          selectedAddress: props.selectedAddress,
+          accounts: props.accounts,
+          identities: props.identities,
           insufficientBalance: this.checkBalanceAgainstTx(txData),
           // Actions
-          buyEth: this.buyEth.bind(this, txParams.from || state.selectedAddress),
+          buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
           sendTransaction: this.sendTransaction.bind(this, txData),
           cancelTransaction: this.cancelTransaction.bind(this, txData),
           signMessage: this.signMessage.bind(this, txData),
+          signPersonalMessage: this.signPersonalMessage.bind(this, txData),
           cancelMessage: this.cancelMessage.bind(this, txData),
+          cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
         }),
 
       ]),
@@ -119,25 +120,32 @@ ConfirmTxScreen.prototype.render = function () {
 }
 
 function currentTxView (opts) {
+  log.info('rendering current tx view')
   const { txData } = opts
-  const { txParams, msgParams } = txData
+  const { txParams, msgParams, type } = txData
 
-  log.info('rendering current tx view')
   if (txParams) {
-    // This is a pending transaction
     log.debug('txParams detected, rendering pending tx')
     return h(PendingTx, opts)
+
   } else if (msgParams) {
-    // This is a pending message to sign
     log.debug('msgParams detected, rendering pending msg')
-    return h(PendingMsg, opts)
+
+    if (type === 'eth_sign') {
+      log.debug('rendering eth_sign message')
+      return h(PendingMsg, opts)
+
+    } else if (type === 'personal_sign') {
+      log.debug('rendering personal_sign message')
+      return h(PendingPersonalMsg, opts)
+    }
   }
 }
 ConfirmTxScreen.prototype.checkBalanceAgainstTx = function (txData) {
   if (!txData.txParams) return false
-  var state = this.props
-  var address = txData.txParams.from || state.selectedAddress
-  var account = state.accounts[address]
+  var props = this.props
+  var address = txData.txParams.from || props.selectedAddress
+  var account = props.accounts[address]
   var balance = account ? account.balance : '0x0'
   var maxCost = new BN(txData.maxCost, 16)
 
@@ -161,17 +169,33 @@ ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) {
 }
 
 ConfirmTxScreen.prototype.signMessage = function (msgData, event) {
+  log.info('conf-tx.js: signing message')
   var params = msgData.msgParams
   params.metamaskId = msgData.id
   event.stopPropagation()
   this.props.dispatch(actions.signMsg(params))
 }
 
+ConfirmTxScreen.prototype.signPersonalMessage = function (msgData, event) {
+  log.info('conf-tx.js: signing personal message')
+  var params = msgData.msgParams
+  params.metamaskId = msgData.id
+  event.stopPropagation()
+  this.props.dispatch(actions.signPersonalMsg(params))
+}
+
 ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) {
+  log.info('canceling message')
   event.stopPropagation()
   this.props.dispatch(actions.cancelMsg(msgData))
 }
 
+ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) {
+  log.info('canceling personal message')
+  event.stopPropagation()
+  this.props.dispatch(actions.cancelPersonalMsg(msgData))
+}
+
 ConfirmTxScreen.prototype.goHome = function (event) {
   event.stopPropagation()
   this.props.dispatch(actions.goHome())
@@ -179,7 +203,7 @@ ConfirmTxScreen.prototype.goHome = function (event) {
 
 function warningIfExists (warning) {
   if (warning &&
-      // Do not display user rejections on this screen:
+     // Do not display user rejections on this screen:
      warning.indexOf('User denied transaction signature') === -1) {
     return h('.error', {
       style: {
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 4b9b5b67d..8c6ff29d3 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -410,11 +410,10 @@ input.large-input {
 }
 
 .unapproved-tx-icon {
-  height: 24px;
-  background: #4dffff;
-  border: solid;
+  height: 16px;
+  width: 16px;
+  background: rgb(47, 174, 244);
   border-color: #AEAEAE;
-  border-width: 0.5px;
   border-radius: 13px;
 }
 
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index de6536c2e..136326301 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -6,14 +6,16 @@ const notification = require('../../../app/scripts/lib/notifications')
 module.exports = reduceApp
 
 function reduceApp (state, action) {
+  log.debug('App Reducer got ' + action.type)
   // clone and defaults
   const selectedAddress = state.metamask.selectedAddress
-  const pendingTxs = hasPendingTxs(state)
+  let pendingTxs = hasPendingTxs(state)
   let name = 'accounts'
   if (selectedAddress) {
     name = 'accountDetail'
   }
   if (pendingTxs) {
+    log.debug('pending txs detected, defaulting to conf-tx view.')
     name = 'confTx'
   }
 
@@ -289,32 +291,37 @@ function reduceApp (state, action) {
     case actions.SHOW_CONF_TX_PAGE:
       return extend(appState, {
         currentView: {
-          name: 'confTx',
+          name: pendingTxs ? 'confTx' : 'account-detail',
           context: 0,
         },
         transForward: action.transForward,
         warning: null,
+        isLoading: false,
       })
 
     case actions.SHOW_CONF_MSG_PAGE:
       return extend(appState, {
         currentView: {
-          name: 'confTx',
+          name: pendingTxs ? 'confTx' : 'account-detail',
           context: 0,
         },
         transForward: true,
         warning: null,
+        isLoading: false,
       })
 
     case actions.COMPLETED_TX:
-      var unapprovedTxs = state.metamask.unapprovedTxs
-      var unapprovedMsgs = state.metamask.unapprovedMsgs
-      var network = state.metamask.network
+      log.debug('reducing COMPLETED_TX for tx ' + action.value)
+      var { unapprovedTxs, unapprovedMsgs,
+        unapprovedPersonalMsgs, network } = state.metamask
+
+      var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
+      .filter(tx => tx.id !== action.value )
 
-      var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, network)
-    .filter(tx => tx !== tx.id)
+      pendingTxs = unconfTxList.length > 0
 
-      if (unconfTxList && unconfTxList.length > 0) {
+      if (pendingTxs) {
+        log.debug('reducer detected txs - rendering confTx view')
         return extend(appState, {
           transForward: false,
           currentView: {
@@ -324,6 +331,7 @@ function reduceApp (state, action) {
           warning: null,
         })
       } else {
+        log.debug('attempting to close popup')
         notification.closePopup()
 
         return extend(appState, {
@@ -572,11 +580,12 @@ function reduceApp (state, action) {
 }
 
 function hasPendingTxs (state) {
-  var unapprovedTxs = state.metamask.unapprovedTxs
-  var unapprovedMsgs = state.metamask.unapprovedMsgs
-  var network = state.metamask.network
-  var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, network)
-  return unconfTxList.length > 0
+  var { unapprovedTxs, unapprovedMsgs,
+    unapprovedPersonalMsgs, network } = state.metamask
+
+  var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
+  var has = unconfTxList.length > 0
+  return has
 }
 
 function indexForPending (state, txId) {
diff --git a/ui/index.js b/ui/index.js
index 844e6c417..6b65f12d4 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -6,9 +6,10 @@ const configureStore = require('./app/store')
 const txHelper = require('./lib/tx-helper')
 module.exports = launchApp
 
+let debugMode = window.METAMASK_DEBUG
 const log = require('loglevel')
 window.log = log
-log.setLevel('warn')
+log.setLevel(debugMode ? 'debug' : 'warn')
 
 function launchApp (opts) {
   var accountManager = opts.accountManager
diff --git a/ui/lib/tx-helper.js b/ui/lib/tx-helper.js
index 7f64f9fbe..2eefdff68 100644
--- a/ui/lib/tx-helper.js
+++ b/ui/lib/tx-helper.js
@@ -1,13 +1,17 @@
 const valuesFor = require('../app/util').valuesFor
 
-module.exports = function (unapprovedTxs, unapprovedMsgs, network) {
+module.exports = function (unapprovedTxs, unapprovedMsgs, personalMsgs, network) {
   log.debug('tx-helper called with params:')
-  log.debug({ unapprovedTxs, unapprovedMsgs, network })
+  log.debug({ unapprovedTxs, unapprovedMsgs, personalMsgs, network })
 
-  var txValues = network ? valuesFor(unapprovedTxs).filter(tx => tx.txParams.metamaskNetworkId === network) : valuesFor(unapprovedTxs)
+  const txValues = network ? valuesFor(unapprovedTxs).filter(tx => tx.txParams.metamaskNetworkId === network) : valuesFor(unapprovedTxs)
   log.debug(`tx helper found ${txValues.length} unapproved txs`)
-  var msgValues = valuesFor(unapprovedMsgs)
+  const msgValues = valuesFor(unapprovedMsgs)
   log.debug(`tx helper found ${msgValues.length} unsigned messages`)
-  var allValues = txValues.concat(msgValues)
+  let allValues = txValues.concat(msgValues)
+  const personalValues = valuesFor(personalMsgs)
+  log.debug(`tx helper found ${personalValues.length} unsigned personal messages`)
+  allValues = allValues.concat(personalValues)
+
   return allValues.sort(tx => tx.time)
 }