Fix balance value in send funds form (#2085)

src/components/App/index.tsx

@@ -21,7 +21,7 @@ import { ETHEREUM_NETWORK } from 'src/config/networks/network.d'
 import { networkSelector } from 'src/logic/wallets/store/selectors'
 import { SAFELIST_ADDRESS, WELCOME_ADDRESS } from 'src/routes/routes'
 import {
-  safeFiatBalancesTotalSelector,
+  safeTotalFiatBalanceSelector,
   safeNameSelector,
   safeParamAddressFromStateSelector,
 } from 'src/logic/safe/store/selectors'
@@ -79,7 +79,7 @@ const App: React.FC = ({ children }) => {
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const safeName = useSelector(safeNameSelector) ?? ''
   const { safeActionsState, onShow, onHide, showSendFunds, hideSendFunds } = useSafeActions()
-  const currentSafeBalance = useSelector(safeFiatBalancesTotalSelector)
+  const currentSafeBalance = useSelector(safeTotalFiatBalanceSelector)
   const currentCurrency = useSelector(currentCurrencySelector)
   const granted = useSelector(grantedSelector)
   const sidebarItems = useSidebarItems()
@@ -88,7 +88,7 @@ const App: React.FC = ({ children }) => {
   useSafeScheduledUpdates(safeLoaded, safeAddress)
 
   const sendFunds = safeActionsState.sendFunds
-  const formattedTotalBalance = currentSafeBalance ? formatAmountInUsFormat(currentSafeBalance) : ''
+  const formattedTotalBalance = currentSafeBalance ? formatAmountInUsFormat(currentSafeBalance.toString()) : ''
   const balance =
     !!formattedTotalBalance && !!currentCurrency ? `${formattedTotalBalance} ${currentCurrency}` : undefined
 

src/logic/safe/hooks/useLoadSafe.tsx

@@ -21,8 +21,8 @@ export const useLoadSafe = (safeAddress?: string): boolean => {
         await dispatch(fetchSafe(safeAddress))
         setIsSafeLoaded(true)
         await dispatch(fetchSafeTokens(safeAddress))
-        dispatch(updateAvailableCurrencies())
-        dispatch(fetchTransactions(safeAddress))
+        await dispatch(updateAvailableCurrencies())
+        await dispatch(fetchTransactions(safeAddress))
         dispatch(addViewedSafe(safeAddress))
       }
     }

src/logic/safe/hooks/useSafeScheduledUpdates.tsx

@@ -3,7 +3,6 @@ import { batch, useDispatch } from 'react-redux'
 
 import { fetchCollectibles } from 'src/logic/collectibles/store/actions/fetchCollectibles'
 import { fetchSafeTokens } from 'src/logic/tokens/store/actions/fetchSafeTokens'
-import { fetchEtherBalance } from 'src/logic/safe/store/actions/fetchEtherBalance'
 import { checkAndUpdateSafe } from 'src/logic/safe/store/actions/fetchSafe'
 import fetchTransactions from 'src/logic/safe/store/actions/transactions/fetchTransactions'
 import { TIMEOUT } from 'src/utils/constants'
@@ -17,25 +16,18 @@ export const useSafeScheduledUpdates = (safeLoaded: boolean, safeAddress?: strin
     // has to run again
     let mounted = true
     const fetchSafeData = async (address: string): Promise<void> => {
-      await batch(async () => {
+      batch(async () => {
         await Promise.all([
-          dispatch(fetchEtherBalance(address)),
           dispatch(fetchSafeTokens(address)),
           dispatch(fetchTransactions(address)),
           dispatch(fetchCollectibles(address)),
           dispatch(checkAndUpdateSafe(address)),
         ])
       })
-
-      if (mounted) {
-        timer.current = window.setTimeout(() => {
-          fetchSafeData(address)
-        }, TIMEOUT * 3)
-      }
     }
 
-    if (safeAddress && safeLoaded) {
-      fetchSafeData(safeAddress)
+    if (safeAddress && safeLoaded && mounted && !timer.current) {
+      timer.current = window.setTimeout(() => fetchSafeData(safeAddress), TIMEOUT * 3)
     }
 
     return () => {

src/logic/safe/store/actions/fetchSafe.ts

@@ -15,7 +15,7 @@ import { makeOwner } from 'src/logic/safe/store/models/owner'
 import { checksumAddress } from 'src/utils/checksumAddress'
 import { SafeOwner, SafeRecordProps } from 'src/logic/safe/store/models/safe'
 import { AppReduxState } from 'src/store'
-import { latestMasterContractVersionSelector } from 'src/logic/safe/store/selectors'
+import { latestMasterContractVersionSelector, safeTotalFiatBalanceSelector } from 'src/logic/safe/store/selectors'
 import { getSafeInfo } from 'src/logic/safe/utils/safeInformation'
 import { getModules } from 'src/logic/safe/utils/modules'
 import { getSpendingLimits } from 'src/logic/safe/utils/spendingLimits'
@@ -46,6 +46,7 @@ export const buildSafe = async (
   safeAdd: string,
   safeName: string,
   latestMasterContractVersion?: string,
+  totalFiatBalance?: number,
 ): Promise<SafeRecordProps> => {
   const safeAddress = checksumAddress(safeAdd)
 
@@ -80,7 +81,7 @@ export const buildSafe = async (
     threshold,
     owners,
     ethBalance,
-    totalFiatBalance: 0,
+    totalFiatBalance: totalFiatBalance || 0,
     nonce,
     currentVersion: currentVersion ?? '',
     needsUpdate,
@@ -160,7 +161,8 @@ export default (safeAdd: string) => async (
     const safeAddress = checksumAddress(safeAdd)
     const safeName = (await getSafeName(safeAddress)) || 'LOADED SAFE'
     const latestMasterContractVersion = latestMasterContractVersionSelector(getState())
-    const safeProps = await buildSafe(safeAddress, safeName, latestMasterContractVersion)
+    const totalFiatBalance = safeTotalFiatBalanceSelector(getState())
+    const safeProps = await buildSafe(safeAddress, safeName, latestMasterContractVersion, totalFiatBalance)
 
     // `updateSafe`, as `loadSafesFromStorage` will populate the store previous to this call
     // and `addSafe` will only add a newly non-existent safe

src/logic/safe/store/selectors/index.ts

@@ -127,6 +127,6 @@ export const getActiveTokensAddressesForAllSafes = createSelector(safesListSelec
   return addresses
 })
 
-export const safeFiatBalancesTotalSelector = createSelector(safeSelector, (currentSafe) => {
-  return currentSafe?.totalFiatBalance.toString()
+export const safeTotalFiatBalanceSelector = createSelector(safeSelector, (currentSafe) => {
+  return currentSafe?.totalFiatBalance
 })

src/logic/tokens/store/actions/fetchSafeTokens.ts

@@ -13,6 +13,7 @@ import { safeActiveTokensSelector, safeSelector } from 'src/logic/safe/store/sel
 import { tokensSelector } from 'src/logic/tokens/store/selectors'
 import BigNumber from 'bignumber.js'
 import { currentCurrencySelector } from 'src/logic/currencyValues/store/selectors'
+import { ZERO_ADDRESS, sameAddress } from 'src/logic/wallets/ethAddresses'
 
 export type BalanceRecord = {
   tokenBalance: string
@@ -38,6 +39,11 @@ const extractDataFromResult = (currentTokens: TokenState) => (
     },
   })
 
+  // Extract network token balance from backend balances
+  if (sameAddress(address, ZERO_ADDRESS)) {
+    acc.ethBalance = humanReadableValue(balance, Number(decimals))
+  }
+
   if (currentTokens && !currentTokens.get(address)) {
     acc.tokens = acc.tokens.push(makeToken({ ...tokenInfo }))
   }