Let account address take more space in account list

3 files changed, 20 insertions, 10 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 37e47d607..663ba234b 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -5,7 +5,6 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('./actions')
-const addressSummary = require('./util').addressSummary
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const valuesFor = require('./util').valuesFor
 
@@ -120,7 +119,7 @@ AccountDetailScreen.prototype.render = function() {
               textOverflow: 'ellipsis',
               paddingTop: '3px',
             },
-          }, selected),
+          }, ethUtil.toChecksumAddress(selected)),
 
           h('img.cursor-pointer.color-orange', {
             src: 'images/copy.svg',
diff --git a/ui/app/accounts/account-panel.js b/ui/app/accounts/account-panel.js
index 8afb7308d..b49f4c098 100644
--- a/ui/app/accounts/account-panel.js
+++ b/ui/app/accounts/account-panel.js
@@ -4,7 +4,6 @@ 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')
 
@@ -41,16 +40,29 @@ NewComponent.prototype.render = function() {
       ]),
 
       // account address, balance
-      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
-
+      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', {
+        style: {
+          width: '200px',
+        },
+      }, [
         h('span', identity.name),
-        h('span.font-small', addressSummary(identity.address)),
+        h('span.font-small', {
+          style: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          },
+        }, ethUtil.toChecksumAddress(identity.address)),
         h(EtherBalance, {
           value: account.balance,
         }),
       ]),
 
-      h('.identity-copy.flex-column', [
+      // copy button
+      h('.identity-copy.flex-column', {
+        style: {
+          margin: '0 20px',
+        },
+      }, [
         h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', {
           onClick: (event) => {
             event.stopPropagation()
@@ -58,7 +70,7 @@ NewComponent.prototype.render = function() {
             copyToClipboard(ethUtil.toChecksumAddress(identity.address))
           }
         }),
-      ])
+      ]),
     ])
   )
 }
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
index 6bae095d1..f0e71bd31 100644
--- a/ui/app/components/account-panel.js
+++ b/ui/app/components/account-panel.js
@@ -2,7 +2,6 @@ const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const addressSummary = require('../util').addressSummary
 const formatBalance = require('../util').formatBalance
 const Identicon = require('./identicon')
 
@@ -37,7 +36,7 @@ AccountPanel.prototype.render = function() {
     attributes: [
       {
         key: 'ADDRESS',
-        value: addressSummary(identity.address)
+        value: identity.address,
       },
       balanceOrFaucetingIndication(account, isFauceting),
     ]