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,35 +55,80 @@ module.exports = function(transactions, network) {
     ])
 
   )
- }
 
-function renderTransaction(transaction){
 
-  var panelOpts = {
+  function renderTransaction(transaction){
-    key: `tx-${transaction.hash}`,
+
-    identiconKey: transaction.txParams.to,
+    var panelOpts = {
-    onClick: (event) => {
+      key: `tx-${transaction.hash}`,
-      var url = explorerLink(transaction.hash, parseInt(network))
+      identiconKey: transaction.txParams.to,
-      chrome.tabs.create({ url })
+      onClick: (event) => {
-    },
+        var url = explorerLink(transaction.hash, parseInt(network))
-    attributes: [
+        chrome.tabs.create({ url })
-      {
-        key: 'TIME',
-        value: formatDate(transaction.time),
       },
-      {
+      attributes: [
-        key: 'TO',
+        {
-        value: addressSummary(transaction.txParams.to),
+          key: 'TIME',
-      },
+          value: formatDate(transaction.time),
-      {
+        },
-        key: 'VALUE',
+        {
-        value: formatBalance(transaction.txParams.value),
+          key: 'TO',
-      },
+          value: addressSummary(transaction.txParams.to),
-    ]
+        },
+        {
+          key: 'VALUE',
+          value: formatBalance(transaction.txParams.value),
+        },
+      ]
+    }
+
+    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,
+        }),
+
+      ])
+
+    )
   }
 
-  return h(Panel, panelOpts)
+ }
-}
 
 function formatDate(date){
   return vreme.format(new Date(date), 'March 16 2014 14:30')