fix: close transaction flow if Safe changes (#2526)

* fix: close transaction flow if Safe changes

* refactor: use `handleModalClose`

* fix: use `safeAddress` variable

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<boolean>(false)
   const pathname = usePathname()
   const [, setLastPath] = useState<string>(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 (
     <TxModalContext.Provider value={{ txFlow, setTxFlow, setFullWidth }}>
       {children}