remove cdu, otherwise it will fail on many token updates because of inconsistent request finishes, debouncing tbd

src/routes/safe/component/Balances/Tokens/index.jsx

@@ -25,6 +25,7 @@ import Spacer from '~/components/Spacer'
 import Row from '~/components/layout/Row'
 import { ETH_ADDRESS } from '~/logic/tokens/utils/tokenHelpers'
 import { type Token } from '~/logic/tokens/store/model/token'
+import { type SafeToken } from '~/routes/safe/store/models/safeToken'
 import actions, { type Actions } from './actions'
 import TokenPlaceholder from './assets/token_placeholder.png'
 import { styles } from './style'
@@ -34,6 +35,7 @@ type Props = Actions & {
   classes: Object,
   tokens: List<Token>,
   safeAddress: string,
+  activeTokens: List<SafeToken>
 }
 
 type State = {
@@ -68,7 +70,7 @@ class Tokens extends React.Component<Props, State> {
   onSwitch = (token: Token) => () => {
     const { safeAddress, updateActiveTokens } = this.props
 
-    updateActiveTokens(safeAddress, token.address)
+    updateActiveTokens(safeAddress, token)
   }
 
   setImageToPlaceholder = (e) => {

src/routes/safe/container/index.jsx

@@ -29,13 +29,13 @@ class SafeView extends React.Component<Props> {
     }, TIMEOUT)
   }
 
-  componentDidUpdate(prevProps) {
-    const { activeTokens } = this.props
+  // componentDidUpdate(prevProps) {
+  //   const { activeTokens } = this.props
 
-    if (!activeTokens.equals(prevProps.activeTokens)) {
-      this.checkForUpdates()
-    }
-  }
+  //   if (!activeTokens.equals(prevProps.activeTokens)) {
+  //     this.checkForUpdates()
+  //   }
+  // }
 
   componentWillUnmount() {
     clearInterval(this.intervalId)

src/routes/safe/store/actions/updateActiveTokens.js

@@ -6,7 +6,8 @@ import type { SafeToken } from '~/routes/safe/store/models/safeToken'
 import SafeTokenRecord from '~/routes/safe/store/models/safeToken'
 import { safeTokensSelector } from '~/routes/safe/store/selectors/index'
 import { SAFE_PARAM_ADDRESS } from '~/routes/routes'
-import updateSafe from './updateSafe'
+import type { Token } from '~/logic/tokens/store/model/token'
+import updateSafe from '~/routes/safe/store/actions/updateSafe'
 
 // the selector uses ownProps argument/router props to get the address of the safe
 // so in order to use it I had to recreate the same structure
@@ -18,11 +19,11 @@ const generateMatchProps = (safeAddress: string) => ({
   },
 })
 
-const updateActiveTokens = (safeAddress: string, tokenAddress: string) => async (
+const updateActiveTokens = (safeAddress: string, token: Token) => async (
   dispatch: ReduxDispatch<GlobalState>,
   getState: GetState<GlobalState>,
 ) => {
-  const token: SafeToken = SafeTokenRecord({ address: tokenAddress })
+  const safeTokenInstance: SafeToken = SafeTokenRecord({ address: token.address })
   const state = getState()
   const safeTokens: List<SafeToken> = safeTokensSelector(state, generateMatchProps(safeAddress))
   const index = safeTokens.findIndex(safeToken => safeToken.address === token.address)
@@ -31,7 +32,7 @@ const updateActiveTokens = (safeAddress: string, tokenAddress: string) => async
   if (index !== -1) {
     updatedTokens = safeTokens.delete(index)
   } else {
-    updatedTokens = safeTokens.push(token)
+    updatedTokens = safeTokens.push(safeTokenInstance)
   }
 
   dispatch(updateSafe({ address: safeAddress, tokens: updatedTokens }))