fix: Hide confirmation dialog if set via setTxFlow (#2233)

src/components/sidebar/NewTxButton/index.tsx

@@ -10,7 +10,7 @@ const NewTxButton = (): ReactElement => {
   const { setTxFlow } = useContext(TxModalContext)
 
   const onClick = () => {
-    setTxFlow(<NewTxMenu />)
+    setTxFlow(<NewTxMenu />, undefined, false)
     trackEvent(OVERVIEW_EVENTS.NEW_TRANSACTION)
   }
 

src/components/tx-flow/common/TxNonce/index.tsx

@@ -149,7 +149,6 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: number; recommendedNo
                       readOnly,
                     }}
                     className={css.input}
-                    title={field.value}
                     sx={{
                       minWidth: `clamp(1ch, ${field.value.length}ch, 200px)`,
                     }}

src/components/tx-flow/flows/NewTx/index.tsx

@@ -20,10 +20,6 @@ const NewTxMenu = () => {
     setTxFlow(<TokenTransferFlow />)
   }, [setTxFlow])
 
-  const onNavigate = useCallback(() => {
-    setTxFlow(undefined)
-  }, [setTxFlow])
-
   const progress = 10
 
   return (
@@ -53,7 +49,7 @@ const NewTxMenu = () => {
 
               <SendTokensButton onClick={onTokensClick} sx={buttonSx} />
 
-              <SendNFTsButton onClick={onNavigate} sx={buttonSx} />
+              <SendNFTsButton sx={buttonSx} />
 
               {txBuilder?.app && (
                 <>
@@ -62,7 +58,7 @@ const NewTxMenu = () => {
                     interaction
                   </Typography>
 
-                  <TxBuilderButton onClick={onNavigate} sx={buttonSx} />
+                  <TxBuilderButton sx={buttonSx} />
                 </>
               )}
             </Grid>

src/components/tx-flow/index.tsx

@@ -1,14 +1,12 @@
 import { createContext, type ReactElement, type ReactNode, useState, useEffect, useCallback } from 'react'
 import TxModalDialog from '@/components/common/TxModalDialog'
 import { useRouter } from 'next/router'
-import { TxFlowExitWarning } from '@/components/tx-flow/common/TxFlowExitWarning'
-import NewTxMenu from './flows/NewTx'
 
 const noop = () => {}
 
 type TxModalContextType = {
   txFlow: JSX.Element | undefined
-  setTxFlow: (txFlow: TxModalContextType['txFlow'], onClose?: () => void) => void
+  setTxFlow: (txFlow: TxModalContextType['txFlow'], onClose?: () => void, shouldWarn?: boolean) => void
   setFullWidth: (fullWidth: boolean) => void
 }
 
@@ -20,63 +18,60 @@ export const TxModalContext = createContext<TxModalContextType>({
 
 export const TxModalProvider = ({ children }: { children: ReactNode }): ReactElement => {
   const [txFlow, setFlow] = useState<TxModalContextType['txFlow']>(undefined)
-  const [showWarning, setShowWarning] = useState(false)
+  const [shouldWarn, setShouldWarn] = useState<boolean>(true)
   const [, setOnClose] = useState<Parameters<TxModalContextType['setTxFlow']>[1]>(noop)
   const [fullWidth, setFullWidth] = useState<boolean>(false)
   const router = useRouter()
 
-  const handleShowWarning = useCallback(() => {
-    setShowWarning(true)
-  }, [setShowWarning])
-
-  const handleCloseWarning = useCallback(() => {
-    setShowWarning(false)
-  }, [setShowWarning])
-
   const handleModalClose = useCallback(() => {
     setOnClose((prevOnClose) => {
       prevOnClose?.()
       return noop
     })
-    handleCloseWarning()
     setFlow(undefined)
-  }, [handleCloseWarning, setFlow, setOnClose])
+  }, [setFlow, setOnClose])
+
+  const handleShowWarning = useCallback(() => {
+    if (!shouldWarn) {
+      handleModalClose()
+      return
+    }
+
+    const ok = confirm('Closing this window will discard your current progress.')
+    if (!ok) {
+      router.events.emit('routeChangeError')
+      throw 'routeChange aborted. This error can be safely ignored - https://github.com/zeit/next.js/issues/2476.'
+    }
+
+    handleModalClose()
+  }, [shouldWarn, handleModalClose, router.events])
 
   const setTxFlow = useCallback(
-    (txFlow: TxModalContextType['txFlow'], onClose?: () => void) => {
-      if (!txFlow) {
-        handleCloseWarning()
-      }
+    (txFlow: TxModalContextType['txFlow'], onClose?: () => void, shouldWarn?: boolean) => {
       setFlow(txFlow)
       setOnClose(() => onClose ?? noop)
+      setShouldWarn(shouldWarn ?? true)
     },
-    [setFlow, setOnClose, handleCloseWarning],
+    [setFlow, setOnClose],
   )
 
-  // Show the modal if user navigates
+  // Show the confirmation dialog if user navigates
   useEffect(() => {
-    const shouldWarn = txFlow && !(txFlow.type instanceof NewTxMenu)
-    if (!shouldWarn) {
-      return
-    }
+    if (!txFlow) return
 
     router.events.on('routeChangeStart', handleShowWarning)
     return () => {
       router.events.off('routeChangeStart', handleShowWarning)
     }
-  }, [txFlow, router, handleShowWarning])
+  }, [txFlow, handleShowWarning, router.events])
 
   return (
-    <>
-      <TxModalContext.Provider value={{ txFlow, setTxFlow, setFullWidth }}>
-        {children}
-
-        <TxModalDialog open={!!txFlow} onClose={handleShowWarning} fullWidth={fullWidth}>
-          {txFlow}
-        </TxModalDialog>
-      </TxModalContext.Provider>
+    <TxModalContext.Provider value={{ txFlow, setTxFlow, setFullWidth }}>
+      {children}
 
-      <TxFlowExitWarning open={showWarning} onCancel={handleCloseWarning} onClose={handleModalClose} />
-    </>
+      <TxModalDialog open={!!txFlow} onClose={handleShowWarning} fullWidth={fullWidth}>
+        {txFlow}
+      </TxModalDialog>
+    </TxModalContext.Provider>
   )
 }

src/components/tx/SignOrExecuteForm/ExecuteForm.tsx

@@ -83,7 +83,7 @@ const ExecuteForm = ({
 
     try {
       const executedTxId = await executeTx(txOptions, safeTx, txId, origin, willRelay)
-      setTxFlow(<SuccessScreen txId={executedTxId} />)
+      setTxFlow(<SuccessScreen txId={executedTxId} />, undefined, false)
     } catch (_err) {
       const err = asError(_err)
       logError(Errors._804, err)