diff options
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.
Diffstat (limited to 'ui/app/components/token-list.js')
-rw-r--r-- | ui/app/components/token-list.js | 22 |
1 files changed, 18 insertions, 4 deletions
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()) |