From 4e95926959d0e0066c5141fcca70af3a6c3ad73e Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Wed, 5 Jul 2023 16:20:22 +0200
Subject: [PATCH] fix: Hide confirmation dialog if set via setTxFlow (#2233)
---
src/components/sidebar/NewTxButton/index.tsx | 2 +-
.../tx-flow/common/TxNonce/index.tsx | 1 -
src/components/tx-flow/flows/NewTx/index.tsx | 8 +--
src/components/tx-flow/index.tsx | 65 +++++++++----------
.../tx/SignOrExecuteForm/ExecuteForm.tsx | 2 +-
5 files changed, 34 insertions(+), 44 deletions(-)
diff --git a/src/components/sidebar/NewTxButton/index.tsx b/src/components/sidebar/NewTxButton/index.tsx
index 5e057cfebd..7bd49a6b4a 100644
--- a/src/components/sidebar/NewTxButton/index.tsx
+++ b/src/components/sidebar/NewTxButton/index.tsx
@@ -10,7 +10,7 @@ const NewTxButton = (): ReactElement => {
const { setTxFlow } = useContext(TxModalContext)
const onClick = () => {
- setTxFlow()
+ setTxFlow(, undefined, false)
trackEvent(OVERVIEW_EVENTS.NEW_TRANSACTION)
}
diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
index 710ec752c3..b001979e50 100644
--- a/src/components/tx-flow/common/TxNonce/index.tsx
+++ b/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)`,
}}
diff --git a/src/components/tx-flow/flows/NewTx/index.tsx b/src/components/tx-flow/flows/NewTx/index.tsx
index 2156d06ac3..db458226d5 100644
--- a/src/components/tx-flow/flows/NewTx/index.tsx
+++ b/src/components/tx-flow/flows/NewTx/index.tsx
@@ -20,10 +20,6 @@ const NewTxMenu = () => {
setTxFlow()
}, [setTxFlow])
- const onNavigate = useCallback(() => {
- setTxFlow(undefined)
- }, [setTxFlow])
-
const progress = 10
return (
@@ -53,7 +49,7 @@ const NewTxMenu = () => {
-
+
{txBuilder?.app && (
<>
@@ -62,7 +58,7 @@ const NewTxMenu = () => {
interaction
-
+
>
)}
diff --git a/src/components/tx-flow/index.tsx b/src/components/tx-flow/index.tsx
index fd3b8188c1..63fc52f90c 100644
--- a/src/components/tx-flow/index.tsx
+++ b/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({
export const TxModalProvider = ({ children }: { children: ReactNode }): ReactElement => {
const [txFlow, setFlow] = useState(undefined)
- const [showWarning, setShowWarning] = useState(false)
+ const [shouldWarn, setShouldWarn] = useState(true)
const [, setOnClose] = useState[1]>(noop)
const [fullWidth, setFullWidth] = useState(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 (
- <>
-
- {children}
-
-
- {txFlow}
-
-
+
+ {children}
-
- >
+
+ {txFlow}
+
+
)
}
diff --git a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
index bbc9ab883a..e6dedbb042 100644
--- a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
@@ -83,7 +83,7 @@ const ExecuteForm = ({
try {
const executedTxId = await executeTx(txOptions, safeTx, txId, origin, willRelay)
- setTxFlow()
+ setTxFlow(, undefined, false)
} catch (_err) {
const err = asError(_err)
logError(Errors._804, err)