fix token balance updating

src/routes/safe/container/index.jsx

@@ -16,12 +16,12 @@ const TIMEOUT = process.env.NODE_ENV === 'test' ? 1500 : 15000
 class SafeView extends React.Component<Props> {
   componentDidMount() {
     const {
-      fetchSafe, loadActiveTokens, activeTokens, safeUrl, fetchTokenBalances, safe,
+      fetchSafe, loadActiveTokens, activeTokens, safeUrl, fetchTokenBalances,
     } = this.props
 
     fetchSafe(safeUrl)
     // loadActiveTokens(safeUrl)
-    fetchTokenBalances(safe, activeTokens)
+    fetchTokenBalances(safeUrl, activeTokens)
 
     this.intervalId = setInterval(() => {
       // update in another function so it uses up-to-date props values
@@ -29,17 +29,25 @@ class SafeView extends React.Component<Props> {
     }, TIMEOUT)
   }
 
+  componentDidUpdate(prevProps) {
+    const { activeTokens } = this.props
+
+    if (!activeTokens.equals(prevProps.activeTokens)) {
+      this.checkForUpdates()
+    }
+  }
+
   componentWillUnmount() {
     clearInterval(this.intervalId)
   }
 
   checkForUpdates() {
     const {
-      safeUrl, activeTokens, fetchSafe, fetchTokenBalances, safe,
+      safeUrl, activeTokens, fetchSafe, fetchTokenBalances,
     } = this.props
 
     fetchSafe(safeUrl, true)
-    fetchTokenBalances(safe, activeTokens)
+    fetchTokenBalances(safeUrl, activeTokens)
   }
 
   intervalId: IntervalID

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

@@ -46,6 +46,7 @@ export default (safeAddress: string, update: boolean = false) => async (dispatch
     const safeProps: SafeProps = await buildSafe(safeAddress, safeName)
 
     if (update) {
+      console.log(safeProps)
       dispatch(updateSafe(safeProps))
     } else {
       dispatch(addSafe(safeProps))

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

@@ -6,7 +6,6 @@ import { type GlobalState } from '~/store/index'
 import { type Token } from '~/logic/tokens/store/model/token'
 import SafeTokenRecord from '~/routes/safe/store/models/safeToken'
 import { getStandardTokenContract } from '~/logic/tokens/store/actions/fetchTokens'
-import type { Safe } from '~/routes/safe/store/models/safe'
 import updateSafe from './updateSafe'
 import { ETH_ADDRESS } from '~/logic/tokens/utils/tokenHelpers'
 
@@ -28,22 +27,24 @@ export const calculateBalanceOf = async (tokenAddress: string, safeAddress: stri
   return new BigNumber(balance).div(10 ** decimals).toString()
 }
 
-const fetchTokenBalances = (safe: Safe, tokens: List<Token>) => async (dispatch: ReduxDispatch<GlobalState>) => {
-  if (!safe || !tokens || !tokens.size) {
+const fetchTokenBalances = (safeAddress: string, tokens: List<Token>) => async (
+  dispatch: ReduxDispatch<GlobalState>,
+) => {
+  if (!safeAddress || !tokens || !tokens.size) {
     return
   }
 
   try {
     const withBalances = await Promise.all(
-      tokens.map(async token => SafeTokenRecord({
-        address: token.address,
-        balance: await calculateBalanceOf(token.address, safe.address, token.decimals),
-      })),
+      tokens
+        .filter(token => token.address !== ETH_ADDRESS)
+        .map(async token => SafeTokenRecord({
+          address: token.address,
+          balance: await calculateBalanceOf(token.address, safeAddress, token.decimals),
+        })),
     )
 
-    const safeWithBalances = safe.set('tokens', List(withBalances))
-
-    dispatch(updateSafe(safeWithBalances))
+    dispatch(updateSafe({ address: safeAddress, tokens: List(withBalances) }))
   } catch (err) {
     // eslint-disable-next-line
     console.error('Error while loading active tokens from storage:', err)