refactor: useConnectWallet hook, explicit onLogin handling

src/components/common/ConnectWallet/MPCLogin.tsx

@@ -1,32 +1,34 @@
 import { MPCWalletState } from '@/hooks/wallets/mpc/useMPCWallet'
 import { Box, Button, SvgIcon, Typography } from '@mui/material'
-import { useContext, useEffect, useState } from 'react'
+import { useContext } from 'react'
 import { MpcWalletContext } from './MPCWalletProvider'
 import { PasswordRecovery } from './PasswordRecovery'
 import GoogleLogo from '@/public/images/welcome/logo-google.svg'
 
 import css from './styles.module.css'
 import useWallet from '@/hooks/wallets/useWallet'
-import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/module'
 
 const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
-  const { loginPending, triggerLogin, userInfo, walletState, recoverFactorWithPassword } = useContext(MpcWalletContext)
+  const { triggerLogin, userInfo, walletState, recoverFactorWithPassword } = useContext(MpcWalletContext)
 
   const wallet = useWallet()
-
-  const [loginTriggered, setLoginTriggered] = useState(false)
+  const loginPending = walletState === MPCWalletState.AUTHENTICATING
 
   const login = async () => {
-    setLoginTriggered(true)
-    await triggerLogin()
+    const success = await triggerLogin()
+
+    if (success) {
+      onLogin?.()
+    }
   }
 
-  // If login was triggered through the Button we immediately continue if logged in
-  useEffect(() => {
-    if (loginTriggered && wallet && wallet.label === ONBOARD_MPC_MODULE_LABEL && onLogin) {
-      onLogin()
+  const recoverPassword = async (password: string, storeDeviceFactor: boolean) => {
+    const success = await recoverFactorWithPassword(password, storeDeviceFactor)
+
+    if (success) {
+      onLogin?.()
     }
-  }, [loginTriggered, onLogin, wallet])
+  }
 
   return (
     <>
@@ -73,7 +75,7 @@ const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
       )}
 
       {walletState === MPCWalletState.MANUAL_RECOVERY && (
-        <PasswordRecovery recoverFactorWithPassword={recoverFactorWithPassword} />
+        <PasswordRecovery recoverFactorWithPassword={recoverPassword} />
       )}
     </>
   )

src/components/common/ConnectWallet/MPCWalletProvider.tsx

@@ -1,35 +1,17 @@
-import { useMPCWallet, MPCWalletState } from '@/hooks/wallets/mpc/useMPCWallet'
-import { type UserInfo } from '@web3auth/mpc-core-kit'
+import { useMPCWallet, MPCWalletState, type MPCWalletHook } from '@/hooks/wallets/mpc/useMPCWallet'
 import { createContext, type ReactElement } from 'react'
 
