Fix: continue with wallet button on welcome page sometimes not working (

#4156)
safe-global · Sep 26, 2024 · 14c5da5 · 14c5da5
1 parent 0e3a828
commit 14c5da5
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 45 deletions.
diff --git a/src/components/common/ConnectWallet/WalletDetails.tsx b/src/components/common/ConnectWallet/WalletDetails.tsx
diff --git 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
@@ -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
@@ -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 && (