Added account options on home screen

10 files changed, 208 insertions, 4 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 66f378ab8..97fc402fa 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -364,6 +364,9 @@
   "exchangeRate": {
     "message": "Exchange Rate"
   },
+  "expandView": {
+    "message": "Expand View"
+  },
   "exportPrivateKey": {
     "message": "Export Private Key"
   },
@@ -723,6 +726,9 @@
   "openInTab": {
     "message": "Open in tab"
   },
+  "accountOptions": {
+    "message": "Account Options"
+  },
   "or": {
     "message": "or",
     "description": "choice between creating or importing a new account"
diff --git a/app/images/expand.svg b/app/images/expand.svg
new file mode 100644
index 000000000..65f6cbfd7
--- /dev/null
+++ b/app/images/expand.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>expand</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Extension-(mobile-form-factor)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="expand" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M15.4802977,0.0647543729 C15.3777028,0.0227060788 15.2692212,0 15.1590578,0 L10.1134046,0 C9.64920448,0 9.27246238,0.376752715 9.27246238,0.840965882 C9.27246238,1.30602001 9.64920448,1.68193176 10.1134046,1.68193176 L13.1290233,1.68193176 L8.77993963,6.03113791 C8.45113123,6.35995557 8.45113123,6.89228697 8.77993963,7.22026366 C8.94392336,7.38509298 9.15920457,7.46666667 9.37448577,7.46666667 C9.58976698,7.46666667 9.80504818,7.38509298 9.96903191,7.22026366 L14.3181156,2.87105752 L14.3181156,5.88676117 C14.3181156,6.35181531 14.6948577,6.72772705 15.1590578,6.72772705 C15.6232579,6.72772705 16,6.35181531 16,5.88676117 L16,0.840965882 C16,0.731640317 15.9781355,0.623155718 15.9352475,0.519716915 C15.8494713,0.31452124 15.6863286,0.150532893 15.4802977,0.0647543729 Z" id="Fill-1" transform="translate(12.266667, 3.733333) rotate(-360.000000) translate(-12.266667, -3.733333) "></path>
+            <path d="M6.94696439,8.59808771 C6.84436944,8.55603941 6.73588789,8.53333333 6.62572446,8.53333333 L1.58007124,8.53333333 C1.11587115,8.53333333 0.739129042,8.91008605 0.739129042,9.37429922 C0.739129042,9.83935335 1.11587115,10.2152651 1.58007124,10.2152651 L4.59568999,10.2152651 L0.246606301,14.5644712 C-0.0822021004,14.8932889 -0.0822021004,15.4256203 0.246606301,15.753597 C0.410590031,15.9184263 0.625871235,16 0.841152439,16 C1.05643364,16 1.27171485,15.9184263 1.43569858,15.753597 L5.78478226,11.4043909 L5.78478226,14.4200945 C5.78478226,14.8851486 6.16152437,15.2610604 6.62572446,15.2610604 C7.08992456,15.2610604 7.46666667,14.8851486 7.46666667,14.4200945 L7.46666667,9.37429922 C7.46666667,9.26497365 7.44480217,9.15648905 7.40191412,9.05305025 C7.31613801,8.84785457 7.15299522,8.68386623 6.94696439,8.59808771 Z" id="Fill-1-Copy" transform="translate(3.733333, 12.266667) rotate(-180.000000) translate(-3.733333, -12.266667) "></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/images/hide.svg b/app/images/hide.svg
new file mode 100644
index 000000000..d7ba01572
--- /dev/null
+++ b/app/images/hide.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="12px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>hide</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Extension-(mobile-form-factor)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="hide" fill="#FFFFFF">
+            <polygon id="Fill-1" points="12.7924541 0.685525644 2.5021101 11.2520394 3.21020258 11.978038 13.4995465 1.41152421"></polygon>
+            <path d="M4.53087507,6.33167913 C4.53087507,4.36419221 6.08507807,2.76945986 8.00132835,2.76945986 C8.40338086,2.76945986 8.78243037,2.85366337 9.14147727,2.98202238 L10.0225923,2.07734807 C9.36950705,1.93153223 8.69641914,1.83808687 8.00132835,1.83808687 C4.64088944,1.83808687 1.68850383,3.6289518 0.000283333333,6.33167913 C0.757382218,7.54338819 1.77751546,8.55691095 2.96667077,9.32295752 L4.73890224,7.50334018 C4.61288579,7.1346931 4.53087507,6.74448171 4.53087507,6.33167913" id="Fill-2"></path>
+            <path d="M13.0194751,3.34029805 L11.2513649,5.16094226 C11.3770883,5.52958934 11.4589083,5.91980074 11.4589083,6.33157644 C11.4589083,8.30009024 9.90831963,9.89482259 7.99652557,9.89482259 C7.59441023,9.89482259 7.21724,9.81061908 6.85803026,9.68123319 L5.97896421,10.5859075 C6.63152857,10.7317233 7.30305122,10.8261956 7.99652557,10.8261956 C11.348152,10.8261956 14.2936719,9.03430378 15.9789642,6.33157644 C15.223626,5.11986738 14.2048672,4.10634463 13.0194751,3.34029805" id="Fill-4"></path>
+            <path d="M8.00102831,8.7499629 C9.30219826,8.7499629 10.3553358,7.66763972 10.3553358,6.33167913 C10.3553358,6.25774434 10.341334,6.18689017 10.3343331,6.11398225 L7.78900062,8.72839858 C7.86000989,8.73455982 7.92901891,8.7499629 8.00102831,8.7499629" id="Fill-7"></path>
+            <path d="M8.00102831,3.9139088 C6.69985837,3.9139088 5.64672082,4.99623198 5.64672082,6.33116569 C5.64672082,6.40612736 5.66072264,6.47698153 5.66772356,6.54886258 L8.213056,3.93547311 C8.14204673,3.92931188 8.07303772,3.9139088 8.00102831,3.9139088" id="Fill-9"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/images/info.svg b/app/images/info.svg
new file mode 100644
index 000000000..1ebae8ee4
--- /dev/null
+++ b/app/images/info.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>info</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Extension-(mobile-form-factor)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="info" fill="#FFFFFF">
+            <path d="M13.2142857,0.642857143 L13.2142857,0.5 L0.5,0.5 L0.5,13.2142857 L0.642857143,13.2142857 L0.642857143,0.642857143 L13.2142857,0.642857143 Z" id="Combined-Shape" stroke="#FFFFFF"></path>
+            <path d="M3.42857143,3.42857143 L3.42857143,14.8571429 L14.8571429,14.8571429 L14.8571429,3.42857143 L3.42857143,3.42857143 Z M2.28571429,2.28571429 L16,2.28571429 L16,16 L2.28571429,16 L2.28571429,2.28571429 Z" id="Rectangle-18-Copy" fill-rule="nonzero"></path>
+            <g id="Group-44" transform="translate(8.000000, 5.000000)">
+                <rect id="Rectangle-39" x="0" y="3" width="2" height="5" rx="1"></rect>
+                <rect id="Rectangle-39-Copy" x="0" y="0" width="2" height="2" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/images/open-etherscan.svg b/app/images/open-etherscan.svg
new file mode 100644
index 000000000..84c5687ce
--- /dev/null
+++ b/app/images/open-etherscan.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>open-etherscan</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Extension-(mobile-form-factor)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="open-etherscan" fill="#FFFFFF">
+            <path d="M3.00020312,0 C2.44821175,0 2.00021875,0.447993 2.00021875,0.999984375 C2.00021875,1.55197575 2.44821175,1.99996875 3.00020312,1.99996875 L12.5860533,1.99996875 L0.293245418,14.2927767 C-0.0977484727,14.6837706 -0.0977484727,15.3157607 0.293245418,15.7067546 C0.488242371,15.9017515 0.744238371,15.99975 1.00023437,15.99975 C1.25623037,15.99975 1.51222637,15.9017515 1.70722332,15.7067546 L14.0000312,3.41394666 L14.0000312,12.9997969 C14.0000312,13.5517883 14.4480242,13.9997813 15.0000156,13.9997813 C15.552007,13.9997813 16,13.5517883 16,12.9997969 L16,0 L3.00020312,0 Z"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js
index ecad3e8fd..8d1ecac0d 100644
--- a/test/e2e/beta/metamask-beta-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-ui.spec.js
@@ -271,6 +271,17 @@ describe('MetaMask', function () {
       await driver.wait(until.stalenessOf(accountModal))
       await delay(regularDelayMs)
     })
+    it('show account details dropdown menu', async () => {
+
+      const {width, height} = await driver.manage().window().getSize()
+      driver.manage().window().setSize(320, 480)
+      await driver.findElement(By.css('div.menu-bar__open-in-browser')).click()
+      const options = await driver.findElements(By.css('div.menu.account-details-dropdown div.menu__item'))
+      assert.equal(options.length, 3) // HD Wallet type does not have to show the Remove Account option
+      await delay(regularDelayMs)
+      driver.manage().window().setSize(width, height)
+
+    })
   })
 
   describe('Log out an log back in', () => {
diff --git a/ui/app/components/dropdowns/account-details-dropdown.js b/ui/app/components/dropdowns/account-details-dropdown.js
new file mode 100644
index 000000000..1f82ca735
--- /dev/null
+++ b/ui/app/components/dropdowns/account-details-dropdown.js
@@ -0,0 +1,109 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const { getSelectedIdentity } = require('../../selectors')
+const genAccountLink = require('../../../lib/account-link.js')
+const { Menu, Item, CloseArea } = require('./components/menu')
+
+AccountDetailsDropdown.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsDropdown)
+
+function mapStateToProps (state) {
+  return {
+    selectedIdentity: getSelectedIdentity(state),
+    network: state.metamask.network,
+    keyrings: state.metamask.keyrings,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showAccountDetailModal: () => {
+      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
+    viewOnEtherscan: (address, network) => {
+      global.platform.openWindow({ url: genAccountLink(address, network) })
+    },
+    showRemoveAccountConfirmationModal: (identity) => {
+      return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity }))
+    },
+  }
+}
+
+inherits(AccountDetailsDropdown, Component)
+function AccountDetailsDropdown () {
+  Component.call(this)
+
+  this.onClose = this.onClose.bind(this)
+}
+
+AccountDetailsDropdown.prototype.onClose = function (e) {
+  e.stopPropagation()
+  this.props.onClose()
+}
+
+AccountDetailsDropdown.prototype.render = function () {
+  const { 
+    selectedIdentity, 
+    network,
+    keyrings,
+    showAccountDetailModal, 
+    viewOnEtherscan,
+    showRemoveAccountConfirmationModal } = this.props
+  
+  const { name, address } = selectedIdentity
+
+  const keyring = keyrings.find((kr) => {
+    return kr.accounts.includes(address)
+  })
+
+  const isRemovable = keyring.type !== 'HD Key Tree'
+
+  return h(Menu, { className: 'account-details-dropdown', isShowing: true }, [
+    h(CloseArea, {
+      onClick: this.onClose,
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        global.platform.openExtensionInBrowser()
+        this.props.onClose()
+      },
+      text: this.context.t('expandView'),
+      icon: h(`img`, { src: "images/expand.svg", style: { height: '15px' } }),
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        showAccountDetailModal()
+        this.props.onClose()
+      },
+      text: this.context.t('accountDetails'),
+      icon: h(`img`, { src: "images/info.svg", style: { height: '15px' } }),
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        viewOnEtherscan(address, network)
+        this.props.onClose()
+      },
+      text: this.context.t('viewOnEtherscan'),
+      icon: h(`img`, { src: "images/open-etherscan.svg", style: { height: '15px' } }),
+    }),
+    isRemovable ? h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        showRemoveAccountConfirmationModal(selectedIdentity)
+        this.props.onClose()
+      },
+      text: this.context.t('removeAccount'),
+      icon: h(`img`, { src: "images/hide.svg", style: { height: '15px' } }),
+    }):null,
+  ])
+}
\ No newline at end of file
diff --git a/ui/app/components/menu-bar/menu-bar.component.js b/ui/app/components/menu-bar/menu-bar.component.js
index eee9feebb..7460e8dd5 100644
--- a/ui/app/components/menu-bar/menu-bar.component.js
+++ b/ui/app/components/menu-bar/menu-bar.component.js
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Tooltip from '../tooltip'
 import SelectedAccount from '../selected-account'
