feat: add watchlist full empty view

[sahar-fehri]

Description

Implements ASSETS-3122: the full-screen watchlist empty state with selectable default token cards and an Add N tokens CTA.
Previously, an empty watchlist on the full-screen view rendered nothing below the header. Users with no watchlisted tokens now see a 2-column grid of suggested defaults (all selected by default), can toggle selections via card/checkbox, and add their choices in one action via the existing useTokenWatchlistAddItemMutation.

Defaults (product/Slack-confirmed):

• Everyone: BTC, ETH, SOL, BNB, PEPE
• Geo-eligible users also see SpaceX (Ondo) as a 6th default (fail-closed when geo is unknown)

Not in this PR:

• Full-screen search (remains stubbed; follow-up ticket)
• Explore CTA (stripped from latest design)
• Homepage empty-state upgrade (component is reusable for a fast follow)

Technical notes:

• Extended useSuggestedWatchlistItemsQuery with geo-aware asset IDs and a variant React Query cache key (with-spacex vs base)
• New reusable components: WatchlistEmptyCTA, WatchlistDefaultTokenCard
• Sticky footer follows TDP pattern (bottomsheetfooter, safe-area padding)
• Network badge uses design-system BadgeWrapper + BadgeNetwork (non-deprecated)

Changelog

CHANGELOG entry: Added a suggested-token empty state to the full-screen watchlist so new users can quickly add popular tokens to their watchlist

Related issues

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

Manual testing steps

To locally mock that you are from 'US' a country where spaceX is blocked you can go to useSuggestedWatchlistItemsQuery and do:
const geolocation = 'US'; //useSelector(getDetectedGeolocation);

Feature: Watchlist full-screen empty CTA
  Scenario: User sees suggested defaults when watchlist is empty
    Given the user opens the full-screen watchlist with an empty token list
    Then a grid of default token cards is shown (5 or 6 depending on geo)
    And all cards are selected by default
    And a sticky "Add N tokens" button is visible at the bottom
  Scenario: User toggles selection and adds tokens
    Given the empty-state grid is visible
    When the user deselects one or more cards
    Then the button label updates to "Add N tokens" with the selected count
    When the user taps "Add N tokens"
    Then the selected tokens are added to the watchlist
    And the view switches to the populated watchlist list
  Scenario: SpaceX is geo-gated
    Given geolocation is in a blocked country (e.g. US)
    Then SpaceX is not shown in the default grid (5 tokens only)
    Given geolocation is eligible (e.g. DE)
    Then SpaceX appears as the 6th default card

Screenshots/Recordings

Before

After

Screen.Recording.2026-07-20.at.12.05.08.mov

Empty full view for a non spaceX blocked country

Empty full view for "US"

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

Medium Risk
Geo-gating for a regulated default token and bulk watchlist writes via mutation need correct behavior across regions; risk is mitigated by fail-closed geo, separate cache keys, and broad unit tests.

Overview
Replaces the blank full-screen watchlist empty state with WatchlistEmptyCTA: a 2-column grid of suggested defaults (all selected initially), toggles via WatchlistDefaultTokenCard, and a sticky Add N tokens action wired to the existing add mutation and analytics source.

Defaults move from a fixed ETH/BTC/SOL list to five curated mainnet assets (BTC, ETH, SOL, BNB, PEPE), with optional SpaceX (Ondo) as a sixth when defaultWatchlistGeo says the user is eligible (blocked countries/regions; unknown geo is fail-closed). useSuggestedWatchlistItemsQuery reads detected geolocation and passes suggestedIncludeSpaceX so React Query caches base vs with-spacex separately.

The empty CTA handles loading skeletons, submit/disable/retry when the hydrated watchlist refetch does not populate, and new i18n strings for the add button.

^{Reviewed by Cursor Bugbot for commit a0828ec. 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.

[metamask-ci]

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

Warnings — informational, address before merging:

• 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.

[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 a1de3ab. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR introduces new Watchlist empty-state UI components (WatchlistEmptyCTA, WatchlistDefaultTokenCard), geo-aware default token suggestions (SpaceX token blocked in US/CA/sanctioned countries), and updates to the watchlist query key system. All changes are confined to the app/components/UI/Assets/watchlist/ directory plus a small locales addition.

The Watchlist feature lives inside the Trending tab (Tokens section), which is covered by SmokeWalletPlatform. The trending smoke specs (tests/smoke-appium/trending/) use the SmokeWalletPlatform tag and test the Trending tab including its subsections. While no existing smoke test directly exercises the watchlist empty-state CTA, the WatchlistFullScreenView is part of the Trending/Tokens flow and SmokeWalletPlatform is the appropriate tag to validate the Trending tab still works correctly after these changes.

No other tags are warranted:

• No confirmations, swaps, stakes, or network changes
• No controller/Engine changes
• No navigation or shared infrastructure changes
• No browser, snaps, accounts, or multichain changes

The risk is low since these are additive UI changes (new empty-state component) with no modifications to existing critical paths.

Performance Test Selection:
The changes are purely UI additions to the watchlist empty-state (new components, geo-aware token list, query key updates). No performance-sensitive code paths are affected — no rendering loops, no heavy computations, no changes to app launch, login, onboarding, asset loading, or swap flows. No performance spec files were changed.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud