[Seedless Onboarding] QA fixes (#2721)

* fix: Adjust tooltip wording * fix: Hide overview widget in the review screen * fix: Don't redirect the user to welcome if there is a pending safe * fix: Add loading state to notification enableAll * fix: Show Security&Login tab in global preferences view * fix: Show an orange badge if mfa is not enabled * fix: Revert hook changes, adjust test case * fix: failing tests * fix: Rename socialLogin to socialSigner
safe-global · Nov 1, 2023 · f262276 · f262276
1 parent ec5b97c
commit f262276
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 20 deletions.
diff --git a/src/components/common/ConnectWallet/ConnectionCenter.tsx b/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
 

diff --git a/src/components/common/ConnectWallet/styles.module.css b/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 {

diff --git a/src/components/common/SocialLoginInfo/index.tsx b/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}

diff --git a/src/components/common/SocialLoginInfo/styles.module.css b/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 {

diff --git a/src/components/common/SocialSigner/__tests__/SocialSignerLogin.test.tsx b/src/components/common/SocialSigner/__tests__/SocialSignerLogin.test.tsx
@@ -94,7 +94,9 @@ describe('SocialSignerLogin', () => {
       />,
     )
 
-    expect(result.getByText('Currently only supported on Goerli')).toBeInTheDocument()
+    expect(
+      result.getByText('Currently only supported on Goerli. More network support coming soon.'),
+    ).toBeInTheDocument()
     expect(await result.findByRole('button')).toBeDisabled()
   })
 
@@ -150,7 +152,7 @@ describe('SocialSignerLogin', () => {
       .with({
         chainId: '1',
         chainName: 'Ethereum',
-        disabledWallets: ['socialLogin'],
+        disabledWallets: ['socialSigner'],
       })
       .build()
     const mockGnosisChain = chainBuilder()
@@ -167,7 +169,7 @@ describe('SocialSignerLogin', () => {
 
     it('returns an empty array if social login is not enabled on any chain', () => {
       const mockGoerliChain = chainBuilder()
-        .with({ chainId: '5', chainName: 'Goerli', disabledWallets: ['socialLogin'] })
+        .with({ chainId: '5', chainName: 'Goerli', disabledWallets: ['socialSigner'] })
         .build()
 
       const mockChains = [mockEthereumChain, mockGoerliChain]

diff --git a/src/components/common/SocialSigner/index.tsx b/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>
       )}
     </>

diff --git a/src/components/common/WalletOverview/styles.module.css b/src/components/common/WalletOverview/styles.module.css
@@ -32,7 +32,7 @@
     display: none;
   }
 
-  .socialLoginInfo > div > div {
+  .socialLoginInfo > div > div:last-child {
     display: none;
   }
 }
diff --git a/src/components/new-safe/create/__tests__/useSyncSafeCreationStep.test.ts b/src/components/new-safe/create/__tests__/useSyncSafeCreationStep.test.ts
@@ -21,10 +21,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])
@@ -40,15 +39,21 @@ describe('useSyncSafeCreationStep', () => {
   })
 
   it('should go to the fourth step if there is a pending safe', async () => {
+    const mockPushRoute = jest.fn()
     jest.spyOn(localStorage, 'default').mockReturnValue([{}, jest.fn()])
     jest.spyOn(wallet, 'default').mockReturnValue({ address: '0x1' } as ConnectedWallet)
     jest.spyOn(usePendingSafe, 'usePendingSafe').mockReturnValue([mockPendingSafe, setPendingSafeSpy])
+    jest.spyOn(useRouter, 'useRouter').mockReturnValue({
+      push: mockPushRoute,
+    } as unknown as NextRouter)
 
     const mockSetStep = jest.fn()
 
     renderHook(() => useSyncSafeCreationStep(mockSetStep))
 
     expect(mockSetStep).toHaveBeenCalledWith(3)
+
+    expect(mockPushRoute).not.toHaveBeenCalled()
   })
 
   it('should go to the second step if the wrong chain is connected', async () => {

diff --git a/src/components/new-safe/create/index.tsx b/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>

diff --git a/src/components/new-safe/create/useSyncSafeCreationStep.ts b/src/components/new-safe/create/useSyncSafeCreationStep.ts
@@ -20,7 +20,7 @@ const useSyncSafeCreationStep = (setStep: StepRenderProps<NewSafeFormData>['setS
       return
     }
 
-    // Jump to connect wallet step if there is no wallet and no pending Safe
+    // Jump to the welcome page if there is no wallet
     if (!wallet) {
       router.push({ pathname: AppRoutes.welcome.index, query: router.query })
     }

diff --git a/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx b/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>

diff --git a/src/components/sidebar/SidebarNavigation/config.tsx b/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,

diff --git a/src/components/welcome/WelcomeLogin/WalletLogin.tsx b/src/components/welcome/WelcomeLogin/WalletLogin.tsx
@@ -23,7 +23,7 @@ const WalletLogin = ({ onLogin }: { onLogin: () => void }) => {
   if (wallet !== null && !isSocialLogin) {
     return (
       <Box sx={{ width: '100%' }}>
-        <Track {...CREATE_SAFE_EVENTS.CONTINUE_TO_CREATION} label={wallet.label}>
+        <Track {...CREATE_SAFE_EVENTS.CONTINUE_TO_CREATION}>
           <Button variant="contained" sx={{ padding: '8px 16px' }} fullWidth onClick={onLogin}>
             <Box
               width="100%"

diff --git a/src/hooks/wallets/consts.ts b/src/hooks/wallets/consts.ts
@@ -15,7 +15,7 @@ export const CGW_NAMES: { [key in WALLET_KEYS]: string | undefined } = {
   [WALLET_KEYS.WALLETCONNECT_V2]: 'walletConnect_v2',
   [WALLET_KEYS.COINBASE]: 'coinbase',
   [WALLET_KEYS.PAIRING]: 'safeMobile',
-  [WALLET_KEYS.SOCIAL]: 'socialLogin',
+  [WALLET_KEYS.SOCIAL]: 'socialSigner',
   [WALLET_KEYS.LEDGER]: 'ledger',
   [WALLET_KEYS.TREZOR]: 'trezor',
   [WALLET_KEYS.KEYSTONE]: 'keystone',