fix: Disable confirm button if transactionMeta is undefined (#12273)

<!--
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 adds disabled button condition when `transactionMeta` is
undefined.

## **Related issues**

Fixes: #11537

## **Manual testing steps**

N/A

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/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-mobile/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.

app/components/Views/confirmations/SendFlow/Confirm/index.js

@@ -12,6 +12,7 @@ import { connect } from 'react-redux';
 import { getSendFlowTitle } from '../../../../UI/Navbar';
 import PropTypes from 'prop-types';
 import Eth from '@metamask/ethjs-query';
+import { isEmpty } from 'lodash';
 import {
   renderFromWei,
   renderFromTokenMinimalUnit,
@@ -486,11 +487,25 @@ class Confirm extends PureComponent {
     const { TransactionController } = Engine.context;
     const transactionParams = this.prepareTransactionToSend();
 
-    const { result, transactionMeta } =
-      await TransactionController.addTransaction(transactionParams, {
-        deviceConfirmedOn: WalletDevice.MM_MOBILE,
-        origin: TransactionTypes.MMM,
-      });
+    let result, transactionMeta;
+    try {
+      ({ result, transactionMeta } = await TransactionController.addTransaction(
+        transactionParams,
+        {
+          deviceConfirmedOn: WalletDevice.MM_MOBILE,
+          origin: TransactionTypes.MMM,
+        },
+      ));
+    } catch (error) {
+      Logger.error(error, 'error while adding transaction (Confirm)');
+      navigation?.dangerouslyGetParent()?.pop();
+      Alert.alert(
+        strings('transactions.transaction_error'),
+        error && error.message,
+        [{ text: 'OK' }],
+      );
+      return;
+    }
 
     setTransactionId(transactionMeta.id);
 
@@ -1305,6 +1320,7 @@ class Confirm extends PureComponent {
       EIP1559GasObject,
       EIP1559GasTransaction,
       legacyGasObject,
+      transactionMeta,
     } = this.state;
     const colors = this.context.colors || mockTheme.colors;
     const styles = createStyles(colors);
@@ -1477,6 +1493,7 @@ class Confirm extends PureComponent {
           <StyledButton
             type={'confirm'}
             disabled={
+              isEmpty(transactionMeta) ||
               transactionConfirmed ||
               !gasEstimationReady ||
               Boolean(errorMessage) ||

app/components/Views/confirmations/SendFlow/Confirm/index.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ConnectedComponent } from 'react-redux';
 import { waitFor, fireEvent } from '@testing-library/react-native';
 import { merge } from 'lodash';
+import { Alert } from 'react-native';
 import Confirm from '.';
 import {
   DeepPartial,
@@ -16,6 +17,8 @@ import { RootState } from '../../../../../reducers';
 import { RpcEndpointType } from '@metamask/network-controller';
 import { ConfirmViewSelectorsIDs } from '../../../../../../e2e/selectors/SendFlow/ConfirmView.selectors';
 import { updateTransactionMetrics } from '../../../../../core/redux/slices/transactionMetrics';
+import Engine from '../../../../../core/Engine';
+import { flushPromises } from '../../../../../util/test/utils';
 
 const MOCK_ADDRESS = '0x15249D1a506AFC731Ee941d0D40Cf33FacD34E58';
 
@@ -256,4 +259,24 @@ describe('Confirm', () => {
       );
     });
   });
+
+  it('should show error if transaction is not added', async () => {
+    jest.spyOn(Alert, 'alert');
+
+    Engine.context.TransactionController.addTransaction = jest
+      .fn()
+      .mockRejectedValue(new Error('Transaction not added'));
+
+    render(Confirm);
+
+    await flushPromises();
+
+    await waitFor(() => {
+      expect(Alert.alert).toHaveBeenCalledWith(
+        'Transaction error',
+        'Transaction not added',
+        expect.any(Array),
+      );
+    });
+  });
 });