Add copy address button to account list

ui/app/accounts/account-panel.js

@@ -1,6 +1,12 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+
+const EtherBalance = require('../components/eth-balance')
+const addressSummary = require('../util').addressSummary
+const copyToClipboard = require('copy-to-clipboard')
+const Identicon = require('../components/identicon')
 
 module.exports = NewComponent
 
@@ -11,9 +17,47 @@ function NewComponent() {
 }
 
 NewComponent.prototype.render = function() {
-  var state = this.props
+  const identity = this.props.identity
+  var mayBeFauceting = identity.mayBeFauceting
+  var isSelected = this.props.selectedAddress === identity.address
+  var account = this.props.accounts[identity.address]
+  var isFauceting = mayBeFauceting && account.balance === '0x0'
+  const selectedClass = isSelected ? '.selected' : ''
 
   return (
-    h('span', 'Placeholder component')
+    h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, {
+      key: `account-panel-${identity.address}`,
+      style: {
+        flex: '1 0 auto',
+      },
+      onClick: (event) => this.props.onShowDetail(identity.address, event),
+    }, [
+
+      h('.identicon-wrapper.flex-column.flex-center.select-none', [
+        h(Identicon, {
+          address: identity.address
+        }),
+      ]),
+
+      // account address, balance
+      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+        h('span', identity.name),
+        h('span.font-small', addressSummary(identity.address)),
+        h(EtherBalance, {
+          value: account.balance,
+        }),
+      ]),
+
+      h('.identity-copy.flex-column', [
+        h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', {
+          onClick: (event) => {
+            event.stopPropagation()
+            event.preventDefault()
+            copyToClipboard(ethUtil.toChecksumAddress(identity.address))
+          }
+        }),
+      ])
+    ])
   )
 }

ui/app/accounts/index.js

@@ -3,12 +3,8 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const extend = require('xtend')
-const Identicon = require('../components/identicon')
 const actions = require('../actions')
-const EtherBalance = require('../components/eth-balance')
 const valuesFor = require('../util').valuesFor
-const addressSummary = require('../util').addressSummary
-const formatBalance = require('../util').formatBalance
 const findDOMNode = require('react-dom').findDOMNode
 const AccountPanel = require('./account-panel')
 
@@ -67,6 +63,7 @@ AccountsScreen.prototype.render = function() {
       [
         identityList.map((identity) => {
           return h(AccountPanel, {
+            key: `acct-panel-${identity.address}`,
             identity,
             selectedAddress: this.props.selectedAddress,
             accounts: this.props.accounts,

ui/app/css/index.css

@@ -319,6 +319,11 @@ input.large-input {
   height: 100%;
 }
 
+.identity-copy.flex-column {
+  flex: 0.25 0 auto;
+  justify-content: center;
+}
+
 /* accounts screen */
 
 .identity-section {