feat(perps): scaffold pro mode market layout (PerpsProMarketView)#33560
feat(perps): scaffold pro mode market layout (PerpsProMarketView)#33560geositta wants to merge 7 commits into
Conversation
|
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. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
bce9a3a to
c86340a
Compare
Tested locally, looks good
|
| const isProModeEnabled = usePerpsProModeEnabled(); | ||
|
|
||
| return isProModeEnabled ? <PerpsProMarketView /> : <PerpsMarketDetailsView />; |
There was a problem hiding this comment.
Maybe we change the hook to send the mode and...
| const isProModeEnabled = usePerpsProModeEnabled(); | |
| return isProModeEnabled ? <PerpsProMarketView /> : <PerpsMarketDetailsView />; | |
| const mode = usePerpsProMode(); | |
| const modeToUI = { | |
| [PerpsModes.Lite]: <PerpsMarketDetailsView />, | |
| [PerpsModes.Pro]: <PerpsProMarketView /> | |
| } | |
| return modeToUI[mode]; |
wdyt?
There was a problem hiding this comment.
I prefer to keep the boolean hook because the router has a binary, fail safe decision and 3558 needs to merge before the mode API lands. Once TAT-3551 merges, the hook will resolve featureFlag && mode === Pro. I think a mode to element map adds indirection without improving the two case routing currently.
| export type PerpsPanelPosition = 'left' | 'right'; | ||
|
|
||
| /** | ||
| * Placement config for the Pro-mode two-column trading area. | ||
| * | ||
| * Currently a static default (order form left, order book right). Once the | ||
| * `@metamask/perps-controller` package is bumped, this will be fed by | ||
| * `proLayoutPreferences.orderFormPosition` / `orderBookPosition`, enabling a | ||
| * future container-position / rearrangeable-tiles feature without changing the | ||
| * panel components themselves. | ||
| */ | ||
| export interface PerpsProLayoutConfig { | ||
| orderFormPosition: PerpsPanelPosition; | ||
| orderBookPosition: PerpsPanelPosition; | ||
| } | ||
|
|
||
| /** | ||
| * Default two-column placement matching Figma node 10041:12979. | ||
| */ | ||
| export const DEFAULT_PRO_LAYOUT_CONFIG: PerpsProLayoutConfig = { | ||
| orderFormPosition: 'left', | ||
| orderBookPosition: 'right', | ||
| }; | ||
|
|
There was a problem hiding this comment.
this config should come from the controller
828e7ce to
c5fa316
Compare
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 c5fa316. Configure here.
⚡ Performance Test Results
✅ All tests passed · 2 tests · 1 device 📱 Devices tested (1)Android: Google Pixel 8 Pro (v14.0) ✅ Passed Tests (2)
Branch: |
c5fa316 to
f511aed
Compare
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection: Key findings:
Risk: Medium — the routing indirection is a real change to the navigation stack for Perps market details, even though the rendered component is unchanged. A regression in the router could break the existing Perps market details flow. Tag selection per tag descriptions:
Performance Test Selection: |
|
3 participants
Description
Introduces
PerpsProMarketView, a scaffold-only Pro-mode replacement for the Perps market screen, plus a thinPerpsMarketDetailsRouterthat selects the Pro or lite view at the existingRoutes.PERPS.MARKET_DETAILSroute.The scaffold follows the Figma “Perps Hub / Pro” structure: a fixed header, scrollable market summary slot, chart area, stats bar, two-column order-form/order-book area, and positions/orders section. The header displays the normalized market symbol; all deferred panel content remains placeholder only.
The trading columns use a 24px vertical divider slot matching the Figma token. The design-system
SectionDividerremains the horizontal separator before positions.Column placement uses
PerpsProLayoutConfig, mirroring Core’sorderFormPositionandorderBookPositionpreferences. Opposing positions are supported; conflicting values fall back to the default form-left/book-right layout.Motivation and context
Upcoming Pro-mode panels need stable layout slots, and the market-details route needs a testable lite/Pro selection boundary. This scaffold provides those integration points without changing navigation, route names, or route parameters.
Pro mode remains behind
usePerpsProModeEnabled, which currently returnsfalsepending the controller mode selector. Lite users therefore continue renderingPerpsMarketDetailsView.Changes
PerpsProMarketViewwith fixed header, scrollable market summary, chart, stats, trading-column, and positions placeholders.PerpsMarketDetailsRouterand the temporary always-lite mode seam.Changelog
CHANGELOG entry: null
Related issues
Fixes:
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
Scaffold and routing swap are behind a hook that always selects lite mode; no trading logic or user-visible Pro UI yet.
Overview
Market details now registers
PerpsMarketDetailsRouterinstead of the lite view directly. The router picksPerpsProMarketViewwhenusePerpsProModeEnabled()is true, otherwisePerpsMarketDetailsView; route name and params stay the same.usePerpsProModeEnabledis a temporary seam that always returnsfalse(TAT-3551), so production behavior is unchanged until feature flag and mode wiring land.PerpsProMarketViewis a Figma-aligned scaffold: fixed header withgetPerpsDisplaySymbol, scrollable summary/chart/stats, a two-column trading area (order form left, 132px order book right, 24px divider), then positions—mostly muted placeholders. Invalid/missingmarket.symbolshows the existing perps market error copy.Tests and E2E IDs cover router branching, hook default, layout dimensions, HIP-3 symbol stripping, safe areas, and slot structure via new
PerpsProMarketViewSelectorsIDs.Reviewed by Cursor Bugbot for commit f511aed. Bugbot is set up for automated code reviews on this repo. Configure here.