fix: Prevent unwanted updateEditableParams calls on send flow (#29048)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR aims to prevent unwanted `updateEditableParams` calls in send
flow when `useMaxValue` is settled.

After investigating [Sentry error mentioned in the
task](https://metamask.sentry.io/issues/5973118037/events/1ee3e017ad454f09b3666089fba3c2bd/?project=273505&referrer=previous-event)
noticed `updateEditableParams` is throwing when `useMaxValue` is set to
`true`. This issue is happening when we submit/cancel confirmation,
component gets an update, `updateMaxValue - updateEditableParams` gets
called but transaction is not `unapproved` state. So adding a condition
to updating transaction value only when transaction is `unapproved`
status, this will guarantee to prevent unwanted calls.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29048?quickstart=1)

## **Related issues**

Fixes:
#27742

## **Manual testing steps**

N/A

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

N/A

### **After**

N/A

## **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/main/.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
- [X] 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/main/.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.

test/lib/render-helpers.js

@@ -69,10 +69,15 @@ const createProviderWrapper = (store, pathname = '/') => {
   };
 };
 
-export function renderWithProvider(component, store, pathname = '/') {
+export function renderWithProvider(
+  component,
+  store,
+  pathname = '/',
+  renderer = render,
+) {
   const { history, Wrapper } = createProviderWrapper(store, pathname);
   return {
-    ...render(component, { wrapper: Wrapper }),
+    ...renderer(component, { wrapper: Wrapper }),
     history,
   };
 }

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

@@ -282,7 +282,8 @@ export default class ConfirmTransactionBase extends Component {
 
     if (
       hexMaximumTransactionFee !== prevHexMaximumTransactionFee &&
-      useMaxValue
+      useMaxValue &&
+      transactionStatus === TransactionStatus.unapproved
     ) {
       this.updateValueToMax();
     }

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

@@ -2,7 +2,6 @@ import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { fireEvent } from '@testing-library/react';
-
 import { EthAccountType } from '@metamask/keyring-api';
 import {
   TransactionStatus,
@@ -242,7 +241,7 @@ const mockedStoreWithConfirmTxParams = (
 const sendToRecipientSelector =
   '.sender-to-recipient__party--recipient .sender-to-recipient__name';
 
-const render = async ({ props, state } = {}) => {
+const render = async ({ props, state, renderer } = {}) => {
   const store = configureMockStore(middleware)({
     ...baseStore,
     ...state,
@@ -260,6 +259,8 @@ const render = async ({ props, state } = {}) => {
       (result = renderWithProvider(
         <ConfirmTransactionBase {...componentProps} />,
         store,
+        undefined,
+        renderer,
       )),
   );
 
@@ -967,4 +968,67 @@ describe('Confirm Transaction Base', () => {
       expect(confirmButton).toBeDisabled();
     });
   });
+
+  describe('if useMaxValue is settled', () => {
+    const baseStoreState = {
+      ...baseStore,
+      metamask: {
+        ...baseStore.metamask,
+        ...mockNetworkState({ chainId: CHAIN_IDS.GOERLI, ticker: undefined }),
+      },
+    };
+
+    const updateTransactionValue = jest.fn();
+
+    const maxValueSettledProps = {
+      useMaxValue: true,
+      hexMaximumTransactionFee: '0x111',
+      updateTransactionValue,
+    };
+
+    beforeEach(() => {
+      updateTransactionValue.mockClear();
+    });
+
+    it('should update transaction value when new hexMaximumTransactionFee is provided', async () => {
+      const { rerender } = await render({
+        state: baseStoreState,
+        props: maxValueSettledProps,
+      });
+
+      const newHexMaximumTransactionFee = '0x222';
+
+      render({
+        renderer: rerender,
+        state: baseStoreState,
+        props: {
+          ...maxValueSettledProps,
+          hexMaximumTransactionFee: newHexMaximumTransactionFee,
+        },
+      });
+
+      expect(updateTransactionValue).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not update transaction value if transactionStatus is not unapproved', async () => {
+      const { rerender } = await render({
+        state: baseStoreState,
+        props: maxValueSettledProps,
+      });
+
+      const newHexMaximumTransactionFee = '0x222';
+
+      render({
+        renderer: rerender,
+        state: { ...baseStoreState },
+        props: {
+          ...maxValueSettledProps,
+          hexMaximumTransactionFee: newHexMaximumTransactionFee,
+          transactionStatus: TransactionStatus.submitted,
+        },
+      });
+
+      expect(updateTransactionValue).toHaveBeenCalledTimes(0);
+    });
+  });
 });