-type MPCWalletContext = {
-  loginPending: boolean
-  triggerLogin: () => Promise<void>
-  resetAccount: () => Promise<void>
-  upsertPasswordBackup: (password: string) => Promise<void>
-  recoverFactorWithPassword: (password: string, storeDeviceFactor: boolean) => Promise<void>
-  walletState: MPCWalletState
-  userInfo: UserInfo | undefined
-}
-
-export const MpcWalletContext = createContext<MPCWalletContext>({
-  loginPending: false,
+export const MpcWalletContext = createContext<MPCWalletHook>({
   walletState: MPCWalletState.NOT_INITIALIZED,
-  triggerLogin: () => Promise.resolve(),
+  triggerLogin: () => Promise.resolve(false),
   resetAccount: () => Promise.resolve(),
   upsertPasswordBackup: () => Promise.resolve(),
-  recoverFactorWithPassword: () => Promise.resolve(),
+  recoverFactorWithPassword: () => Promise.resolve(false),
   userInfo: undefined,
 })
 
 export const MpcWalletProvider = ({ children }: { children: ReactElement }) => {
   const mpcValue = useMPCWallet()
 
-  return (
-    <MpcWalletContext.Provider
-      value={{ ...mpcValue, loginPending: mpcValue.walletState === MPCWalletState.AUTHENTICATING }}
-    >
-      {children}
-    </MpcWalletContext.Provider>
-  )
+  return <MpcWalletContext.Provider value={mpcValue}>{children}</MpcWalletContext.Provider>
 }

src/components/common/ConnectWallet/WalletDetails.tsx

@@ -1,34 +1,16 @@
-import { Button, Divider, Typography } from '@mui/material'
+import { Divider, Typography } from '@mui/material'
 import type { ReactElement } from 'react'
 
 import LockIcon from '@/public/images/common/lock.svg'
-import useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
 import MPCLogin from './MPCLogin'
-import css from './styles.module.css'
-
-const WalletDetails = ({ onConnect }: { onConnect?: () => void }): ReactElement => {
-  const connectWallet = useConnectWallet()
-
-  const handleConnect = () => {
-    onConnect?.()
-    connectWallet()
-  }
+import WalletLogin from '@/components/welcome/WelcomeLogin/WalletLogin'
 
+const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement => {
   return (
     <>
       <LockIcon />
 
-      <Button
-        onClick={handleConnect}
-        className={css.loginButton}
-        variant="contained"
-        size="small"
-        disableElevation
-        fullWidth
-        sx={{ mt: 1 }}
-      >
-        Connect a wallet
-      </Button>
+      <WalletLogin onLogin={onConnect} />
 
       <Divider sx={{ width: '100%' }}>
         <Typography color="text.secondary" fontWeight={700} variant="overline">

src/components/common/ConnectWallet/useConnectWallet.ts

@@ -1,19 +1,17 @@
-import { useMemo } from 'react'
+import { useCallback } from 'react'
 import useOnboard, { connectWallet } from '@/hooks/wallets/useOnboard'
 import { OVERVIEW_EVENTS, trackEvent } from '@/services/analytics'
 
-const useConnectWallet = (): (() => void) => {
+const useConnectWallet = () => {
   const onboard = useOnboard()
 
-  return useMemo(() => {
+  return useCallback(() => {
     if (!onboard) {
-      return () => {}
+      return Promise.resolve(undefined)
     }
 
-    return () => {
-      trackEvent(OVERVIEW_EVENTS.OPEN_ONBOARD)
-      connectWallet(onboard)
-    }
+    trackEvent(OVERVIEW_EVENTS.OPEN_ONBOARD)
+    return connectWallet(onboard)
   }, [onboard])
 }
 

src/components/welcome/WelcomeLogin/WalletLogin.tsx

@@ -3,26 +3,16 @@ import useWallet from '@/hooks/wallets/useWallet'
 import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/module'
 import { Box, Button, Typography } from '@mui/material'
 import { EthHashInfo } from '@safe-global/safe-react-components'
-import { useState, useEffect } from 'react'
 
-const WalletLogin = ({ onLogin }: { onLogin?: () => void }) => {
+const WalletLogin = ({ onLogin }: { onLogin: () => void }) => {
   const wallet = useWallet()
   const connectWallet = useConnectWallet()
 
-  const [loginTriggered, setLoginTriggered] = useState(false)
-
   const login = async () => {
-    setLoginTriggered(true)
     await connectWallet()
+    onLogin()
   }
 
-  // If login was triggered through the Button we immediately continue if logged in
-  useEffect(() => {
-    if (loginTriggered && wallet && onLogin) {
-      onLogin()
-    }
-  }, [loginTriggered, onLogin, wallet])
-
   if (wallet !== null && wallet?.label !== ONBOARD_MPC_MODULE_LABEL) {
     return (
       <Button variant="contained" sx={{ padding: '8px 16px' }} fullWidth onClick={onLogin}>

src/components/welcome/styles.module.css

@@ -28,6 +28,7 @@
 .bulletList {
   list-style: none;
   margin-bottom: auto;
+  padding: 0;
 }
 
 .bulletList li {

src/hooks/wallets/mpc/useMPCWallet.ts

@@ -17,9 +17,9 @@ export enum MPCWalletState {
 
 export type MPCWalletHook = {
   upsertPasswordBackup: (password: string) => Promise<void>
-  recoverFactorWithPassword: (password: string, storeDeviceShare: boolean) => Promise<void>
+  recoverFactorWithPassword: (password: string, storeDeviceShare: boolean) => Promise<boolean>
   walletState: MPCWalletState
-  triggerLogin: () => Promise<void>
+  triggerLogin: () => Promise<boolean>
   resetAccount: () => Promise<void>
   userInfo: UserInfo | undefined
 }
@@ -74,15 +74,17 @@ export const useMPCWallet = (): MPCWalletHook => {
           const securityQuestions = new SecurityQuestionRecovery(mpcCoreKit)
           if (securityQuestions.isEnabled()) {
             setWalletState(MPCWalletState.MANUAL_RECOVERY)
-            return
+            return false
           }
         }
       }
 
       await finalizeLogin()
+      return mpcCoreKit.status === COREKIT_STATUS.LOGGED_IN
     } catch (error) {
       setWalletState(MPCWalletState.NOT_INITIALIZED)
       console.error(error)
+      return false
     }
   }
 
@@ -123,6 +125,8 @@ export const useMPCWallet = (): MPCWalletHook => {
 
       await finalizeLogin()
     }
+
+    return mpcCoreKit.status === COREKIT_STATUS.LOGGED_IN
   }
 
   return {