Fix bug related to balance/allowance fetching being async

1 files changed, 14 insertions, 0 deletions

diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index ecafe5432..776ccb16e 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -133,6 +133,20 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         if (!_.isEqual(nextProps.trackedTokens, this.props.trackedTokens)) {
             const newTokens = _.difference(nextProps.trackedTokens, this.props.trackedTokens);
             const newTokenAddresses = _.map(newTokens, token => token.address);
+            // Add placeholder entry for this token to the state, since fetching the
+            // balance/allowance is asynchronous
+            const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress;
+            for (const tokenAddress of newTokenAddresses) {
+                trackedTokenStateByAddress[tokenAddress] = {
+                    balance: new BigNumber(0),
+                    allowance: new BigNumber(0),
+                    isLoaded: false,
+                };
+            }
+            this.setState({
+                trackedTokenStateByAddress,
+            });
+            // Fetch the actual balance/allowance.
             this._fetchBalancesAndAllowancesAsync(newTokenAddresses);
         }
     }