feat: confirmation page design changes for token transfers

[jpuri]

Description

Changes in title and token hero section of confirmation page for transfers (including send).

Changelog

CHANGELOG entry:

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/7046

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

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
Medium risk because it changes the transaction confirmation UI (title visibility and hero layout) in a critical user flow, which could affect clarity or regress rendering across states (loading/skeleton, token vs NFT). No signing or transaction data logic is modified.

Overview
Transfer confirmation header UI is redesigned. Transfer confirmations now render HeroRow in a new layout="horizontal" mode that shows a localized “Sending” label with left-aligned details and the asset icon/badge on the right, including matching horizontal skeleton states.

Title behavior is simplified for transfers. The transfer flow sets an empty navbar title and Title no longer renders a “Transfer request” title (and avoids rendering any fallback title while transaction metadata is still loading). Token/NFT hero components and the token avatar-with-network-badge were updated to support the new layout (including configurable avatar size and tooltip behavior for rounded amounts), with tests and the new confirm.label.sending locale string added.

^{Written by Cursor Bugbot for commit f656955. This will update automatically on new commits. 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.

[jpuri]

@metamaskbot update-mobile-fixture

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
This PR modifies the confirmation UI components for transfer transactions. The changes include:

1. New horizontal layout for hero components: Added a layout prop to HeroToken, HeroNft, and HeroRow components with a new "horizontal" layout option.

2. Transfer confirmation UI changes:

   • Navbar title changed from "Review" to empty string
   • Hero row now uses horizontal layout
   • Added "Sending" label to the horizontal layout

3. Title component changes: Transfer transactions no longer show a title (returns null instead of "Transfer request"), with a guard to avoid rendering fallback title while transaction metadata is loading.

4. Style and localization updates: New styles for horizontal layout and new "sending" label in en.json.

These changes directly affect the confirmation flow for transfer transactions (simpleSend, tokenMethodTransfer, tokenMethodTransferFrom, tokenMethodSafeTransferFrom). The SmokeConfirmations tag is the appropriate choice as it covers transaction confirmation UI, token transfers, and the confirmation system.

The changes are UI/UX focused with no impact on core transaction logic, so the risk is medium. Unit tests have been updated to cover the new functionality.

Performance Test Selection:
These changes are purely UI/UX layout and styling changes for the confirmation screen. They don't affect data loading, state management, list rendering performance, or any critical performance paths. The changes add a new layout option for hero components and modify the title display logic, but don't introduce any performance-impacting code changes.

View GitHub Actions results

[github-actions]

⚠️ E2E Fixture Validation — Structural changes detected

Category	Count
New keys	68
Missing keys	11
Type mismatches	0
Value mismatches	7 (informational)

The committed fixture schema is out of date. To update, comment:

@metamaskbot update-mobile-fixture

View full details | Download diff report

[sonarqubecloud]

Quality Gate passed

Issues
15 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud