[Seedless-Onboarding] Refactor context + provider into service class (#…

…2695)



Co-authored-by: Usame Algan <[email protected]>

src/components/common/ConnectWallet/WalletDetails.tsx

@@ -2,7 +2,7 @@ import { Divider, Typography } from '@mui/material'
 import type { ReactElement } from 'react'
 
 import LockIcon from '@/public/images/common/lock.svg'
-import MPCLogin from './MPCLogin'
+import SocialSigner from '@/components/common/SocialSigner'
 import WalletLogin from '@/components/welcome/WelcomeLogin/WalletLogin'
 
 const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement => {
@@ -18,7 +18,7 @@ const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement =
         </Typography>
       </Divider>
 
-      <MPCLogin />
+      <SocialSigner />
     </>
   )
 }

src/components/common/ConnectWallet/styles.module.css

@@ -70,6 +70,11 @@
   min-height: 42px;
 }
 
+.loginError {
+  width: 100%;
+  margin: 0;
+}
+
 @media (max-width: 599.95px) {
   .socialLoginInfo > div > div {
     display: none;

src/components/common/NetworkSelector/index.tsx

@@ -13,7 +13,7 @@ import { AppRoutes } from '@/config/routes'
 import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
 import useWallet from '@/hooks/wallets/useWallet'
 import { isSocialWalletEnabled } from '@/hooks/wallets/wallets'
-import { isSocialLoginWallet } from '@/services/mpc/module'
+import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
 
 const keepPathRoutes = [AppRoutes.welcome, AppRoutes.newSafe.create, AppRoutes.newSafe.load]
 

src/components/common/SocialLoginInfo/index.tsx

@@ -1,14 +1,13 @@
 import { Box, Typography } from '@mui/material'
 import css from './styles.module.css'
-import { useContext } from 'react'
 import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { type ConnectedWallet } from '@/services/onboard'
-import { MpcWalletContext } from '@/components/common/ConnectWallet/MPCWalletProvider'
 import CopyAddressButton from '@/components/common/CopyAddressButton'
 import ExplorerButton from '@/components/common/ExplorerButton'
 import { getBlockExplorerLink } from '@/utils/chains'
 import { useAppSelector } from '@/store'
 import { selectSettings } from '@/store/settingsSlice'
+import useSocialWallet from '@/hooks/wallets/mpc/useSocialWallet'
 
 const SocialLoginInfo = ({
   wallet,
@@ -19,7 +18,8 @@ const SocialLoginInfo = ({
   chainInfo?: ChainInfo
   hideActions?: boolean
 }) => {
-  const { userInfo } = useContext(MpcWalletContext)
+  const socialWalletService = useSocialWallet()
+  const userInfo = socialWalletService?.getUserInfo()
   const prefix = chainInfo?.shortName
   const link = chainInfo ? getBlockExplorerLink(chainInfo, wallet.address) : undefined
   const settings = useAppSelector(selectSettings)

src/components/common/ConnectWallet/PasswordRecovery.tsx → src/components/common/SocialSigner/PasswordRecovery.tsx

@@ -11,9 +11,12 @@ import {
   FormControl,
 } from '@mui/material'
 import { useState } from 'react'
-import Track from '../Track'
+import Track from '@/components/common/Track'
 import { FormProvider, useForm } from 'react-hook-form'
 import PasswordInput from '@/components/settings/SecurityLogin/SocialSignerMFA/PasswordInput'
+import ErrorMessage from '@/components/tx/ErrorMessage'
+
+import css from './styles.module.css'
 
 type PasswordFormData = {
   password: string
@@ -35,14 +38,17 @@ export const PasswordRecovery = ({
     },
   })
 
-  const { handleSubmit, formState, setError } = formMethods
+  const { handleSubmit, formState } = formMethods
+
+  const [error, setError] = useState<string>()
 
   const onSubmit = async (data: PasswordFormData) => {
+    setError(undefined)
     try {
       await recoverFactorWithPassword(data.password, storeDeviceFactor)
       onSuccess?.()
     } catch (e) {
-      setError('password', { type: 'custom', message: 'Incorrect password' })
+      setError('Incorrect password')
     }
   }
 
@@ -71,7 +77,7 @@ export const PasswordRecovery = ({
                 </Typography>
               </Box>
               <Divider />
-              <Box p={4} display="flex" flexDirection="column" alignItems="baseline" gap={1}>
+              <Box className={css.passwordWrapper}>
                 <FormControl fullWidth>
                   <PasswordInput
                     name="password"
@@ -88,7 +94,9 @@ export const PasswordRecovery = ({
                   }
                   label="Do not ask again on this device"
                 />
+                {error && <ErrorMessage className={css.loginError}>{error}</ErrorMessage>}
               </Box>
+
               <Divider />
               <Box p={4} display="flex" justifyContent="flex-end">
                 <Track {...MPC_WALLET_EVENTS.RECOVER_PASSWORD}>

src/components/common/SocialSigner/__tests__/PasswordRecovery.test.tsx

@@ -0,0 +1,48 @@
+import { fireEvent, render } from '@/tests/test-utils'
+import { PasswordRecovery } from '@/components/common/SocialSigner/PasswordRecovery'
+import { act, waitFor } from '@testing-library/react'
+
+describe('PasswordRecovery', () => {
+  it('displays an error if password is wrong', async () => {
+    const mockRecoverWithPassword = jest.fn(() => Promise.reject())
+    const mockOnSuccess = jest.fn()
+
+    const { getByText, getByLabelText } = render(
+      <PasswordRecovery recoverFactorWithPassword={mockRecoverWithPassword} onSuccess={mockOnSuccess} />,
+    )
+
+    const passwordField = getByLabelText('Recovery password')
+    const submitButton = getByText('Submit')
+
+    act(() => {
+      fireEvent.change(passwordField, { target: { value: 'somethingwrong' } })
+      submitButton.click()
+    })
+
+    await waitFor(() => {
+      expect(mockOnSuccess).not.toHaveBeenCalled()
+      expect(getByText('Incorrect password')).toBeInTheDocument()
+    })
+  })
+
+  it('calls onSuccess if password is correct', async () => {
+    const mockRecoverWithPassword = jest.fn(() => Promise.resolve())
+    const mockOnSuccess = jest.fn()
+
+    const { getByText, getByLabelText } = render(
+      <PasswordRecovery recoverFactorWithPassword={mockRecoverWithPassword} onSuccess={mockOnSuccess} />,
+    )
+
+    const passwordField = getByLabelText('Recovery password')
+    const submitButton = getByText('Submit')
+
+    act(() => {
+      fireEvent.change(passwordField, { target: { value: 'somethingCorrect' } })
+      submitButton.click()
+    })
+
+    await waitFor(() => {
+      expect(mockOnSuccess).toHaveBeenCalled()
+    })
+  })
+})