feat: redesign welcome page

src/components/common/ConnectWallet/AccountCenter.tsx

@@ -13,7 +13,6 @@ import ChainSwitcher from '../ChainSwitcher'
 import useAddressBook from '@/hooks/useAddressBook'
 import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import WalletInfo, { UNKNOWN_CHAIN_NAME } from '../WalletInfo'
-import { MPCWallet } from './MPCWallet'
 
 const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
@@ -115,8 +114,6 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
           <Button onClick={handleDisconnect} variant="danger" size="small" fullWidth disableElevation>
             Disconnect
           </Button>
-
-          <MPCWallet />
         </Paper>
       </Popover>
     </>

src/components/common/ConnectWallet/MPCLogin.tsx

@@ -0,0 +1,81 @@
+import { MPCWalletState } from '@/hooks/wallets/mpc/useMPCWallet'
+import { Box, Button, SvgIcon, Typography } from '@mui/material'
+import { useContext, useEffect, useState } 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'
+
+const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
+  const { loginPending, triggerLogin, userInfo, walletState, recoverFactorWithPassword } = useContext(MpcWalletContext)
+
+  const wallet = useWallet()
+
+  const [loginTriggered, setLoginTriggered] = useState(false)
+
+  const login = async () => {
+    setLoginTriggered(true)
+    await triggerLogin()
+  }
+
+  // If login was triggered through the Button we immediately continue if logged in
+  useEffect(() => {
+    if (loginTriggered && wallet && onLogin) {
+      onLogin()
+    }
+  }, [loginTriggered, onLogin, wallet])
+
+  return (
+    <>
+      {wallet && userInfo.email ? (
+        <>
+          <Button
+            variant="outlined"
+            sx={{ padding: '8px 16px' }}
+            onClick={onLogin}
+            size="small"
+            disabled={loginPending}
+            fullWidth
+          >
+            <Box
+              width="100%"
+              justifyContent="space-between"
+              display="flex"
+              flexDirection="row"
+              alignItems="center"
+              gap={1}
+            >
+              <img
+                src={userInfo.profileImage}
+                className={css.profileImg}
+                alt="Profile Image"
+                referrerPolicy="no-referrer"
+              />
+              <div className={css.profileData}>
+                <Typography variant="subtitle2" fontWeight={700}>
+                  Continue as {userInfo.name}
+                </Typography>
+                <Typography variant="body2">{userInfo.email}</Typography>
+              </div>
+              <SvgIcon component={GoogleLogo} inheritViewBox fontSize="medium" />
+            </Box>
+          </Button>
+        </>
+      ) : (
+        <Button variant="outlined" onClick={login} size="small" disabled={loginPending} fullWidth>
+          <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
+            <SvgIcon component={GoogleLogo} inheritViewBox fontSize="medium" /> Continue with Google
+          </Box>
+        </Button>
+      )}
+
+      {walletState === MPCWalletState.MANUAL_RECOVERY && (
+        <PasswordRecovery recoverFactorWithPassword={recoverFactorWithPassword} />
+      )}
+    </>
+  )
+}
+
+export default MPCLogin

src/components/common/ConnectWallet/MPCWalletProvider.tsx

@@ -10,6 +10,8 @@ type MPCWalletContext = {
   walletState: MPCWalletState
   userInfo: {
     email: string | undefined
+    profileImage: string | undefined
+    name: string | undefined
   }
 }
 
@@ -22,6 +24,8 @@ export const MpcWalletContext = createContext<MPCWalletContext>({
   recoverFactorWithPassword: () => Promise.resolve(),
   userInfo: {
     email: undefined,
+    profileImage: undefined,
+    name: undefined,
   },
 })
 

src/components/common/ConnectWallet/WalletDetails.tsx

@@ -3,7 +3,7 @@ import type { ReactElement } from 'react'
 
 import KeyholeIcon from '@/components/common/icons/KeyholeIcon'
 import useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
-import { MPCWallet } from './MPCWallet'
+import MPCLogin from './MPCLogin'
 
 const WalletDetails = ({ onConnect }: { onConnect?: () => void }): ReactElement => {
   const connectWallet = useConnectWallet()
@@ -23,7 +23,7 @@ const WalletDetails = ({ onConnect }: { onConnect?: () => void }): ReactElement
         Connect
       </Button>
 
-      <MPCWallet />
+      <MPCLogin />
     </>
   )
 }

