feat: add prefill skeleton loader for money account deposits

[jpuri]

Description

Add PrefillCustomAmount loader that matches the prefilled deposit page layout (no keyboard). Used when deposit prefill feature flag is enabled or for addMusd deposits.

• Add ConfirmationLoader.PrefillCustomAmount enum value
• Create PrefillCustomAmountInfoSkeleton with account/pay-with/detail row skeletons and button skeleton (no keyboard)
• Conditionally select loader in useMoneyAccountDeposit based on prefillConfig.enabled or addMusd intent
• Add tests for new loader

Changelog

CHANGELOG entry:

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/CONF-1709

Manual testing steps

NA

Screenshots/Recordings

Screen.Recording.2026-07-24.at.9.50.32.PM.mov

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.

---

Note

Low Risk
UI-only loading skeleton and confirmation navigation params behind a feature flag, with card intent explicitly excluded; no payment or transaction logic changes.

Overview
Adds a prefill-specific confirmation loading state for money account deposits so the skeleton matches the prefilled amount screen (account/pay-with/detail rows and CTA, no deposit keyboard).

useMoneyAccountDeposit now reads selectPrefilledAmountConfig for moneyAccountDeposit and navigates with ConfirmationLoader.PrefillCustomAmount when the prefill flag is on or the intent is addMusd, while card intent still uses AdvancedCustomAmount (including when prefill is enabled). The confirm screen maps the new loader to PrefillCustomAmountInfoSkeleton; tests cover loader selection and rendering.

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

[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]

🧪 Flaky unit test detection

Run history flaky detection

View recent run history

Historical failure rate is a hint, not proof — review each suggestion in context. See the flaky-test-detection skill for the full pattern reference and manual audit workflow.

Failures / runs sampled per window:

File	7d	15d	30d
app/components/Views/confirmations/components/confirm/confirm-component.test.tsx	0/160	0/273	0/286

AI-detected flaky patterns

app/components/Views/confirmations/components/confirm/confirm-component.test.tsx

• J3 — Missing jest.clearAllMocks() / jest.resetAllMocks() between tests (high)
  • The beforeEach only sets specific mockReturnValue calls; the afterEach uses restoreAllMocks+clearAllMocks (clear does not reset implementations). Multiple tests (including the newly added PrefillCustomAmount loader test and similar ones for other loaders) override useParamsMock, useFullScreenConfirmation etc. inside individual it() blocks. Without a consistent beforeEach(jest.clearAllMocks()) + afterEach(jest.resetAllMocks()) pair, the last mock implementation leaks into the next test. The added test increases the surface of this shared state. This is a classic J3 violation that can cause intermittent, order-dependent failures (especially under --randomize or CI load). No other J1-J10 patterns matched in the modified test code (no waitFor, no timers, no act() issues, no module-level mutable lets, spies are restored). Historical data showed zero failures.
  • Suggested fix in app/components/Views/confirmations/components/confirm/confirm-component.test.tsx:340:

    -  beforeEach(() => {
    -    useConfirmActionsMock.mockReturnValue({
    -      onReject: mockOnReject,
    -      onConfirm: jest.fn(),
    -    });
    -
    -    jest.mocked(useConfirmationAlerts).mockReturnValue([]);
    -    jest.mocked(useFullScreenConfirmation).mockReturnValue({
    -      isFullScreenConfirmation: false,
    -    });
    -  });
    -
    -  afterEach(() => {
    -    jest.restoreAllMocks();
    -    jest.clearAllMocks();
    -    mockSetOptions.mockClear();
    -    mockOnReject.mockClear();
    -  });
    +  beforeEach(() => {
    +    jest.clearAllMocks();
    +    useConfirmActionsMock.mockReturnValue({
    +      onReject: mockOnReject,
    +      onConfirm: jest.fn(),
    +    });
    +
    +    jest.mocked(useConfirmationAlerts).mockReturnValue([]);
    +    jest.mocked(useFullScreenConfirmation).mockReturnValue({
    +      isFullScreenConfirmation: false,
    +    });
    +  });
    +
    +  afterEach(() => {
    +    jest.restoreAllMocks();
    +    jest.resetAllMocks();
    +    mockSetOptions.mockClear();
    +    mockOnReject.mockClear();
    +  });

This check is informational only and does not block merging.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.76%. Comparing base (83846da) to head (d201db3).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #33707      +/-   ##
==========================================
- Coverage   84.76%   84.76%   -0.01%     
==========================================
  Files        6231     6232       +1     
  Lines      167690   167768      +78     
  Branches    41044    41058      +14     
==========================================
+ Hits       142144   142207      +63     
- Misses      15822    15830       +8     
- Partials     9724     9731       +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.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit b84123d. Configure here.}

[cursor]

Fiat deposit wrong loader

Medium Severity

usePrefillLoader treats card deposits specially via intent !== 'card', but it does not treat autoSelectFiatPayment the same way. With deposit prefill enabled, initiateDeposit({ autoSelectFiatPayment: true }) (without intent: 'card') picks PrefillCustomAmount, whose skeleton has no keyboard, while the confirmation amount UI opens with the deposit keyboard visible when fiat is auto-selected.

 

^{Reviewed by Cursor Bugbot for commit b84123d. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeMoney, SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR introduces a new PrefillCustomAmount confirmation loader for the Money Account deposit flow, controlled by a feature flag (selectPrefilledAmountConfig). Key changes:

1. useMoneyAccount.ts: Reads selectPrefilledAmountConfig feature flag and conditionally selects ConfirmationLoader.PrefillCustomAmount vs ConfirmationLoader.AdvancedCustomAmount for deposit flows. The logic also handles special cases for 'addMusd' intent and excludes 'card' intent.

2. confirm-component.tsx: Adds PrefillCustomAmount to the ConfirmationLoader enum and renders the new PrefillCustomAmountInfoSkeleton when this loader is active.

3. custom-amount-info.tsx + styles: Adds the new PrefillCustomAmountInfoSkeleton component with skeleton UI for the prefill deposit flow.

SmokeMoney is selected because the changes directly affect the Money Account deposit flow - the loader shown during confirmation is changed based on a feature flag. This could affect the Add Funds flow tested in SmokeMoney.

SmokeConfirmations is selected per the SmokeMoney tag description ("When selecting SmokeMoney for Card Add Funds or similar flows that execute swaps, also select SmokeConfirmations") and because the confirmation component itself is modified with a new loader type.

SmokeSwap is NOT selected because the changes are specifically to the Money Account deposit loader, not the swap flow itself.

Risk is medium because: the changes are feature-flag gated (reducing blast radius), they only affect loading skeleton UI (not core transaction logic), but they do touch the confirmation component which is shared across many flows.

Performance Test Selection:
The changes are limited to UI skeleton loading states (PrefillCustomAmountInfoSkeleton) and feature-flag-based loader selection logic in the Money Account deposit flow. These are lightweight UI components with no impact on app launch, login, onboarding, asset loading, or swap performance. No performance-sensitive code paths (data fetching, state management, rendering of large lists) are modified.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
3 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