[Seedless Onboarding] Account center redesign

cypress/e2e/pages/create_wallet.pages.js

@@ -1,6 +1,6 @@
 import * as constants from '../../support/constants'
 
-const newAccountBtnStr = 'Create new Account'
+const newAccountBtnStr = 'Continue with E2E Wallet'
 
 const nameInput = 'input[name="name"]'
 const selectNetworkBtn = '[data-cy="create-safe-select-network"]'

cypress/e2e/pages/load_safe.pages.js

@@ -1,6 +1,6 @@
 import * as constants from '../../support/constants'
 
-const addExistingAccountBtnStr = 'Add existing Account'
+const addExistingAccountBtnStr = 'Add existing one'
 const contactStr = 'Name, address & network'
 const invalidAddressFormatErrorMsg = 'Invalid address format'
 
@@ -16,7 +16,7 @@ const ownersConfirmationsStr = 'Owners and confirmations'
 const transactionStr = 'Transactions'
 
 export function openLoadSafeForm() {
-  cy.contains('button', addExistingAccountBtnStr).click()
+  cy.contains('a', addExistingAccountBtnStr).click()
   cy.contains(contactStr)
 }
 

cypress/e2e/smoke/import_export_data.cy.js

@@ -3,7 +3,8 @@ import * as file from '../pages/import_export.pages'
 import * as main from '../pages/main.page'
 import * as constants from '../../support/constants'
 
