chore(runway): cherry-pick fix(perps): extract payment token init into useInitPerpsPaymentToken hook and move it to the parent cp-7.73.0

[runway-github]

• fix(perps): extract payment token init into useInitPerpsPaymentToken hook and move it to the parent cp-7.73.0 (fix(perps): extract payment token init into useInitPerpsPaymentToken hook and move it to the parent cp-7.73.0 #28545)

Description

The PerpsPayRow component contained ~110 lines of payment token
initialization logic (pending config syncing, default token selection,
asset-change resets) mixed in with its rendering concerns. This made the
component harder to follow and impossible to unit-test the
initialization behavior in isolation.

This PR extracts that logic into a dedicated useInitPerpsPaymentToken
hook and calls it from PerpsOrderViewContentBase instead. The hook
encapsulates:

• Syncing the pay token from pendingTradeConfiguration when resuming
  an order
• Falling back to the highest-balance allowlist token when the user has
  no perps balance
• Resetting state when the traded asset changes
• Cleaning up the controller's selected payment token on unmount

A key prop keyed on payToken.symbol was also added to the
PerpsSlider so it recomputes width when the payment token changes,
keeping the slider range in sync, allowing the user to use the slider

Changelog

CHANGELOG entry: null

Related issues

Fixes: #28539

Manual testing steps

Feature: Perps payment token initialization

  Scenario: user opens a perps order with some perps balance and other tokens
    Given the user selects USDC on Arbitrum
    When user navigates changes the amount to a different amount
    Then the USDC on Arbitrum should be still selected
    And user should be able to use slider if they have enough balance to cover the trade

Screenshots/Recordings

Before

N/A

After

N/A

Pre-merge author checklist

• I've followed MetaMask Contributor
  Docs and MetaMask Mobile
  Coding
  Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format
  if applicable
• I've applied the right labels on the PR (see labeling
  guidelines).
  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.

---

Note

Medium Risk
Touches Perps payment-token selection/init logic and its interaction
with PerpsController/confirmation pay-token state, which could affect
default token selection and persisted pending configs if incorrect.

Overview
Moves Perps “pay with” token initialization/sync logic out of
PerpsPayRow into a new useInitPerpsPaymentToken hook, and runs it
from PerpsOrderView so pending trade config, default-token fallback,
asset-change resets, and unmount cleanup are handled at the screen
level.

Simplifies PerpsPayRow to be a pure display/navigation row (dropping
the initialAsset prop) and updates tests accordingly, while adding
focused unit tests for useInitPerpsPaymentToken.

Adds a key to PerpsSlider based on payToken.symbol to force a
re-mount when the payment token changes, keeping the slider’s
range/width in sync.

^{Reviewed by Cursor Bugbot for commit
d3a7d10. Bugbot is set up for automated
code reviews on this repo. Configure
here.}

[ccf1e6c](https://github.com/MetaMask/metamask-mobile/commit/ccf1e6c6199b86245612b2495234fb3f15574750)

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePerps, SmokeWalletPlatform, SmokeConfirmations
• Selected Performance tags: @PerformancePreps
• Risk Level: medium
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are a refactoring of the Perps payment token initialization logic:

1. PerpsOrderView.tsx: Integrates the new useInitPerpsPaymentToken hook and removes initialAsset prop from PerpsPayRow. Adds a key prop to a slider component to force re-render on asset change.

2. PerpsPayRow.tsx: Removed the payment token initialization logic (multiple useEffect hooks, refs, Engine calls, initialAsset prop). The component is now simpler, focused only on display and navigation.

3. useInitPerpsPaymentToken.ts (new): Extracted hook containing the payment token initialization logic previously in PerpsPayRow. Functionally equivalent behavior but now properly separated.

4. Test files updated accordingly.

Tag Selection Rationale:

• SmokePerps: Primary tag - changes directly affect the Perps order view and payment token initialization flow (Add Funds, deposit USDC, balance verification). This is the core area being modified.
• SmokeWalletPlatform: Required per SmokePerps tag description - "Perps is also a section inside the Trending tab (SmokeWalletPlatform); changes to Perps views affect Trending."
• SmokeConfirmations: Required per SmokePerps tag description - "When selecting SmokePerps, also select SmokeConfirmations (Add Funds deposits are on-chain transactions)." The payment token selection directly affects transaction confirmations.

Risk Assessment: Medium - while this is a refactoring (logic extracted to a hook), the payment token initialization is a critical part of the Perps order flow. Any regression in the initialization logic could cause incorrect payment tokens to be selected, affecting transaction confirmations. The refactoring maintains functional equivalence but introduces a new hook boundary.

Performance Test Selection:
The changes touch the PerpsOrderView and payment token initialization logic which is part of the perps order placement flow. The @PerformancePreps tag covers perpetuals trading performance including the add funds flow and order execution. While this is a refactoring, the hook extraction and new key prop on the slider could affect render performance in the perps order view.

View GitHub Actions results

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
18 value mismatches detected (expected — fixture represents an existing user).
View details