Style transaction list using new panel component

1 files changed, 48 insertions, 26 deletions

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)
+        })
+      ]
+    )
+
+  ])
+ }