feat(perps): introduce perps tutorial#39693
Merged
Conversation
Contributor
|
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. |
Contributor
✨ Files requiring CODEOWNER review ✨🕵️ @MetaMask/extension-privacy-reviewers (1 files, +5 -0)
👨🔧 @MetaMask/perps (18 files, +1576 -6)
🧪 @MetaMask/qa (1 files, +5 -0)
|
5a9edff to
92424bf
Compare
16e3292 to
64942ba
Compare
Contributor
Builds ready [f35f825]
UI Startup Metrics (1337 ± 105 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Contributor
Builds ready [6c0ede6]
UI Startup Metrics (1371 ± 104 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
6c5a848 to
ff23a27
Compare
Contributor
Builds ready [ff23a27]
UI Startup Metrics (1395 ± 96 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
gambinish
approved these changes
Feb 11, 2026
sleepytanya
approved these changes
Feb 14, 2026
| onClick={() => { | ||
| // TODO: Navigate to learn page | ||
| }} | ||
| onClick={handleLearnPerps} |
Contributor
There was a problem hiding this comment.
Missing data-testid for "Learn the basics of perps" buttton.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR introduces the Perps tutorial modal - a 6-step onboarding flow that educates users about perpetual futures trading. The implementation matches the design and text from MetaMask Mobile.
Features:
6-step tutorial flow with progress indicator
Rive animations for steps 2-6 with theme support (light/dark)
Static character image for the first step
Responsive layout that works across popup, side panel, and fullscreen modes
Redux state management for tutorial progress via ducks/perps
Left-aligned text matching mobile design
Skip and Continue navigation with proper state handling
New files:
ui/components/app/perps/perps-tutorial-modal/ - Modal and step components
ui/ducks/perps/tutorial.ts - Redux slice for tutorial state
ui/ducks/perps/selectors.ts - Redux selectors
app/images/riv_animations/perps-onboarding-carousel-*.riv - Rive animation files
app/images/perps-character.png - Static character image
Changelog
CHANGELOG entry: Added Perps tutorial modal with animated walkthrough explaining perpetual futures trading
Related issues
Fixes:
Manual testing steps
Test Steps:
Open the Perps Tutorial Modal
Navigate to the Perps tab
Trigger the tutorial modal (e.g., via "Learn Perps" button)
Test First Step (What Are Perps)
Verify title and description are left-aligned
Verify character image displays correctly
Verify "Continue" and "Skip" buttons are visible
Test Animation Steps (Steps 2-6)
Click Continue to navigate through each step
Verify Rive animations play correctly
Verify animations are not cut off on any edge
Test All Three Viewport Modes:
a) Side Panel Mode (~320px width)
Verify animations display correctly without horizontal cutoff
b) Popup Mode (~360px width)
Verify animations scale appropriately
c) Fullscreen Mode
Verify animations are constrained and not oversized
Test Dark/Light Theme
Switch between dark and light themes
Verify correct animation file loads for each theme
Test Navigation
Verify "Skip" closes the modal
Verify "Continue" progresses to next step
Verify final step completes the tutorial
Screenshots/Recordings
Before
After
LearnPerpsAll3Screens.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
Adds new Redux state and a modal flow that depends on Rive WASM/asset loading and environment-specific sizing; regressions would mainly affect Perps UI onboarding and performance/memory if animation cleanup/loading fails.
Overview
Adds a new 6-step Perps tutorial modal (progress indicator + static/animated visuals) and wires it into
PerpsHomePagevia the “Learn basics” entry to open the flow.Introduces a new
perpsTutorialRedux slice (open/active step/completed) with selectors and actions, updates root reducer/state snapshots, and adds new i18n strings plus component tests (including Rive animation loading/sizing across popup/sidepanel/fullscreen and light/dark themes).Written by Cursor Bugbot for commit ff23a27. This will update automatically on new commits. Configure here.