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

3 files changed, 23 insertions, 8 deletions

diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
index 0f4bc2b87..7234a9b21 100644
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/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')
 
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
index d3f06b483..fa3ad0b1e 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/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',
         ]),
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index 0efa89c63..fb11be826 100644
--- a/ui/app/components/token-list.js
+++ b/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
-  if (!oldNet || !newNet || !oldAddress || !newAddress) return
-  if (oldAddress === newAddress && oldNet === newNet) return
+  const isLoading = newNet === 'loading'
+  const missingInfo = !oldNet || !newNet || !oldAddress || !newAddress
+  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()