View address of an added token (#4591)

* adding menu actions for tokens

* apply common style

3 files changed, 43 insertions, 22 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 457c3c3b1..2579da87d 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -146,6 +146,9 @@
   "copy": {
     "message": "Copy"
   },
+  "copyContractAddress": {
+    "message": "Copy Contract Address"
+  },
   "copyToClipboard": {
     "message": "Copy to clipboard"
   },
@@ -955,6 +958,9 @@
   "viewAccount": {
     "message": "View Account"
   },
+  "viewOnEtherscan": {
+    "message": "View on Etherscan"
+  },
   "visitWebSite": {
     "message": "Visit our web site"
   },
diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
index b70d0b893..fac7c451b 100644
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -4,14 +4,21 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-
+const genAccountLink = require('etherscan-link').createAccountLink
+const copyToClipboard = require('copy-to-clipboard')
+const { Menu, Item, CloseArea } = require('./components/menu')
 
 TokenMenuDropdown.contextTypes = {
   t: PropTypes.func,
 }
 
-module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown)
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenMenuDropdown)
 
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+  }
+}
 
 function mapDispatchToProps (dispatch) {
   return {
@@ -37,22 +44,34 @@ TokenMenuDropdown.prototype.onClose = function (e) {
 TokenMenuDropdown.prototype.render = function () {
   const { showHideTokenConfirmationModal } = this.props
 
-  return h('div.token-menu-dropdown', {}, [
-    h('div.token-menu-dropdown__close-area', {
+  return h(Menu, { className: 'token-menu-dropdown', isShowing: true }, [
+    h(CloseArea, {
       onClick: this.onClose,
     }),
-    h('div.token-menu-dropdown__container', {}, [
-      h('div.token-menu-dropdown__options', {}, [
-
-        h('div.token-menu-dropdown__option', {
-          onClick: (e) => {
-            e.stopPropagation()
-            showHideTokenConfirmationModal(this.props.token)
-            this.props.onClose()
-          },
-        }, this.context.t('hideToken')),
-
-      ]),
-    ]),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        showHideTokenConfirmationModal(this.props.token)
+        this.props.onClose()
+      },
+      text: this.context.t('hideToken'), 
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        copyToClipboard(this.props.token.address)
+        this.props.onClose()
+      },
+      text: this.context.t('copyContractAddress'), 
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        const url = genAccountLink(this.props.token.address, this.props.network)
+        global.platform.openWindow({ url })
+        this.props.onClose()
+      },
+      text: this.context.t('viewOnEtherscan'), 
+    }),
   ])
 }
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index 72fda372f..4b706abce 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -81,13 +81,9 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
 }
 
 .token-menu-dropdown {
-  height: 55px;
   width: 80%;
-  border-radius: 4px;
-  background-color: rgba(0, 0, 0, .82);
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
   position: absolute;
-  top: 60px;
+  top: 52px;
   right: 25px;
   z-index: 2000;