feat(perps): add competition banner to perps home screen cp-7.79.0#30731
Conversation
Add a dismissible promotional banner for the perps trading competition, displayed between the balance actions and positions section. The banner navigates to the Rewards tab on tap and persists its dismissed state via StorageWrapper. Visibility is gated by a new LaunchDarkly feature flag `perps-competition-banner-enabled` (disabled by default).
|
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. |
…ndling Replace placeholder icon with actual competition image asset, update banner copy, fix close button event bubbling, and add error handling for storage operations.
… fontWeight Verify exact deeplink payload in navigation test, add coverage for storage write failure on dismiss, and replace raw fontWeight style override with FontWeight.Medium prop from the design system.
…iew tests The PerpsCompetitionBanner component uses useDispatch, which was not included in the PerpsHomeView test's react-redux mock.
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #30731 +/- ##
=======================================
Coverage 82.58% 82.58%
=======================================
Files 5514 5516 +2
Lines 141398 141443 +45
Branches 32564 32574 +10
=======================================
+ Hits 116774 116814 +40
- Misses 16823 16829 +6
+ Partials 7801 7800 -1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Automated Review — PR #30731
PR Review: #30731 — feat(perps): add competition banner to perps home screen cp-7.79.0Tier: standard SummaryThe PR adds the Perps competition banner behind a feature flag, places it below balance actions and above positions, navigates to the Rewards Perps campaign, and persists dismissal. The visible banner flow works on iOS, but the ticket requirement to track banner engage/close in Mixpanel is not implemented. Recipe Coverage
Overall recipe coverage: 4/5 ACs PROVEN Prior ReviewsNo prior reviews. Acceptance Criteria Validation
Code Quality
Fix Quality
Live Validation
Correctness
Static Analysis
Architecture & DomainThe new flag follows existing Perps version-gated selector conventions and registry documentation. No controller, provider, or websocket behavior changes. Risk Assessment
Recommended ActionREQUEST_CHANGES Add MetaMetrics/Mixpanel tracking for both banner engage and close paths, with tests asserting the emitted event payloads. Line comments JSON{
"pr_number": "30731",
"recommendation": "REQUEST_CHANGES",
"summary": "The banner display, Rewards navigation, and dismissal behavior are visually validated, but the linked ticket's Mixpanel tracking requirement is missing for both engage and close.",
"comments": [
{
"path": "app/components/UI/Perps/components/PerpsCompetitionBanner/PerpsCompetitionBanner.tsx",
"line": 80,
"body": "The linked ticket requires tracking whether users close the banner, but `handleDismiss` only updates local/storage state. Please emit the Perps UI interaction/MetaMetrics event for the close action here and add an assertion in `PerpsCompetitionBanner.test.tsx` for the event payload.",
"severity": "must_fix"
},
{
"path": "app/components/UI/Perps/components/PerpsCompetitionBanner/PerpsCompetitionBanner.tsx",
"line": 89,
"body": "The linked ticket also requires tracking whether users engage with the banner. This press handler dispatches the Rewards deeplink and navigates, but it never records the banner tap. Please add the corresponding Perps UI interaction/MetaMetrics event before navigation and cover it in tests.",
"severity": "must_fix"
},
{
"path": "app/components/UI/Perps/selectors/featureFlags/index.test.ts",
"line": 899,
"body": "This selector test file is now 2,099 lines, which crosses the review guardrail's suggestion threshold. Follow-up suggestion: split Perps feature-flag selector tests by flag group so new flags do not keep growing one large suite.",
"severity": "suggestion"
}
]
}
|
abretonc7s
left a comment
There was a problem hiding this comment.
Automated review — see comment above for full details.
…nd close Track PERPS_UI_INTERACTION events when users tap (engage) or dismiss (close) the competition banner on the perps home screen. Includes local constants for button_clicked values pending upstream addition to @metamask/perps-controller, and updates the MetaMetrics reference doc with the new event payloads.
|
@abretonc7s I've addressed yoru comments |
Competition banner is now controlled exclusively via remote feature flag (LaunchDarkly). The local env var fallback is no longer needed.
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection:
Tag Selection Rationale:
No changes to core navigation, account management, network, swap, or other wallet features, so other tags are not warranted. Performance Test Selection: |
Description
Adds a dismissible "Perps trading competition" promotional banner to the perps home screen. The banner is positioned between the balance actions (Add funds / Withdraw) and the positions section, matching the Figma design spec.
Motivation: Drive user engagement with the perps trading competition by surfacing a discoverable CTA on the perps home screen, alongside the existing carousel banner on wallet home and details in the Rewards tab.
Solution:
PerpsCompetitionBannercomponent with trophy icon, title, description, close (X) button, and tap-to-navigate behaviorRoutes.REWARDS_VIEW)StorageWrapperso the banner is not shown againperps-competition-banner-enabled(disabled by default)Changelog
CHANGELOG entry: Added a promotional banner for the perps trading competition on the perps home screen
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/TAT-3206
Manual testing steps
Screenshots/Recordings
Before
N/A - new feature behind a feature flag (disabled by default)
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
Promotional UI behind a remote feature flag (off by default); dismiss state and Rewards navigation only—no auth, payments, or trading logic changes.
Overview
Adds a dismissible competition promotion banner on the Perps home screen, placed between balance actions and the positions section.
The new
PerpsCompetitionBanneris shown only when the remote LaunchDarkly flagperps-competition-banner-enabledis on and the user has not dismissed it. Dismissal is stored viaPERPS_COMPETITION_BANNER_DISMISSEDinStorageWrapper(best-effort; still hides for the session if persistence fails). Tapping the banner sets a rewards pending deeplink (campaign: 'perps-comp') and navigates to Rewards. Close and engage actions emitPERPS_UI_INTERACTIONanalytics withcompetition_banner_close/competition_banner_engage.Supporting changes:
selectPerpsCompetitionBannerEnabledFlag, feature-flag registry entry, English copy, Perps home test ID, mocks, and docs/metrics reference updates. Unit tests cover the component and selector.Reviewed by Cursor Bugbot for commit bb535c7. Bugbot is set up for automated code reviews on this repo. Configure here.