fix(confirmations): show skeleton until required token resolves

[matthewwalsh0]

Description

The custom amount confirmation can render before TransactionPayController has resolved its primary required token. In that state, the amount entry and Pay With controls can appear against incomplete Pay state.

This PR keeps the existing custom amount skeleton visible while Pay is enabled and no non-skipIfBalance required token has resolved. Once the primary required token is present, the normal custom amount UI renders; flows with disablePay continue to bypass Pay gating.

Changelog

CHANGELOG entry: Fixed a bug where some custom amount confirmations could show payment controls before token requirements finished loading

Related issues

Fixes:

Manual testing steps

Feature: Custom amount loading state

  Scenario: required token is still loading
    Given a custom amount confirmation with MetaMask Pay enabled
    And TransactionPayController has not resolved a primary required token

    When the confirmation renders
    Then the custom amount skeleton is shown
    And the amount input and Pay With content are hidden

  Scenario: required token has loaded
    Given a custom amount confirmation with MetaMask Pay enabled
    And TransactionPayController has resolved a primary required token

    When the confirmation renders
    Then the normal custom amount UI is shown

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.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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.

[mm-token-exchange-service]

PR template — items to address before "Ready for review"

Warnings — informational, address before merging:

• Related issues section is empty. Add Fixes: #123 / Closes: <URL> / Refs: <Jira key>, or write a short rationale after the colon.
• Pre-merge author checklist has unchecked items (e.g. "I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors."). Every box must be consciously checked — see docs/readme/ready-for-review.md.

See docs/readme/ready-for-review.md for the full Definition of Ready for Review.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeConfirmations, SmokePerps, SmokePredictions, SmokeMoney, SmokeSwap, SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR makes two types of changes:

1. Refactoring (low risk): Extracts useTransactionPayPrimaryRequiredToken as a reusable memoized hook from inline logic that was duplicated in useTransactionPayToken.ts and useTransactionPayMetrics.ts. The logic is identical — finding the first token where skipIfBalance is false — just now memoized and centralized.

2. Behavioral change (medium risk): custom-amount-info.tsx now renders a CustomAmountInfoSkeleton when:

   • disablePay is false (pay is enabled)
   • The transaction is NOT a withdraw flow
   • primaryRequiredToken is undefined (not yet resolved)

   Previously, the component would render the full UI even when the required token hadn't loaded yet. This is a loading state improvement but could affect how deposit flows appear during initialization.

Affected flows via custom-amount-info importers:

• perps-deposit-info → SmokePerps
• perps-withdraw-info → SmokePerps (withdraw flows are excluded from skeleton, but still affected)
• predict-deposit-info / predict-withdraw-info → SmokePredictions
• money-account-deposit-info / money-account-withdraw-info → SmokeMoney
• musd-conversion-info → SmokeMoney/SmokeSwap
• confirm-component.tsx → SmokeConfirmations (general confirmation flows)

Dependent tags per descriptions:

• SmokePerps → also SmokeWalletPlatform + SmokeConfirmations
• SmokePredictions → also SmokeWalletPlatform + SmokeConfirmations
• SmokeMoney → also SmokeSwap + SmokeConfirmations

SmokeStake was considered but the staking flows don't appear to use custom-amount-info directly.

Performance Test Selection:
The changes are a refactoring of hook logic (extracting a memoized hook) and a UI loading state improvement (showing skeleton while awaiting required token). These changes do not affect app launch, login, onboarding, asset loading, or any performance-sensitive flows measured by the available performance test tags. The memoization added via useMemo is a minor optimization that would not meaningfully impact measured performance metrics.

View GitHub Actions results

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.42%. Comparing base (19d69fc) to head (2ca215a).
⚠️ Report is 11 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #32073   +/-   ##
=======================================
  Coverage   83.41%   83.42%           
=======================================
  Files        5835     5836    +1     
  Lines      152895   152936   +41     
  Branches    36118    36125    +7     
=======================================
+ Hits       127545   127591   +46     
- Misses      16596    16598    +2     
+ Partials     8754     8747    -7     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud