fix: disable recovery modals on non-sidebar routes (#2870)

src/components/common/PageLayout/index.tsx

@@ -6,41 +6,28 @@ import css from './styles.module.css'
 import SafeLoadingError from '../SafeLoadingError'
 import Footer from '../Footer'
 import SideDrawer from './SideDrawer'
-import { AppRoutes } from '@/config/routes'
+import { useIsSidebarRoute } from '@/hooks/useIsSidebarRoute'
 import useDebounce from '@/hooks/useDebounce'
 import { useRouter } from 'next/router'
 import { TxModalContext } from '@/components/tx-flow'
 import BatchSidebar from '@/components/batch/BatchSidebar'
 import { RecoveryModal } from '@/components/recovery/RecoveryModal'
 
-const isNoSidebarRoute = (pathname: string): boolean => {
-  return [
-    AppRoutes.share.safeApp,
-    AppRoutes.newSafe.create,
-    AppRoutes.newSafe.load,
-    AppRoutes.index,
-    AppRoutes.imprint,
-    AppRoutes.privacy,
-    AppRoutes.cookie,
-    AppRoutes.terms,
-    AppRoutes.licenses,
-  ].includes(pathname)
-}
-
 const PageLayout = ({ pathname, children }: { pathname: string; children: ReactElement }): ReactElement => {
   const router = useRouter()
-  const [noSidebar, setNoSidebar] = useState<boolean>(isNoSidebarRoute(pathname))
+  const isSidebarRoute = useIsSidebarRoute()
+  const [noSidebar, setNoSidebar] = useState<boolean>(isSidebarRoute)
   const [isSidebarOpen, setSidebarOpen] = useState<boolean>(true)
   const [isBatchOpen, setBatchOpen] = useState<boolean>(false)
   const hideSidebar = noSidebar || !isSidebarOpen
   const { setFullWidth } = useContext(TxModalContext)
   let isAnimated = useDebounce(!noSidebar, 300)
-  if (noSidebar) isAnimated = false
+  if (!isSidebarRoute) isAnimated = false
 
   useEffect(() => {
     const noSafeAddress = router.isReady && !router.query.safe
-    setNoSidebar(isNoSidebarRoute(pathname) || noSafeAddress)
-  }, [pathname, router])
+    setNoSidebar(!isSidebarRoute || noSafeAddress)
+  }, [isSidebarRoute, pathname, router])
 
   useEffect(() => {
     setFullWidth(hideSidebar)

src/components/recovery/RecoveryModal/index.test.tsx

@@ -71,6 +71,22 @@ describe('RecoveryModal', () => {
       expect(queryByText('recovery')).toBeFalsy()
     })
 
+    it('should not render the in-progress modal when there is a queue for guardians on a non-sidebar route', () => {
+      const wallet = connectedWalletBuilder().build()
+      const queue = [{ validFrom: BigNumber.from(0) } as RecoveryQueueItem]
+
+      const { queryByText } = render(
+        <RecoveryContext.Provider value={{ state: [[{ queue }]] } as any}>
+          <_RecoveryModal wallet={wallet} isOwner={false} isGuardian queue={queue} isSidebarRoute={false}>
+            Test
+          </_RecoveryModal>
+        </RecoveryContext.Provider>,
+      )
+
+      expect(queryByText('Test')).toBeTruthy()
+      expect(queryByText('recovery')).toBeFalsy()
+    })
+
     it('should render the in-progress modal when there is a queue for guardians', () => {
       const wallet = connectedWalletBuilder().build()
       const queue = [{ validFrom: BigNumber.from(0) } as RecoveryQueueItem]
@@ -103,6 +119,22 @@ describe('RecoveryModal', () => {
       expect(queryByText('Account recovery in progress')).toBeTruthy()
     })
 
+    it('should not render the proposal modal when there is no queue for guardians on a non-sidebar route', () => {
+      const wallet = connectedWalletBuilder().build()
+      const queue = [] as Array<RecoveryQueueItem>
+
+      const { queryByText } = render(
+        <RecoveryContext.Provider value={{ state: [[{ queue }]] } as any}>
+          <_RecoveryModal wallet={wallet} isOwner={false} isGuardian queue={queue} isSidebarRoute={false}>
+            Test
+          </_RecoveryModal>
+        </RecoveryContext.Provider>,
+      )
+
+      expect(queryByText('Test')).toBeTruthy()
+      expect(queryByText('recovery')).toBeFalsy()
+    })
+
     it('should render the proposal modal when there is no queue for guardians', () => {
       const wallet = connectedWalletBuilder().build()
       const queue = [] as Array<RecoveryQueueItem>

src/components/recovery/RecoveryModal/index.tsx

@@ -13,6 +13,7 @@ import useLocalStorage from '@/services/local-storage/useLocalStorage'
 import useWallet from '@/hooks/wallets/useWallet'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { sameAddress } from '@/utils/addresses'
+import { useIsSidebarRoute } from '@/hooks/useIsSidebarRoute'
 import type { RecoveryQueueItem } from '@/services/recovery/recovery-state'
 
 export function _RecoveryModal({
@@ -21,12 +22,14 @@ export function _RecoveryModal({
   isGuardian,
   queue,
   wallet,
+  isSidebarRoute = true,
 }: {
   children: ReactNode
   isOwner: boolean
   isGuardian: boolean
   queue: Array<RecoveryQueueItem>
   wallet: ReturnType<typeof useWallet>
+  isSidebarRoute?: boolean
 }): ReactElement {
   const { wasProposalDismissed, dismissProposal } = _useDidDismissProposal()
   const { wasInProgressDismissed, dismissInProgress } = _useDidDismissInProgress()
@@ -43,6 +46,10 @@ export function _RecoveryModal({
 
   // Trigger modal
   useEffect(() => {
+    if (!isSidebarRoute) {
+      return
+    }
+
     setModal(() => {
       if (next && !wasInProgressDismissed(next.transactionHash)) {
         const onCloseWithDismiss = () => {
@@ -71,9 +78,11 @@ export function _RecoveryModal({
     isOwner,
     next,
     queue.length,
+    router.pathname,
     wallet,
     wasInProgressDismissed,
     wasProposalDismissed,
+    isSidebarRoute,
   ])
 
   // Close modal on navigation
@@ -101,6 +110,7 @@ export const RecoveryModal = madProps(_RecoveryModal, {
   isGuardian: useIsGuardian,
   queue: useRecoveryQueue,
   wallet: useWallet,
+  isSidebarRoute: useIsSidebarRoute,
 })
 
 export function _useDidDismissProposal() {

src/hooks/useIsSidebarRoute.ts

@@ -0,0 +1,19 @@
+import { AppRoutes } from '@/config/routes'
+import { usePathname } from 'next/navigation'
+
+const NO_SIDEBAR_ROUTES = [
+  AppRoutes.share.safeApp,
+  AppRoutes.newSafe.create,
+  AppRoutes.newSafe.load,
+  AppRoutes.index,
+  AppRoutes.imprint,
+  AppRoutes.privacy,
+  AppRoutes.cookie,
+  AppRoutes.terms,
+  AppRoutes.licenses,
+]
+
+export function useIsSidebarRoute(): boolean {
+  const pathname = usePathname()
+  return !NO_SIDEBAR_ROUTES.includes(pathname)
+}