Add button to remove token

old-ui/app/account-detail.js

@@ -269,6 +269,7 @@ AccountDetailScreen.prototype.tabSwitchView = function () {
         network,
         tokens,
         addToken: () => this.props.dispatch(actions.showAddTokenPage()),
+        removeToken: (token) => this.props.dispatch(actions.showRemoveTokenPage(token)),
       })
     default:
       return this.transactionList()

old-ui/app/app.js

@@ -22,6 +22,7 @@ const generateLostAccountsNotice = require('../lib/lost-accounts-notice')
 // other views
 const ConfigScreen = require('./config')
 const AddTokenScreen = require('./add-token')
+const RemoveTokenScreen = require('./remove-token')
 const Import = require('./accounts/import')
 const InfoScreen = require('./info')
 const Loading = require('./components/loading')
@@ -566,6 +567,10 @@ App.prototype.renderPrimary = function () {
       log.debug('rendering add-token screen from unlock screen.')
       return h(AddTokenScreen, {key: 'add-token'})
 
+    case 'remove-token':
+      log.debug('rendering remove-token screen from unlock screen.')
+      return h(RemoveTokenScreen, {key: 'remove-token', ...props.currentView.context })
+
     case 'config':
       log.debug('rendering config screen')
       return h(ConfigScreen, {key: 'config'})

old-ui/app/components/token-cell.js

@@ -31,6 +31,14 @@ TokenCell.prototype.render = function () {
 
       h('span', { style: { flex: '1 0 auto' } }),
 
+      h('span.fa.fa-trash', {
+        style: { cursor: 'pointer' },
+        onClick: (event) => {
+          event.stopPropagation()
+          this.props.removeToken({ address, symbol, string, network, userAddress })
+        },
+      }, ''),
+
       /*
       h('button', {
         onClick: this.send.bind(this, address),

old-ui/app/components/token-list.js

@@ -51,7 +51,10 @@ TokenList.prototype.render = function () {
   const tokenViews = tokens.map((tokenData) => {
     tokenData.network = network
     tokenData.userAddress = userAddress
-    return h(TokenCell, tokenData)
+    return h(TokenCell, {
+      ...tokenData,
+      removeToken: this.props.removeToken,
+    })
   })
 
   return h('.full-flex-height', [

old-ui/app/remove-token.js

@@ -0,0 +1,67 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../ui/app/actions')
+
+module.exports = connect(mapStateToProps)(RemoveTokenScreen)
+
+function mapStateToProps (state) {
+  return {}
+}
+
+inherits(RemoveTokenScreen, Component)
+function RemoveTokenScreen () {
+  this.state = {}
+  Component.call(this)
+}
+
+RemoveTokenScreen.prototype.render = function () {
+  const props = this.props
+
+  const warning = `Are you sure you want to remove token "${props.symbol}"?`
+
+  return (
+    h('.flex-column.flex-grow', [
+
+      // subtitle and nav
+      h('.section-title.flex-row.flex-center', [
+        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+          onClick: (event) => {
+            props.dispatch(actions.goHome())
+          },
+        }),
+        h('h2.page-subtitle', 'Remove Token'),
+      ]),
+
+      h('div', {
+        style: {
+          display: 'inline-block',
+          textAlign: 'center',
+        },
+      }, [
+        h('p.error', warning),
+      ]),
+
+      h('.flex-column.flex-justify-center.flex-grow.select-none', [
+        h('.flex-space-around', {
+          style: {
+            padding: '20px',
+          },
+        }, [
+          h('button', {
+            style: {
+              alignSelf: 'center',
+            },
+            onClick: (event) => {
+              this.props.dispatch(actions.removeToken(props.address))
+                .then(() => {
+                  this.props.dispatch(actions.goHome())
+                })
+            },
+          }, 'Remove'),
+        ]),
+      ]),
+    ])
+  )
+}

ui/app/actions.js

@@ -209,7 +209,9 @@ var actions = {
   SET_PROVIDER_TYPE: 'SET_PROVIDER_TYPE',
   showConfigPage,
   SHOW_ADD_TOKEN_PAGE: 'SHOW_ADD_TOKEN_PAGE',
+  SHOW_REMOVE_TOKEN_PAGE: 'SHOW_REMOVE_TOKEN_PAGE',
   showAddTokenPage,
+  showRemoveTokenPage,
   addToken,
   addTokens,
   removeToken,
@@ -1391,6 +1393,14 @@ function showAddTokenPage (transitionForward = true) {
   }
 }
 
+function showRemoveTokenPage (token, transitionForward = true) {
+  return {
+    type: actions.SHOW_REMOVE_TOKEN_PAGE,
+    value: transitionForward,
+    token,
+  }
+}
+
 function addToken (address, symbol, decimals) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())

ui/app/reducers/app.js

@@ -181,6 +181,15 @@ function reduceApp (state, action) {
         transForward: action.value,
       })
 
+    case actions.SHOW_REMOVE_TOKEN_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'remove-token',
+          context: action.token,
+        },
+        transForward: action.value,
+      })
+
     case actions.SHOW_IMPORT_PAGE:
       return extend(appState, {
         currentView: {