fix: reset nonce if outdated

resets nonce to recommended nonce if the currently selected nonce is lower than the Safe nonce.

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

@@ -1,4 +1,4 @@
-import { memo, type ReactElement, useContext, useMemo } from 'react'
+import { memo, type ReactElement, useContext, useMemo, useEffect } from 'react'
 import {
   Autocomplete,
   Box,
@@ -109,6 +109,16 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
     formMethods.setValue(TxNonceFormFieldNames.NONCE, recommendedNonce)
   }
 
+  const currentFormNonce = formMethods.watch(TxNonceFormFieldNames.NONCE)
+  const isFormChanged = formMethods.formState.isDirty
+
+  // Update to recommended nonce if the current nonce is unchanged and invalid after update
+  useEffect(() => {
+    if (!isFormChanged && Number(currentFormNonce) < safe.nonce) {
+      formMethods.setValue(TxNonceFormFieldNames.NONCE, recommendedNonce)
+    }
+  }, [safe.nonce, recommendedNonce, currentFormNonce, isFormChanged, formMethods])
+
   return (
     <Controller
       name={TxNonceFormFieldNames.NONCE}

src/components/tx/SignOrExecuteForm/hooks.ts

@@ -164,7 +164,7 @@ export const useRecommendedNonce = (): number | undefined => {
       return getRecommendedNonce(safe.chainId, safeAddress)
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [safeAddress, safe.chainId, safe.txQueuedTag], // update when tx queue changes
+    [safeAddress, safe.chainId, safe.txQueuedTag, safe.nonce], // update when tx queue or safe nonce changes
     false, // keep old recommended nonce while refreshing to avoid skeleton
   )