From fe7871b4aa4866733e68127da343853f2254b003 Mon Sep 17 00:00:00 2001
From: James Mealy <james@safe.global>
Date: Tue, 6 Feb 2024 15:46:29 +0000
Subject: [PATCH] refactor: fetch safe balances individually when displaying a
 safe list item

---
 src/components/common/OwnedSafeList/index.tsx |  9 +---
 src/components/common/Watchlist/index.tsx     |  8 +---
 src/components/sidebar/SafeListItem/index.tsx | 20 ++++++---
 src/hooks/useSafes.ts                         | 42 ++++++-------------
 4 files changed, 29 insertions(+), 50 deletions(-)

diff --git a/src/components/common/OwnedSafeList/index.tsx b/src/components/common/OwnedSafeList/index.tsx
index e542b5864b..4dc0286e74 100644
--- a/src/components/common/OwnedSafeList/index.tsx
+++ b/src/components/common/OwnedSafeList/index.tsx
@@ -16,10 +16,9 @@ const OwnedSafeList = ({ closeDrawer, isWelcomePage }: { closeDrawer?: () => voi
   const [lastChainId, setLastChainId] = useState<string | undefined>()
   const [isListExpanded, setIsListExpanded] = useState<boolean>(false)
   const router = useRouter()
-  const connectWallet = useConnectWallet()
 
   // use watched safes list here for now. Change later to owned safes
-  const [safes, error, isLoading] = useWatchedSafes()
+  const safes = useWatchedSafes()
 
   const isSingleTxPage = router.pathname === AppRoutes.transactions.tx
 
@@ -52,12 +51,6 @@ const OwnedSafeList = ({ closeDrawer, isWelcomePage }: { closeDrawer?: () => voi
         </Typography>
       </div>
 
-      {isLoading && (
-        <Box py={4} textAlign="center">
-          <CircularProgress size={20} />
-        </Box>
-      )}
-
       {!safes.length && (
         <Box display="flex" flexDirection="column" py={4} sx={{ maxWidth: '250px', margin: 'auto' }}>
           <Typography variant="body2" color="primary.light" textAlign="center" mt={2} mb={2}>
diff --git a/src/components/common/Watchlist/index.tsx b/src/components/common/Watchlist/index.tsx
index 33fff07a63..f7b8de47c9 100644
--- a/src/components/common/Watchlist/index.tsx
+++ b/src/components/common/Watchlist/index.tsx
@@ -34,7 +34,7 @@ const Watchlist = ({
   const [isListExpanded, setIsListExpanded] = useState<boolean>(false)
   const router = useRouter()
 
-  const [safes, error, isLoading] = useWatchedSafes()
+  const safes = useWatchedSafes()
 
   const isSingleTxPage = router.pathname === AppRoutes.transactions.tx
 
@@ -85,12 +85,6 @@ const Watchlist = ({
         </Track>
       </div>
 
-      {isLoading && (
-        <Box py={4} textAlign="center">
-          <CircularProgress size={20} />
-        </Box>
-      )}
-
       {!safes.length && (
         <Box display="flex" flexDirection="column" alignItems="center" sx={{ paddingY: '26px' }}>
           <Typography variant="body2" color="primary.light" textAlign="center">
diff --git a/src/components/sidebar/SafeListItem/index.tsx b/src/components/sidebar/SafeListItem/index.tsx
index d2baab768f..0feee9f9e9 100644
--- a/src/components/sidebar/SafeListItem/index.tsx
+++ b/src/components/sidebar/SafeListItem/index.tsx
@@ -25,6 +25,8 @@ import { OPEN_SAFE_LABELS, OVERVIEW_EVENTS } from '@/services/analytics'
 import ChainIndicator from '@/components/common/ChainIndicator'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import { useTheme } from '@mui/material/styles'
+import { getBalances } from '@safe-global/safe-gateway-typescript-sdk'
+import useAsync from '@/hooks/useAsync'
 
 const SafeListItem = ({
   address,
@@ -63,6 +65,12 @@ const SafeListItem = ({
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
 
+  const currency = 'USD'
+  const [balance] = useAsync(
+    () => getBalances(chainId, address, currency).then((result) => result.fiatTotal),
+    [chainId, address, currency],
+  )
+
   // Scroll to the current Safe
   useEffect(() => {
     if (isCurrentSafe && shouldScrollToSafe) {
@@ -121,11 +129,13 @@ const SafeListItem = ({
                       />
                     }
                   />
-                  <ListItemText
-                    className={css.accountBalance}
-                    primaryTypographyProps={{ variant: 'body2' }}
-                    primary={<b>${fiatBalance}</b>}
-                  />
+                  {balance && (
+                    <ListItemText
+                      className={css.accountBalance}
+                      primaryTypographyProps={{ variant: 'body2' }}
+                      primary={<b>${balance}</b>}
+                    />
+                  )}
                 </div>
                 <ChainIndicator chainId={chainId} inline showName={isWelcomePage && !isMobile} />
               </div>
diff --git a/src/hooks/useSafes.ts b/src/hooks/useSafes.ts
index abc4697cf9..8f01f42b7e 100644
--- a/src/hooks/useSafes.ts
+++ b/src/hooks/useSafes.ts
@@ -23,39 +23,21 @@ const sortChainsByCurrentChain = (chains: ChainInfo[], currentChainId: string):
   return currentChain ? [currentChain, ...otherChains] : chains
 }
 
-export const useWatchedSafes = (): [SafeListItemDetails[], Error | undefined, boolean] => {
+export const useWatchedSafes = (): SafeListItemDetails[] => {
   const currentChainId = useChainId()
   const { configs } = useChains()
   const watchedSafes = useAppSelector(selectAllAddedSafes)
-  const currency = useAppSelector(selectCurrency)
   const chains = useMemo(() => sortChainsByCurrentChain(configs, currentChainId), [configs, currentChainId])
 
-  const [allWatchedSafesWithBalances, error, loading] = useAsync<SafeListItemDetails[]>(
-    () => {
-      let watchedSafesOnAllChains: SafeListItemDetails[] = []
-      for (const chain of chains) {
-        const watchedSafesOnChain = watchedSafes[chain.chainId] ?? {}
-        const watchedSafesAdressesOnChain = Object.keys(watchedSafesOnChain)
-        const watchedSafesWithChain = watchedSafesAdressesOnChain.map((safeAddress) => {
-          const { threshold, owners } = watchedSafesOnChain[safeAddress]
-          return { safeAddress, chain, threshold, owners }
-        })
-        watchedSafesOnAllChains = [...watchedSafesOnAllChains, ...watchedSafesWithChain]
-      }
-      const promises = watchedSafesOnAllChains.map(async ({ safeAddress, chain, threshold, owners }) => {
-        const fiatBalance = await getBalances(chain.chainId, safeAddress, currency).then((result) => result.fiatTotal)
-        return {
-          safeAddress,
-          chain,
-          fiatBalance,
-          threshold,
-          owners,
-        }
-      })
-      return Promise.all(promises)
-    },
-    [watchedSafes, chains],
-    false,
-  )
-  return [allWatchedSafesWithBalances ?? [], error, loading]
+  let watchedSafesOnAllChains: SafeListItemDetails[] = []
+  for (const chain of chains) {
+    const watchedSafesOnChain = watchedSafes[chain.chainId] ?? {}
+    const watchedSafesAdressesOnChain = Object.keys(watchedSafesOnChain)
+    const watchedSafesWithChain = watchedSafesAdressesOnChain.map((safeAddress) => {
+      const { threshold, owners } = watchedSafesOnChain[safeAddress]
+      return { safeAddress, chain, threshold, owners }
+    })
+    watchedSafesOnAllChains = [...watchedSafesOnAllChains, ...watchedSafesWithChain]
+  }
+  return watchedSafesOnAllChains
 }