cherry-pick: issue with nonce not updating correctly where there are …

…multiple parallel transactions (#27852)

## **Description**

Fix issue with nonce not updating when there are multiple transaction
created in parallel and once transaction is submitted.

## **Related issues**

Fixes: #27617

## **Manual testing steps**

1. Go to testdapp
2. create 2 transactions and submit first one
3. Nonce for second transaction should update

## **Screenshots/Recordings**
TODO

## **Pre-merge author checklist**

- [X] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js

@@ -216,6 +216,8 @@ export default class ConfirmTransactionBase extends Component {
       useMaxValue,
       hasPriorityApprovalRequest,
       mostRecentOverviewPage,
+      txData,
+      getNextNonce,
     } = this.props;
 
     const {
@@ -226,13 +228,18 @@ export default class ConfirmTransactionBase extends Component {
       isEthGasPriceFetched: prevIsEthGasPriceFetched,
       hexMaximumTransactionFee: prevHexMaximumTransactionFee,
       hasPriorityApprovalRequest: prevHasPriorityApprovalRequest,
+      txData: prevTxData,
     } = prevProps;
 
     const statusUpdated = transactionStatus !== prevTxStatus;
     const txDroppedOrConfirmed =
       transactionStatus === TransactionStatus.dropped ||
       transactionStatus === TransactionStatus.confirmed;
 
+    if (txData.id !== prevTxData.id) {
+      getNextNonce();
+    }
+
     if (
       nextNonce !== prevNextNonce ||
       customNonceValue !== prevCustomNonceValue