diff --git a/src/components/common/PageLayout/index.tsx b/src/components/common/PageLayout/index.tsx index 0df0489f86..a6a7dbfcab 100644 --- a/src/components/common/PageLayout/index.tsx +++ b/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(isNoSidebarRoute(pathname)) + const isSidebarRoute = useIsSidebarRoute() + const [noSidebar, setNoSidebar] = useState(isSidebarRoute) const [isSidebarOpen, setSidebarOpen] = useState(true) const [isBatchOpen, setBatchOpen] = useState(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) diff --git a/src/components/recovery/RecoveryModal/index.test.tsx b/src/components/recovery/RecoveryModal/index.test.tsx index 4df0d17331..0821e9b777 100644 --- a/src/components/recovery/RecoveryModal/index.test.tsx +++ b/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( + + <_RecoveryModal wallet={wallet} isOwner={false} isGuardian queue={queue} isSidebarRoute={false}> + Test + + , + ) + + 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 + + const { queryByText } = render( + + <_RecoveryModal wallet={wallet} isOwner={false} isGuardian queue={queue} isSidebarRoute={false}> + Test + + , + ) + + 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 diff --git a/src/components/recovery/RecoveryModal/index.tsx b/src/components/recovery/RecoveryModal/index.tsx index 93e649292c..e3ab902c50 100644 --- a/src/components/recovery/RecoveryModal/index.tsx +++ b/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 wallet: ReturnType + 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() { diff --git a/src/hooks/useIsSidebarRoute.ts b/src/hooks/useIsSidebarRoute.ts new file mode 100644 index 0000000000..5f8f3d7c91 --- /dev/null +++ b/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) +}