Indicate the current selected account on the popup account view (#4445)

ui/app/components/index.scss

@@ -1,5 +1,7 @@
 @import './export-text-container/index';
 
+@import './selected-account/index';
+
 @import './info-box/index';
 
 @import './pages/index';

ui/app/components/selected-account/index.js

@@ -0,0 +1,2 @@
+import SelectedAccount from './selected-account.container'
+module.exports = SelectedAccount

ui/app/components/selected-account/index.scss

@@ -0,0 +1,38 @@
+.selected-account {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+
+  &__name {
+    max-width: 200px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  &__address {
+    font-size: .75rem;
+    color: $silver-chalice;
+  }
+
+  &__clickable {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 15px;
+    border-radius: 10px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #e8e6e8;
+    }
+
+    &:active {
+      background-color: #d9d7da;
+    }
+  }
+}

ui/app/components/selected-account/selected-account.component.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import copyToClipboard from 'copy-to-clipboard'
+
+const Tooltip = require('../tooltip-v2.js')
+
+const addressStripper = (address = '') => {
+  if (address.length < 4) {
+    return address
+  }
+
+  return `${address.slice(0, 4)}...${address.slice(-4)}`
+}
+
+class SelectedAccount extends Component {
+  state = {
+    copied: false,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    selectedAddress: PropTypes.string,
+    selectedIdentity: PropTypes.object,
+  }
+
+  render () {
+    const { t } = this.context
+    const { selectedAddress, selectedIdentity } = this.props
+
+    return (
+      <div className="selected-account">
+        <Tooltip
+          position="bottom"
+          title={this.state.copied ? t('copiedExclamation') : t('copyToClipboard')}
+        >
+          <div
+            className="selected-account__clickable"
+            onClick={() => {
+              this.setState({ copied: true })
+              setTimeout(() => this.setState({ copied: false }), 3000)
+              copyToClipboard(selectedAddress)
+            }}
+          >
+            <div className="selected-account__name">
+              { selectedIdentity.name }
+            </div>
+            <div className="selected-account__address">
+              { addressStripper(selectedAddress) }
+            </div>
+          </div>
+        </Tooltip>
+      </div>
+    )
+  }
+}
+
+export default SelectedAccount

ui/app/components/selected-account/selected-account.container.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux'
+import SelectedAccount from './selected-account.component'
+
+const selectors = require('../../selectors')
+
+const mapStateToProps = state => {
+  return {
+    selectedAddress: selectors.getSelectedAddress(state),
+    selectedIdentity: selectors.getSelectedIdentity(state),
+  }
+}
+
+export default connect(mapStateToProps)(SelectedAccount)

ui/app/components/tx-view.js

@@ -12,7 +12,7 @@ const { checksumAddress: toChecksumAddress } = require('../util')
 
 const BalanceComponent = require('./balance-component')
 const TxList = require('./tx-list')
-const Identicon = require('./identicon')
+const SelectedAccount = require('./selected-account')
 
 module.exports = compose(
   withRouter,
@@ -103,7 +103,7 @@ TxView.prototype.renderButtons = function () {
 }
 
 TxView.prototype.render = function () {
-  const { selectedAddress, identity, network, isMascara } = this.props
+  const { isMascara } = this.props
 
   return h('div.tx-view.flex-column', {
     style: {},
@@ -111,10 +111,12 @@ TxView.prototype.render = function () {
 
     h('div.flex-row.phone-visible', {
       style: {
-        justifyContent: 'space-between',
+        justifyContent: 'center',
         alignItems: 'center',
         flex: '0 0 auto',
-        margin: '10px',
+        marginBottom: '16px',
+        padding: '5px',
+        borderBottom: '1px solid #e5e5e5',
       },
     }, [
 
@@ -127,23 +129,7 @@ TxView.prototype.render = function () {
         onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
       }),
 
-      h('.identicon-wrapper.select-none', {
+      h(SelectedAccount),
-        style: {
-          marginLeft: '0.9em',
-        },
-      }, [
-        h(Identicon, {
-          diameter: 24,
-          address: selectedAddress,
-          network,
-        }),
-      ]),
-
-      h('span.account-name', {
-        style: {},
-      }, [
-        identity.name,
-      ]),
 
       !isMascara && h('div.open-in-browser', {
         onClick: () => global.platform.openExtensionInBrowser(),

ui/app/css/itcss/components/account-menu.scss

@@ -116,6 +116,10 @@
   &__name {
     color: $white;
     font-size: 18px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 200px;
   }
 
   &__balance {

ui/app/css/itcss/components/hero-balance.scss

@@ -6,6 +6,7 @@
     justify-content: flex-start;
     align-items: center;
     flex: 0 0 auto;
+    padding-top: 16px;
   }
 
   @media screen and (min-width: $break-large) {