From 885b9f68cd75e714fb3dc654c7a6d37f485eeb79 Mon Sep 17 00:00:00 2001
From: James Mealy <james@safe.global>
Date: Tue, 6 Feb 2024 12:38:16 +0000
Subject: [PATCH] fix: display empty watchlist message and use user preferred
 currency

---
 src/components/common/Watchlist/index.tsx         | 6 +++---
 src/components/common/Watchlist/styles.module.css | 2 +-
 src/hooks/useIsSidebarRoute.ts                    | 1 +
 src/hooks/useSafes.ts                             | 4 +++-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/common/Watchlist/index.tsx b/src/components/common/Watchlist/index.tsx
index d1cbdbbd96..33fff07a63 100644
--- a/src/components/common/Watchlist/index.tsx
+++ b/src/components/common/Watchlist/index.tsx
@@ -91,9 +91,9 @@ const Watchlist = ({
         </Box>
       )}
 
-      {!safes && (
-        <Box display="flex" flexDirection="column" alignItems="center" py={10}>
-          <Typography variant="body2" color="primary.light" textAlign="center" mt={3}>
+      {!safes.length && (
+        <Box display="flex" flexDirection="column" alignItems="center" sx={{ paddingY: '26px' }}>
+          <Typography variant="body2" color="primary.light" textAlign="center">
             Add any Safe account to the watchlist
           </Typography>
         </Box>
diff --git a/src/components/common/Watchlist/styles.module.css b/src/components/common/Watchlist/styles.module.css
index d1fa8a5fe2..f0b198277d 100644
--- a/src/components/common/Watchlist/styles.module.css
+++ b/src/components/common/Watchlist/styles.module.css
@@ -2,7 +2,7 @@
   background-color: var(--color-background-paper);
   border-radius: 8px;
   padding-top: var(--space-3);
-  padding-bottom: var(--space-2);
+  padding-bottom: var(--space-3);
   margin: var(--space-3) var(--space-2) var(--space-2);
 }
 
diff --git a/src/hooks/useIsSidebarRoute.ts b/src/hooks/useIsSidebarRoute.ts
index 287fc689cd..cc6d6560d2 100644
--- a/src/hooks/useIsSidebarRoute.ts
+++ b/src/hooks/useIsSidebarRoute.ts
@@ -8,6 +8,7 @@ const NO_SIDEBAR_ROUTES = [
   AppRoutes.newSafe.load,
   AppRoutes.index,
   AppRoutes.welcome.index,
+  AppRoutes.welcome.login,
   AppRoutes.welcome.socialLogin,
   AppRoutes.imprint,
   AppRoutes.privacy,
diff --git a/src/hooks/useSafes.ts b/src/hooks/useSafes.ts
index 7e066fc593..abc4697cf9 100644
--- a/src/hooks/useSafes.ts
+++ b/src/hooks/useSafes.ts
@@ -7,6 +7,7 @@ import useChains from '@/hooks/useChains'
 import { useAppSelector } from '@/store'
 import { selectAllAddedSafes } from '@/store/addedSafesSlice'
 import useAsync from './useAsync'
+import { selectCurrency } from '@/store/settingsSlice'
 
 type SafeListItemDetails = {
   chain: ChainInfo
@@ -26,6 +27,7 @@ export const useWatchedSafes = (): [SafeListItemDetails[], Error | undefined, bo
   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[]>(
@@ -41,7 +43,7 @@ export const useWatchedSafes = (): [SafeListItemDetails[], Error | undefined, bo
         watchedSafesOnAllChains = [...watchedSafesOnAllChains, ...watchedSafesWithChain]
       }
       const promises = watchedSafesOnAllChains.map(async ({ safeAddress, chain, threshold, owners }) => {
-        const fiatBalance = await getBalances(chain.chainId, safeAddress, 'USD').then((result) => result.fiatTotal)
+        const fiatBalance = await getBalances(chain.chainId, safeAddress, currency).then((result) => result.fiatTotal)
         return {
           safeAddress,
           chain,