From 752cd04e511c41872083d373d137e9895b974a7a Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Thu, 26 Oct 2023 18:38:43 +0200
Subject: [PATCH] Close modal on path change

---
 src/components/tx-flow/index.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/tx-flow/index.tsx b/src/components/tx-flow/index.tsx
index 3bce2ffdea..e02acb37fb 100644
--- a/src/components/tx-flow/index.tsx
+++ b/src/components/tx-flow/index.tsx
@@ -1,4 +1,5 @@
 import { createContext, type ReactElement, type ReactNode, useState, useEffect, useCallback, useRef } from 'react'
+import { usePathname } from 'next/navigation'
 import TxModalDialog from '@/components/common/TxModalDialog'
 import { SuccessScreen } from './flows/SuccessScreen'
 import useSafeAddress from '@/hooks/useSafeAddress'
@@ -29,6 +30,8 @@ export const TxModalProvider = ({ children }: { children: ReactNode }): ReactEle
   const onClose = useRef<() => void>(noop)
   const safeId = useChainId() + useSafeAddress()
   const prevSafeId = useRef<string>(safeId ?? '')
+  const pathname = usePathname()
+  const prevPathname = useRef<string>(pathname)
 
   const handleModalClose = useCallback(() => {
     onClose.current()
@@ -73,9 +76,18 @@ export const TxModalProvider = ({ children }: { children: ReactNode }): ReactEle
     if (txFlow) {
       handleShowWarning()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [txFlow, safeId])
 
+  // // Close the modal when the path changes
+  useEffect(() => {
+    if (pathname === prevPathname.current) return
+    prevPathname.current = pathname
+
+    if (txFlow) {
+      handleShowWarning()
+    }
+  }, [txFlow, pathname])
+
   return (
     <TxModalContext.Provider value={{ txFlow, setTxFlow, setFullWidth }}>
       {children}