Add number indicating pending txs to account list

2 files changed, 23 insertions, 0 deletions

diff --git a/ui/app/accounts/account-panel.js b/ui/app/accounts/account-panel.js
index 5ade7fe0e..8afb7308d 100644
--- a/ui/app/accounts/account-panel.js
+++ b/ui/app/accounts/account-panel.js
@@ -34,6 +34,7 @@ NewComponent.prototype.render = function() {
     }, [
 
       h('.identicon-wrapper.flex-column.flex-center.select-none', [
+        this.pendingOrNot(),
         h(Identicon, {
           address: identity.address
         }),
@@ -61,3 +62,9 @@ NewComponent.prototype.render = function() {
     ])
   )
 }
+
+NewComponent.prototype.pendingOrNot = function() {
+  const pending = this.props.pending
+  if (pending.length === 0) return null
+  return h('.pending-dot', pending.length)
+}
diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js
index 1a42f7470..9cfab54e5 100644
--- a/ui/app/accounts/index.js
+++ b/ui/app/accounts/index.js
@@ -12,6 +12,10 @@ module.exports = connect(mapStateToProps)(AccountsScreen)
 
 
 function mapStateToProps(state) {
+  const pendingTxs = valuesFor(state.metamask.unconfTxs)
+  const pendingMsgs = valuesFor(state.metamask.unconfMsgs)
+  const pending = pendingTxs.concat(pendingMsgs)
+
   return {
     accounts: state.metamask.accounts,
     identities: state.metamask.identities,
@@ -19,6 +23,7 @@ function mapStateToProps(state) {
     selectedAddress: state.metamask.selectedAddress,
     currentDomain: state.appState.currentDomain,
     scrollToBottom: state.appState.scrollToBottom,
+    pending,
   }
 }
 
@@ -62,12 +67,23 @@ AccountsScreen.prototype.render = function() {
       },
       [
         identityList.map((identity) => {
+          const pending = this.props.pending.filter((txOrMsg) => {
+            if ('txParams' in txOrMsg) {
+              return txOrMsg.txParams.from === identity.address
+            } else if ('msgParams' in txOrMsg) {
+              return txOrMsg.msgParams.from === identity.address
+            } else {
+              return false
+            }
+          })
+
           return h(AccountPanel, {
             key: `acct-panel-${identity.address}`,
             identity,
             selectedAddress: this.props.selectedAddress,
             accounts: this.props.accounts,
             onShowDetail: this.onShowDetail.bind(this),
+            pending,
           })
         }),