From 356da540d12871bdb78f8dca8acdc6b9c5a523ec Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Fri, 6 May 2016 14:42:08 -0700
Subject: [PATCH] Style transaction list using new panel component

---
 CHANGELOG.md                          |  1 +
 ui/app/accounts.js                    |  2 +-
 ui/app/components/transaction-list.js | 74 +++++++++++++++++----------
 3 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2df3947d3..b0df0be73 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/ui/app/accounts.js b/ui/app/accounts.js
index 0cc72878c..16f37dc67 100644
--- a/ui/app/accounts.js
+++ b/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),
       ]),
 
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index c5a86f082..3e153aecf 100644
--- a/ui/app/components/transaction-list.js
+++ b/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)
+        })
+      ]
+    )
+
+  ])
+ }