Take some of the tx Logic out of the UI and create a visble state for pending and unaproved transactions

1 files changed, 17 insertions, 1 deletions

diff --git a/ui/app/components/transaction-list-item-icon.js b/ui/app/components/transaction-list-item-icon.js
index 8b118b1d4..58aa733f1 100644
--- a/ui/app/components/transaction-list-item-icon.js
+++ b/ui/app/components/transaction-list-item-icon.js
@@ -13,15 +13,31 @@ function TransactionIcon () {
 
 TransactionIcon.prototype.render = function () {
   const { transaction, txParams, isMsg } = this.props
+  if (transaction.status === 'unapproved') {
+    return h('.unapproved-tx', {
+      style: {
+        width: '15px',
+        height: '15px',
+        background: '#00bfff',
+        borderRadius: '13px',
+      },
+    })
 
-  if (transaction.status === 'rejected') {
+  } else if (transaction.status === 'rejected') {
     return h('i.fa.fa-exclamation-triangle.fa-lg.warning', {
       style: {
         width: '24px',
       },
     })
+  } else if (transaction.status === 'signed') {
+    return h('i.fa.fa-ellipsis-h', {
+      style: {
+        fontSize: '27px',
+      },
+    })
   }
 
+
   if (isMsg) {
     return h('i.fa.fa-certificate.fa-lg', {
       style: {