Add pending messages to sign to tx list

4 files changed, 113 insertions, 54 deletions

diff --git a/ui/app/components/transaction-list-item-icon.js b/ui/app/components/transaction-list-item-icon.js
new file mode 100644
index 000000000..fbee4b218
--- /dev/null
+++ b/ui/app/components/transaction-list-item-icon.js
@@ -0,0 +1,46 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const Identicon = require('./identicon')
+
+module.exports = TransactionIcon
+
+
+inherits(TransactionIcon, Component)
+function TransactionIcon() {
+  Component.call(this)
+}
+
+TransactionIcon.prototype.render = function() {
+  const { transaction, txParams, isTx, isMsg } = this.props
+
+  if (transaction.status === 'rejected') {
+    return h('i.fa.fa-exclamation-triangle.fa-lg.error', {
+      style: {
+        width: '24px',
+      }
+    })
+  }
+
+  if (isMsg) {
+    return h('i.fa.fa-certificate.fa-lg', {
+      style: {
+        width: '24px',
+      }
+    })
+  }
+
+  if (txParams.to) {
+    return h(Identicon, {
+      diameter: 24,
+      address: txParams.to || transaction.hash,
+    })
+  } else {
+    return h('i.fa.fa-file-text-o.fa-lg', {
+      style: {
+        width: '24px',
+      }
+    })
+  }
+}
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index a0715db0b..cff9a47b2 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -2,13 +2,14 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 
-const Identicon = require('./identicon')
 const EtherBalance = require('./eth-balance')
 const addressSummary = require('../util').addressSummary
 const explorerLink = require('../../lib/explorer-link')
 const formatBalance = require('../util').formatBalance
 const vreme = new (require('vreme'))
 
+const TransactionIcon = require('./transaction-list-item-icon')
+
 module.exports = TransactionListItem
 
 
@@ -25,7 +26,12 @@ TransactionListItem.prototype.render = function() {
   var isMsg = ('msgParams' in transaction)
   var isTx = ('txParams' in transaction)
 
-  var txParams = transaction.txParams
+  let txParams
+  if (isTx) {
+    txParams = transaction.txParams
+  } else if (isMsg) {
+    txParams = transaction.msgParams
+  }
 
   return (
     h(`.transaction-list-item.flex-row.flex-space-between${transaction.hash ? '.pointer' : ''}`, {
@@ -42,49 +48,55 @@ TransactionListItem.prototype.render = function() {
 
       // large identicon
       h('.identicon-wrapper.flex-column.flex-center.select-none', [
-        identicon(txParams, transaction),
+        transaction.status === 'unconfirmed' ? h('.red-dot', ' ') :
+        h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
       ]),
 
       h('.flex-column', [
-
+        domainField(txParams),
         h('div', date),
-
-        recipientField(txParams, transaction),
-
+        recipientField(txParams, transaction, isTx, isMsg),
       ]),
 
-      h(EtherBalance, {
+      isTx ? h(EtherBalance, {
         value: txParams.value,
-      }),
+      }) : h('.flex-column'),
     ])
   )
 }
 
+function domainField(txParams) {
+  return h('div', {
+    style: {
+      fontSize: 'small',
+      color: '#ABA9AA',
+    },
+  },[
+    txParams.origin,
+  ])
+}
 
-function recipientField(txParams, transaction) {
-  if (txParams.to) {
-    return h('div', {
-      style: {
-        fontSize: 'small',
-        color: '#ABA9AA',
-      },
-    }, [
-      addressSummary(txParams.to),
-      failIfFailed(transaction),
-    ])
+function recipientField(txParams, transaction, isTx, isMsg) {
+  let message
 
+  if (isMsg) {
+    message = 'Signature Requested'
+  } else if (txParams.to) {
+    message =  addressSummary(txParams.to)
   } else {
-
-    return h('div', {
-      style: {
-        fontSize: 'small',
-        color: '#ABA9AA',
-      },
-    },[
-      'Contract Published',
-      failIfFailed(transaction),
-    ])
+    message = 'Contract Published'
   }
+
+  return h('div', {
+    style: {
+      fontSize: 'small',
+      color: '#ABA9AA',
+    },
+  },[
+    message,
+    failIfFailed(transaction),
+  ])
+
 }
 
 TransactionListItem.prototype.renderMessage = function() {
@@ -96,31 +108,11 @@ function formatDate(date){
   return vreme.format(new Date(date), 'March 16 2014 14:30')
 }
 
-function identicon(txParams, transaction) {
-  if (transaction.status === 'rejected') {
-    return h('i.fa.fa-exclamation-triangle.fa-lg.error', {
-      style: {
-        width: '24px',
-      }
-    })
-  }
-
-  if (txParams.to) {
-    return h(Identicon, {
-      diameter: 24,
-      address: txParams.to || transaction.hash,
-    })
-  } else {
-    return h('i.fa.fa-file-text-o.fa-lg', {
-      style: {
-        width: '24px',
-      }
-    })
-  }
-}
-
 function failIfFailed(transaction) {
   if (transaction.status === 'rejected') {
+    return h('span.error', ' (Rejected)')
+  }
+  if (transaction.status === 'failed') {
     return h('span.error', ' (Failed)')
   }
 }
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 86abd9709..3c778b19d 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -14,7 +14,9 @@ function TransactionList() {
 
 TransactionList.prototype.render = function() {
   const { txsToRender, network, unconfTxs, unconfMsgs } = this.props
-  const transactions = txsToRender
+  const transactions = txsToRender.concat(unconfMsgs)
+  .sort((a, b) => b.time - a.time)
+  console.dir(transactions)
 
   return (
 
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index 73be4023e..865d8060c 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -167,6 +167,20 @@ hr.horizontal-line {
   background: white;
 }
 
+.red-dot {
+  position: inherit;
+  background: red;
+  color: white;
+  border-radius: 10px;
+  height: 12px;
+  min-width: 12px;
+  margin-left: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+}
+
 .pending-dot {
   background: red;
   left: 57px;
@@ -180,3 +194,8 @@ hr.horizontal-line {
   justify-content: center;
   padding: 4px;
 }
+
+.ether-balance {
+  display: flex;
+  align-items: center;
+}