split AccountDetails into a separate component (#6943)

test/e2e/from-import-ui.spec.js

@@ -159,7 +159,7 @@ describe('Using MetaMask with an existing account', function () {
 
   describe('Show account information', () => {
     it('shows the correct account address', async () => {
-      await driver.findElement(By.css('.wallet-view__details-button')).click()
+      await driver.findElement(By.css('.account-details__details-button')).click()
       await driver.findElement(By.css('.qr-wrapper')).isDisplayed()
       await delay(regularDelayMs)
 
@@ -171,7 +171,7 @@ describe('Using MetaMask with an existing account', function () {
     })
 
     it('shows a QR code for the account', async () => {
-      await driver.findElement(By.css('.wallet-view__details-button')).click()
+      await driver.findElement(By.css('.account-details__details-button')).click()
       await driver.findElement(By.css('.qr-wrapper')).isDisplayed()
       const detailModal = await driver.findElement(By.css('span .modal'))
       await delay(regularDelayMs)
@@ -232,7 +232,7 @@ describe('Using MetaMask with an existing account', function () {
     })
 
     it('should show the correct account name', async () => {
-      const [accountName] = await findElements(driver, By.css('.account-name'))
+      const [accountName] = await findElements(driver, By.css('.account-details__account-name'))
       assert.equal(await accountName.getText(), '2nd account')
       await delay(regularDelayMs)
     })
@@ -318,13 +318,13 @@ describe('Using MetaMask with an existing account', function () {
     })
 
     it('should show the correct account name', async () => {
-      const [accountName] = await findElements(driver, By.css('.account-name'))
+      const [accountName] = await findElements(driver, By.css('.account-details__account-name'))
       assert.equal(await accountName.getText(), 'Account 4')
       await delay(regularDelayMs)
     })
 
     it('should show the imported label', async () => {
-      const [importedLabel] = await findElements(driver, By.css('.wallet-view__keyring-label'))
+      const [importedLabel] = await findElements(driver, By.css('.account-details__keyring-label'))
       assert.equal(await importedLabel.getText(), 'IMPORTED')
       await delay(regularDelayMs)
     })
@@ -350,7 +350,7 @@ describe('Using MetaMask with an existing account', function () {
     })
 
     it('should open the remove account modal', async () => {
-      const [accountName] = await findElements(driver, By.css('.account-name'))
+      const [accountName] = await findElements(driver, By.css('.account-details__account-name'))
       assert.equal(await accountName.getText(), 'Account 5')
       await delay(regularDelayMs)
 
@@ -373,7 +373,7 @@ describe('Using MetaMask with an existing account', function () {
 
       await delay(regularDelayMs)
 
-      const [accountName] = await findElements(driver, By.css('.account-name'))
+      const [accountName] = await findElements(driver, By.css('.account-details__account-name'))
       assert.equal(await accountName.getText(), 'Account 1')
       await delay(regularDelayMs)
 

test/e2e/metamask-ui.spec.js

@@ -221,7 +221,7 @@ describe('MetaMask', function () {
 
   describe('Show account information', () => {
     it('shows the QR code for the account', async () => {
-      await driver.findElement(By.css('.wallet-view__details-button')).click()
+      await driver.findElement(By.css('.account-details__details-button')).click()
       await driver.findElement(By.css('.qr-wrapper')).isDisplayed()
       await delay(regularDelayMs)
 
@@ -273,7 +273,7 @@ describe('MetaMask', function () {
     })
 
     it('should display correct account name', async () => {
-      const accountName = await findElement(driver, By.css('.account-name'))
+      const accountName = await findElement(driver, By.css('.account-details__account-name'))
       assert.equal(await accountName.getText(), '2nd account')
       await delay(regularDelayMs)
     })

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

@@ -0,0 +1,99 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Identicon from '../../ui/identicon'
+import Tooltip from '../../ui/tooltip-v2'
+import copyToClipboard from 'copy-to-clipboard'
+
+export default class AccountDetails extends Component {
+  static contextTypes = {
+    t: PropTypes.func.isRequired,
+    metricsEvent: PropTypes.func,
+  }
+
+  static defaultProps = {
+    hideSidebar: () => {},
+    showAccountDetailModal: () => {},
+  }
+
+  static propTypes = {
+    hideSidebar: PropTypes.func,
+    showAccountDetailModal: PropTypes.func,
+    label: PropTypes.string.isRequired,
+    checksummedAddress: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+  }
+
+  state = {
+    hasCopied: false,
+    copyToClipboardPressed: false,
+  }
+
+  copyAddress () {
+    copyToClipboard(this.props.checksummedAddress)
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Navigation',
+        action: 'Home',
+        name: 'Copied Address',
+      },
+    })
+    this.setState({ hasCopied: true })
+    setTimeout(() => this.setState({ hasCopied: false }), 3000)
+  }
+
+  render () {
+    const { t } = this.context
+
+    const {
+      hideSidebar,
+      showAccountDetailModal,
+      label,
+      checksummedAddress,
+      name,
+    } = this.props
+
+    const {
+      hasCopied,
+      copyToClipboardPressed,
+    } = this.state
+
+    return (
+      <div>
+        <div className="flex-column account-details">
+          <div className="account-details__sidebar-close" onClick={hideSidebar} />
+          <div className="account-details__keyring-label allcaps">
+            {label}
+          </div>
+          <div className="flex-column flex-center account-details__name-container" onClick={showAccountDetailModal}>
+            <Identicon diameter={54} address={checksummedAddress} />
+            <span className="account-details__account-name">
+              {name}
+            </span>
+            <button className="btn-secondary account-details__details-button">
+              {t('details')}
+            </button>
+          </div>
+        </div>
+        <Tooltip
+          position={'bottom'}
+          title={hasCopied ? t('copiedExclamation') : t('copyToClipboard')}
+          wrapperClassName="account-details__tooltip"
+        >
+          <button
+            className={classnames({
+              'account-details__address': true,
+              'account-details__address__pressed': copyToClipboardPressed,
+            })}
+            onClick={() => this.copyAddress()}
+            onMouseDown={() => this.setState({ copyToClipboardPressed: true })}
+            onMouseUp={() => this.setState({ copyToClipboardPressed: false })}
+          >
+            {checksummedAddress.slice(0, 6)}...{checksummedAddress.slice(-4)}
+            <i className="fa fa-clipboard" style={{ marginLeft: '8px' }} />
+          </button>
+        </Tooltip>
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux'
+import { hideSidebar, showModal } from '../../../store/actions'
+import AccountDetails from './account-details.component'
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideSidebar: () => dispatch(hideSidebar()),
+    showAccountDetailModal: () => {
+      dispatch(showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
+  }
+}
+
+export default connect(null, mapDispatchToProps)(AccountDetails)

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

@@ -0,0 +1 @@
+export { default } from './account-details.container'

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

@@ -0,0 +1,79 @@
+.account-details {
+  flex: 0 0 auto;
+
+  &__keyring-label {
+    height: 50px;
+    color: $dusty-gray;
+    font-family: Roboto;
+    font-size: 10px;
+    text-align: right;
+    padding: 17px 20px 0;
+    box-sizing: border-box;
+  }
+
+  &__name-container {
+    flex: 0 0 auto;
+    cursor: pointer;
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  &__account-name {
+    font-size: 24px;
+    color: $black;
+    margin-top: 8px;
+    margin-bottom: .9rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 100%;
+    padding: 0 8px;
+    text-align: center;
+  }
+
+  &__details-button {
+    font-size: 10px;
+    border-radius: 17px;
+    background-color: transparent;
+    margin: 0 auto;
+    padding: 4px 12px;
+    flex: 0 0 auto;
+  }
+
+  &__tooltip {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 24px;
+  }
+
+  &__address {
+    border-radius: 3px;
+    background-color: $alto;
+    color: $scorpion;
+    font-size: 14px;
+    line-height: 12px;
+    padding: 4px 12px;
+    cursor: pointer;
+    flex: 0 0 auto;
+
+    &__pressed {
+      background-color: $manatee,
+    }
+  }
+
+  &__sidebar-close {
+
+    @media screen and (max-width: 575px) {
+      &::after {
+        content: '\00D7';
+        font-size: 40px;
+        color: $tundora;
+        position: absolute;
+        top: 12px;
+        left: 12px;
+        cursor: pointer;
+      }
+    }
+  }
+}

ui/app/components/app/index.scss

@@ -1,3 +1,5 @@
+@import 'account-details/index';
+
 @import 'account-menu/index';
 
 @import 'add-token-button/index';

ui/app/components/app/wallet-view.js

@@ -5,12 +5,8 @@ const h = require('react-hyperscript')
 const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
 const inherits = require('util').inherits
-const classnames = require('classnames')
 const { checksumAddress } = require('../../helpers/utils/util')
-import Identicon from '../ui/identicon'
 // const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
-const Tooltip = require('../ui/tooltip-v2.js').default
-const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../../store/actions')
 import BalanceComponent from '../ui/balance'
 const TokenList = require('./token-list')
@@ -18,6 +14,7 @@ const selectors = require('../../selectors/selectors')
 const { ADD_TOKEN_ROUTE } = require('../../helpers/constants/routes')
 
 import AddTokenButton from './add-token-button'
+import AccountDetails from './account-details'
 
 module.exports = compose(
   withRouter,
@@ -52,9 +49,6 @@ function mapDispatchToProps (dispatch) {
     showSendPage: () => dispatch(actions.showSendPage()),
     hideSidebar: () => dispatch(actions.hideSidebar()),
     unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
-    showAccountDetailModal: () => {
-      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
-    },
     showAddTokenPage: () => dispatch(actions.showAddTokenPage()),
   }
 }
@@ -62,10 +56,6 @@ function mapDispatchToProps (dispatch) {
 inherits(WalletView, Component)
 function WalletView () {
   Component.call(this)
-  this.state = {
-    hasCopied: false,
-    copyToClipboardPressed: false,
-  }
 }
 
 WalletView.prototype.renderWalletBalance = function () {
@@ -130,8 +120,6 @@ WalletView.prototype.render = function () {
     responsiveDisplayClassname,
     selectedAddress,
     keyrings,
-    showAccountDetailModal,
-    hideSidebar,
     identities,
     network,
   } = this.props
@@ -165,68 +153,12 @@ WalletView.prototype.render = function () {
     className: responsiveDisplayClassname,
   }, [
 
-    // TODO: Separate component: wallet account details
-    h('div.flex-column.wallet-view-account-details', {
-      style: {},
-    }, [
-      h('div.wallet-view__sidebar-close', {
-        onClick: hideSidebar,
+    h(AccountDetails, {
+      label,
+      checksummedAddress,
+      name: identities[selectedAddress].name,
     }),
 
-      h('div.wallet-view__keyring-label.allcaps', label),
-
-      h('div.flex-column.flex-center.wallet-view__name-container', {
-        style: { margin: '0 auto' },
-        onClick: showAccountDetailModal,
-      }, [
-        h(Identicon, {
-          diameter: 54,
-          address: checksummedAddress,
-        }),
-
-        h('span.account-name', {
-          style: {},
-        }, [
-          identities[selectedAddress].name,
-        ]),
-
-        h('button.btn-secondary.wallet-view__details-button', this.context.t('details')),
-      ]),
-    ]),
-
-    h(Tooltip, {
-      position: 'bottom',
-      title: this.state.hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard'),
-      wrapperClassName: 'wallet-view__tooltip',
-    }, [
-      h('button.wallet-view__address', {
-        className: classnames({
-          'wallet-view__address__pressed': this.state.copyToClipboardPressed,
-        }),
-        onClick: () => {
-          copyToClipboard(checksummedAddress)
-          this.context.metricsEvent({
-            eventOpts: {
-              category: 'Navigation',
-              action: 'Home',
-              name: 'Copied Address',
-            },
-          })
-          this.setState({ hasCopied: true })
-          setTimeout(() => this.setState({ hasCopied: false }), 3000)
-        },
-        onMouseDown: () => {
-          this.setState({ copyToClipboardPressed: true })
-        },
-        onMouseUp: () => {
-          this.setState({ copyToClipboardPressed: false })
-        },
-      }, [
-        `${checksummedAddress.slice(0, 6)}...${checksummedAddress.slice(-4)}`,
-        h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
-      ]),
-    ]),
-
     this.renderWalletBalance(),
 
     h(TokenList),

ui/app/css/itcss/components/newui-sections.scss

@@ -65,72 +65,6 @@ $wallet-view-bg: $alabaster;
   @media #{$sub-mid-size-breakpoint-range} {
     min-width: 160px;
   }
-
-  .wallet-view-account-details {
-    flex: 0 0 auto;
-  }
-
-  &__name-container {
-    flex: 0 0 auto;
-    cursor: pointer;
-    width: 100%;
-  }
-
-  &__keyring-label {
-    height: 50px;
-    color: $dusty-gray;
-    font-family: Roboto;
-    font-size: 10px;
-    text-align: right;
-    padding: 17px 20px 0;
-    box-sizing: border-box;
-  }
-
-  &__details-button {
-    font-size: 10px;
-    border-radius: 17px;
-    background-color: transparent;
-    margin: 0 auto;
-    padding: 4px 12px;
-    flex: 0 0 auto;
-  }
-
-  &__tooltip {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 24px;
-  }
-
-  &__address {
-    border-radius: 3px;
-    background-color: $alto;
-    color: $scorpion;
-    font-size: 14px;
-    line-height: 12px;
-    padding: 4px 12px;
-    cursor: pointer;
-    flex: 0 0 auto;
-
-    &__pressed {
-      background-color: $manatee,
-    }
-  }
-
-  &__sidebar-close {
-
-    @media screen and (max-width: 575px) {
-      &::after {
-        content: '\00D7';
-        font-size: 40px;
-        color: $tundora;
-        position: absolute;
-        top: 12px;
-        left: 12px;
-        cursor: pointer;
-      }
-    }
-  }
 }
 
 @media screen and (min-width: 576px) {
@@ -228,20 +162,6 @@ $wallet-view-bg: $alabaster;
   }
 }
 
-// wallet view
-.account-name {
-  font-size: 24px;
-  color: $black;
-  margin-top: 8px;
-  margin-bottom: .9rem;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
-  padding: 0 8px;
-  text-align: center;
-}
-
 // account options dropdown
 .account-options-menu {
   align-items: center;