Fix(Tx flow): prevent navigation when tx modal is open

apps/web/src/components/tx-flow/index.tsx

@@ -1,10 +1,8 @@
-import { createContext, type ReactElement, type ReactNode, useState, useEffect, useCallback, useRef } from 'react'
-import { usePathname } from 'next/navigation'
+import { createContext, type ReactElement, type ReactNode, useState, useCallback, useRef } from 'react'
 import TxModalDialog from '@/components/common/TxModalDialog'
 import { SuccessScreenFlow, NestedTxSuccessScreenFlow } from './flows'
-import useChainId from '@/hooks/useChainId'
 import { useWalletContext } from '@/hooks/wallets/useWallet'
-import { useSafeAddressFromUrl } from '@/hooks/useSafeAddressFromUrl'
+import { usePreventNavigation } from '@/hooks/usePreventNavigation'
 
 const noop = () => {}
 
@@ -20,7 +18,6 @@ export const TxModalContext = createContext<TxModalContextType>({
   setFullWidth: noop,
 })
 
-// TODO: Rename TxModalProvider, setTxFlow, TxModalDialog to not contain Tx since it can be used for any type of modal as a global provider
 const confirmClose = () => {
   return confirm('Closing this window will discard your current progress.')
 }
@@ -30,21 +27,19 @@ export const TxModalProvider = ({ children }: { children: ReactNode }): ReactEle
   const [fullWidth, setFullWidth] = useState<boolean>(false)
   const shouldWarn = useRef<boolean>(true)
   const onClose = useRef<() => void>(noop)
-  const safeId = useChainId() + useSafeAddressFromUrl()
-  const prevSafeId = useRef<string>(safeId ?? '')
-  const pathname = usePathname()
-  const prevPathname = useRef<string | null>(pathname)
   const { setSignerAddress } = useWalletContext() ?? {}
 
   const handleModalClose = useCallback(() => {
     if (shouldWarn.current && !confirmClose()) {
-      return
+      return false
     }
     onClose.current()
     onClose.current = noop
     setFlow(undefined)
 
     setSignerAddress?.(undefined)
+
+    return true
   }, [setSignerAddress])
 
   // Open a new tx flow, close the previous one if any
@@ -70,17 +65,7 @@ export const TxModalProvider = ({ children }: { children: ReactNode }): ReactEle
     [],
   )
 
-  // Close the modal when the user navigates to a different Safe or route
-  useEffect(() => {
-    if (safeId === prevSafeId.current && pathname === prevPathname.current) return
-
-    prevSafeId.current = safeId
-    prevPathname.current = pathname
-
-    if (txFlow) {
-      handleModalClose()
-    }
-  }, [txFlow, safeId, pathname, handleModalClose])
+  usePreventNavigation(txFlow ? handleModalClose : undefined)
 
   return (
     <TxModalContext.Provider value={{ txFlow, setTxFlow, setFullWidth }}>

apps/web/src/hooks/usePreventNavigation.ts

@@ -0,0 +1,62 @@
+import { useEffect, useRef } from 'react'
+import { useRouter } from 'next/router'
+
+export function usePreventNavigation(onNavigate?: () => boolean): void {
+  const router = useRouter()
+  const currentPathRef = useRef(router.asPath)
+
+  // Sync current path ref with router
+  useEffect(() => {
+    const delay = setTimeout(() => {
+      currentPathRef.current = router.asPath
+    }, 300)
+    return () => {
+      clearTimeout(delay)
+    }
+  }, [router.asPath])
+
+  useEffect(() => {
+    if (!onNavigate) return
+
+    const onLinkClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+      const link = target.closest('a')
+      const href = link?.getAttribute('href')
+      if (!link || !href) return
+
+      const isAllowedToNavigate = onNavigate()
+      if (isAllowedToNavigate) {
+        router.push(href)
+      } else {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        e.stopPropagation()
+      }
+    }
+
+    document.addEventListener('mousedown', onLinkClick)
+
+    return () => {
+      document.removeEventListener('mousedown', onLinkClick)
+    }
+  }, [router, onNavigate])
+
+  // Prevent Back/Forward navigation
+  useEffect(() => {
+    router.beforePopState(() => {
+      const prevUrl = currentPathRef.current
+      if (onNavigate) {
+        const isAllowedToNavigate = onNavigate()
+
+        if (!isAllowedToNavigate) {
+          // Cancel navigation and reset the URL back
+          router.replace(prevUrl)
+          return false
+        }
+      }
+      return true
+    })
+
+    return () => router.beforePopState(() => true)
+  }, [router, onNavigate])
+}

apps/web/src/services/safe-wallet-provider/useSafeWalletProvider.test.tsx

@@ -15,7 +15,7 @@ import * as messages from '@safe-global/utils/utils/safe-messages'
 import { faker } from '@faker-js/faker'
 import { Interface } from 'ethers'
 import { getCreateCallDeployment } from '@safe-global/safe-deployments'
-import { useCurrentChain } from '@/hooks/useChains'
+import * as chainHooks from '@/hooks/useChains'
 import { chainBuilder } from '@/tests/builders/chains'
 
 const appInfo = {
@@ -33,21 +33,13 @@ jest.mock('./notifications', () => {
   }
 })
 
-jest.mock('@/hooks/useChains', () => ({
-  __esModule: true,
-  ...jest.requireActual('@/hooks/useChains'),
-  useCurrentChain: jest.fn(),
-}))
-
 describe('useSafeWalletProvider', () => {
-  const mockUseCurrentChain = useCurrentChain as jest.MockedFunction<typeof useCurrentChain>
-
   beforeEach(() => {
     jest.clearAllMocks()
 
-    mockUseCurrentChain.mockReturnValue(
-      chainBuilder().with({ chainId: '1', recommendedMasterCopyVersion: '1.4.1' }).build(),
-    )
+    jest.spyOn(chainHooks, 'useCurrentChain').mockImplementation(() => {
+      return chainBuilder().with({ chainId: '1', recommendedMasterCopyVersion: '1.4.1' }).build()
+    })
   })
 
   describe('useSafeWalletProvider', () => {