chore(runway): cherry-pick fix(perps): prevent payment token reverting when switching in Pay With modal cp-7.66.0 (#26130)

- fix(perps): prevent payment token reverting when switching in Pay With
modal cp-7.66.0 (#26120)

## **Description**

When opening the Perps order view, the component syncs the transaction
"pay token" from pending config (e.g. last selected payment token). The
previous logic re-ran this sync on every effect run, so if the user
changed the token in the "Pay With" modal, a later effect could
overwrite their choice with the pending token again.

**Changes:**
- Pending config is now applied **once per load** (or when
`initialAsset` changes). A ref tracks which pending token was already
applied so we don’t overwrite the user’s in-session token selection.
- When `initialAsset` changes (e.g. user switches from BTC to ETH), the
"applied" state is reset so pending config is re-applied for the new
asset.
- When pending config has no selected token,
`setSelectedPaymentToken(null)` is only called once, not on every effect
run.

This keeps the intended "restore from pending config" behavior on first
load and on asset change, without undoing the user’s token choice when
they’ve already changed it in the same session.



## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Fixed Perps order view reverting the user’s payment
token selection to the pending config after they had changed it in the
Pay With modal.

## **Related issues**

Jira issue: https://consensyssoftware.atlassian.net/browse/TAT-2572
Fixes: #26118

## **Manual testing steps**

```gherkin
Feature: Perps order view pay token and pending config
  Scenario: user changes payment token and it is not overwritten by pending config
    Given user is on Perps order view with a pending payment token (e.g. USDC)
    And pay token is initially synced from pending config
    When user opens Pay With modal and selects a different token (e.g. DAI)
    Then the selected token remains DAI and is not reverted to the pending token (USDC)

  Scenario: pending config is re-applied when switching asset
    Given user is on Perps order view for asset BTC with pending token A
    And pay token was synced to token A
    When user switches to asset ETH (e.g. different market) and pending config has token B for ETH
    Then pay token is synced to token B for the new asset
```

## **Screenshots/Recordings**

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

### **Before**

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

### **After**




https://github.com/user-attachments/assets/f0d32725-e490-4379-a890-cec76f1691d6



## **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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Touches Perps order payment-token sync logic that drives transaction
parameters; regression could cause incorrect token selection, but change
is scoped and covered by new unit tests.
> 
> **Overview**
> Prevents the Perps order view from re-applying the *pending trade
configuration* payment token on subsequent renders, which previously
could revert a user’s in-session selection after using the Pay With
modal.
> 
> `PerpsPayRow` now tracks the last pending token applied via a
`useRef`, only syncing it once per load and resetting when
`initialAsset` changes; it also ensures `setSelectedPaymentToken(null)`
is only dispatched once when no pending token exists. Tests were
expanded to cover “apply once”, asset-switch re-apply, and
no-repeat-null behavior.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
090eb88. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Co-authored-by: Cursor <cursoragent@cursor.com>
[6c5d77a](6c5d77a)

Co-authored-by: Michal Szorad <michal.szorad@consensys.net>
Co-authored-by: Cursor <cursoragent@cursor.com>

Author: 3 people

app/components/UI/Perps/Views/PerpsOrderView/PerpsPayRow.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent } from '@testing-library/react-native';
+import { act, fireEvent } from '@testing-library/react-native';
 import { PerpsPayRow } from './PerpsPayRow';
 import { useNavigation } from '@react-navigation/native';
 import { useTransactionPayToken } from '../../../../Views/confirmations/hooks/pay/useTransactionPayToken';
@@ -300,4 +300,151 @@ describe('PerpsPayRow', () => {
       Engine.context.PerpsController?.setSelectedPaymentToken,
     ).toHaveBeenCalledWith(null);
   });
