From 14c5da505787ef40f76eb3c9404b63ce1a27aa85 Mon Sep 17 00:00:00 2001
From: James Mealy <james@safe.global>
Date: Thu, 26 Sep 2024 15:02:25 +0200
Subject: [PATCH] Fix: continue with wallet button on welcome page sometimes
 not working (#4156)

---
 .../common/ConnectWallet/WalletDetails.tsx    | 28 -------------------
 .../welcome/WelcomeLogin/WalletLogin.tsx      |  4 +--
 .../__tests__/WalletLogin.test.tsx            | 11 +++++---
 src/components/welcome/WelcomeLogin/index.tsx | 25 +++++++++--------
 4 files changed, 23 insertions(+), 45 deletions(-)
 delete mode 100644 src/components/common/ConnectWallet/WalletDetails.tsx

diff --git a/src/components/common/ConnectWallet/WalletDetails.tsx b/src/components/common/ConnectWallet/WalletDetails.tsx
deleted file mode 100644
index 8bab108de3..0000000000
--- a/src/components/common/ConnectWallet/WalletDetails.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Box, Divider, SvgIcon, Typography } from '@mui/material'
-import type { ReactElement } from 'react'
-
-import LockIcon from '@/public/images/common/lock.svg'
-
-import WalletLogin from '@/components/welcome/WelcomeLogin/WalletLogin'
-
-const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement => {
-  return (
-    <>
-      <Box my={1} display="flex" justifyContent="center">
-        <SvgIcon inheritViewBox sx={{ width: 64, height: 64, display: 'block' }}>
-          <LockIcon />
-        </SvgIcon>
-      </Box>
-
-      <WalletLogin onLogin={onConnect} />
-
-      <Divider sx={{ width: '100%' }}>
-        <Typography color="text.secondary" fontWeight={700} variant="overline">
-          or
-        </Typography>
-      </Divider>
-    </>
-  )
-}
-
-export default WalletDetails
diff --git a/src/components/welcome/WelcomeLogin/WalletLogin.tsx b/src/components/welcome/WelcomeLogin/WalletLogin.tsx
index 97a5d78e01..9486b34edf 100644
--- a/src/components/welcome/WelcomeLogin/WalletLogin.tsx
+++ b/src/components/welcome/WelcomeLogin/WalletLogin.tsx
@@ -4,7 +4,7 @@ import { Box, Button, Typography } from '@mui/material'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import WalletIcon from '@/components/common/WalletIcon'
 
