feat(perps): redesign market detail header (TAT-3348)#33024
Conversation
Update the Perps market detail header to the new design: - First row: full asset name, leverage pill, and a chevron that opens the market list - Second row: [Ticker]-[collateral] perp pair subtitle - Back chevron on the left, favorite star on the right - Move the live price + 24h change and the fullscreen chart button into a dedicated row below the header The shared PerpsMarketInlineHeader keeps its previous layout by default (showAssetName opt-in), so the order book header is unchanged. Adds a `size` variant to LivePriceHeader for the larger below-header price.
|
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. |
PR template — items to address before "Ready for review"Warnings — informational, address before merging:
See docs/readme/ready-for-review.md for the full Definition of Ready for Review. |
- Track the market-list arrow with BUTTON_CLICKED.MARKET_LIST and
SOURCE.PERP_ASSET_SCREEN instead of the stale magnifying-glass values;
rename handler to handleMarketListPress
- Remove now-dead onFullscreenPress/onCategorySearchPress/fullscreenButtonTestID
props and branches from the shared header (unused after the redesign)
- Drop redundant throttleMs={1000} (LivePriceHeader already defaults to 1000)
- Add unit tests for the LivePriceHeader size variant and the header
showAssetName layout (title/subtitle, market-list button)
- Use the exported MARKET_LIST_BUTTON selector in tests; remove unused
category_search locale string
- Track market-list button with BUTTON_LOCATION.PERP_MARKET_DETAILS (ASSET_DETAILS is reserved for the magnifying-glass discovery entry) - Add named FULLSCREEN_CHART_BUTTON selector; replace templated testID in the view and all test references - Remove orphaned CATEGORY_SEARCH_BUTTON selector - Centralize PERPS_COLLATERAL_SYMBOL in constants/perpsConfig - Remove the now-unused category_search string from all locale files - Assert the market-list analytics event and prove price/change/fullscreen render inside the MARKET_SUMMARY row
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #33024 +/- ##
==========================================
+ Coverage 84.48% 84.51% +0.02%
==========================================
Files 6003 6017 +14
Lines 157773 158222 +449
Branches 38368 38471 +103
==========================================
+ Hits 133300 133721 +421
- Misses 15307 15319 +12
- Partials 9166 9182 +16 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
- Rename the header layout flag showAssetName -> useDetailLayout so the call site conveys that it switches the full header layout (title, subtitle, accessories, and relocating price/change), not just the asset name - Update perps-metametrics-reference: asset_details is now the legacy magnifying-glass value; the market-list arrow reports perp_market_details
- Restore the translated locale files: string add/remove flows only through en.json (the Crowdin source per crowdin.yml); non-English locales are reconciled by Crowdin and fall back to English at runtime, matching the existing repo convention - Rename the no-maxLeverage view test and scope its price/change assertions to the MARKET_SUMMARY row (price/change no longer live in the header)
aganglada
left a comment
aganglada
left a comment
There was a problem hiding this comment.
Please fix MMDS deprecations
Please match the sizes / design on asset details
|
michalconsensys
temporarily deployed
to
build-e2e
GitHub Actions
Inactive
michalconsensys
temporarily deployed
to
build-e2e
GitHub Actions
Inactive
…recated MMDS APIs Replace deprecated component-library `Text` in LivePriceHeader and the deprecated `useHeaderStandardAnimated` in PerpsMarketDetailsView with the `@metamask/design-system-react-native` equivalents, mapping variant/color enums and using `fontWeight` for the medium-weight change text.
github-actions
Bot
added
size-L
risk:low
michalconsensys
temporarily deployed
to
build-e2e
GitHub Actions
Inactive
michalconsensys
temporarily deployed
to
build-e2e
GitHub Actions
Inactive
# Conflicts: # app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx
🧪 Flaky unit test detectionRun history flaky detectionHistorical failure rate is a hint, not proof — review each suggestion in context. See the flaky-test-detection skill for the full pattern reference and manual audit workflow. Failures / runs sampled per window:
AI-detected flaky patterns
|
michalconsensys
temporarily deployed
to
build-e2e
GitHub Actions
Inactive
geositta
left a comment
geositta
left a comment
There was a problem hiding this comment.
The redesigned header is well scoped, preserves the compact orderbook layout, and includes solid analytics and test coverage. I left two nonblocking suggestions to improve touch accessibility and layout behavior with narrow screens or increased font sizes.
| {showMarketListButton ? ( | ||
| <ButtonIcon | ||
| iconName={IconName.ArrowDown} | ||
| size={ButtonIconSize.Sm} |
There was a problem hiding this comment.
Would it make sense to keep the chevron visually small while expanding its interactive area with hitSlop? The current 24×24 dp target may be difficult to press reliably, particularly for users with limited motor precision.
| twClassName="px-4 pb-2" | ||
| testID={PerpsMarketDetailsViewSelectorsIDs.MARKET_SUMMARY} | ||
| > | ||
| <LivePriceHeader |
There was a problem hiding this comment.
Could we give the price section room to shrink while keeping the fullscreen button fixed? Longer prices or increased system font sizes may overflow this row. A flexible wrapper plus defined truncation or wrapping behavior would make the layout more resilient.
Add hitSlop to the market-list chevron so its touch target reaches ~44dp while staying visually small, and make the market summary price section flexible/shrinkable with truncation so long prices or larger system font sizes don't overflow the fixed fullscreen button.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
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 0584704. Configure here.
michalconsensys
temporarily deployed
to
build-e2e
GitHub Actions
Inactive
michalconsensys
temporarily deployed
to
build-e2e
GitHub Actions
Inactive
github-actions
Bot
added
risk:medium
michalconsensys
temporarily deployed
to
build-e2e
GitHub Actions
Inactive
michalconsensys
temporarily deployed
to
build-e2e
GitHub Actions
Inactive
Fix a stale reference to the old templated `${HEADER}-fullscreen-button`
testID; the redesigned fullscreen button lives in the market summary row
under the named FULLSCREEN_CHART_BUTTON selector.
michalconsensys
temporarily deployed
to
build-e2e
GitHub Actions
Inactive
michalconsensys
temporarily deployed
to
build-e2e
GitHub Actions
Inactive
Match the asset overview screen for the prominent market-summary header: stack the 24h change below the price and show both the absolute change and the percentage (e.g. "+$3.57 (+0.21%)") using a medium-weight BodySm line. The absolute change is derived from the current price and the 24h percentage. The compact header keeps its inline, percentage-only layout.
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection:
Tag selection rationale:
The changes are UI-only within the Perps feature and don't affect core wallet infrastructure, navigation, or other feature areas. No smoke test files directly reference the renamed test IDs (CATEGORY_SEARCH_BUTTON), so existing tests should not break. Performance Test Selection: |
michalconsensys
temporarily deployed
to
build-e2e
GitHub Actions
Inactive
michalconsensys
temporarily deployed
to
build-e2e
GitHub Actions
Inactive
|
⚡ Performance Test Results
✅ All tests passed · 2 tests · 1 device 📱 Devices tested (1)Android: Google Pixel 8 Pro (v14.0) ✅ Passed Tests (2)
Branch: |
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
metamask-ci
Bot
added
the
release-8.4.0
4 participants
Description
Redesigns the Perps market detail header to match the new design in TAT-3348, taking inspiration from the equivalent extension implementation.
What changed
Ethereum), the leverage pill (e.g.50x), and a chevron that opens the market list.[Ticker]-[collateral] perppair subtitle (e.g.ETH-USD perp).Why
The previous header showed
ETH-USDas the title with the price inline and expand/star/search icons on the right. The new layout aligns mobile with the agreed design and the extension, surfacing the full asset name and market pair, and grouping the price/chart controls below the header.Implementation notes
PerpsMarketInlineHeadergains an opt-inshowAssetNameprop (plusonMarketListPressfor the chevron). The default layout is unchanged, so the shared order book header is not affected.LivePriceHeadergains asizevariant (large) used for the prominent below-header price; the default size is unchanged.USDto stay consistent with the app's existing-USDconvention.Changelog
CHANGELOG entry: Redesigned the Perps market detail header to show the full asset name, leverage, and market pair, with the live price, 24h change, and fullscreen chart button below the header.
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/TAT-3348
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Performance checks (if applicable)
trace()for usage andaddTokenfor an exampleFor performance guidelines and tooling, see the Performance Guide.
Pre-merge reviewer checklist
Note
Low Risk
UI-only Perps market details layout and analytics property updates; default inline header paths are preserved and coverage is extensive in unit/view tests.
Overview
Redesigns the Perps market detail screen header and price row to match TAT-3348 / extension-style layout.
Header (
useDetailLayoutonPerpsMarketInlineHeader): Title becomes the full asset name with leverage pill and a market-list chevron (replacing header fullscreen + category search). Subtitle is the localized{{ticker}}-{{collateral}} perppair via newPERPS_COLLATERAL_SYMBOL; live price is no longer in the header. Compact header behavior elsewhere is unchanged.Below header: New market summary row with
LivePriceHeadersize="large"(prominent price, stacked layout, absolute + % 24h change) and a relocated fullscreen chart button.LivePriceHeadermigrates to design-systemTexttokens and adds shrink/ellipsis for long prices.Analytics & i18n: Market list entry reports
button_clicked: market_list,button_location: perp_market_details,source: perp_asset_screen; metrics docs note legacy magnifying-glass values. New strings for market list, perp pair, and updated test IDs.Reviewed by Cursor Bugbot for commit 01e1b36. Bugbot is set up for automated code reviews on this repo. Configure here.