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

```gherkin
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**

- [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 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.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
d3a7d10. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: michalconsensys

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

@@ -149,6 +149,7 @@ import { useUpdateTokenAmount } from '../../../../Views/confirmations/hooks/tran
 import { useConfirmActions } from '../../../../Views/confirmations/hooks/useConfirmActions';
 import { useInsufficientPayTokenBalanceAlert } from '../../../../Views/confirmations/hooks/alerts/useInsufficientPayTokenBalanceAlert';
 import { useNoPayTokenQuotesAlert } from '../../../../Views/confirmations/hooks/alerts/useNoPayTokenQuotesAlert';
+import { useInitPerpsPaymentToken } from './useInitPerpsPaymentToken';
 
 // Navigation params interface
 interface OrderRouteParams {
@@ -1229,6 +1230,8 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
     setSelectedTooltip(null);
   }, []);
 
+  useInitPerpsPaymentToken(orderForm.asset ?? '');
+
   // Use the same calculation as handleMaxAmount in usePerpsOrderForm to avoid insufficient funds error
   const amountTimesLeverage = Math.floor(availableBalance * orderForm.leverage);
 
@@ -1330,6 +1333,7 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
                 const amount = Math.floor(value).toString();
                 setAmount(amount);
               }}
+              key={payToken?.symbol ?? ''}
               minimumValue={0}
               maximumValue={maxPossibleAmount}
               step={1}
@@ -1482,7 +1486,6 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
               <View style={[styles.detailItem, styles.detailItemLast]}>
                 <PerpsPayRow
                   embeddedInStack
-                  initialAsset={orderForm.asset}
                   onPayWithInfoPress={() => handleTooltipPress('pay_with')}
                 />
               </View>