fix: display empty watchlist message and use user preferred currency

safe-global · Feb 6, 2024 · 885b9f6 · 885b9f6
1 parent 07267d0
commit 885b9f6
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,