fix: reset nonce if outdated

src/components/tx-flow/SafeTxProvider.tsx

@@ -4,6 +4,7 @@ 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,15 +37,18 @@ const SafeTxProvider = ({ children }: { children: ReactNode }): ReactElement =>
   const [nonceNeeded, setNonceNeeded] = useState<boolean>(true)
   const [safeTxGas, setSafeTxGas] = useState<number>()
 
+  const { safe } = useSafeInfo()
+
   // Signed txs cannot be updated
   const isSigned = safeTx && safeTx.signatures.size > 0
 
   // Recommended nonce and safeTxGas
   const recommendedNonce = useRecommendedNonce()
   const recommendedSafeTxGas = useSafeTxGas(safeTx)
 
-  // Priority to external nonce, then to the recommended one
-  const finalNonce = isSigned ? safeTx?.data.nonce : nonce ?? recommendedNonce ?? safeTx?.data.nonce
+  // Priority to external nonce if valid, then to the recommended one
+  const isNonceValid = nonce !== undefined && nonce >= safe.nonce
+  const finalNonce = isSigned ? safeTx?.data.nonce : isNonceValid ? nonce : recommendedNonce ?? safeTx?.data.nonce
   const finalSafeTxGas = isSigned ? safeTx?.data.safeTxGas : safeTxGas ?? recommendedSafeTxGas ?? safeTx?.data.safeTxGas
 
   // Update the tx when the nonce or safeTxGas change

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,11 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
     formMethods.setValue(TxNonceFormFieldNames.NONCE, recommendedNonce)
   }
 
+  // keep the formdata up-to-date when the actually used nonce updates
+  useEffect(() => {
+    formMethods.setValue(TxNonceFormFieldNames.NONCE, nonce)
+  }, [nonce, 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
   )