fix: Remove redirects on the welcome page

safe-global · Nov 8, 2023 · 33b220f · 33b220f
1 parent 2f5a7db
commit 33b220f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 34 deletions.
diff --git a/src/components/common/SocialSigner/PasswordRecovery.tsx b/src/components/common/SocialSigner/PasswordRecovery.tsx
@@ -27,7 +27,7 @@ export const PasswordRecovery = ({
   onSuccess,
 }: {
   recoverFactorWithPassword: (password: string, storeDeviceFactor: boolean) => Promise<void>
-  onSuccess: (() => void) | undefined
+  onSuccess?: (() => void) | undefined
 }) => {
   const [storeDeviceFactor, setStoreDeviceFactor] = useState(false)
 

diff --git a/src/components/common/SocialSigner/__tests__/SocialSignerLogin.test.tsx b/src/components/common/SocialSigner/__tests__/SocialSignerLogin.test.tsx
@@ -2,7 +2,7 @@ import { act, render, waitFor } from '@/tests/test-utils'
 
 import { SocialSigner, _getSupportedChains } from '@/components/common/SocialSigner'
 import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
-import { COREKIT_STATUS, type Web3AuthMPCCoreKit } from '@web3auth/mpc-core-kit'
+import { COREKIT_STATUS, type UserInfo, type Web3AuthMPCCoreKit } from '@web3auth/mpc-core-kit'
 import SocialWalletService from '@/services/mpc/SocialWalletService'
 import { TxModalProvider } from '@/components/tx-flow'
 import { fireEvent } from '@testing-library/react'
@@ -51,7 +51,7 @@ describe('SocialSignerLogin', () => {
     expect(mockOnLogin).toHaveBeenCalled()
   })
 
-  it('should render google login button and invoke the callback on connection if no wallet is connected on gnosis chain', async () => {
+  it('should render google login button if no wallet is connected on gnosis chain', async () => {
     const mockOnLogin = jest.fn()
 
     const result = render(
@@ -70,18 +70,30 @@ describe('SocialSignerLogin', () => {
       expect(result.findByText('Continue with Google')).resolves.toBeDefined()
       expect(await result.findByRole('button')).toBeEnabled()
     })
+  })
 
-    // We do not automatically invoke the callback as the user did not actively connect
-    expect(mockOnLogin).not.toHaveBeenCalled()
+  it('should display a Continue as button and call onLogin when clicked', () => {
+    const mockOnLogin = jest.fn()
+    mockSocialWalletService.loginAndCreate = jest.fn(() => Promise.resolve(COREKIT_STATUS.LOGGED_IN))
 
-    const button = await result.findByRole('button')
-    act(() => {
-      button.click()
-    })
+    const result = render(
+      <TxModalProvider>
+        <SocialSigner
+          socialWalletService={mockSocialWalletService}
+          wallet={mockWallet}
+          supportedChains={['Goerli']}
+          isMPCLoginEnabled={true}
+          onLogin={mockOnLogin}
+        />
+      </TxModalProvider>,
+    )
 
-    await waitFor(async () => {
-      expect(mockOnLogin).toHaveBeenCalled()
-    })
+    expect(result.getByText('Continue as Test Testermann')).toBeInTheDocument()
+
+    const button = result.getByRole('button')
+    button.click()
+
+    expect(mockOnLogin).toHaveBeenCalled()
   })
 
   it('should disable the Google Login button with a message when not on gnosis chain', async () => {
@@ -98,10 +110,11 @@ describe('SocialSignerLogin', () => {
     expect(await result.findByRole('button')).toBeDisabled()
   })
 
-  it('should display Password Recovery form and call onLogin if password recovery succeeds', async () => {
+  it('should display Password Recovery form and display a Continue as button when login succeeds', async () => {
     const mockOnLogin = jest.fn()
     mockSocialWalletService.loginAndCreate = jest.fn(() => Promise.resolve(COREKIT_STATUS.REQUIRED_SHARE))
     mockSocialWalletService.getUserInfo = jest.fn(undefined)
+    mockSocialWalletService.recoverAccountWithPassword = jest.fn(() => Promise.resolve(true))
 
     const result = render(
       <TxModalProvider>
@@ -140,8 +153,17 @@ describe('SocialSignerLogin', () => {
       submitButton.click()
     })
 
+    mockSocialWalletService.getUserInfo = jest.fn(
+      () =>
+        ({
+          email: '[email protected]',
+          name: 'Test Testermann',
+          profileImage: 'test.testermann.local/profile.png',
+        } as unknown as UserInfo),
+    )
+
     await waitFor(() => {
-      expect(mockOnLogin).toHaveBeenCalled()
+      expect(result.getByText('Continue as Test Testermann')).toBeInTheDocument()
     })
   })
 

diff --git a/src/components/common/SocialSigner/index.tsx b/src/components/common/SocialSigner/index.tsx
@@ -70,11 +70,10 @@ export const SocialSigner = ({
       const success = await socialWalletService.recoverAccountWithPassword(password, storeDeviceFactor)
 
       if (success) {
-        onLogin?.()
         setTxFlow(undefined)
       }
     },
-    [onLogin, setTxFlow, socialWalletService],
+    [setTxFlow, socialWalletService],
   )
 
   const login = async () => {
@@ -86,19 +85,14 @@ export const SocialSigner = ({
       const status = await socialWalletService.loginAndCreate()
 
       if (status === COREKIT_STATUS.LOGGED_IN) {
-        onLogin?.()
         setLoginPending(false)
         return
       }
 
       if (status === COREKIT_STATUS.REQUIRED_SHARE) {
         onRequirePassword?.()
 
-        setTxFlow(
-          <PasswordRecovery recoverFactorWithPassword={recoverPassword} onSuccess={onLogin} />,
-          () => setLoginPending(false),
-          false,
-        )
+        setTxFlow(<PasswordRecovery recoverFactorWithPassword={recoverPassword} />, () => setLoginPending(false), false)
         return
       }
     } catch (err) {

diff --git a/src/components/welcome/WelcomeLogin/WalletLogin.tsx b/src/components/welcome/WelcomeLogin/WalletLogin.tsx
@@ -10,14 +10,6 @@ const WalletLogin = ({ onLogin }: { onLogin: () => void }) => {
   const wallet = useWallet()
   const connectWallet = useConnectWallet()
 
-  const login = async () => {
-    const walletState = await connectWallet()
-
-    if (walletState && walletState.length > 0) {
-      onLogin()
-    }
-  }
-
   const isSocialLogin = isSocialLoginWallet(wallet?.label)
 
   if (wallet !== null && !isSocialLogin) {
@@ -55,7 +47,14 @@ const WalletLogin = ({ onLogin }: { onLogin: () => void }) => {
   }
 
   return (
-    <Button onClick={login} sx={{ minHeight: '42px' }} variant="contained" size="small" disableElevation fullWidth>
+    <Button
+      onClick={connectWallet}
+      sx={{ minHeight: '42px' }}
+      variant="contained"
+      size="small"
+      disableElevation
+      fullWidth
+    >
       Connect wallet
     </Button>
   )

diff --git a/src/components/welcome/WelcomeLogin/__tests__/WalletLogin.test.tsx b/src/components/welcome/WelcomeLogin/__tests__/WalletLogin.test.tsx
@@ -37,7 +37,7 @@ describe('WalletLogin', () => {
     expect(mockOnLogin).toHaveBeenCalled()
   })
 
-  it('should render connect wallet and invoke the callback on connection if no wallet is connected', async () => {
+  it('should render connect wallet if no wallet is connected', async () => {
     const mockOnLogin = jest.fn()
     const walletAddress = hexZeroPad('0x1', 20)
     const mockUseWallet = jest.spyOn(useWallet, 'default').mockReturnValue(null)
@@ -49,7 +49,7 @@ describe('WalletLogin', () => {
       expect(result.findByText('Connect wallet')).resolves.toBeDefined()
     })
 
-    // We do not automatically invoke the callback as the user did not actively connect
+    // We do not automatically invoke the callback
     expect(mockOnLogin).not.toHaveBeenCalled()
 
     await act(async () => {
@@ -65,7 +65,7 @@ describe('WalletLogin', () => {
     })
 
     await waitFor(() => {
-      expect(mockOnLogin).toHaveBeenCalled()
+      expect(result.getByText('Connect wallet')).toBeInTheDocument()
     })
   })