chore: cherry-pick #8708 (#8760)

Cherry-pick fix for #8708 on version 7.17.0.

---------

Co-authored-by: Sylva Elendu <iamsylvaelendu@gmail.com>

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

@@ -250,7 +250,6 @@ class Confirm extends PureComponent {
     multiLayerL1FeeTotal: '0x0',
     result: {},
     transactionMeta: {},
-    preparedTransaction: {},
   };
 
   originIsWalletConnect = this.props.transaction.origin?.startsWith(
@@ -376,6 +375,13 @@ class Confirm extends PureComponent {
       isPaymentRequest,
     } = this.props;
 
+    const {
+      from,
+      transactionTo: to,
+      transactionValue: value,
+      data,
+    } = this.props.transaction;
+
     this.updateNavBar();
     this.getGasLimit();
 
@@ -399,9 +405,39 @@ class Confirm extends PureComponent {
         POLLING_INTERVAL_ESTIMATED_L1_FEE,
       );
     }
+    // add transaction
+    const { TransactionController } = Engine.context;
+    const { result, transactionMeta } =
+      await TransactionController.addTransaction(this.props.transaction, {
+        deviceConfirmedOn: WalletDevice.MM_MOBILE,
+        origin: TransactionTypes.MMM,
+      });
+
+    this.setState({ result, transactionMeta });
+
+    if (isBlockaidFeatureEnabled()) {
+      // start validate ppom
+      const id = transactionMeta.id;
+      const reqObject = {
+        id,
+        jsonrpc: '2.0',
+        method: 'eth_sendTransaction',
+        origin: TransactionTypes.MM,
+        params: [
+          {
+            from,
+            to,
+            value,
+            data,
+          },
+        ],
+      };
+
+      ppomUtil.validateRequest(reqObject, id);
+    }
   };
 
-  componentDidUpdate = async (prevProps, prevState) => {
+  componentDidUpdate = (prevProps, prevState) => {
     const {
       transactionState: {
         transactionTo,
@@ -479,52 +515,6 @@ class Confirm extends PureComponent {
         this.parseTransactionDataHeader();
       }
     }
-
-    const { gasEstimationReady, preparedTransaction } = this.state;
-
-    // only add transaction if gasEstimationReady and preparedTransaction has gas
-    if (gasEstimationReady && !preparedTransaction.gas) {
-      const { TransactionController } = Engine.context;
-
-      const preparedTransaction = this.prepareTransactionToSend();
-
-      // update state only if preparedTransaction has gas
-      if (preparedTransaction.gas) {
-        const { from, to, value, data } = preparedTransaction;
-
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({ preparedTransaction }, async () => {
-          const { result, transactionMeta } =
-            await TransactionController.addTransaction(preparedTransaction, {
-              deviceConfirmedOn: WalletDevice.MM_MOBILE,
-              origin: TransactionTypes.MMM,
-            });
-
-          this.setState({ result, transactionMeta });
-
-          if (isBlockaidFeatureEnabled()) {
-            // start validate ppom
-            const id = transactionMeta.id;
-            const reqObject = {
-              id,
-              jsonrpc: '2.0',
-              method: 'eth_sendTransaction',
-              origin: TransactionTypes.MM,
-              params: [
-                {
-                  from,
-                  to,
-                  value,
-                  data,
-                },
-              ],
-            };
-
-            ppomUtil.validateRequest(reqObject, id);
-          }
-        });
-      }
-    }
   };
 
   setScrollViewRef = (ref) => {
@@ -798,11 +788,7 @@ class Confirm extends PureComponent {
     if (transactionConfirmed) return;
     this.setState({ transactionConfirmed: true, stopUpdateGas: true });
     try {
-      const {
-        result,
-        transactionMeta,
-        preparedTransaction: transaction,
-      } = this.state;
+      const transaction = this.prepareTransactionToSend();
 
       let error;
       if (gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET) {
@@ -822,6 +808,8 @@ class Confirm extends PureComponent {
         return;
       }
 
+      const { result, transactionMeta } = this.state;
+
       const isLedgerAccount = isHardwareAccount(transaction.from, [
         ExtendedKeyringTypes.ledger,
       ]);
@@ -851,6 +839,7 @@ class Confirm extends PureComponent {
         return;
       }
 
+      await this.persistTransactionParameters(transaction);
       await KeyringController.resetQRKeyringState();
       await ApprovalController.accept(transactionMeta.id, undefined, {
         waitForResult: true,
@@ -938,7 +927,6 @@ class Confirm extends PureComponent {
 
   updateTransactionStateWithUpdatedNonce = (nonceValue) => {
     this.props.setNonce(nonceValue);
-    this.setState({ preparedTransaction: {} });
   };
 
   renderCustomNonceModal = () => {
@@ -1118,6 +1106,21 @@ class Confirm extends PureComponent {
     return confirmButtonStyle;
   }
 
+  async persistTransactionParameters(transactionParams) {
+    const { TransactionController } = Engine.context;
+    const { transactionMeta } = this.state;
+    const { id: transactionId } = transactionMeta;
+
+    const controllerTransactionMeta =
+      TransactionController.state.transactions.find(
+        (tx) => tx.id === transactionId,
+      );
+
+    controllerTransactionMeta.transaction = transactionParams;
+
+    await TransactionController.updateTransaction(controllerTransactionMeta);
+  }
+
   render = () => {
     const { selectedAsset, paymentRequest } = this.props.transactionState;
     const {