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. |
|
No dependency changes detected. Learn more about Socket for GitHub. 👍 No dependency changes detected in pull request |
Contributor
Author
|
@SocketSecurity ignore npm/framer-motion@6.5.1 |
Contributor
✨ Files requiring CODEOWNER review ✨🔑 @MetaMask/accounts-engineers (3 files, +16 -3)
✅ @MetaMask/confirmations (1 files, +7 -2)
👨🔧 @MetaMask/core-extension-ux (4 files, +91 -2)
🔄 @MetaMask/swaps-engineers (1 files, +6 -1)
|
Contributor
Builds ready [4f618e1]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
The AnimatePresence wrapper from framer-motion in routes.component.tsx was causing multiple CI failures: 1. Lint: prettier formatting error in animated.tsx 2. Unit tests: bridge snapshot mismatch from extra Animated wrapper div 3. Integration tests: 'Found multiple elements' errors because AnimatePresence keeps exiting route content in the DOM during transitions, causing duplicate text elements in jsdom 4. E2E tests: all onboarding tests timing out because AnimatePresence combined with React Router's useRoutes creates stale route content that interferes with element detection Solution: Replace framer-motion with CSS-only animations. - Remove AnimatePresence from routes.component.tsx - Simplify Animated component to use CSS page-enter-animation class - Revert framer-motion additions to add-funds-modal and receive-modal - Remove framer-motion dependency, type declaration, and lavamoat policies - Update bridge snapshot test Co-authored-by: Francis Nepomuceno <n3ps@users.noreply.github.com>
This reverts commit 55551f0.
…h exit support
The AnimatePresence wrapper around all routes in routes.component.tsx
caused CI failures by keeping exiting route content in the DOM during
transitions (duplicate elements in tests, timeouts in E2E).
Changes:
- Remove AnimatePresence + keyed wrapper from routes.component.tsx
- Rewrite Animated component using CSS animations with forwardRef:
- Enter animation via page-enter-animation CSS class on mount
- Exit animation via triggerExit() which swaps to page-exit-animation
class and waits for animationend (with 250ms fallback timeout)
- Gracefully resolves synchronously in test environments (no CSS)
- Wire exit animations into back-button handlers for Bridge, Account
List, and Address List pages via animatedRef.current.triggerExit()
- Keep framer-motion for local modal animations (add-funds-modal)
- Update bridge snapshot
Co-authored-by: Francis Nepomuceno <n3ps@users.noreply.github.com>
Contributor
Builds ready [6e3d7dc]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Co-authored-by: Francis Nepomuceno <n3ps@users.noreply.github.com>
Contributor
Builds ready [fa33e27]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
…Animated Co-authored-by: Francis Nepomuceno <n3ps@users.noreply.github.com>
ccharly
previously approved these changes
Mar 10, 2026
ameliejyc
previously approved these changes
Mar 10, 2026
matthewwalsh0
previously approved these changes
Mar 10, 2026
micaelae
previously approved these changes
Mar 10, 2026
Contributor
Builds ready [c678ea0]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
2665ae8
ccharly
approved these changes
Mar 10, 2026
ameliejyc
approved these changes
Mar 10, 2026
micaelae
approved these changes
Mar 10, 2026
matthewwalsh0
approved these changes
Mar 10, 2026
|
Contributor
Builds ready [2665ae8]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
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.
7 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
Introduce native page transitions for key navigation flows using the CSS Transitions API.
Why?
Make route changes feel smoother and more intentional without coupling transitions to individual page components
Changelog
CHANGELOG entry: feat: UI transitions
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
After
transitions.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
Touches multiple high-traffic navigation entry points and relies on a relatively new browser API; regressions would primarily be UI/UX issues (navigation timing/animation) rather than data or security.
Overview
Adds a lightweight page-transition helper (
transitionForward/transitionBack) built on the browser View Transitions API, with automatic fallback in tests and Firefox.Wires these transitions into several key navigation actions (send/swap/receive, asset details navigation, account list and address list, and back buttons on asset/bridge/send flows) and introduces global CSS animations via new
page-transitions.scssimported fromui/css/index.scss.Written by Cursor Bugbot for commit 2665ae8. This will update automatically on new commits. Configure here.