+import AccountDetailsDropdown from '../dropdowns/account-details-dropdown.js'
 
 export default class MenuBar extends PureComponent {
   static contextTypes = {
@@ -15,9 +16,12 @@ export default class MenuBar extends PureComponent {
     showSidebar: PropTypes.func,
   }
 
+  state = { accountDetailsMenuOpen: false }
+
   render () {
     const { t } = this.context
     const { isMascara, sidebarOpen, hideSidebar, showSidebar } = this.props
+    const { accountDetailsMenuOpen } = this.state
 
     return (
       <div className="menu-bar">
@@ -34,18 +38,25 @@ export default class MenuBar extends PureComponent {
         {
           !isMascara && (
             <Tooltip
-              title={t('openInTab')}
+              title={t('accountOptions')}
               position="bottom"
             >
               <div
-                className="menu-bar__open-in-browser"
-                onClick={() => global.platform.openExtensionInBrowser()}
+                className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser"
+                onClick={() => this.setState({ accountDetailsMenuOpen: true })}
               >
-                <img src="images/popout.svg" />
               </div>
             </Tooltip>
           )
         }
+        {
+          accountDetailsMenuOpen && (
+            <AccountDetailsDropdown
+              className="menu-bar__account-details-dropdown" 
+              onClose={() => this.setState({ accountDetailsMenuOpen: false })}
+            />
+          )
+        }
       </div>
     )
   }
diff --git a/ui/app/css/itcss/components/account-details-dropdown.scss b/ui/app/css/itcss/components/account-details-dropdown.scss
new file mode 100644
index 000000000..2a3007f83
--- /dev/null
+++ b/ui/app/css/itcss/components/account-details-dropdown.scss
@@ -0,0 +1,7 @@
+.account-details-dropdown {
+	width: 60%;
+	position: absolute;
+	top: 120px;
+	right: 15px;
+	z-index: 2000;
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 99deaf918..63aa62eb3 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -42,6 +42,8 @@
 
 @import './request-signature.scss';
 
+@import './account-details-dropdown.scss';
+
 @import './account-dropdown-mini.scss';
 
 @import './editable-label.scss';