+
+  describe('pending config sync (apply once per load)', () => {
+    it('does not overwrite pay token when user switches token after pending config was applied', () => {
+      const setPayTokenMock = jest.fn();
+      const pendingTokenA = {
+        address: '0xTokenA',
+        chainId: '0x1',
+        description: 'Token A',
+      };
+      mockUsePerpsSelector.mockReturnValue({
+        selectedPaymentToken: pendingTokenA,
+      });
+      mockUsePerpsPayWithToken.mockReturnValue({
+        address: pendingTokenA.address,
+        chainId: pendingTokenA.chainId,
+        description: pendingTokenA.description,
+      });
+      mockUseTransactionPayToken.mockReturnValue({
+        payToken: { address: '0xOther', chainId: '0xa4b1', symbol: 'Other' },
+        setPayToken: setPayTokenMock,
+      } as unknown as ReturnType<typeof useTransactionPayToken>);
+
+      const { rerender } = renderWithProvider(
+        <PerpsPayRow initialAsset="BTC" />,
+      );
+
+      expect(setPayTokenMock).toHaveBeenCalledTimes(1);
+      expect(setPayTokenMock).toHaveBeenCalledWith({
+        address: '0xTokenA',
+        chainId: '0x1',
+      });
+
+      setPayTokenMock.mockClear();
+      (
+        Engine.context.PerpsController?.setSelectedPaymentToken as jest.Mock
+      ).mockClear();
+
+      const tokenB = {
+        address: '0xTokenB',
+        chainId: '0x1',
+        description: 'Token B',
+      };
+      mockUsePerpsPayWithToken.mockReturnValue({
+        address: tokenB.address,
+        chainId: tokenB.chainId,
+        description: tokenB.description,
+      });
+      mockUseTransactionPayToken.mockReturnValue({
+        payToken: {
+          address: tokenB.address,
+          chainId: tokenB.chainId,
+          symbol: 'B',
+        },
+        setPayToken: setPayTokenMock,
+      } as unknown as ReturnType<typeof useTransactionPayToken>);
+
+      act(() => {
+        rerender(<PerpsPayRow initialAsset="BTC" />);
+      });
+
+      expect(setPayTokenMock).not.toHaveBeenCalled();
+      expect(
+        Engine.context.PerpsController?.setSelectedPaymentToken,
+      ).not.toHaveBeenCalled();
+    });
+
+    it('re-applies pending config when initialAsset changes', () => {
+      const setPayTokenMock = jest.fn();
+      const tokenA = {
+        address: '0xTokenA',
+        chainId: '0x1',
+        description: 'Token A',
+      };
+      const tokenB = {
+        address: '0xTokenB',
+        chainId: '0x1',
+        description: 'Token B',
+      };
+      mockUsePerpsSelector.mockReturnValue({
+        selectedPaymentToken: tokenA,
+      });
+      mockUsePerpsPayWithToken.mockReturnValue({
+        address: tokenA.address,
+        chainId: tokenA.chainId,
+        description: tokenA.description,
+      });
+      mockUseTransactionPayToken.mockReturnValue({
+        payToken: { address: '0xOther', chainId: '0xa4b1', symbol: 'Other' },
+        setPayToken: setPayTokenMock,
+      } as unknown as ReturnType<typeof useTransactionPayToken>);
+
+      const { rerender } = renderWithProvider(
+        <PerpsPayRow initialAsset="BTC" />,
+      );
+
+      expect(setPayTokenMock).toHaveBeenCalledWith({
+        address: '0xTokenA',
+        chainId: '0x1',
+      });
+
+      setPayTokenMock.mockClear();
+
+      mockUsePerpsSelector.mockReturnValue({
+        selectedPaymentToken: tokenB,
+      });
+      mockUsePerpsPayWithToken.mockReturnValue({
+        address: tokenB.address,
+        chainId: tokenB.chainId,
+        description: tokenB.description,
+      });
+      mockUseTransactionPayToken.mockReturnValue({
+        payToken: { address: '0xOther', chainId: '0xa4b1', symbol: 'Other' },
+        setPayToken: setPayTokenMock,
+      } as unknown as ReturnType<typeof useTransactionPayToken>);
+
+      act(() => {
+        rerender(<PerpsPayRow initialAsset="ETH" />);
+      });
+
+      expect(setPayTokenMock).toHaveBeenCalledWith({
+        address: '0xTokenB',
+        chainId: '0x1',
+      });
+    });
+
+    it('does not call setSelectedPaymentToken(null) again when pending has no token and already applied', () => {
+      mockUsePerpsSelector.mockReturnValue({});
+      mockUsePerpsPayWithToken.mockReturnValue(null);
+
+      const setSelectedPaymentTokenMock = Engine.context.PerpsController
+        ?.setSelectedPaymentToken as jest.Mock;
+
+      const { rerender } = renderWithProvider(
+        <PerpsPayRow initialAsset="BTC" />,
+      );
+
+      expect(setSelectedPaymentTokenMock).toHaveBeenCalledTimes(1);
+      expect(setSelectedPaymentTokenMock).toHaveBeenCalledWith(null);
+
+      setSelectedPaymentTokenMock.mockClear();
+      act(() => {
+        rerender(<PerpsPayRow initialAsset="BTC" />);
+      });
+
+      expect(setSelectedPaymentTokenMock).not.toHaveBeenCalled();
+    });
+  });
 });

