Token selector view error - Firefox

[Richard809]

The following exception occurs in Firefox (using metamask):

uncaught at updateTokenBalance Error: number is undefined toT@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:3983:7 getListToken/<@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:106228:24 getListToken@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:106225:12 TokenSelectorView@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:106324:9 updateFunctionalComponent@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:89980:22 beginWork@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:90384:16 performUnitOfWork@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:92385:16 workLoop@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:92449:26 callCallback@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:82703:9 invokeGuardedCallbackDev@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:82742:7 invokeGuardedCallback@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:82599:5 renderRoot@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:92527:7 performWorkOnRoot@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:93175:24 performWork@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:93128:7 requestWork@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:93039:7 scheduleWorkImpl@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:92893:11 scheduleWork@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:92850:12 enqueueSetState@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:88373:7 Component.prototype.setState@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:80742:3 onStateChange@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:47473:11 dispatch@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:47812:7 S/</</<@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:121222:7806 routerMiddleware/</</<@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:101831:18 sagaMiddleware/</<@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:121300:22 dispatch@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:99236:18 wrapSagaDispatch/<@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:10310:12 runPutEffect/<@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:56363:19 exec@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:55751:5 flush@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:55792:5 asap@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:55765:5 runPutEffect@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:56360:5 runEffect@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:56309:307 next@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:56189:9 currCb@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:56262:7 run@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:77687:22 notify/<@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:77700:30 flush@http://localhost:3000/client.min.js?6b3ef6c8d76c8530dc03:37328:9 utils.js:225 TypeError: number is undefined

Problem:

When updating the token balances passed to setBalanceToken function (globalActions.js), the reducer (tokensReducer.js) can't match some of tokens to the ones in 'state.tokens'.

    case "GLOBAL.SET_BALANCE_TOKEN":{
      var tokens = { ...state.tokens }
      
      var balances = action.payload.balances
      var mapBalance = {}
      balances.map(balance=>{
        mapBalance[balance.symbol] = balance.balance
      })

      var newTokens = {}
      Object.keys(tokens).map(key => {
        var token = tokens[key]
        token.balance = mapBalance[token.symbol]
        newTokens[key] = token
      })
      return Object.assign({}, state, { tokens: newTokens }) 
    }

This makes the 'newTokens' variable to have tokens with the balance property set to undefined, which makes Firefox unresponsive after the exception is being thrown.

Fix:

Instead of matching using the tokens variable

Object.keys(tokens).map(key => {

use mapBalance since those are tokens to be updated

Object.keys(mapBalance).map(key => {

and make sure to validate in case not found.