Added account options on home screen

4 files changed, 133 insertions, 4 deletions

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';