app/components/UI/Perps/Views/PerpsOrderView/PerpsPayRow.tsx

@@ -1,6 +1,6 @@
 import { CHAIN_IDS } from '@metamask/transaction-controller';
 import { useNavigation } from '@react-navigation/native';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { strings } from '../../../../../../locales/i18n';
 import Badge, {
@@ -119,38 +119,60 @@ export const PerpsPayRow = ({
 
   const pendingConfigSelectedPaymentToken = pendingConfig?.selectedPaymentToken;
 
+  // Track which pending config we've already applied so we don't overwrite the user's
+  // in-session token selection. Apply pending config only on initial load or when
+  // switching asset; otherwise switching tokens in the Pay With modal would flip back.
+  const appliedPendingTokenRef = useRef<
+    { address: string; chainId: string } | null | undefined
+  >(undefined);
+  const prevInitialAssetRef = useRef(initialAsset);
+  if (prevInitialAssetRef.current !== initialAsset) {
+    prevInitialAssetRef.current = initialAsset;
+    appliedPendingTokenRef.current = undefined;
+  }
+
   useEffect(() => {
-    if (!pendingConfigSelectedPaymentToken) {
-      Engine.context.PerpsController?.setSelectedPaymentToken?.(null);
-    }
+    if (pendingConfigSelectedPaymentToken != null) return;
+    if (appliedPendingTokenRef.current === null) return;
+    appliedPendingTokenRef.current = null;
+    Engine.context.PerpsController?.setSelectedPaymentToken?.(null);
   }, [pendingConfigSelectedPaymentToken]);
 
   useEffect(() => {
-    if (!pendingConfigSelectedPaymentToken || !selectedPaymentToken) {
-      return;
-    }
+    if (!pendingConfigSelectedPaymentToken || !selectedPaymentToken) return;
+
+    const pendingAddr = pendingConfigSelectedPaymentToken.address;
+    const pendingChainId = pendingConfigSelectedPaymentToken.chainId;
+    const alreadyApplied =
+      appliedPendingTokenRef.current !== undefined &&
+      (appliedPendingTokenRef.current === null
+        ? false
+        : appliedPendingTokenRef.current.address === pendingAddr &&
+          appliedPendingTokenRef.current.chainId === pendingChainId);
+    if (alreadyApplied) return;
 
     if (
-      payToken?.address !== pendingConfigSelectedPaymentToken?.address ||
-      payToken?.chainId !== pendingConfigSelectedPaymentToken?.chainId
+      payToken?.address !== pendingAddr ||
+      payToken?.chainId !== pendingChainId
     ) {
       setPayToken({
-        address: pendingConfigSelectedPaymentToken.address as Hex,
-        chainId: pendingConfigSelectedPaymentToken.chainId as Hex,
+        address: pendingAddr as Hex,
+        chainId: pendingChainId as Hex,
       });
-
       Engine.context.PerpsController?.setSelectedPaymentToken?.({
         description: pendingConfigSelectedPaymentToken.description,
-        address: pendingConfigSelectedPaymentToken.address as Hex,
-        chainId: pendingConfigSelectedPaymentToken.chainId as Hex,
+        address: pendingAddr as Hex,
+        chainId: pendingChainId as Hex,
       });
     }
+    appliedPendingTokenRef.current = {
+      address: pendingAddr,
+      chainId: pendingChainId,
+    };
   }, [
     payToken,
     pendingConfigSelectedPaymentToken,
     setPayToken,
-    pendingConfig,
-    initialAsset,
     selectedPaymentToken,
   ]);