From 8256390da136f397af69f20396d7ce19acb2305f Mon Sep 17 00:00:00 2001 From: Usame Algan <5880855+usame-algan@users.noreply.github.com> Date: Mon, 25 Sep 2023 09:40:46 +0200 Subject: [PATCH] fix: Update tx flow form when selecting a replacement nonce (#2520) * fix: Update tx flow form when selecting a replacement nonce * fix: Update recommended nonce in the form if it changes in the background * fix: Skip initial validation * fix: Move logic inside useRecommendedNonce --- src/components/tx-flow/SafeTxProvider.tsx | 4 +--- src/components/tx-flow/common/TxNonce/index.tsx | 5 ++++- src/components/tx/SignOrExecuteForm/hooks.ts | 6 ++++-- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/tx-flow/SafeTxProvider.tsx b/src/components/tx-flow/SafeTxProvider.tsx index 06c3b95574..cdc263d815 100644 --- a/src/components/tx-flow/SafeTxProvider.tsx +++ b/src/components/tx-flow/SafeTxProvider.tsx @@ -4,7 +4,6 @@ import type { SafeTransaction } from '@safe-global/safe-core-sdk-types' import { createTx } from '@/services/tx/tx-sender' import { useRecommendedNonce, useSafeTxGas } from '../tx/SignOrExecuteForm/hooks' import { Errors, logError } from '@/services/exceptions' -import useSafeInfo from '@/hooks/useSafeInfo' export const SafeTxContext = createContext<{ safeTx?: SafeTransaction @@ -36,13 +35,12 @@ const SafeTxProvider = ({ children }: { children: ReactNode }): ReactElement => const [nonce, setNonce] = useState() const [nonceNeeded, setNonceNeeded] = useState(true) const [safeTxGas, setSafeTxGas] = useState() - const { safe } = useSafeInfo() // Signed txs cannot be updated const isSigned = safeTx && safeTx.signatures.size > 0 // Recommended nonce and safeTxGas - const recommendedNonce = Math.max(safe.nonce, useRecommendedNonce() ?? 0) + const recommendedNonce = useRecommendedNonce() const recommendedSafeTxGas = useSafeTxGas(safeTx) // Priority to external nonce, then to the recommended one diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx index 18f031f93c..3aa9709623 100644 --- a/src/components/tx-flow/common/TxNonce/index.tsx +++ b/src/components/tx-flow/common/TxNonce/index.tsx @@ -104,7 +104,7 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo defaultValues: { [TxNonceFormFieldNames.NONCE]: nonce, }, - mode: 'onTouched', + mode: 'all', values: { [TxNonceFormFieldNames.NONCE]: nonce, }, @@ -122,6 +122,9 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo required: 'Nonce is required', // Validation must be async to allow resetting invalid values onBlur validate: async (value) => { + // nonce is always valid so no need to validate if the input is the same + if (value === nonce) return + const newNonce = Number(value) if (isNaN(newNonce)) { diff --git a/src/components/tx/SignOrExecuteForm/hooks.ts b/src/components/tx/SignOrExecuteForm/hooks.ts index a7ca048452..2cf77b95e0 100644 --- a/src/components/tx/SignOrExecuteForm/hooks.ts +++ b/src/components/tx/SignOrExecuteForm/hooks.ts @@ -165,10 +165,12 @@ export const useRecommendedNonce = (): number | undefined => { const { safeAddress, safe } = useSafeInfo() const [recommendedNonce] = useAsync( - () => { + async () => { if (!safe.chainId || !safeAddress) return - return getRecommendedNonce(safe.chainId, safeAddress) + const recommendedNonce = await getRecommendedNonce(safe.chainId, safeAddress) + + return recommendedNonce ? Math.max(safe.nonce, recommendedNonce) : undefined }, // eslint-disable-next-line react-hooks/exhaustive-deps [safeAddress, safe.chainId, safe.txQueuedTag], // update when tx queue changes