Token menu ui.

3 files changed, 103 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),
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index e4d6d975b..8ae0eec66 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -9,6 +9,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   cursor: pointer;
   transition: linear 200ms;
   background-color: rgba($wallet-balance-bg, 0);
+  position: relative;
 
   &__token-balance {
     font-size: 130%;
@@ -44,4 +45,50 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
       margin-right: 4%;
     }
   }
+
+  &__ellipsis {
+    position: absolute;
+    top: 20px;
+    right: 24px;
+  }
 }
+
+.token-menu-dropdown {
+  height: 55px;
+  width: 191px;
+  border-radius: 4px;
+  background-color: rgba(0,0,0,0.82);
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
+  position: fixed;
+  margin-top: 20px;
+  margin-left: 105px;
+
+  &__close-area {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__container {
+    padding: 16px 34px 32px;
+    z-index: 1050;
+    position: relative;
+  }
+
+  &__options {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &__option {
+    color: $white;
+    font-family: "DIN OT";
+    font-size: 16px;
+    line-height: 21px;
+    text-align: center;
+  }
+}
\ No newline at end of file