3 files changed, 112 insertions, 59 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..fc1c3c630 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
 
 
@@ -18,20 +19,36 @@ function TransactionListItem() {
 }
 
 TransactionListItem.prototype.render = function() {
-  const { transaction, i } = this.props
+  const { transaction, i, network } = this.props
 
   var date = formatDate(transaction.time)
 
+  let isLinkable = false
+  const numericNet = parseInt(network)
+  isLinkable = numericNet === 1 || numericNet === 2
+
   var isMsg = ('msgParams' in transaction)
   var isTx = ('txParams' in transaction)
+  var isPending = transaction.status === 'unconfirmed'
+
+  let txParams
+  if (isTx) {
+    txParams = transaction.txParams
+  } else if (isMsg) {
+    txParams = transaction.msgParams
+  }
 
-  var txParams = transaction.txParams
+  const isClickable = ('hash' in transaction && isLinkable) || isPending
 
   return (
-    h(`.transaction-list-item.flex-row.flex-space-between${transaction.hash ? '.pointer' : ''}`, {
+    h(`.transaction-list-item.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
       key: `tx-${transaction.id + i}`,
       onClick: (event) => {
-        if (!transaction.hash) return
+        if (isPending) {
+          this.props.showTx(transaction.id)
+        }
+
+        if (!transaction.hash || !isLinkable) return
         var url = explorerLink(transaction.hash, parseInt(network))
         chrome.tabs.create({ url })
       },
@@ -42,53 +59,59 @@ 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() {
-  const { transaction, i } = this.props
+  const { transaction, i, network } = this.props
   return h('div', 'wowie, thats a message')
 }
 
@@ -96,31 +119,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..ed2e1ee0a 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -14,7 +14,8 @@ 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)
 
   return (
 
@@ -51,7 +52,10 @@ TransactionList.prototype.render = function() {
         transactions.length ?
           transactions.map((transaction, i) => {
             return h(TransactionListItem, {
-              transaction, i
+              transaction, i, network,
+              showTx:(txId) => {
+                this.props.viewPendingTx(txId)
+              },
             })
           })
         :