-describe('Import Export Data', () => {
+// TODO: This is currently removed from the welcome page
+describe.skip('Import Export Data', () => {
   before(() => {
     cy.clearLocalStorage()
     cy.visit(constants.welcomeUrl)

src/components/common/ConnectWallet/AccountCenter.tsx

@@ -1,18 +1,20 @@
 import type { MouseEvent } from 'react'
 import { useState } from 'react'
-import { Box, Button, ButtonBase, Paper, Popover, Typography } from '@mui/material'
+import { Box, Button, ButtonBase, Paper, Popover } from '@mui/material'
 import css from '@/components/common/ConnectWallet/styles.module.css'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import useOnboard, { switchWallet } from '@/hooks/wallets/useOnboard'
 import { useAppSelector } from '@/store'
 import { selectChainById } from '@/store/chainsSlice'
-import Identicon from '@/components/common/Identicon'
 import ChainSwitcher from '../ChainSwitcher'
 import useAddressBook from '@/hooks/useAddressBook'
 import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
-import WalletInfo, { UNKNOWN_CHAIN_NAME } from '../WalletInfo'
+import WalletInfo from '../WalletInfo'
+import ChainIndicator from '@/components/common/ChainIndicator'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/module'
+import SocialLoginInfo from '@/components/common/SocialLoginInfo'
 
 const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
@@ -77,31 +79,21 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
         sx={{ marginTop: 1 }}
       >
         <Paper className={css.popoverContainer}>
-          <Identicon address={wallet.address} />
-
-          <Typography variant="h5" className={css.addressName}>
-            {addressBook[wallet.address] || wallet.ens}
-          </Typography>
-
-          <Box bgcolor="border.background" px={2} py={1} fontSize={14}>
-            <EthHashInfo
-              address={wallet.address}
-              showAvatar={false}
-              showName={false}
-              hasExplorer
-              showCopyButton
-              prefix={prefix}
-            />
-          </Box>
-
-          <Box className={css.rowContainer}>
-            <Box className={css.row}>
-              <Typography variant="caption">Wallet</Typography>
-              <Typography variant="body2">{wallet.label}</Typography>
-            </Box>
-            <Box className={css.row}>
-              <Typography variant="caption">Connected network</Typography>
-              <Typography variant="body2">{chainInfo?.chainName || UNKNOWN_CHAIN_NAME}</Typography>
+          <Box className={css.accountContainer}>
+            <ChainIndicator />
+            <Box className={css.addressContainer}>
+              {wallet.label === ONBOARD_MPC_MODULE_LABEL ? (
+                <SocialLoginInfo wallet={wallet} chainInfo={chainInfo} />
+              ) : (
+                <EthHashInfo
+                  address={wallet.address}
+                  name={addressBook[wallet.address] || wallet.ens}
+                  hasExplorer
+                  showCopyButton
+                  prefix={prefix}
+                  avatarSize={32}
+                />
+              )}
             </Box>
           </Box>
 

src/components/common/ConnectWallet/MPCLogin.tsx

@@ -1,53 +1,48 @@
 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 (
     <>
       {wallet && userInfo ? (
         <>
           <Button
             variant="outlined"
-            sx={{ padding: '1 2' }}
+            sx={{ px: 2, py: 1, borderWidth: '1px !important' }}
             onClick={onLogin}
             size="small"
             disabled={loginPending}
             fullWidth
           >
-            <Box
-              width="100%"
-              justifyContent="space-between"
-              display="flex"
-              flexDirection="row"
-              alignItems="center"
-              gap={1}
-            >
+            <Box width="100%" display="flex" flexDirection="row" alignItems="center" gap={1}>
               <img
                 src={userInfo.profileImage}
                 className={css.profileImg}
@@ -60,20 +55,27 @@ const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
                 </Typography>
                 <Typography variant="body2">{userInfo.email}</Typography>
               </div>
-              <SvgIcon component={GoogleLogo} inheritViewBox fontSize="medium" />
+              <SvgIcon component={GoogleLogo} inheritViewBox fontSize="medium" sx={{ marginLeft: 'auto' }} />
             </Box>
           </Button>
         </>
       ) : (
-        <Button variant="outlined" onClick={login} size="small" disabled={loginPending} fullWidth>
+        <Button
+          variant="outlined"
+          onClick={login}
+          size="small"
+          disabled={loginPending}
+          fullWidth
+          sx={{ borderWidth: '1px !important' }}
+        >
           <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} />
+        <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,27 +1,22 @@
-import { Button, Typography } from '@mui/material'
+import { Divider, Typography } from '@mui/material'
 import type { ReactElement } from 'react'
 
-import KeyholeIcon from '@/components/common/icons/KeyholeIcon'
-import useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
+import LockIcon from '@/public/images/common/lock.svg'
 import MPCLogin from './MPCLogin'
+import WalletLogin from '@/components/welcome/WelcomeLogin/WalletLogin'
 
-const WalletDetails = ({ onConnect }: { onConnect?: () => void }): ReactElement => {
-  const connectWallet = useConnectWallet()
-
-  const handleConnect = () => {
-    onConnect?.()
-    connectWallet()
-  }
-
+const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement => {
   return (
     <>
-      <Typography variant="h5">Connect a wallet</Typography>
+      <LockIcon />
 
-      <KeyholeIcon />
+      <WalletLogin onLogin={onConnect} />
 
-      <Button onClick={handleConnect} variant="contained" size="small" disableElevation fullWidth>
-        Connect
-      </Button>
+      <Divider sx={{ width: '100%' }}>
+        <Typography color="text.secondary" fontWeight={700} variant="overline">
+          or
+        </Typography>
+      </Divider>
 
       <MPCLogin />
     </>

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

@@ -54,7 +54,7 @@ describe('MPCLogin', () => {
     const mockOnLogin = jest.fn()
     const walletAddress = hexZeroPad('0x1', 20)
     const mockUseWallet = jest.spyOn(useWallet, 'default').mockReturnValue(null)
-    const mockTriggerLogin = jest.fn()
+    const mockTriggerLogin = jest.fn(() => true)
     const mockUseMPCWallet = jest.spyOn(useMPCWallet, 'useMPCWallet').mockReturnValue({
       userInfo: {
         email: undefined,

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

@@ -12,11 +12,11 @@
 
 .popoverContainer {
   padding: var(--space-2);
-  width: 250px;
+  width: 300px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-1);
   border: 1px solid var(--color-border-light);
 }
 
@@ -66,6 +66,27 @@
   gap: var(--space-2);
 }
 
+.loginButton {
+  min-height: 42px;
+}
+
+.accountContainer {
+  width: 100%;
+  margin-bottom: var(--space-1);
+}
+
+.accountContainer > span {
+  border-radius: 8px 8px 0 0;
+}
+
+.addressContainer {
+  border-radius: 0 0 8px 8px;
+  padding: 12px;
+  border: 1px solid var(--color-border-light);
+  border-top: 0;
+  font-size: 14px;
+}
+
 @media (max-width: 599.95px) {
   .buttonContainer {
     transform: scale(0.8);

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])
 }