[Seedless Onboarding] QA fixes

src/components/common/ConnectWallet/ConnectionCenter.tsx

@@ -7,11 +7,8 @@ import KeyholeIcon from '@/components/common/icons/KeyholeIcon'
 import WalletDetails from '@/components/common/ConnectWallet/WalletDetails'
 
 import css from '@/components/common/ConnectWallet/styles.module.css'
-import { useCurrentChain } from '@/hooks/useChains'
 
 const ConnectionCenter = (): ReactElement => {
-  const chain = useCurrentChain()
-
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
   const open = !!anchorEl
 

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

@@ -8,6 +8,7 @@
   align-items: center;
   text-align: left;
   gap: var(--space-1);
+  padding: 0 var(--space-2);
 }
 
 .popoverContainer {

src/components/common/SocialLoginInfo/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material'
+import { Badge, Box, Typography } from '@mui/material'
 import css from './styles.module.css'
 import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { type ConnectedWallet } from '@/services/onboard'
@@ -28,7 +28,10 @@ const SocialLoginInfo = ({
 
   return (
     <Box width="100%" display="flex" flexDirection="row" alignItems="center" gap={1}>
-      <img src={userInfo.profileImage} className={css.profileImg} alt="Profile Image" referrerPolicy="no-referrer" />
+      <Box position="relative">
+        <img src={userInfo.profileImage} className={css.profileImg} alt="Profile Image" referrerPolicy="no-referrer" />
+        {!socialWalletService?.isMFAEnabled() && <Badge variant="dot" color="warning" className={css.bubble} />}
+      </Box>
       <div className={css.profileData}>
         <Typography className={css.text} variant="body2" fontWeight={700}>
           {userInfo.name}

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

@@ -1,7 +1,19 @@
 .profileImg {
   border-radius: var(--space-2);
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
+  display: block;
+}
+
+.bubble {
+  content: '';
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+}
+
+.bubble span {
+  outline: 1px solid var(--color-background-paper);
 }
 
 .profileData {

src/components/common/SocialSigner/index.tsx

@@ -166,7 +166,7 @@ export const SocialSigner = ({
               ml: 0.5,
             }}
           />
-          Currently only supported on {supportedChains.join(', ')}
+          Currently only supported on {supportedChains.join(', ')}. More network support coming soon.
         </Typography>
       )}
     </>

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

@@ -32,7 +32,7 @@
     display: none;
   }
 
-  .socialLoginInfo > div > div {
+  .socialLoginInfo > div > div:last-child {
     display: none;
   }
 }

src/components/new-safe/create/__tests__/useSyncSafeCreationStep.test.ts

@@ -1,3 +1,4 @@
+import { type PendingSafeData } from '@/components/new-safe/create/types'
 import { renderHook } from '@/tests/test-utils'
 import useSyncSafeCreationStep from '@/components/new-safe/create/useSyncSafeCreationStep'
 import * as wallet from '@/hooks/wallets/useWallet'
@@ -21,10 +22,9 @@ describe('useSyncSafeCreationStep', () => {
 
   beforeEach(() => {
     jest.clearAllMocks()
-    const setPendingSafeSpy = jest.fn()
   })
 
-  it('should go to the first step if no wallet is connected', async () => {
+  it('should go to the first step if no wallet is connected and there is no pending safe', async () => {
     const mockPushRoute = jest.fn()
     jest.spyOn(wallet, 'default').mockReturnValue(null)
     jest.spyOn(usePendingSafe, 'usePendingSafe').mockReturnValue([undefined, setPendingSafeSpy])
@@ -39,6 +39,20 @@ describe('useSyncSafeCreationStep', () => {
     expect(mockPushRoute).toHaveBeenCalledWith({ pathname: AppRoutes.welcome.index, query: undefined })
   })
 
+  it('should not go to the first step if no wallet is connected but there is a pending safe', async () => {
+    const mockPushRoute = jest.fn()
+    jest.spyOn(wallet, 'default').mockReturnValue(null)
+    jest.spyOn(usePendingSafe, 'usePendingSafe').mockReturnValue([{} as PendingSafeData, setPendingSafeSpy])
+    jest.spyOn(useRouter, 'useRouter').mockReturnValue({
+      push: mockPushRoute,
+    } as unknown as NextRouter)
+    const mockSetStep = jest.fn()
+
+    renderHook(() => useSyncSafeCreationStep(mockSetStep))
+
+    expect(mockPushRoute).not.toHaveBeenCalled()
+  })
+
   it('should go to the fourth step if there is a pending safe', async () => {
     jest.spyOn(localStorage, 'default').mockReturnValue([{}, jest.fn()])
     jest.spyOn(wallet, 'default').mockReturnValue({ address: '0x1' } as ConnectedWallet)

src/components/new-safe/create/index.tsx

@@ -193,7 +193,7 @@ const CreateSafe = () => {
 
         <Grid item xs={12} md={4} mb={[3, null, 0]} order={[0, null, 1]}>
           <Grid container spacing={3}>
-            {activeStep < 3 && <OverviewWidget safeName={safeName} />}
+            {activeStep < 2 && <OverviewWidget safeName={safeName} />}
             {wallet?.address && <CreateSafeInfos staticHint={staticHint} dynamicHint={dynamicHint} />}
           </Grid>
         </Grid>

src/components/new-safe/create/useSyncSafeCreationStep.ts

@@ -20,8 +20,8 @@ const useSyncSafeCreationStep = (setStep: StepRenderProps<NewSafeFormData>['setS
       return
     }
 
-    // Jump to connect wallet step if there is no wallet and no pending Safe
-    if (!wallet) {
+    // Jump to the welcome page if there is no wallet and no pending Safe
+    if (!wallet && !pendingSafe) {
       router.push({ pathname: AppRoutes.welcome.index, query: router.query })
     }
 

src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx

@@ -1,7 +1,7 @@
 import { Button, Chip, Grid, SvgIcon, Typography, IconButton } from '@mui/material'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import type { ReactElement } from 'react'
 
 import { CustomTooltip } from '@/components/common/CustomTooltip'
@@ -26,6 +26,7 @@ import type { AddedSafesOnChain } from '@/store/addedSafesSlice'
 import type { PushNotificationPreferences } from '@/services/push-notifications/preferences'
 import type { NotifiableSafes } from '../logic'
 import useWallet from '@/hooks/wallets/useWallet'
+import CircularProgress from '@mui/material/CircularProgress'
 
 import css from './styles.module.css'
 
@@ -103,6 +104,7 @@ const TrackBanner = (): null => {
 }
 
 export const PushNotificationsBanner = ({ children }: { children: ReactElement }): ReactElement => {
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false)
   const isNotificationFeatureEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
   const chain = useCurrentChain()
   const totalAddedSafes = useAppSelector(selectTotalAdded)
@@ -136,6 +138,8 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement }
       return
     }
 
+    setIsSubmitting(true)
+
     trackEvent(PUSH_NOTIFICATION_EVENTS.ENABLE_ALL)
 
     const allPreferences = getAllPreferences()
@@ -144,11 +148,13 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement }
     try {
       await assertWalletChain(onboard, safe.chainId)
     } catch {
+      setIsSubmitting(false)
       return
     }
 
     await registerNotifications(safesToRegister)
 
+    setIsSubmitting(false)
     dismissBanner()
   }
 
@@ -195,7 +201,8 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement }
                         size="small"
                         className={css.button}
                         onClick={onEnableAll}
-                        disabled={!isOk || !onboard}
+                        startIcon={isSubmitting ? <CircularProgress size={12} color="inherit" /> : null}
+                        disabled={!isOk || !onboard || isSubmitting}
                       >
                         Enable all
                       </Button>

src/components/sidebar/SidebarNavigation/config.tsx

@@ -127,6 +127,10 @@ export const generalSettingsNavItems = [
     label: 'Notifications',
     href: AppRoutes.settings.notifications,
   },
+  {
+    label: 'Security & Login',
+    href: AppRoutes.settings.securityLogin,
+  },
   {
     label: 'Data',
     href: AppRoutes.settings.data,