Enables remove token and ensures add/remove update the list without need for refresh.

app/scripts/controllers/preferences.js

@@ -42,7 +42,18 @@ class PreferencesController {
     }
 
     this.store.updateState({ tokens })
-    return Promise.resolve()
+    return Promise.resolve(tokens)
+  }
+
+  removeToken (rawAddress) {
+    const address = normalizeAddress(rawAddress)
+
+    const tokens = this.store.getState().tokens
+
+    const updatedTokens = tokens.filter(token => token.address !== rawAddress)
+
+    this.store.updateState({ tokens: updatedTokens })
+    return Promise.resolve(updatedTokens)
   }
 
   getTokens () {

app/scripts/metamask-controller.js

@@ -327,6 +327,7 @@ module.exports = class MetamaskController extends EventEmitter {
       // PreferencesController
       setSelectedAddress: nodeify(preferencesController.setSelectedAddress, preferencesController),
       addToken: nodeify(preferencesController.addToken, preferencesController),
+      removeToken: nodeify(preferencesController.removeToken, preferencesController),
       setCurrentAccountTab: nodeify(preferencesController.setCurrentAccountTab, preferencesController),
       setDefaultRpc: nodeify(this.setDefaultRpc, this),
       setCustomRpc: nodeify(this.setCustomRpc, this),

ui/app/actions.js

@@ -152,6 +152,9 @@ var actions = {
   showAddTokenPage,
   addToken,
   addTokens,
+  removeToken,
+  updateTokens,
+  UPDATE_TOKENS: 'UPDATE_TOKENS',
   setRpcTarget: setRpcTarget,
   setDefaultRpcTarget: setDefaultRpcTarget,
   setProviderType: setProviderType,
@@ -753,16 +756,31 @@ function addToken (address, symbol, decimals) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     return new Promise((resolve, reject) => {
-      background.addToken(address, symbol, decimals, (err) => {
+      background.addToken(address, symbol, decimals, (err, tokens) => {
         dispatch(actions.hideLoadingIndication())
         if (err) {
           dispatch(actions.displayWarning(err.message))
           reject(err)
         }
-        resolve()
+        dispatch(actions.updateTokens(tokens))
-        // setTimeout(() => {
+        resolve(tokens)
-        //   dispatch(actions.goHome())
+      })
-        // }, 250)
+    })
+  }
+}
+
+function removeToken (address) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.removeToken(address, (err, tokens) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          reject(err)
+        }
+        dispatch(actions.updateTokens(tokens))
+        resolve(tokens)
       })
     })
   }
@@ -786,6 +804,13 @@ function addTokens (tokens) {
   }
 }
 
+function updateTokens(newTokens) {
+  return {
+    type: actions.UPDATE_TOKENS,
+    newTokens
+  }
+}
+
 function goBackToInitView () {
   return {
     type: actions.BACK_TO_INIT_MENU,

ui/app/components/dropdowns/token-menu-dropdown.js

@@ -41,6 +41,7 @@ TokenMenuDropdown.prototype.render = function () {
           onClick: (e) => {
             e.stopPropagation()
             showHideTokenConfirmationModal(this.props.token)
+            this.props.onClose()
           },
         }, 'Hide Token')
 

ui/app/components/modals/hide-token-confirmation-modal.js

@@ -13,7 +13,15 @@ function mapStateToProps (state) {
 }
 
 function mapDispatchToProps (dispatch) {
-  return {}
+  return {
+    hideModal: () => dispatch(actions.hideModal()),
+    hideToken: address => {
+      dispatch(actions.removeToken(address))
+        .then(() => {
+          dispatch(actions.hideModal())
+        })
+    },
+  }
 }
 
 inherits(HideTokenConfirmationModal, Component)
@@ -26,7 +34,7 @@ function HideTokenConfirmationModal () {
 module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal)
 
 HideTokenConfirmationModal.prototype.render = function () {
-  const { token, network } = this.props
+  const { token, network, hideToken, hideModal } = this.props
   const { symbol, address } = token
 
   return h('div.hide-token-confirmation', {}, [
@@ -51,12 +59,12 @@ HideTokenConfirmationModal.prototype.render = function () {
 
       h('div.hide-token-confirmation__buttons', {}, [
         h('button.btn-clear', {
-          onClick: () => {},
+          onClick: () => hideModal(),
         }, [
           'CANCEL',
         ]),
         h('button.btn-clear', {
-          onClick: () => {},
+          onClick: () => hideToken(address),
         }, [
           'HIDE',
         ]),

ui/app/components/token-list.js

@@ -27,7 +27,6 @@ for (const address in contracts) {
 
 module.exports = connect(mapStateToProps)(TokenList)
 
-
 inherits(TokenList, Component)
 function TokenList () {
   this.state = {
@@ -129,15 +128,22 @@ TokenList.prototype.componentDidUpdate = function (nextProps) {
   const {
     network: oldNet,
     userAddress: oldAddress,
+    tokens,
   } = this.props
   const {
     network: newNet,
     userAddress: newAddress,
+    tokens: newTokens,
   } = nextProps
 
-  if (newNet === 'loading') return
+  const isLoading = newNet === 'loading'
-  if (!oldNet || !newNet || !oldAddress || !newAddress) return
+  const missingInfo = !oldNet || !newNet || !oldAddress || !newAddress
-  if (oldAddress === newAddress && oldNet === newNet) return
+  const sameUserAndNetwork = oldAddress === newAddress && oldNet === newNet
+  const shouldUpdateTokens = isLoading || missingInfo || sameUserAndNetwork
+
+  const tokensLengthUnchanged = tokens.length === newTokens.length
+
+  if (tokensLengthUnchanged && shouldUpdateTokens) return
 
   this.setState({ isLoading: true })
   this.createFreshTokenTracker()

ui/app/reducers/metamask.js

@@ -19,6 +19,7 @@ function reduceMetamask (state, action) {
     addressBook: [],
     selectedTokenAddress: null,
     tokenExchangeRates: {},
+    tokens: [],
   }, state.metamask)
 
   switch (action.type) {
@@ -146,6 +147,11 @@ function reduceMetamask (state, action) {
         },
       })
 
+    case actions.UPDATE_TOKENS:
+      return extend(metamaskState, {
+        tokens: action.newTokens,
+      })
+
     default:
       return metamaskState