Fix: redirect to Safe creation only if no added Safes

src/components/sidebar/SafeList/index.tsx

@@ -107,25 +107,26 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement =
           My Safe Accounts
         </Typography>
 
-        {!isWelcomePage && (
-          <Track {...OVERVIEW_EVENTS.ADD_SAFE}>
-            <Link
-              href={{ pathname: AppRoutes.welcome.index, query: { chain: currentChain?.shortName } }}
-              passHref
-              legacyBehavior
+        <Track {...OVERVIEW_EVENTS.ADD_SAFE}>
+          <Link
+            href={{
+              pathname: isWelcomePage ? AppRoutes.newSafe.create : AppRoutes.welcome.index,
+              query: { chain: currentChain?.shortName },
+            }}
+            passHref
+            legacyBehavior
+          >
+            <Button
+              disableElevation
+              size="small"
+              variant="outlined"
+              onClick={closeDrawer}
+              startIcon={<SvgIcon component={AddIcon} inheritViewBox fontSize="small" />}
             >
-              <Button
-                disableElevation
-                size="small"
-                variant="outlined"
-                onClick={closeDrawer}
-                startIcon={<SvgIcon component={AddIcon} inheritViewBox fontSize="small" />}
-              >
-                Add
-              </Button>
-            </Link>
-          </Track>
-        )}
+              Add
+            </Button>
+          </Link>
+        </Track>
       </div>
 
       {hasNoSafes && (

src/components/welcome/SafeListDrawer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import SafeList from '@/components/sidebar/SafeList'
 import { DataWidget } from '@/components/welcome/SafeListDrawer/DataWidget'
 import { Button, Drawer, Typography } from '@mui/material'
@@ -8,15 +8,22 @@ import { selectTotalAdded } from '@/store/addedSafesSlice'
 import useOwnedSafes from '@/hooks/useOwnedSafes'
 import drawerCSS from '@/components/sidebar/Sidebar/styles.module.css'
 import css from './styles.module.css'
+import ExternalStore from '@/services/ExternalStore'
+
+const { useStore, setStore } = new ExternalStore<boolean>(false)
+
+export const openSafeListDrawer = () => {
+  setStore(true)
+}
 
 const SafeListDrawer = () => {
   const numberOfAddedSafes = useAppSelector(selectTotalAdded)
   const ownedSafes = useOwnedSafes()
   const numberOfOwnedSafes = Object.values(ownedSafes).reduce((acc, curr) => acc + curr.length, 0)
   const totalNumberOfSafes = numberOfOwnedSafes + numberOfAddedSafes
-  const [showSidebar, setShowSidebar] = useState(false)
+  const showSidebar = useStore()
 
-  const closeSidebar = () => setShowSidebar(false)
+  const closeSidebar = () => setStore(false)
 
   if (totalNumberOfSafes <= 0) {
     return null
@@ -39,7 +46,7 @@ const SafeListDrawer = () => {
         variant="contained"
         color="background"
         startIcon={<ChevronRightIcon />}
-        onClick={() => setShowSidebar(true)}
+        onClick={() => setStore(true)}
       >
         <Typography className={css.buttonText} fontWeight="bold">
           My Safe Accounts{' '}

src/components/welcome/WelcomeLogin/index.tsx

@@ -10,27 +10,44 @@ import WalletLogin from './WalletLogin'
 import { LOAD_SAFE_EVENTS, CREATE_SAFE_EVENTS } from '@/services/analytics/events/createLoadSafe'
 import Track from '@/components/common/Track'
 import { trackEvent } from '@/services/analytics'
+import { useAppSelector } from '@/store'
+import { selectAllAddedSafes } from '@/store/addedSafesSlice'
+import { openSafeListDrawer } from '../SafeListDrawer'
+import { isEmpty } from 'lodash'
+
+const useHasSafes = () => {
+  const addedSafes = useAppSelector(selectAllAddedSafes)
+  return Object.values(addedSafes).some((chain) => !isEmpty(chain))
+}
 
 const WelcomeLogin = () => {
   const router = useRouter()
   const isSocialLoginEnabled = useHasFeature(FEATURES.SOCIAL_LOGIN)
+  const hasSafes = useHasSafes()
 
-  const continueToCreation = () => {
-    trackEvent(CREATE_SAFE_EVENTS.OPEN_SAFE_CREATION)
-    router.push({ pathname: AppRoutes.newSafe.create, query: router.query })
+  const onLogin = () => {
+    if (hasSafes) {
+      openSafeListDrawer()
+    } else {
+      trackEvent(CREATE_SAFE_EVENTS.OPEN_SAFE_CREATION)
+      router.push({ pathname: AppRoutes.newSafe.create, query: router.query })
+    }
   }
 
   return (
     <Paper className={css.loginCard} data-testid="welcome-login">
       <Box className={css.loginContent}>
         <SvgIcon component={SafeLogo} inheritViewBox sx={{ height: '24px', width: '80px' }} />
+
         <Typography variant="h6" mt={6} fontWeight={700}>
           Create Account
         </Typography>
+
         <Typography mb={2} textAlign="center">
           Choose how you would like to create your Safe Account
         </Typography>
-        <WalletLogin onLogin={continueToCreation} />
+
+        <WalletLogin onLogin={onLogin} />
 
         {isSocialLoginEnabled && (
           <>
@@ -40,13 +57,14 @@ const WelcomeLogin = () => {
               </Typography>
             </Divider>
 
-            <SocialSigner onLogin={continueToCreation} />
+            <SocialSigner onLogin={onLogin} />
           </>
         )}
 
         <Typography mt={2} textAlign="center">
           Already have a Safe Account?
         </Typography>
+
         <Track {...LOAD_SAFE_EVENTS.LOAD_BUTTON}>
           <Link color="primary" href={AppRoutes.newSafe.load}>
             Add existing one