ui - redesign - txList improved

ui/app/components/transaction-list.js

@@ -4,12 +4,25 @@ const formatBalance = require('../util').formatBalance
 const addressSummary = require('../util').addressSummary
 const explorerLink = require('../../lib/explorer-link')
 const Panel = require('./panel')
+const Identicon = require('./identicon')
+const EtherBalance = require('./eth-balance')
+
 
 module.exports = function(transactions, network) {
   return (
 
     h('section.transaction-list', [
 
+      h('style', `
+        .transaction-list .transaction-list-item:not(:last-of-type) {
+          border-bottom: 1px solid #D4D4D4;
+        }
+        .transaction-list .transaction-list-item .ether-balance-label {
+          display: block !important;
+          font-size: small;
+        }
+      `),
+
       h('h3.flex-center.text-transform-uppercase', {
         style: {
           background: '#EBEBEB',
@@ -42,9 +55,9 @@ module.exports = function(transactions, network) {
     ])
 
   )
- }
 
-function renderTransaction(transaction){
+
+  function renderTransaction(transaction){
 
     var panelOpts = {
       key: `tx-${transaction.hash}`,
@@ -69,8 +82,53 @@ function renderTransaction(transaction){
       ]
     }
 
-  return h(Panel, panelOpts)
-}
+    var txParams = transaction.txParams
+    var date = formatDate(transaction.time)
+
+    return ( 
+
+      h('.transaction-list-item.flex-row.flex-space-between.cursor-pointer', {
+        key: `tx-${transaction.hash}`,
+        onClick: (event) => {
+          var url = explorerLink(transaction.hash, parseInt(network))
+          chrome.tabs.create({ url })
+        },
+        style: {
+          padding: '20px 0',
+        },
+      }, [
+
+        // large identicon
+        h('.identicon-wrapper.flex-column.flex-center.select-none', [
+          h(Identicon, {
+            diameter: 24,
+            address: txParams.to,
+          }),
+        ]),
+
+        h('.flex-column', [
+
+          h('div', date),
+
+          h('div', {
+            style: {
+              fontSize: 'small',
+              color: '#ABA9AA',
+            },
+          }, addressSummary(txParams.to)),
+
+        ]),
+
+        h(EtherBalance, {
+          value: txParams.value,
+        }),
+
+      ])
+
+    )
+  }
+
+ }
 
 function formatDate(date){
   return vreme.format(new Date(date), 'March 16 2014 14:30')