feat: change redirect behaviour after login on welcome page

src/components/common/SocialSigner/index.tsx

@@ -45,7 +45,7 @@ type SocialSignerLoginProps = {
   wallet: ReturnType<typeof useWallet>
   supportedChains: ReturnType<typeof useGetSupportedChains>
   isMPCLoginEnabled: ReturnType<typeof useIsSocialWalletEnabled>
-  onLogin?: () => void
+  onLogin?: (address: string) => void
   onRequirePassword?: () => void
 }
 
@@ -76,6 +76,15 @@ export const SocialSigner = ({
     [setTxFlow, socialWalletService],
   )
 
+  const afterLogin = async () => {
+    if (!socialWalletService) return
+
+    const address = await socialWalletService.getSignerAddress()
+    if (address) {
+      onLogin?.(address)
+    }
+  }
+
   const login = async () => {
     if (!socialWalletService) return
 
@@ -86,13 +95,18 @@ export const SocialSigner = ({
 
       if (status === COREKIT_STATUS.LOGGED_IN) {
         setLoginPending(false)
+        afterLogin()
         return
       }
 
       if (status === COREKIT_STATUS.REQUIRED_SHARE) {
         onRequirePassword?.()
 
-        setTxFlow(<PasswordRecovery recoverFactorWithPassword={recoverPassword} />, () => setLoginPending(false), false)
+        setTxFlow(
+          <PasswordRecovery recoverFactorWithPassword={recoverPassword} onSuccess={afterLogin} />,
+          () => setLoginPending(false),
+          false,
+        )
         return
       }
     } catch (err) {
@@ -108,12 +122,12 @@ export const SocialSigner = ({
   return (
     <>
       <Box display="flex" flexDirection="column" gap={2} sx={{ width: '100%' }}>
-        {isSocialLogin && userInfo ? (
+        {isSocialLogin && userInfo && wallet ? (
           <Track {...CREATE_SAFE_EVENTS.CONTINUE_TO_CREATION}>
             <Button
               variant="outlined"
               sx={{ px: 2, py: 1, borderWidth: '1px !important' }}
-              onClick={onLogin}
+              onClick={() => onLogin?.(wallet.address)}
               size="small"
               disabled={isDisabled}
               fullWidth

src/components/welcome/NewSafe.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Box, Grid, SvgIcon, Typography } from '@mui/material'
 import css from './styles.module.css'
 import CheckFilled from '@/public/images/common/check-filled.svg'
@@ -16,16 +16,17 @@ const BulletListItem = ({ text }: { text: string }) => (
 )
 
 const NewSafe = () => {
+  const [drawerOpen, setDrawerOpen] = useState(false)
   return (
     <>
       <Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse">
         <Grid item xs={12} lg={6}>
-          <WelcomeLogin />
+          <WelcomeLogin setOpenSafeList={setDrawerOpen} />
         </Grid>
         <Grid item xs={12} lg={6} flex={1}>
           <div className={css.content}>
             <Box minWidth={{ md: 480 }} className={css.sidebar}>
-              <SafeListDrawer />
+              <SafeListDrawer open={drawerOpen} setOpen={setDrawerOpen} />
             </Box>
 
             <Typography variant="h1" fontSize={[44, null, 52]} lineHeight={1} letterSpacing={-1.5} color="static.main">

src/components/welcome/NewSafeSocial.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Box, Button, Grid, Typography } from '@mui/material'
 import css from './styles.module.css'
 import Link from 'next/link'
@@ -28,16 +28,18 @@ const MarqueeItem = () => {
 }
 
 const NewSafeSocial = () => {
+  const [drawerOpen, setDrawerOpen] = useState(false)
+
   return (
     <>
       <Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse">
         <Grid item xs={12} lg={6}>
-          <WelcomeLogin />
+          <WelcomeLogin setOpenSafeList={setDrawerOpen} />
         </Grid>
         <Grid item xs={12} lg={6} flex={1}>
           <div className={css.content}>
             <Box minWidth={{ md: 480 }} className={css.sidebar}>
-              <SafeListDrawer />
+              <SafeListDrawer open={drawerOpen} setOpen={setDrawerOpen} />
             </Box>
 
             <Box pt={5} alignSelf="center" margin="auto">

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'
@@ -9,22 +9,21 @@ import useOwnedSafes from '@/hooks/useOwnedSafes'
 import drawerCSS from '@/components/sidebar/Sidebar/styles.module.css'
 import css from './styles.module.css'
 
-const SafeListDrawer = () => {
+const SafeListDrawer = ({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) => {
   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 closeSidebar = () => setShowSidebar(false)
+  const closeSidebar = () => setOpen(false)
 
   if (totalNumberOfSafes <= 0) {
     return null
   }
 
   return (
     <>
-      <Drawer variant="temporary" anchor="left" open={showSidebar} onClose={closeSidebar}>
+      <Drawer variant="temporary" anchor="left" open={open} onClose={closeSidebar}>
         <div className={drawerCSS.drawer}>
           <SafeList closeDrawer={closeSidebar} />
 
@@ -39,7 +38,7 @@ const SafeListDrawer = () => {
         variant="contained"
         color="background"
         startIcon={<ChevronRightIcon />}
-        onClick={() => setShowSidebar(true)}
+        onClick={() => setOpen(true)}
       >
         <Typography className={css.buttonText} fontWeight="bold">
           My Safe Accounts{' '}

src/components/welcome/WelcomeLogin/WalletLogin.tsx

@@ -6,17 +6,25 @@ import { CREATE_SAFE_EVENTS } from '@/services/analytics'
 import { Box, Button, Typography } from '@mui/material'
 import { EthHashInfo } from '@safe-global/safe-react-components'
 
-const WalletLogin = ({ onLogin }: { onLogin: () => void }) => {
+const WalletLogin = ({ onLogin }: { onLogin: (address: string) => void }) => {
   const wallet = useWallet()
   const connectWallet = useConnectWallet()
 
   const isSocialLogin = isSocialLoginWallet(wallet?.label)
 
+  const login = async () => {
+    const walletState = await connectWallet()
+
+    if (walletState && walletState.length > 0 && walletState[0].accounts.length > 0) {
+      onLogin(walletState[0].accounts[0].address)
+    }
+  }
+
   if (wallet !== null && !isSocialLogin) {
     return (
       <Box sx={{ width: '100%' }}>
         <Track {...CREATE_SAFE_EVENTS.CONTINUE_TO_CREATION}>
-          <Button variant="contained" sx={{ padding: '8px 16px' }} fullWidth onClick={onLogin}>
+          <Button variant="contained" sx={{ padding: '8px 16px' }} fullWidth onClick={() => onLogin(wallet.address)}>
             <Box
               width="100%"
               justifyContent="space-between"
@@ -47,14 +55,7 @@ const WalletLogin = ({ onLogin }: { onLogin: () => void }) => {
   }
 
   return (
-    <Button
-      onClick={connectWallet}
-      sx={{ minHeight: '42px' }}
-      variant="contained"
-      size="small"
-      disableElevation
-      fullWidth
-    >
+    <Button onClick={login} sx={{ minHeight: '42px' }} variant="contained" size="small" disableElevation fullWidth>
       Connect wallet
     </Button>
   )

src/components/welcome/WelcomeLogin/index.tsx

@@ -10,12 +10,21 @@ 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 { getOwnedSafes } from '@safe-global/safe-gateway-typescript-sdk'
+import useChainId from '@/hooks/useChainId'
+import { checksumAddress } from '@/utils/addresses'
 
-const WelcomeLogin = () => {
+const WelcomeLogin = ({ setOpenSafeList }: { setOpenSafeList: (open: boolean) => void }) => {
   const router = useRouter()
   const isSocialLoginEnabled = useHasFeature(FEATURES.SOCIAL_LOGIN)
+  const currentChainId = useChainId()
 
-  const continueToCreation = () => {
+  const continueToCreation = async (address: string) => {
+    const ownedSafes = await getOwnedSafes(currentChainId, checksumAddress(address))
+    if (ownedSafes.safes.length > 0) {
+      setOpenSafeList(true)
+      return
+    }
     trackEvent(CREATE_SAFE_EVENTS.OPEN_SAFE_CREATION)
     router.push({ pathname: AppRoutes.newSafe.create, query: router.query })
   }

src/services/mpc/SocialWalletService.ts

@@ -35,6 +35,14 @@ class SocialWalletService implements ISocialWalletService {
     return this.securityQuestionRecovery.isEnabled()
   }
 
+  async getSignerAddress(): Promise<string | undefined> {
+    if (!this.mpcCoreKit.provider) {
+      return undefined
+    }
+    const accounts = await this.mpcCoreKit.provider.request({ method: 'eth_accounts', params: [] })
+    return (accounts as string[])[0]
+  }
+
   async enableMFA(oldPassword: string | undefined, newPassword: string): Promise<void> {
     try {
       // 1. setup device factor with password recovery
@@ -110,7 +118,6 @@ class SocialWalletService implements ISocialWalletService {
   private async finalizeLogin() {
     if (this.mpcCoreKit.status === COREKIT_STATUS.LOGGED_IN) {
       await this.mpcCoreKit.commitChanges()
-      await this.mpcCoreKit.provider?.request({ method: 'eth_accounts', params: [] })
       await this.onConnect()
     }
   }

src/services/mpc/interfaces.ts

@@ -49,4 +49,6 @@ export interface ISocialWalletService {
   getUserInfo(): UserInfo | undefined
 
   setOnConnect(onConnect: () => Promise<void>): void
+
+  getSignerAddress(): Promise<string | undefined>
 }