src/components/common/ConnectWallet/__tests__/MPCLogin.test.tsx

@@ -0,0 +1,107 @@
+import { act, render, waitFor } from '@/tests/test-utils'
+import * as useWallet from '@/hooks/wallets/useWallet'
+import * as useMPCWallet from '@/hooks/wallets/mpc/useMPCWallet'
+import MPCLogin from '../MPCLogin'
+import { hexZeroPad } from '@ethersproject/bytes'
+import { type EIP1193Provider } from '@web3-onboard/common'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/module'
+import { MpcWalletProvider } from '../MPCWalletProvider'
+
+describe('MPCLogin', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('should render continue with connected account', async () => {
+    const mockOnLogin = jest.fn()
+    const walletAddress = hexZeroPad('0x1', 20)
+    jest.spyOn(useWallet, 'default').mockReturnValue({
+      address: walletAddress,
+      chainId: '5',
+      label: ONBOARD_MPC_MODULE_LABEL,
+      provider: {} as unknown as EIP1193Provider,
+    })
+    jest.spyOn(useMPCWallet, 'useMPCWallet').mockReturnValue({
+      userInfo: {
+        email: '[email protected]',
+        name: 'Test Testermann',
+        profileImage: 'test.png',
+      },
+      triggerLogin: jest.fn(),
+      walletState: useMPCWallet.MPCWalletState.READY,
+    } as unknown as useMPCWallet.MPCWalletHook)
+
+    const result = render(
+      <MpcWalletProvider>
+        <MPCLogin onLogin={mockOnLogin} />
+      </MpcWalletProvider>,
+    )
+
+    await waitFor(() => {
+      expect(result.findByText('Continue as Test Testermann')).resolves.toBeDefined()
+    })
+
+    // We do not automatically invoke the callback as the user did not actively connect
+    expect(mockOnLogin).not.toHaveBeenCalled()
+
+    const button = await result.findByRole('button')
+    button.click()
+
+    expect(mockOnLogin).toHaveBeenCalled()
+  })
+
+  it('should render google login button and invoke the callback on connection if no wallet is connected', async () => {
+    const mockOnLogin = jest.fn()
+    const walletAddress = hexZeroPad('0x1', 20)
+    const mockUseWallet = jest.spyOn(useWallet, 'default').mockReturnValue(null)
+    const mockTriggerLogin = jest.fn()
+    const mockUseMPCWallet = jest.spyOn(useMPCWallet, 'useMPCWallet').mockReturnValue({
+      userInfo: {
+        email: undefined,
+        name: undefined,
+        profileImage: undefined,
+      },
+      triggerLogin: mockTriggerLogin,
+      walletState: useMPCWallet.MPCWalletState.NOT_INITIALIZED,
+    } as unknown as useMPCWallet.MPCWalletHook)
+
+    const result = render(
+      <MpcWalletProvider>
+        <MPCLogin onLogin={mockOnLogin} />
+      </MpcWalletProvider>,
+    )
+
+    await waitFor(() => {
+      expect(result.findByText('Continue with Google')).resolves.toBeDefined()
+    })
+
+    // We do not automatically invoke the callback as the user did not actively connect
+    expect(mockOnLogin).not.toHaveBeenCalled()
+
+    await act(async () => {
+      // Click the button and mock a successful login
+      const button = await result.findByRole('button')
+      button.click()
+      mockUseMPCWallet.mockReset().mockReturnValue({
+        userInfo: {
+          email: '[email protected]',
+          name: 'Test Testermann',
+          profileImage: 'test.png',
+        },
+        triggerLogin: jest.fn(),
+        walletState: useMPCWallet.MPCWalletState.READY,
+      } as unknown as useMPCWallet.MPCWalletHook)
+
+      mockUseWallet.mockReset().mockReturnValue({
+        address: walletAddress,
+        chainId: '5',
+        label: ONBOARD_MPC_MODULE_LABEL,
+        provider: {} as unknown as EIP1193Provider,
+      })
+    })
+
+    await waitFor(() => {
+      expect(mockOnLogin).toHaveBeenCalled()
+    })
+  })
+})

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

@@ -28,6 +28,18 @@
   width: 100%;
 }
 
+.profileImg {
+  border-radius: 16px;
+  width: 32px;
+  height: 32px;
+}
+
+.profileData {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
 .rowContainer {
   align-self: stretch;
   margin-left: calc(var(--space-2) * -1);