fix: Update tx flow form when selecting a replacement nonce

[usame-algan]

What it solves

Part of #2383

The form mode for the nonce form changed to onTouched with #2383 but selecting a nonce now doesn't update the form unless the user blurs the nonce input. This change calls onBlur() whenever the user selects something from the nonce replacement dropdown.

How to test it

1. Open a safe with at least one transaction in queue
2. Create a new transaction
3. Go to the review screen
4. Observe seeing the Sign flow
5. Select the existing nonce from the nonce form
6. Observe seeing the Execute flow

Checklist

• I've tested the branch on mobile 📱
• I've documented how it affects the analytics (if at all) 📊
• I've written a unit/e2e test for it (if applicable) 🧑‍💻

[github-actions]

Branch preview

✅ Deploy successful!

https://fix_nonce_update--walletweb.review-wallet-web.5afe.dev

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[katspaugh]

Good catch!

[schmanu]

💯 Nice one!

[francovenica]

So the main flow works fine, if the nonce is the next one to be executed the form allows execution, if is not only signing is possible.

Small issue:
There used to be a skeleton in the input that allow the load of the nonce without flickering. In this PR that skeleton is missing, so you can see the lowest nonces for a couple of seconds until it changes to the next nonce in the queue:

[usame-algan]

I've reverted part of #2383 to have the previous validation UX (input is checked without having to blur) and instead added an effect to update the form value when the recommended nonce changes and IF the user has not touched the field yet. I've also added back the loading state. @schmanu @katspaugh can you check if this is the desired behaviour?

[katspaugh]

IMHO this should be part of useRecommendedNonce

[usame-algan]

True, I've moved it into the hook.

[katspaugh]

Why is this needed? Can’t the input just be a controlled input? SafeTxContext returns a finalNonce which already contains the logic that differentiates user input and background updates.

[usame-algan]

Good point, I think the issue is that the validate calls setNonce automatically without user input so that the controlled input value nonce will never update to the recommended nonce. I've added an early return inside the validate function to skip validation if the input value is the same as nonce to avoid initial validation. This fixes the issue too and since we know that nonce is always valid it is ok to skip validation if the input value is the same.

[schmanu]

I tried it out and it works fine.

[francovenica]

Looks good to me.
The skeleton to hide the nonce loading is working fine
Changing the nonce (by writing, by selecting from the dropdown or using the circular arrow) changes the form to execution or only-siging just fine.