Fix: redirect to Safe creation only if no added Safes

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