feat: perps top movers#30897
Conversation
Adapt to breaking change: 'equity' MarketType replaced with granular values 'stock', 'pre-ipo', 'index', and 'etf'. Update all filters, counts, badge styles, category pills, locale strings, and tests.
Address PR review feedback: - Add 'pre-ipo', 'indices', 'etfs' to categoryMap in handleCategorySelect so analytics events fire for the new category filters - Replace raw market type string literals with MarketCategory enum from @metamask/perps-controller across all source files
Replace manually defined market type union with MarketType imported from @metamask/perps-controller, per reviewer feedback.
|
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. |
| export const selectPerpsTopMoversEnabledFlag = createSelector( | ||
| selectRemoteFeatureFlags, | ||
| (remoteFeatureFlags) => { | ||
| const localFlag = process.env.MM_PERPS_TOP_MOVERS_ENABLED === 'true'; |
There was a problem hiding this comment.
we dont need a local feature flag
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 eff2531. Configure here.
geositta
left a comment
There was a problem hiding this comment.
The implementation and tests look good; the one gap I found is A/B attribution propagation from the top movers section, which is worth fixing IMO.
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection:
SmokePerps: Directly affected - Perps home view layout changed, new section added, navigation behavior changed (usePerpsNavigation fix). Existing perps tests (add-funds, position, limit-long-fill) navigate through PerpsHomeView and use navigateToMarketList. SmokeWalletPlatform: Required per SmokePerps tag description - "Perps is also a section inside the Trending tab (SmokeWalletPlatform); changes to Perps views affect Trending." SmokeConfirmations: Required per SmokePerps tag description - "When selecting SmokePerps, also select SmokeConfirmations (Add Funds deposits are on-chain transactions)." Performance Test Selection: |
geositta
left a comment
There was a problem hiding this comment.
Thanks for addressing issues, flagged a problematic className if you could look for a better background alternative, or if not could we could ask design team to support us on?
| accessibilityState={{ selected: isSelected }} | ||
| style={tw.style( | ||
| 'flex-1 rounded-xl items-center', | ||
| isSelected ? 'bg-icon-default' : 'bg-muted', |
There was a problem hiding this comment.
@gambinish icon-default is a foreground/text design token, is there a background className we could use instead, or flag this with design team so they can create one?
Description
Implements the Top Movers section on the Perps home screen, surfacing the 8 biggest price-change markets in a 2×4 pill grid with a Gainers/Losers toggle. Tapping the section header navigates to the Market List pre-sorted by price change in the direction matching the active toggle.
Subscribes to Websocket data for live updates.
Also fixes some ordering issues that didn't match figma.
Changelog
CHANGELOG entry: Adds top movers section to perps home
Related issues
Fixes: Adds Top Movers in Perps Home
Manual testing steps
Screenshots/Recordings
Screen.Recording.2026-06-03.at.12.37.31.PM.mov
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
Medium Risk
New WebSocket-backed sorting and a navigation path change when users open the full market list; impact is limited by a remote flag defaulting to off, but routing regressions from wallet-embedded Perps home are worth verifying.
Overview
Adds a Top movers block on Perps home (behind
perpsTopMoversEnabled): Gainers / Losers toggle, up to eight markets in a 2×4 pill carousel, live ranking from market data plus throttled WebSocket price updates viausePerpsTopMovers. Header opens the market list sorted by price change in the active direction; analytics source and optionaltransactionActiveAbTestsflow through pills and navigation.Perps home layout moves What's happening above the watchlist (still flag-gated) and inserts Top movers after watchlist.
navigateToMarketListnow targetsRoutes.PERPS.ROOT→MARKET_LISTso "view all" works from wallet-embedded home and the Perps stack. Copy, test IDs, remote flag registry, and unit tests cover the section, hook, and navigation change.Reviewed by Cursor Bugbot for commit 7967aa3. Bugbot is set up for automated code reviews on this repo. Configure here.