feat: TDP new theming AB test

[sahar-fehri]

Description

Implements the scoped ambient chart theme A/B test for ASSETS-3619. This PR refines the existing ambient price color treatment (assetsASSETS3205AbtestAmbientPriceColor) by:

1. Removing ambient color from the back button — The navigation back button in token details now always uses neutral icon color (both control and treatment).
2. Geo-based sticky footer buttons — When the treatment is active, Buy/Swap buttons in the sticky footer (TokenDetails, SecurityTrust, MarketInsights) use error-default (red) for users in Asian markets (JP, KR, HK, TW, CN) and today's exact green for all other countries. When the FF is OFF (control), buttons always show green regardless of geolocation.
3. Analytics enrichment — country_code is now included in all experiment_viewed Mixpanel events via the useABTest hook.

Control path (FF OFF) is completely preserved — all changes are gated behind useAmbientColor checks except the back button neutralization (which is an unconditional improvement).

New files

• app/util/region/isAsiaGeolocationLocation.ts — utility to check if a geolocation resolves to JP, KR, HK, TW, or CN
• app/util/region/isAsiaGeolocationLocation.test.ts — 12 unit tests

Key changes

• TokenDetailsInlineHeader — removed iconColor, useAmbientColor props; back button always neutral
• TokenDetailsStickyFooter — replaced ambient-driven button colors with geo-based logic (Asia=red, else=green), gated behind useAmbientColor
• Price.advanced.tsx — passes initialAmbientColor to IntervalBar
• SecurityTrustScreen, MarketInsightsView, SecurityTrustEntryCard, AssetOverviewContent — removed isPricePositive prop propagation; useAmbientColor is now passed through to gate geo-based footer colors
• useABTest — added country_code to experiment exposure events
• geolocationController/index.ts (selectors) — added selectIsUserInAsia reselect selector

Changelog

CHANGELOG entry: Updated token details sticky footer buttons to show red in Asian markets and green elsewhere, removed ambient tinting from the back button, and added ambient color support to interval bar pills

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-3619
Related: https://github.com/Consensys/segment-schema/pull/667

Manual testing steps

Feature: Scoped Ambient Chart Theme A/B
  Scenario: Back button uses neutral color in treatment
    Given the ambient price color A/B test treatment is active
    When user opens a token details page
    Then the back button icon should use neutral/default color (not ambient-tinted)
  Scenario: Sticky footer shows green buttons for non-Asia users (treatment)
    Given the ambient price color A/B test treatment is active
    And the user's geolocation is a non-Asian country (e.g. US, GB)
    When user opens a token details page
    Then the Buy/Swap buttons should appear in green (same green as today)
  Scenario: Sticky footer shows red buttons for Asia users (treatment)
    Given the ambient price color A/B test treatment is active
    And the user's geolocation is an Asian market (JP, KR, HK, TW, or CN)
    When user opens a token details page
    Then the Buy/Swap buttons should appear in error-default red
  Scenario: Sticky footer red buttons on SecurityTrust and MarketInsights (treatment)
    Given the ambient price color A/B test treatment is active
    And the user's geolocation is JP
    When user navigates to the Security & Trust page or Market Insights page
    Then the sticky footer Buy/Swap buttons should appear in error-default red
  Scenario: Control variant preserves today's behavior
    Given the ambient price color A/B test is in control (FF OFF)
    When user opens a token details page
    Then all UI elements should look identical to today's production build
    And sticky footer buttons should be green even if user is in an Asian market

Screenshots/Recordings

Before

FF ON - treatment

Screen.Recording.2026-07-15.at.20.31.30.mov

(Legacy chart)

FF OFF - control
https://github.com/user-attachments/assets/77c1caa4-fdd2-4ec4-b9dd-b541f5766f55

(Legacy chart)

After

FF ON (Global) - treatment

Screen.Recording.2026-07-15.at.20.16.47.mov

(Legacy chart)

FF ON (Asia -JP) - treatment

Screen.Recording.2026-07-15.at.20.18.36.mov

(Legacy chart)

FF OFF - control

Screen.Recording.2026-07-15.at.20.23.38.mov

(Legacy chart)

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
User-visible CTA colors depend on geolocation and the ambient FF across multiple screens; mis-detection or gating bugs could show wrong accents, though control path is preserved.

Overview
Refines the ambient price color A/B test: chart direction no longer drives UI, and geolocation drives sticky Buy/Swap styling when treatment is on.

Token details header drops iconColor / useAmbientColor and ambient-tinted back/share/alert behavior—the back control stays neutral, and header actions show whenever their handlers exist (no waiting on chart direction).

Sticky footer (TokenDetails, Security Trust, Market Insights) removes isPricePositive plumbing. With useAmbientColor + detected geolocation in JP/KR/TW/CN/HK, primary/secondary CTAs use error-default red; elsewhere they keep the existing green. Control (FF off) stays green. The footer is no longer hidden while chart direction is unresolved.

Adds isAsiaGeolocationLocation, selectIsUserInAsia, and tests. useABTest adds optional country_code on experiment_viewed exposure events from detected geolocation.

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

• Screenshots/Recordings section is empty. Add an image/video for user-facing changes, logs/console output for non-user-facing changes, or write N/A if no evidence is applicable.
• 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]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR makes the following changes:

1. New geolocation utility (isAsiaGeolocationLocation.ts): A pure utility function that checks if a location string corresponds to Asian country codes (JP, KR, TW, CN, HK). No side effects.

2. New geolocation selector (selectIsUserInAsia): Adds a new memoized selector using createSelector. Does not modify existing selectors - purely additive.

3. useABTest.ts: Adds countryCode to A/B test exposure analytics events. This is purely an analytics metadata addition - no functional behavior change to the A/B test assignment logic itself.

4. TokenDetails UI refactoring: Removes isPricePositive prop propagation through TokenDetails, TokenDetailsStickyFooter, TokenDetailsInlineHeader, AssetOverviewContent, MarketInsightsView, SecurityTrustScreen, and SecurityTrustEntryCard. Replaces price-direction-based ambient color logic with geolocation-based logic (Asian users see error/red color, others see success/green). This is a UI-only change to an A/B test color scheme.

Why no E2E tags are needed:

• No smoke test files directly test TokenDetails, MarketInsights, SecurityTrust ambient color behavior, or the A/B test color logic.
• The changes don't affect core wallet flows: no transaction sending, no confirmations, no account management, no network switching, no swap/bridge flows.
• The geolocation selector and utility are new additions that don't break existing functionality.
• The useABTest change only adds analytics metadata.
• The isPricePositive prop removal is a cleanup/refactor that simplifies the component tree without changing core functionality.
• No navigation, TabBar, modal, or confirmation components are affected.
• All changes are scoped to UI presentation layer of the TokenDetails/AssetOverview feature area, which has no direct smoke test coverage.

Performance Test Selection:
The changes are UI-layer refactoring of color/styling logic in TokenDetails components and additions of geolocation utility functions. None of these changes affect app launch, login, onboarding, swap execution, account list rendering, or asset loading performance. The geolocation selector uses createSelector (memoized) so it adds negligible overhead. No performance-sensitive code paths are modified.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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

[zone-live]

LGTM 👍🏼