From a2781df8b4ce8d1fc03080eb3361217a236ec82d Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 19 Jun 2017 19:11:55 -0700
Subject: Add better event lifecycle management to token list.

Token list now renders errors when a token lookup fails.
Also now cleans up event listeners when re-initializing the token list.
---
 ui/app/components/token-list.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/token-list.js')

diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index c560a6072..633d3ccfe 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -24,7 +24,7 @@ function TokenList () {
 
 TokenList.prototype.render = function () {
   const state = this.state
-  const { tokens, isLoading } = state
+  const { tokens, isLoading, error } = state
 
   const { userAddress } = this.props
 
@@ -32,6 +32,11 @@ TokenList.prototype.render = function () {
     return this.message('Loading')
   }
 
+  if (error) {
+    log.error(error)
+    return this.message('There was a problem loading your token balances.')
+  }
+
   const network = this.props.network
 
   const tokenViews = tokens.map((tokenData) => {
@@ -85,7 +90,10 @@ TokenList.prototype.componentDidMount = function () {
 
 TokenList.prototype.createFreshTokenTracker = function () {
   if (this.tracker) {
+    // Clean up old trackers when refreshing:
     this.tracker.stop()
+    this.tracker.removeListener('update', this.balanceUpdater)
+    this.tracker.removeListener('error', this.showError)
   }
 
   if (!global.ethereumProvider) return
@@ -97,9 +105,15 @@ TokenList.prototype.createFreshTokenTracker = function () {
     pollingInterval: 8000,
   })
 
-  this.tracker.on('update', (tokenData) => {
-    this.updateBalances(tokenData)
-  })
+
+  // Set up listener instances for cleaning up
+  this.balanceUpdater = this.updateBalances.bind(this)
+  this.showError = (error) => {
+    this.setState({ error, isLoading: false })
+  }
+  this.tracker.on('update', this.balanceUpdater)
+  this.tracker.on('error', this.showError)
+
   this.tracker.updateBalances()
   .then(() => {
     this.updateBalances(this.tracker.serialize())
-- 
cgit v1.2.3