fix(perps): standardize long and short CTA colors by nikki-p-h-12 · Pull Request #36472 · MetaMask/metamask-mobile

nikki-p-h-12 · 2026-09-18T08:38:38Z

Description

Standardizes the Perps directional trade actions so Long always uses success/default with a success/inverse label and Short always uses error/default with an error/inverse label, in both light and dark mode.

Previously these CTAs were driven by the concluded TAT-1937 A/B test, which served either white buttons (control) or pastel muted-tint buttons (colors). The pastel treatment is what was reported. The experiment is now retired so a remote assignment can no longer restore either incorrect treatment.

Surfaces updated:

Surface	Element
`PerpsMarketDetailsView` (Lite)	Long / Short footer
`PerpsOrderBookView`	Long / Short footer
`MarketInsightsView` (Perps context)	Long / Short footer
`PerpsOrderView`	Place-order CTA
`PerpsTradeScreen` (trade sheet)	Submit CTA
`PerpsProOrderForm` (Pro)	Place-order CTA only

A shared PerpsDirectionButton now owns this mapping so the two colors are defined once instead of per screen.

The Pro Long / Short direction selector is deliberately left as-is on main (muted tint on the selected side). It is a segmented selector rather than a CTA, so it is out of scope for this change.

Changelog

CHANGELOG entry: Fixed Long and Short button colors across Perps Lite and Pro experiences

Related issues

Refs: User-reported Perps Long/Short CTA color inconsistency

Manual testing steps

Feature: Perps directional CTA colors

  Scenario: Long and Short colors on Perps surfaces
    Given the user opens a Perps market in Lite or Pro mode
    When the user views the Long and Short actions
    Then Long uses success/default with a success/inverse label
    And Short uses error/default with an error/inverse label
    And both hold in light and dark mode

  Scenario: Pro direction selector is unchanged
    Given the user opens the Pro order form
    When the user switches between Long and Short
    Then the selector keeps its existing muted-tint styling from main

Screenshots/Recordings

Each surface is rendered from the real components with react-native-web in headless Chromium, using the app's bundled Inter fonts, design-system icons, theme tokens, stylesheets, and en.json copy. before is main with the reported pastel colors variant, and after is this branch. The Pro order form is the actual PerpsProOrderForm component rendered from both main and this branch, with its direction selector identical in both. Market data is static sample HYPE values because no live feed runs in the renderer.

Perps market details (Lite)

Perps order book

Perps order view, Long and Short

Perps trade bottom sheet — fully rounded design-system pill corners

Market insights (Perps)

Perps Pro order form, Long and Short

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 — all four Perps Appium shards passed on this branch
I've tested with a power user scenario — N/A
I've instrumented key operations with Sentry traces for production performance metrics — N/A

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.

Co-authored-by: nikki-p-h-12 <nikki-p-h-12@users.noreply.github.com>

github-actions · 2026-09-21T11:59:42Z

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.

sonarqubecloud · 2026-09-21T12:13:38Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

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

cursor · 2026-10-04T13:33:30Z

+            testID={PerpsOrderViewSelectorsIDs.PLACE_ORDER_BUTTON}
+          >
+            {placeOrderLabel}
+          </PerpsDirectionButton>


Leftover order CTA still rendered

High Severity

PerpsDirectionButton was added as the place-order CTA, but the retired TAT-1937 branch is still below it. That leftover tree still reads buttonColorVariant and deleted BUTTON_COLOR_VARIANTS / PERPS_BUTTON_COLOR_AB_TEST_KEY exports, and it would render a second PLACE_ORDER_BUTTON.

Additional Locations (1)

app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx#L167-L171

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

github-actions · 2026-10-04T13:34:38Z

Smart E2E Test Selection

Selected E2E tags

SmokePerps
SmokeConfirmations
SmokeWalletPlatform

Selected Performance tags: @PerformancePreps

AI Confidence: 88

E2E reasoning

Expand to read

This PR removes the TAT-1937 A/B test (Long/Short Button Color Test) and introduces a new PerpsDirectionButton component that hardcodes green/long and red/short colors. The changes affect:

SmokePerps (primary): The place-order button in PerpsOrderView, PerpsOrderBookView, PerpsMarketDetailsView, PerpsProOrderForm, and PerpsTradeScreen is replaced from ButtonSemantic to PerpsDirectionButton. This is the critical CTA for placing perps trades. An open PR review comment also flags a potential leftover branch in PerpsOrderView.tsx that could render a second PLACE_ORDER_BUTTON, making this higher risk.
SmokeWalletPlatform (secondary): MarketInsightsView now uses PerpsDirectionButton for its Long/Short buttons. MarketInsights is part of the Trending tab (SmokeWalletPlatform). Changes to Perps views embedded in Trending affect this tag.
SmokeConfirmations (required dependency): Per the SmokePerps tag description, "Add Funds deposits are on-chain transactions" — when selecting SmokePerps, also select SmokeConfirmations.

The A/B test infrastructure changes (removing BUTTON_COLOR_AB_TEST_ANALYTICS_MAPPING from the analytics registry, marking the feature flag as Deprecated) are cleanup-only and don't affect other flows. No network, authentication, or wallet core changes are present, so other smoke tags are not warranted.

Performance reasoning

Expand to read

The PR modifies the place-order button rendering in multiple Perps views (PerpsOrderView, PerpsOrderBookView, PerpsMarketDetailsView, PerpsProOrderForm, PerpsTradeScreen). The new PerpsDirectionButton replaces ButtonSemantic with a custom component. While the change is primarily cosmetic/behavioral (color hardcoding vs A/B test), the button is rendered in performance-sensitive Perps trading views. The @PerformancePreps tag covers perps market loading, position management, add funds flow, and order execution — all of which involve the modified button component.

