Fix balance forever loading issue, ensure that all balances in the store are...

Fix balance forever loading issue, ensure that all balances in the store are keyed by checksummed addresses

src/components/SearchModal/index.tsx

@@ -227,16 +227,16 @@ function SearchModal({
 
   const tokenList = useMemo(() => {
     return Object.keys(allTokens)
-      .sort((a, b): number => {
-        if (a && allTokens[a]?.equals(WETH[chainId])) return -1
-        if (b && allTokens[b]?.equals(WETH[chainId])) return 1
+      .sort((tokenAddressA, tokenAddressB): number => {
+        if (tokenAddressA && allTokens[tokenAddressA]?.equals(WETH[chainId])) return -1
+        if (tokenAddressB && allTokens[tokenAddressB]?.equals(WETH[chainId])) return 1
 
-        if (allTokens[a].symbol && allTokens[b].symbol) {
-          const aSymbol = allTokens[a].symbol.toLowerCase()
-          const bSymbol = allTokens[b].symbol.toLowerCase()
+        if (allTokens[tokenAddressA].symbol && allTokens[tokenAddressB].symbol) {
+          const aSymbol = allTokens[tokenAddressA].symbol.toLowerCase()
+          const bSymbol = allTokens[tokenAddressB].symbol.toLowerCase()
           // sort by balance
-          const balanceA = allBalances?.[account]?.[a]
-          const balanceB = allBalances?.[account]?.[b]
+          const balanceA = allBalances?.[account]?.[tokenAddressA]
+          const balanceB = allBalances?.[account]?.[tokenAddressB]
 
           if (balanceA?.greaterThan('0') && !balanceB?.greaterThan('0')) {
             return sortDirection ? -1 : 1
@@ -249,12 +249,13 @@ function SearchModal({
           return 0
         }
       })
-      .map(k => {
+      .filter(tokenAddress => isAddress(tokenAddress))
+      .map(tokenAddress => {
         return {
-          name: allTokens[k].name,
-          symbol: allTokens[k].symbol,
-          address: k,
-          balance: allBalances?.[account]?.[k]
+          name: allTokens[tokenAddress].name,
+          symbol: allTokens[tokenAddress].symbol,
+          address: isAddress(tokenAddress) as string, // always a string after filtering
+          balance: allBalances?.[account]?.[tokenAddress]
         }
       })
   }, [allTokens, allBalances, account, sortDirection, chainId])
@@ -459,6 +460,7 @@ function SearchModal({
           const customAdded = userAddedTokens?.some(token => token.address === address) && !urlAdded
 
           const zeroBalance = balance && JSBI.equal(JSBI.BigInt(0), balance.raw)
+          console.log(balance, address)
 
           // if token import page dont show preset list, else show all
           return (

src/state/wallet/reducer.tsx

@@ -9,6 +9,7 @@ import {
   updateTokenBalances
 } from './actions'
 
+// all address keys are checksummed and valid addresses starting with 0x
 interface WalletState {
   readonly tokenBalanceListeners: {
     readonly [address: string]: {
@@ -52,57 +53,65 @@ export default createReducer(initialState, builder =>
   builder
     .addCase(startListeningForTokenBalances, (state, { payload: combos }) => {
       combos.forEach(combo => {
-        if (!isAddress(combo.tokenAddress) || !isAddress(combo.address)) {
+        const [checksummedTokenAddress, checksummedAddress] = [isAddress(combo.tokenAddress), isAddress(combo.address)]
+        if (!checksummedAddress || !checksummedTokenAddress) {
           console.error('invalid combo', combo)
           return
         }
-        state.tokenBalanceListeners[combo.address] = state.tokenBalanceListeners[combo.address] ?? {}
-        state.tokenBalanceListeners[combo.address][combo.tokenAddress] =
-          (state.tokenBalanceListeners[combo.address][combo.tokenAddress] ?? 0) + 1
+        state.tokenBalanceListeners[checksummedAddress] = state.tokenBalanceListeners[checksummedAddress] ?? {}
+        state.tokenBalanceListeners[checksummedAddress][checksummedTokenAddress] =
+          (state.tokenBalanceListeners[checksummedAddress][checksummedTokenAddress] ?? 0) + 1
       })
     })
     .addCase(stopListeningForTokenBalances, (state, { payload: combos }) => {
       combos.forEach(combo => {
-        if (!isAddress(combo.tokenAddress) || !isAddress(combo.address)) {
+        const [checksummedTokenAddress, checksummedAddress] = [isAddress(combo.tokenAddress), isAddress(combo.address)]
+        if (!checksummedAddress || !checksummedTokenAddress) {
           console.error('invalid combo', combo)
           return
         }
-        if (!state.tokenBalanceListeners[combo.address]) return
-        if (!state.tokenBalanceListeners[combo.address][combo.tokenAddress]) return
-        if (state.tokenBalanceListeners[combo.address][combo.tokenAddress] === 1) {
-          delete state.tokenBalanceListeners[combo.address][combo.tokenAddress]
+        if (!state.tokenBalanceListeners[checksummedAddress]) return
+        if (!state.tokenBalanceListeners[checksummedAddress][checksummedTokenAddress]) return
+        if (state.tokenBalanceListeners[checksummedAddress][checksummedTokenAddress] === 1) {
+          delete state.tokenBalanceListeners[checksummedAddress][checksummedTokenAddress]
         } else {
-          state.tokenBalanceListeners[combo.address][combo.tokenAddress]--
+          state.tokenBalanceListeners[checksummedAddress][checksummedTokenAddress]--
         }
       })
     })
     .addCase(startListeningForBalance, (state, { payload: { addresses } }) => {
       addresses.forEach(address => {
-        if (!isAddress(address)) {
+        const checksummedAddress = isAddress(address)
+        if (!checksummedAddress) {
           console.error('invalid address', address)
           return
         }
-        state.balanceListeners[address] = (state.balanceListeners[address] ?? 0) + 1
+        state.balanceListeners[checksummedAddress] = (state.balanceListeners[checksummedAddress] ?? 0) + 1
       })
     })
     .addCase(stopListeningForBalance, (state, { payload: { addresses } }) => {
       addresses.forEach(address => {
-        if (!isAddress(address)) {
+        const checksummedAddress = isAddress(address)
+        if (!checksummedAddress) {
           console.error('invalid address', address)
           return
         }
-        if (!state.balanceListeners[address]) return
-        if (state.balanceListeners[address] === 1) {
-          delete state.balanceListeners[address]
+        if (!state.balanceListeners[checksummedAddress]) return
+        if (state.balanceListeners[checksummedAddress] === 1) {
+          delete state.balanceListeners[checksummedAddress]
         } else {
-          state.balanceListeners[address]--
+          state.balanceListeners[checksummedAddress]--
         }
       })
     })
     .addCase(updateTokenBalances, (state, { payload: { chainId, address, blockNumber, tokenBalances } }) => {
+      const checksummedAddress = isAddress(address)
+      if (!checksummedAddress) return
       Object.keys(tokenBalances).forEach(tokenAddress => {
-        const balance = tokenBalances[tokenAddress]
-        const key = balanceKey({ chainId, address, tokenAddress })
+        const checksummedTokenAddress = isAddress(tokenAddress)
+        if (!checksummedTokenAddress) return
+        const balance = tokenBalances[checksummedTokenAddress]
+        const key = balanceKey({ chainId, address: checksummedAddress, tokenAddress: checksummedTokenAddress })
         const data = state.balances[key]
         if (!data || data.blockNumber === undefined || data.blockNumber <= blockNumber) {
           state.balances[key] = { value: balance, blockNumber }
@@ -111,8 +120,11 @@ export default createReducer(initialState, builder =>
     })
     .addCase(updateEtherBalances, (state, { payload: { etherBalances, chainId, blockNumber } }) => {
       Object.keys(etherBalances).forEach(address => {
-        const balance = etherBalances[address]
-        const key = balanceKey({ chainId, address })
+        const checksummedAddress = isAddress(address)
+        if (!checksummedAddress) return
+
+        const balance = etherBalances[checksummedAddress]
+        const key = balanceKey({ chainId, address: checksummedAddress })
         const data = state.balances[key]
         if (!data || data.blockNumber === undefined || data.blockNumber <= blockNumber) {
           state.balances[key] = { value: balance, blockNumber }