Move account panel style into reusable component

The styles that defined the `account-panel` component now belong to the `panel` component, which is now used by the `account-panel` component for its styles.

It accepts an optional `onClick` property that it will fire when clicked!

Planning to use it for the tx-list.

4 files changed, 98 insertions, 63 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 10c33c2bc..06ef6ff02 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -58,7 +58,8 @@ AccountDetailScreen.prototype.render = function() {
         showFullAddress: true,
         identity: identity,
         account: account,
-      }, []),
+        key: 'accountPanel'
+      }),
 
       h('div', {
         style: {
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
index 25b5e5d24..c1450b516 100644
--- a/ui/app/components/account-panel.js
+++ b/ui/app/components/account-panel.js
@@ -6,6 +6,8 @@ const addressSummary = require('../util').addressSummary
 const formatBalance = require('../util').formatBalance
 const Identicon = require('identicon.js')
 
+const Panel = require('./panel')
+
 module.exports = AccountPanel
 
 
@@ -23,49 +25,29 @@ AccountPanel.prototype.render = function() {
   var identicon = new Identicon(identity.address, 46).toString()
   var identiconSrc = `data:image/png;base64,${identicon}`
 
-  return (
-
-    h('.identity-panel.flex-row.flex-space-between'+(state.isSelected?'.selected':''), {
-      style: {
-        flex: '1 0 auto',
+  var panelOpts = {
+    key: `accountPanel${identity.address}`,
+    onClick: (event) => {
+      if (state.onShowDetail) {
+        state.onShowDetail(identity.address, event)
+      }
+    },
+    identiconKey: identity.address,
+    identiconLabel: identity.name,
+    attributes: [
+      {
+        key: 'ADDRESS',
+        value: addressSummary(identity.address)
       },
-      onClick: (event) => state.onShowDetail(identity.address, event),
-    }, [
-
-      // account identicon
-      h('.identicon-wrapper.flex-column.select-none', [
-        h('img.identicon', {
-          src: identiconSrc,
-          style: {
-            border: 'none',
-            borderRadius: '20px',
-          }
-        }),
-        h('span.font-small', identity.name),
-      ]),
-
-      // account address, balance
-      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
-
-        h('.flex-row.flex-space-between', [
-          h('label.font-small', 'ADDRESS'),
-          h('span.font-small', addressSummary(identity.address)),
-        ]),
-
-        balanceOrFaucetingIndication(account, isFauceting),
-
-        // outlet for inserting additional stuff
-        state.children,
+      balanceOrFaucetingIndication(account, isFauceting),
+    ]
+  }
 
-      ]),
+  return h(Panel, panelOpts,
+  !state.onShowDetail ? null : h('.arrow-right.cursor-pointer', [
+    h('i.fa.fa-chevron-right.fa-lg'),
+  ]))
 
-      // navigate to account detail
-      !state.onShowDetail ? null :
-        h('.arrow-right.cursor-pointer', [
-          h('i.fa.fa-chevron-right.fa-lg'),
-        ]),
-    ])
-  )
 }
 
 function balanceOrFaucetingIndication(account, isFauceting) {
@@ -73,27 +55,14 @@ function balanceOrFaucetingIndication(account, isFauceting) {
   // Temporarily deactivating isFauceting indication
   // because it shows fauceting for empty restored accounts.
   if (/*isFauceting*/ false) {
-
-    return h('.flex-row.flex-space-between', [
-      h('span.font-small', {
-      }, [
-        'Account is auto-funding,',
-        h('br'),
-        'please wait.'
-      ]),
-    ])
-
+    return {
+      key: 'Account is auto-funding.',
+      value: 'Please wait.',
+    }
   } else {
-
-    return h('.flex-row.flex-space-between', [
-      h('label.font-small', 'BALANCE'),
-      h('span.font-small', {
-        style: {
-          overflowX: 'hidden',
-          maxWidth: '136px',
-        }
-      }, formatBalance(account.balance)),
-    ])
-
+    return {
+      key: 'BALANCE',
+      value: formatBalance(account.balance)
+    }
   }
 }
diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js
new file mode 100644
index 000000000..25e6b7f0f
--- /dev/null
+++ b/ui/app/components/panel.js
@@ -0,0 +1,63 @@
+const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const Identicon = require('identicon.js')
+
+module.exports = Panel
+
+
+inherits(Panel, Component)
+function Panel() {
+  Component.call(this)
+}
+
+Panel.prototype.render = function() {
+  var state = this.props
+
+  var identity = state.identity || {}
+  var account = state.account || {}
+  var isFauceting = state.isFauceting
+
+  var identicon = new Identicon(state.identiconKey, 46).toString()
+  var identiconSrc = `data:image/png;base64,${identicon}`
+
+  return (
+    h('.identity-panel.flex-row.flex-space-between', {
+      style: {
+        flex: '1 0 auto',
+      },
+      onClick: state.onClick,
+    }, [
+
+      // account identicon
+      h('.identicon-wrapper.flex-column.select-none', [
+        h('img.identicon', {
+          src: identiconSrc,
+          style: {
+            border: 'none',
+            borderRadius: '20px',
+          }
+        }),
+        h('span.font-small', state.identiconLabel),
+      ]),
+
+      // account address, balance
+      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+        state.attributes.map((attr) => {
+          return h('.flex-row.flex-space-between', {
+            key: '' + Math.round(Math.random() * 1000000),
+          }, [
+            h('label.font-small', attr.key),
+            h('span.font-small', attr.value),
+          ])
+        }),
+      ]),
+
+      // outlet for inserting additional stuff
+      state.children,
+    ])
+  )
+}
+
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 115fd91f8..c5a86f082 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -16,7 +16,9 @@ module.exports = function(transactions, network) {
       h('div.font-small', {style: {display: 'inline'}}, 'Transactions'),
 
       transactions.map((transaction) => {
-        return h('.tx.flex-row.flex-space-around', [
+        return h('.tx.flex-row.flex-space-around', {
+          key: `listed-tx-${transaction.hash}`,
+        }, [
           h('a.font-small',
           {
             href: explorerLink(transaction.hash, parseInt(network)),