fix: remove gap between symbol and price change on default token card watchlist cp-8.5.0

[sahar-fehri]

Description

Removes the unintended 12px vertical gap between the token symbol and price change percentage on default watchlist token cards in the empty watchlist view.

The card container uses flexDirection: 'column' with gap: 12, which was applying between the symbol and percentage when they were separate direct children. Wrapping them in a parent View groups them into a single card child so only the gap between the top row (logo + checkbox) and the text group remains.

Changelog

CHANGELOG entry: Fixed spacing between token symbol and price change on empty watchlist default token cards

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-3774

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

Before

After

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
Layout-only JSX grouping in one watchlist card component; no logic, API, or data changes.

Overview
Fixes extra vertical space between the token symbol and 24h price change on default watchlist token cards (empty watchlist).

The card column uses gap: 12, which previously applied between the symbol and percentage because they were separate direct children of the pressable. Symbol and price change are now wrapped in a single parent View, so they read as one block and only the intended 12px gap remains between the top row (logo + checkbox) and that text group.

Test IDs and conditional rendering for the price change line are unchanged.

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

[metamask-ci]

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

Warnings — informational, address before merging:

• Manual testing steps still contain template content (the Gherkin example title or a [...] placeholder). Replace with real steps, or write N/A — <reason>.
• Pre-merge author checklist has unchecked items (e.g. "I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards."). 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]

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: None (no tests recommended)
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 95%

click to see 🤖 AI reasoning details

E2E Test Selection:
The only changed file is WatchlistDefaultTokenCard.tsx, and the diff shows a purely structural UI layout change: two <Text> elements (token symbol and price change label) are wrapped in a <View> container. No logic, props, state, test IDs, or behavioral changes are introduced. The test IDs remain identical, so existing unit tests are unaffected. This component is used only within WatchlistEmptyCTA (a watchlist feature) and is not referenced by any E2E smoke test files. The change has no functional impact on any user flow covered by the available smoke tags. Per the cosmetic changes guidance, this structural-only layout change does not warrant any E2E test execution.

Performance Test Selection:
The change is a minor layout refactor (wrapping Text elements in a View) with no impact on rendering performance, data fetching, or any performance-sensitive flow. No performance test tags are warranted.

View GitHub Actions results

[codecov-commenter]

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 84.78%. Comparing base (8171bdd) to head (11654db).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
...listDefaultTokenCard/WatchlistDefaultTokenCard.tsx	0.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #33859      +/-   ##
==========================================
- Coverage   84.78%   84.78%   -0.01%     
==========================================
  Files        6246     6246              
  Lines      168298   168304       +6     
  Branches    41177    41181       +4     
==========================================
+ Hits       142695   142697       +2     
- Misses      15856    15858       +2     
- Partials     9747     9749       +2     

☔ 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
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud