Merge pull request #205 from MetaMask/AddCopyAddressLinkToList

Add account copying button to account list panels

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Current Master
 
+- Added copy address button to account list.
+
 ## 2.0.0 2016-05-23
 
 - UI Overhaul per Vlad Todirut's designs.

ui/app/accounts/account-panel.js

@@ -0,0 +1,63 @@
+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
+
+
+inherits(NewComponent, Component)
+function NewComponent() {
+  Component.call(this)
+}
+
+NewComponent.prototype.render = function() {
+  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(`.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,13 +3,10 @@ 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')
 
 module.exports = connect(mapStateToProps)(AccountsScreen)
 
@@ -64,7 +61,15 @@ AccountsScreen.prototype.render = function() {
         }
       },
       [
-        identityList.map(renderAccountPanel),
+        identityList.map((identity) => {
+          return h(AccountPanel, {
+            key: `acct-panel-${identity.address}`,
+            identity,
+            selectedAddress: this.props.selectedAddress,
+            accounts: this.props.accounts,
+            onShowDetail: this.onShowDetail.bind(this),
+          })
+        }),
 
         h('hr.horizontal-line', {key: 'horizontal-line1'}),
         h('div.footer.hover-white.pointer', {
@@ -99,50 +104,6 @@ AccountsScreen.prototype.render = function() {
       ),
     ])
   )
-
-  function renderAccountPanel(identity){
-    var mayBeFauceting = identity.mayBeFauceting
-    var isSelected = state.selectedAddress === identity.address
-    var account = state.accounts[identity.address]
-    var isFauceting = mayBeFauceting && account.balance === '0x0'
-    var componentState = extend(actions, {
-      identity: identity,
-      account: account,
-      isSelected: false,
-      isFauceting: isFauceting,
-    })
-    const selectedClass = isSelected ? '.selected' : ''
-
-    return (
-      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) => actions.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('span.font-small', formatBalance(account.balance)),
-          h(EtherBalance, {
-            value: account.balance,
-          }),
-
-        ]),
-
-      ])
-    )
-  }
 }
 
 // If a new account was revealed, scroll to the bottom

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 {