Style transaction list using new panel component

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Restored back button to account detail view.
 - Show transaction list always, never collapsed.
 - Changing provider now reloads current Dapps
+- Improved appearance of transaction list in account detail view.
 
 ## 1.7.0 2016-04-29
 

ui/app/accounts.js

@@ -50,7 +50,7 @@ AccountsScreen.prototype.render = function() {
        * regardless of the current domain.
        */
       h('.current-domain-panel.flex-center.font-small', [
-        h('spam', 'Selected address is visible to all sites you visit.'),
+        h('span', 'Selected address is visible to all sites you visit.'),
         // h('span', state.currentDomain),
       ]),
 

ui/app/components/transaction-list.js

@@ -2,32 +2,54 @@ const h = require('react-hyperscript')
 const formatBalance = require('../util').formatBalance
 const addressSummary = require('../util').addressSummary
 const explorerLink = require('../../lib/explorer-link')
+const Panel = require('./panel')
 
 module.exports = function(transactions, network) {
-  return h('.tx-list', {
-      style: {
-        overflowY: 'auto',
-        height: '180px',
-        textAlign: 'center',
+  return h('section', [
+
+    h('.current-domain-panel.flex-center.font-small', [
+      h('span', 'Transactions'),
+    ]),
+
+    h('.tx-list', {
+        style: {
+          overflowY: 'auto',
+          height: '180px',
+          textAlign: 'center',
+        },
       },
-    },
 
-    [
-      h('div.font-small', {style: {display: 'inline'}}, 'Transactions'),
+      [
 
-      transactions.map((transaction) => {
-        return h('.tx.flex-row.flex-space-around', {
-          key: `listed-tx-${transaction.hash}`,
-        }, [
-          h('a.font-small',
-          {
-            href: explorerLink(transaction.hash, parseInt(network)),
-            target: '_blank',
-          },
-          addressSummary(transaction.txParams.to)),
-          h('div.font-small', formatBalance(transaction.txParams.value))
-        ])
-      })
-    ]
-  )
-}
+        transactions.map((transaction) => {
+          console.dir(transaction)
+
+          var panelOpts = {
+            key: `tx-${transaction.hash}`,
+            identiconKey: transaction.txParams.to,
+            style: {
+              cursor: 'pointer',
+            },
+            onClick: (event) => {
+              var url = explorerLink(transaction.hash, parseInt(network))
+              chrome.tabs.create({ url });
+            },
+            attributes: [
+              {
+                key: 'TO',
+                value: addressSummary(transaction.txParams.to),
+              },
+              {
+                key: 'VALUE',
+                value: formatBalance(transaction.txParams.value),
+              },
+            ]
+          }
+
+          return h(Panel, panelOpts)
+        })
+      ]
+    )
+
+  ])
+ }