-const WalletLogin = ({ onLogin }: { onLogin: () => void }) => {
+const WalletLogin = ({ onLogin, onContinue }: { onLogin: () => void; onContinue: () => void }) => {
   const wallet = useWallet()
   const connectWallet = useConnectWallet()
 
@@ -16,7 +16,7 @@ const WalletLogin = ({ onLogin }: { onLogin: () => void }) => {
   if (wallet !== null) {
     return (
       <Box sx={{ width: '100%' }}>
-        <Button variant="contained" sx={{ padding: '8px 16px' }} fullWidth onClick={onLogin}>
+        <Button variant="contained" sx={{ padding: '8px 16px' }} fullWidth onClick={onContinue}>
           <Box
             width="100%"
             justifyContent="space-between"
diff --git a/src/components/welcome/WelcomeLogin/__tests__/WalletLogin.test.tsx b/src/components/welcome/WelcomeLogin/__tests__/WalletLogin.test.tsx
index 027ac4dc75..eb25c8c693 100644
--- a/src/components/welcome/WelcomeLogin/__tests__/WalletLogin.test.tsx
+++ b/src/components/welcome/WelcomeLogin/__tests__/WalletLogin.test.tsx
@@ -13,6 +13,7 @@ describe('WalletLogin', () => {
 
   it('should render continue with connected wallet', async () => {
     const mockOnLogin = jest.fn()
+    const mockOnContinue = jest.fn()
     const walletAddress = toBeHex('0x1', 20)
     jest.spyOn(useWallet, 'default').mockReturnValue({
       address: walletAddress,
@@ -22,7 +23,7 @@ describe('WalletLogin', () => {
     })
     jest.spyOn(useConnectWallet, 'default').mockReturnValue(jest.fn())
 
-    const result = render(<WalletLogin onLogin={mockOnLogin} />)
+    const result = render(<WalletLogin onLogin={mockOnLogin} onContinue={mockOnContinue} />)
 
     await waitFor(() => {
       expect(result.findByText(shortenAddress(walletAddress))).resolves.toBeDefined()
@@ -34,16 +35,17 @@ describe('WalletLogin', () => {
     const button = await result.findByRole('button')
     button.click()
 
-    expect(mockOnLogin).toHaveBeenCalled()
+    expect(mockOnContinue).toHaveBeenCalled()
   })
 
   it('should render connect wallet if no wallet is connected', async () => {
     const mockOnLogin = jest.fn()
+    const mockOnContinue = jest.fn()
     const walletAddress = toBeHex('0x1', 20)
     const mockUseWallet = jest.spyOn(useWallet, 'default').mockReturnValue(null)
     jest.spyOn(useConnectWallet, 'default').mockReturnValue(jest.fn().mockReturnValue([{}]))
 
-    const result = render(<WalletLogin onLogin={mockOnLogin} />)
+    const result = render(<WalletLogin onLogin={mockOnLogin} onContinue={mockOnContinue} />)
 
     await waitFor(() => {
       expect(result.findByText('Connect wallet')).resolves.toBeDefined()
@@ -71,11 +73,12 @@ describe('WalletLogin', () => {
 
   it('should invoke the callback if user actively connects', async () => {
     const mockOnLogin = jest.fn()
+    const mockOnContinue = jest.fn()
     jest.spyOn(useWallet, 'default').mockReturnValue(null)
 
     jest.spyOn(useConnectWallet, 'default').mockReturnValue(jest.fn().mockReturnValue([]))
 
-    const result = render(<WalletLogin onLogin={mockOnLogin} />)
+    const result = render(<WalletLogin onLogin={mockOnLogin} onContinue={mockOnContinue} />)
 
     await waitFor(() => {
       expect(result.findByText('Connect wallet')).resolves.toBeDefined()
diff --git a/src/components/welcome/WelcomeLogin/index.tsx b/src/components/welcome/WelcomeLogin/index.tsx
index c2fc28b738..1b7fe98643 100644
--- a/src/components/welcome/WelcomeLogin/index.tsx
+++ b/src/components/welcome/WelcomeLogin/index.tsx
@@ -17,22 +17,25 @@ const WelcomeLogin = () => {
   const { isLoaded, hasSafes } = useHasSafes()
   const [shouldRedirect, setShouldRedirect] = useState(false)
 
+  const redirect = useCallback(() => {
+    if (wallet) {
+      if (isLoaded && !hasSafes) {
+        trackEvent(CREATE_SAFE_EVENTS.OPEN_SAFE_CREATION)
+        router.push({ pathname: AppRoutes.newSafe.create, query: router.query })
+      } else {
+        router.push({ pathname: AppRoutes.welcome.accounts, query: router.query })
+      }
+    }
+  }, [hasSafes, isLoaded, router, wallet])
+
   const onLogin = useCallback(() => {
     setShouldRedirect(true)
   }, [])
 
   useEffect(() => {
     if (!shouldRedirect) return
-
-    if (wallet && isLoaded) {
-      if (hasSafes) {
-        router.push({ pathname: AppRoutes.welcome.accounts, query: router.query })
-      } else {
-        trackEvent(CREATE_SAFE_EVENTS.OPEN_SAFE_CREATION)
-        router.push({ pathname: AppRoutes.newSafe.create, query: router.query })
-      }
-    }
-  }, [hasSafes, isLoaded, router, wallet, shouldRedirect])
+    redirect()
+  }, [redirect, shouldRedirect])
 
   return (
     <Paper className={css.loginCard} data-testid="welcome-login">
@@ -50,7 +53,7 @@ const WelcomeLogin = () => {
         </Typography>
 
         <Track {...OVERVIEW_EVENTS.OPEN_ONBOARD} label={OVERVIEW_LABELS.welcome_page}>
-          <WalletLogin onLogin={onLogin} />
+          <WalletLogin onLogin={onLogin} onContinue={redirect} />
         </Track>
 
         {!wallet && (