fix loading tokens from storage

src/index.js

@@ -6,7 +6,9 @@ import ReactDOM from 'react-dom'
 import Root from '~/components/Root'
 import { store } from '~/store'
 import loadSafesFromStorage from '~/routes/safe/store/actions/loadSafesFromStorage'
+import loadActiveTokens from '~/logic/tokens/store/actions/loadActiveTokens'
 
+store.dispatch(loadActiveTokens())
 store.dispatch(loadSafesFromStorage())
 
 ReactDOM.render(<Root />, document.getElementById('root'))

src/logic/tokens/store/actions/fetchTokens.js

@@ -38,7 +38,7 @@ const fetchTokenList = async () => {
   return axios.get(url, errMsg)
 }
 
-export const fetchTokens = (safeAddress: string) => async (dispatch: ReduxDispatch<GlobalState>) => {
+export const fetchTokens = () => async (dispatch: ReduxDispatch<GlobalState>) => {
   try {
     const {
       data: { results: tokenList },
@@ -48,7 +48,7 @@ export const fetchTokens = (safeAddress: string) => async (dispatch: ReduxDispat
       tokenList.forEach((token: TokenProps) => map.set(token.address, makeToken(token)))
     })
 
-    dispatch(saveTokens(safeAddress, tokensMap))
+    dispatch(saveTokens(tokensMap))
   } catch (err) {
     // eslint-disable-next-line
     console.log('Error fetching token list ' + err)

src/logic/tokens/store/actions/loadActiveTokens.js

@@ -1,6 +1,6 @@
 // @flow
 import type { Dispatch as ReduxDispatch } from 'redux'
-import { List, Map } from 'immutable'
+import { Map, List } from 'immutable'
 import { type TokenProps, type Token, makeToken } from '~/logic/tokens/store/model/token'
 import { type GlobalState } from '~/store/index'
 import { getActiveTokens } from '~/logic/tokens/utils/tokensStorage'
@@ -8,13 +8,13 @@ import saveTokens from './saveTokens'
 
 const loadActiveTokens = () => async (dispatch: ReduxDispatch<GlobalState>) => {
   try {
-    const tokens: List<TokenProps> = await getActiveTokens()
+    const tokens: Map<string, TokenProps> = await getActiveTokens()
 
-    const tokenRecords: Map<string, Token> = Map().withMutations((map) => {
-      tokens.forEach(token => map.set(token.address, makeToken(token)))
-    })
+    const tokenRecordsList: List<Token> = List(
+      Object.values(tokens).map(token => makeToken(token)),
+    )
 
-    dispatch(saveTokens(tokenRecords))
+    dispatch(saveTokens(tokenRecordsList))
   } catch (err) {
     // eslint-disable-next-line
     console.error('Error while loading active tokens from storage:', err)

src/logic/tokens/store/actions/saveTokens.js

@@ -1,24 +1,17 @@
 // @flow
-import { Map, List } from 'immutable'
+import { Map } from 'immutable'
 import { createAction } from 'redux-actions'
-import type { Dispatch as ReduxDispatch } from 'redux'
 import { type Token } from '~/logic/tokens/store/model/token'
-import { ensureOnceAsync } from '~/utils/singleton'
-import { type GlobalState } from '~/store/index'
-import { setActiveTokens } from '~/logic/tokens/utils/tokensStorage'
-import { calculateActiveErc20TokensFrom } from '~/logic/tokens/utils/tokenHelpers'
 
 export const ADD_TOKENS = 'ADD_TOKENS'
 
 type TokenProps = {
-  safeAddress: string,
   tokens: Map<string, Token>,
 }
 
 const addTokens = createAction<string, *, *>(
   ADD_TOKENS,
-  (safeAddress: string, tokens: Map<string, Token>): TokenProps => ({
-    safeAddress,
+  (tokens: Map<string, Token>): TokenProps => ({
     tokens,
   }),
 )

src/logic/tokens/utils/tokensStorage.js

@@ -1,5 +1,5 @@
 // @flow
-import { List } from 'immutable'
+import { List, Map } from 'immutable'
 import { type Token, type TokenProps } from '~/logic/tokens/store/model/token'
 import { loadFromStorage, saveToStorage } from '~/utils/storage'
 
@@ -10,7 +10,7 @@ export const CUSTOM_TOKENS_KEY = 'CUSTOM_TOKENS'
 // to avoid iterating a large amount of data of tokens from the backend
 // Custom tokens should be saved too unless they're deleted (marking them as inactive doesn't count)
 
-export const setActiveTokens = async (tokens: List<TokenProps>) => {
+export const setActiveTokens = async (tokens: Map<string, Token>) => {
   try {
     await saveToStorage(ACTIVE_TOKENS_KEY, tokens.toJS())
   } catch (err) {
@@ -19,10 +19,10 @@ export const setActiveTokens = async (tokens: List<TokenProps>) => {
   }
 }
 
-export const getActiveTokens = async (): Promise<List<TokenProps>> => {
+export const getActiveTokens = async (): Promise<Map<string, TokenProps>> => {
   const data = await loadFromStorage(ACTIVE_TOKENS_KEY)
 
-  return data ? List(data) : List()
+  return data || Map({})
 }
 
 export const getCustomTokens = async (): Promise<List<TokenProps>> => {

src/routes/safe/store/middleware/safeStorage.js

@@ -4,7 +4,11 @@ import { UPDATE_SAFE } from '~/routes/safe/store/actions/updateSafe'
 import type { Store, AnyAction } from 'redux'
 import { type GlobalState } from '~/store/'
 import { saveSafes, setOwners } from '~/logic/safe/utils'
-import { safesMapSelector } from '~/routes/safeList/store/selectors/index'
+import { safesMapSelector } from '~/routes/safeList/store/selectors'
+import { getActiveTokensAddressesForAllSafes } from '~/routes/safe/store/selectors'
+import { tokensSelector } from '~/logic/tokens/store/selectors'
+import type { Token } from '~/logic/tokens/store/model/token'
+import { setActiveTokens } from '~/logic/tokens/utils/tokensStorage'
 
 const watchedActions = [ADD_SAFE, UPDATE_SAFE]
 
@@ -16,6 +20,22 @@ const safeStorageMware = (store: Store<GlobalState>) => (next: Function) => asyn
     const safes = safesMapSelector(state)
     saveSafes(safes.toJSON())
 
+    // recalculate active tokens
+    if (action.payload.activeTokens) {
+      const tokens = tokensSelector(state)
+      const activeTokenAddresses = getActiveTokensAddressesForAllSafes(state)
+
+      const activeTokens = tokens.withMutations((map) => {
+        map.forEach((token: Token) => {
+          if (!activeTokenAddresses.has(token.address)) {
+            map.remove(token.address)
+          }
+        })
+      })
+
+      setActiveTokens(activeTokens)
+    }
+
     if (action.type === ADD_SAFE) {
       const { safe } = action.payload
       setOwners(safe.address, safe.owners)