Token menu ui.

2 files changed, 56 insertions, 0 deletions

diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
new file mode 100644
index 000000000..b948534c2
--- /dev/null
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -0,0 +1,38 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = TokenMenuDropdown
+
+inherits(TokenMenuDropdown, Component)
+function TokenMenuDropdown () {
+  Component.call(this)
+
+  this.onClose = this.onClose.bind(this)
+}
+
+TokenMenuDropdown.prototype.onClose = function (e) {
+  e.stopPropagation()
+  this.props.onClose()
+}
+
+TokenMenuDropdown.prototype.render = function () {
+  return h('div.token-menu-dropdown', {}, [
+    h('div.token-menu-dropdown__close-area', {
+      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()
+            console.log('div.token-menu-dropdown__option!')
+          },
+        }, 'Hide Token')
+
+      ]),
+    ]),
+  ])
+}
+
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index e87d2c859..df73577e9 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -8,6 +8,8 @@ const selectors = require('../selectors')
 const actions = require('../actions')
 const { conversionUtil } = require('../conversion-util')
 
+const TokenMenuDropdown = require('./dropdowns/token-menu-dropdown.js')
+
 function mapStateToProps (state) {
   return {
     network: state.metamask.network,
@@ -32,6 +34,10 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenCell)
 inherits(TokenCell, Component)
 function TokenCell () {
   Component.call(this)
+
+  this.state = {
+    tokenMenuOpen: false,
+  }
 }
 
 TokenCell.prototype.componentWillMount = function () {
@@ -44,6 +50,7 @@ TokenCell.prototype.componentWillMount = function () {
 }
 
 TokenCell.prototype.render = function () {
+  const { tokenMenuOpen } = this.state
   const props = this.props
   const {
     address,
@@ -104,6 +111,17 @@ TokenCell.prototype.render = function () {
         }, formattedUSD),
       ]),
 
+      h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
+        onClick: (e) => {
+          e.stopPropagation()
+          this.setState({ tokenMenuOpen: true })
+        },
+      }),
+
+      tokenMenuOpen && h(TokenMenuDropdown, {
+        onClose: () => this.setState({ tokenMenuOpen: false }),
+      }),
+
       /*
       h('button', {
         onClick: this.send.bind(this, address),