Add number indicating pending txs to account list

4 files changed, 37 insertions, 1 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,
           })
         }),
 
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index d9719b1e3..73be4023e 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -166,3 +166,17 @@ hr.horizontal-line {
 .hover-white:hover {
   background: white;
 }
+
+.pending-dot {
+  background: red;
+  left: 57px;
+  color: white;
+  border-radius: 10px;
+  height: 20px;
+  min-width: 20px;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+}
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 92b44612d..ae7501725 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -356,7 +356,6 @@ function reduceApp(state, action) {
 
   default:
     return appState
-
   }
 }