diff --git a/src/components/tx-flow/index.tsx b/src/components/tx-flow/index.tsx index 2a5b7c0223..eebcbb0338 100644 --- a/src/components/tx-flow/index.tsx +++ b/src/components/tx-flow/index.tsx @@ -1,6 +1,7 @@ import { createContext, type ReactElement, type ReactNode, useState, useEffect, useCallback } from 'react' import TxModalDialog from '@/components/common/TxModalDialog' import { usePathname } from 'next/navigation' +import useSafeInfo from '@/hooks/useSafeInfo' const noop = () => {} @@ -23,6 +24,7 @@ export const TxModalProvider = ({ children }: { children: ReactNode }): ReactEle const [fullWidth, setFullWidth] = useState(false) const pathname = usePathname() const [, setLastPath] = useState(pathname) + const { safeAddress, safe } = useSafeInfo() const handleModalClose = useCallback(() => { setOnClose((prevOnClose) => { @@ -63,6 +65,13 @@ export const TxModalProvider = ({ children }: { children: ReactNode }): ReactEle }) }, [txFlow, handleShowWarning, pathname]) + // Close the modal when the Safe changes + useEffect(() => { + handleModalClose() + // Could have same address but different chain + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [safe.chainId, safeAddress]) + return ( {children}