View run

Co-authored-by: nikki-p-h-12 <nikki-p-h-12@users.noreply.github.com>

github-actions · 2026-10-04T14:15:10Z

⚠️ Performance Test Results

ℹ️ Performance test results are currently non-blocking and will not block this PR.

❌ 1 test failed · 2 tests · 1 device

📱 Devices tested (1)

Android: Google Pixel 8 Pro (v14.0)

❌ Failed Tests (1)

🔬 App profiling vs main is included under each failed scenario that has a prior baseline.

@mm-perps-engineering-team

Perps open position and close it

Platform	Device	Reason	Recording
Android	Google Pixel 8 Pro (v14.0)	no_performance_metrics	📹 Watch

🔬 App profiling check · Current run 37206410727 · Baseline (last run on main (scenario also failing)) run 37144708353 @ 8eac44c

⚠️ No green baseline on main — comparing against the latest usable profiling.

Summary: ⚠️ 2 metrics over +10%: CPU max (+2.45 (+10.6%)), Slow frames (+4.35 (+60.5%))

ℹ️ API calls unavailable: Network logs API error: Bad Request

Full metric table (+10% variance rules)

Disclaimer — allowed variance: a +10% margin over the baseline is permitted.

If Current <= Baseline + 10%, treated as acceptable noise.

If Current > Baseline + 10%, Current and variance % are highlighted with ⚠️.

Metric	Baseline	Current	Δ
CPU avg	7.28%	6.16%	-1.12 (-15.4%)
CPU max	23.19%	25.64%	+2.45 (+10.6%) ⚠️
Memory avg	785.88 MB	765.78 MB	-20.1 (-2.6%)
Memory max	1003.62 MB	977.88 MB	-25.74 (-2.6%)
Slow frames	7.19%	11.54%	+4.35 (+60.5%) ⚠️
Frozen frames	0%	0%	0 (0%)
ANRs	0	0	0 (0%)
Issues	2	2	0 (0%)
Critical issues	2	2	0 (0%)
App size	403.41 MB	403.28 MB	-0.13 (0%)

✅ Passed Tests (1)

Test	Platform	Device	Duration	Team	Recording
Perps add funds	Android	Google Pixel 8 Pro (v14.0)	8.04s	@mm-perps-engineering-team	📹 Watch

Branch: cursor/fix-perps-cta-colors-7270 · Build: E2E · Commit: 1b51179 · View full run

fix(perps): standardize long and short CTA colors

cef3d86

Co-authored-by: nikki-p-h-12 <nikki-p-h-12@users.noreply.github.com>

github-actions Bot added the size-L label Sep 18, 2026

test(perps): cover Pro direction CTA colors

cbaa3f6

Co-authored-by: nikki-p-h-12 <nikki-p-h-12@users.noreply.github.com>

cursor Bot deployed to build-e2e September 18, 2026 08:52 Active

fix(perps): keep Pro direction selector state legible

7447562

Co-authored-by: nikki-p-h-12 <nikki-p-h-12@users.noreply.github.com>

cursor Bot deployed to build-e2e September 18, 2026 10:27 Active

cursoragent and others added 2 commits September 18, 2026 11:40

revert(perps): restore Pro direction selector styling

0777ef0

Co-authored-by: nikki-p-h-12 <nikki-p-h-12@users.noreply.github.com>

Merge branch 'main' into cursor/fix-perps-cta-colors-7270

d4a5923

nikki-p-h-12 deployed to build-e2e September 21, 2026 12:05 — with GitHub Actions Active

Merge branch 'main' into cursor/fix-perps-cta-colors-7270

ccdf10e

nikki-p-h-12 marked this pull request as ready for review October 4, 2026 13:31

nikki-p-h-12 requested review from a team as code owners October 4, 2026 13:31

cursor Bot reviewed Oct 4, 2026

View reviewed changes

github-actions Bot added the risk:high AI analysis: high risk label Oct 4, 2026

fix(perps): keep the trade sheet CTA fully rounded

654b7f1

Co-authored-by: nikki-p-h-12 <nikki-p-h-12@users.noreply.github.com>

cursor Bot deployed to build-e2e October 4, 2026 13:45 Active

Navigation Menu

Uh oh!

fix(perps): standardize long and short CTA colors - #36472

fix(perps): standardize long and short CTA colors#36472
nikki-p-h-12 wants to merge 7 commits into
mainfrom
cursor/fix-perps-cta-colors-7270

nikki-p-h-12 commented Sep 18, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Sep 21, 2026

Uh oh!

sonarqubecloud Bot commented Sep 21, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Oct 4, 2026

Uh oh!

github-actions Bot commented Oct 4, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 4, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

nikki-p-h-12 commented Sep 18, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Sep 21, 2026

Uh oh!

sonarqubecloud Bot commented Sep 21, 2026

Quality Gate passed

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Oct 4, 2026

Choose a reason for hiding this comment

Leftover order CTA still rendered

Uh oh!

github-actions Bot commented Oct 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Smart E2E Test Selection

Selected E2E tags

E2E reasoning

Performance reasoning

Uh oh!

github-actions Bot commented Oct 4, 2026

⚠️ Performance Test Results

❌ Failed Tests (1)

Perps open position and close it

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nikki-p-h-12 commented Sep 18, 2026 •

edited by cursor Bot

Loading

github-actions Bot commented Oct 4, 2026 •

edited

Loading