Skip to content

feat: transitions#40588

Draft
n3ps wants to merge 14 commits intomainfrom
n3ps/tab-transition
Draft

feat: transitions#40588
n3ps wants to merge 14 commits intomainfrom
n3ps/tab-transition

Conversation

@n3ps
Copy link
Contributor

@n3ps n3ps commented Mar 4, 2026

Description

Open in GitHub Codespaces

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

  1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

@n3ps n3ps added the team-core-extension-ux Core Extension UX team label Mar 4, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Mar 4, 2026

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.

@socket-security
Copy link

socket-security bot commented Mar 4, 2026

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Addedframer-motion@​6.5.19510097100100

View full report

@socket-security
Copy link

socket-security bot commented Mar 4, 2026

All alerts resolved. Learn more about Socket for GitHub.

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

Ignoring alerts on:

  • framer-motion@6.5.1

View full report

@github-actions github-actions bot added the size-L label Mar 4, 2026
@n3ps
Copy link
Contributor Author

n3ps commented Mar 4, 2026

@SocketSecurity ignore npm/framer-motion@6.5.1

@metamaskbotv2
Copy link
Contributor

metamaskbotv2 bot commented Mar 4, 2026

✨ Files requiring CODEOWNER review ✨

🔑 @MetaMask/accounts-engineers (2 files, +137 -129)
  • 📁 ui/
    • 📁 pages/
      • 📁 multichain-accounts/
        • 📁 account-list/
          • 📄 account-list.tsx +94 -90
        • 📁 multichain-account-address-list-page/
          • 📄 multichain-account-address-list-page.tsx +43 -39

@MetaMask/confirmations (2 files, +21 -17)
  • 📁 ui/
    • 📁 pages/
      • 📁 confirmations/
        • 📁 components/
          • 📁 send/
            • 📁 header/
              • 📄 header.tsx +7 -2
        • 📁 send/
          • 📄 send-inner.tsx +14 -15

👨‍🔧 @MetaMask/core-extension-ux (4 files, +125 -5)
  • 📁 ui/
    • 📁 components/
      • 📁 multichain/
        • 📁 app-header/
          • 📄 app-header-unlocked-content.tsx +2 -1
        • 📁 receive-modal/
          • 📄 receive-modal.js +18 -4
    • 📁 css/
      • 📁 utilities/
        • 📄 page-transitions.scss +104 -0
        • 📄 index.scss +1 -0

📜 @MetaMask/policy-reviewers (12 files, +864 -0)
  • 📁 lavamoat/
    • 📁 browserify/
      • 📁 beta/
        • 📄 policy.json +112 -0
      • 📁 experimental/
        • 📄 policy.json +112 -0
      • 📁 flask/
        • 📄 policy.json +112 -0
      • 📁 main/
        • 📄 policy.json +112 -0
    • 📁 webpack/
      • 📁 mv2/
        • 📁 beta/
          • 📄 policy.json +52 -0
        • 📁 experimental/
          • 📄 policy.json +52 -0
        • 📁 flask/
          • 📄 policy.json +52 -0
        • 📁 main/
          • 📄 policy.json +52 -0
      • 📁 mv3/
        • 📁 beta/
          • 📄 policy.json +52 -0
        • 📁 experimental/
          • 📄 policy.json +52 -0
        • 📁 flask/
          • 📄 policy.json +52 -0
        • 📁 main/
          • 📄 policy.json +52 -0

Tip

Follow the policy review process outlined in the LavaMoat Policy Review Process doc before expecting an approval from Policy Reviewers.


🔄 @MetaMask/swaps-engineers (2 files, +20 -12)
  • 📁 ui/
    • 📁 hooks/
      • 📁 bridge/
        • 📄 useBridging.ts +6 -3
    • 📁 pages/
      • 📁 bridge/
        • 📄 index.tsx +14 -9

🔐 @MetaMask/web3auth (1 files, +16 -6)
  • 📁 ui/
    • 📁 components/
      • 📁 app/
        • 📁 modals/
          • 📁 add-funds-modal/
            • 📄 add-funds-modal.tsx +16 -6

@metamaskbotv2
Copy link
Contributor

metamaskbotv2 bot commented Mar 4, 2026

Builds ready [4f618e1]
⚡ Performance Benchmarks
👆 Interaction Benchmarks
🧭 User Journey Benchmarks
🌐 Dapp Page Load Benchmarks

Current Commit: 4f618e1 | Date: 3/4/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.09s (±77ms) 🟡 | historical mean value: 1.06s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 774ms (±74ms) 🟢 | historical mean value: 748ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 85ms (±11ms) 🟢 | historical mean value: 83ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.09s 77ms 1.05s 1.38s 1.34s 1.38s
domContentLoaded 774ms 74ms 734ms 1.06s 1.00s 1.06s
firstPaint 85ms 11ms 68ms 180ms 96ms 180ms
firstContentfulPaint 85ms 11ms 68ms 180ms 96ms 180ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 57 Bytes (0%)
  • ui: 183.53 KiB (2.2%)
  • common: 44 Bytes (0%)

cursoragent and others added 3 commits March 7, 2026 06:58
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>
…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>
@cursor cursor bot temporarily deployed to pr-comment March 8, 2026 06:08 Inactive
@cursor cursor bot temporarily deployed to pr-comment March 8, 2026 06:35 Inactive
@metamaskbotv2
Copy link
Contributor

metamaskbotv2 bot commented Mar 8, 2026

Builds ready [6e3d7dc]
⚡ Performance Benchmarks
👆 Interaction Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Load New Accountload_new_account29427231518310315
total29427231518310315
Confirm Txconfirm_tx6041602660571160506057
total6041602660571160506057
Bridge User Actionsbridge_load_page22220324314224243
bridge_load_asset_picker26619032949308329
bridge_search_token71769973315728733
total1244122112571612571257
🔌 Startup Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Standard HomeuiStartup14391207190411914951660
load12041000160210312531390
domContentLoaded1197983159410212501383
domInteractive2917122202680
firstPaint164701227130214285
backgroundConnect22219537621227248
firstReactRender20134262134
initialActions108124
loadScripts992789139710110341177
setupStore1474971727
numNetworkReqs322293202583
Power User HomeuiStartup2724163712647177825324846
load12181048229218112371601
domContentLoaded12011038228417812261558
domInteractive38191752735115
firstPaint19079638104254408
backgroundConnect728264960612604372193
firstReactRender25175982841
initialActions105113
loadScripts986832199416810151319
setupStore1674381936
numNetworkReqs853723946104174
🧭 User Journey Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Onboarding Import WalletimportWalletToSocialScreen2202182211221221
srpButtonToSrpForm94939519595
confirmSrpToPwForm22222202222
pwFormToMetricsScreen15151501515
metricsToWalletReadyScreen16161701617
doneButtonToHomeScreen61859565322617653
openAccountMenuToAccountListLoaded294129322949729492949
total39873880418511340414185
Onboarding New WalletcreateWalletToSocialScreen2182172211219221
srpButtonToPwForm1071071080108108
createPwToRecoveryScreen889089
skipBackupToMetricsScreen35343713637
agreeButtonToOnboardingSuccess16161701617
doneButtonToAssetList57348170984617709
total96286611119010001111
Asset DetailsassetClickToPriceChart12411014315140143
total12411014315140143
Solana Asset DetailsassetClickToPriceChart85789778797
total85789778797
Import Srp HomeloginToHomeScreen1933190719561819401956
openAccountMenuAfterLogin68291032688103
homeAfterImportWithNewWallet20461492252742023412527
total4286425143072543074307
Send TransactionsopenSendPageFromHome19182111921
selectTokenToSendFormLoaded20202002020
reviewTransactionToConfirmationPage968849111611810531116
total1007887115511910941155
SwapopenSwapPageFromHome43375474754
fetchAndDisplaySwapQuotes268526832687126852687
total272927222739827392739
🌐 Dapp Page Load Benchmarks

Current Commit: 6e3d7dc | Date: 3/8/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.07s (±80ms) 🟡 | historical mean value: 1.04s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 760ms (±76ms) 🟢 | historical mean value: 727ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 82ms (±11ms) 🟢 | historical mean value: 81ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.07s 80ms 1.02s 1.41s 1.32s 1.41s
domContentLoaded 760ms 76ms 708ms 1.08s 1.00s 1.08s
firstPaint 82ms 11ms 64ms 168ms 92ms 168ms
firstContentfulPaint 82ms 11ms 64ms 168ms 92ms 168ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: -98.98 KiB (-1.84%)
  • ui: 220.98 KiB (2.64%)
  • common: 98.08 KiB (0.88%)

Co-authored-by: Francis Nepomuceno <n3ps@users.noreply.github.com>
@cursor cursor bot temporarily deployed to pr-comment March 8, 2026 07:39 Inactive
@cursor cursor bot temporarily deployed to pr-comment March 8, 2026 08:08 Inactive
@metamaskbotv2
Copy link
Contributor

metamaskbotv2 bot commented Mar 8, 2026

Builds ready [fa33e27]
⚡ Performance Benchmarks
👆 Interaction Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Load New Accountload_new_account31027935127313351
total31027935127313351
Confirm Txconfirm_tx6100604161483661136148
total6100604161483661136148
Bridge User Actionsbridge_load_page28221434050339340
bridge_load_asset_picker20914224941247249
bridge_search_token7337307373732737
total1246116713567913231356
🔌 Startup Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Standard HomeuiStartup15031263207013415621713
load12561033170411813161463
domContentLoaded12491028167811613061432
domInteractive3118129222782
firstPaint174731237139221379
backgroundConnect23120144831237268
firstReactRender21125572338
initialActions107124
loadScripts1039814147111511001229
setupStore1473251723
numNetworkReqs312296192281
Power User HomeuiStartup3077169912845224926785959
load12371073177715212901609
domContentLoaded12191061177014812701550
domInteractive38202022936102
firstPaint200821498155259323
backgroundConnect986260988718104993293
firstReactRender27175792950
initialActions104112
loadScripts999856149913610471309
setupStore1774972031
numNetworkReqs1054327951128214
🧭 User Journey Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Onboarding Import WalletimportWalletToSocialScreen2192172211220221
srpButtonToSrpForm94919629696
confirmSrpToPwForm21212202122
pwFormToMetricsScreen15151601516
metricsToWalletReadyScreen16161601616
doneButtonToHomeScreen5965856068599606
openAccountMenuToAccountListLoaded292329112934929342934
total3881387238971238973897
Onboarding New WalletcreateWalletToSocialScreen2192172201220220
srpButtonToPwForm1091081101109110
createPwToRecoveryScreen999099
skipBackupToMetricsScreen37354023740
agreeButtonToOnboardingSuccess19162222022
doneButtonToAssetList53848561457600614
total96688110496710141049
Asset DetailsassetClickToPriceChart1591551644164164
total1591551644164164
Solana Asset DetailsassetClickToPriceChart81718868688
total81718868688
Import Srp HomeloginToHomeScreen19991765232219020712322
openAccountMenuAfterLogin57486576465
homeAfterImportWithNewWallet24532288271116525832711
total4510447045413045414541
Send TransactionsopenSendPageFromHome25183152931
selectTokenToSendFormLoaded20162632126
reviewTransactionToConfirmationPage8478458502848850
total8898848944891894
SwapopenSwapPageFromHome34264473844
fetchAndDisplaySwapQuotes2690267827231926822723
total2735271627491427492749
🌐 Dapp Page Load Benchmarks

Current Commit: fa33e27 | Date: 3/8/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.05s (±39ms) 🟡 | historical mean value: 1.04s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 740ms (±37ms) 🟢 | historical mean value: 727ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 82ms (±14ms) 🟢 | historical mean value: 81ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.05s 39ms 1.03s 1.36s 1.07s 1.36s
domContentLoaded 740ms 37ms 718ms 1.03s 756ms 1.03s
firstPaint 82ms 14ms 68ms 208ms 88ms 208ms
firstContentfulPaint 82ms 14ms 68ms 208ms 88ms 208ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: -98.98 KiB (-1.84%)
  • ui: 221.04 KiB (2.64%)
  • common: 98.08 KiB (0.88%)

…Animated

Co-authored-by: Francis Nepomuceno <n3ps@users.noreply.github.com>
@cursor cursor bot temporarily deployed to pr-comment March 9, 2026 02:26 Inactive
@cursor cursor bot temporarily deployed to pr-comment March 9, 2026 02:56 Inactive
These functions were removed from the codebase when the swaps
controller was deleted (PR #39900). The merge with main dropped
the imports but left the call sites, causing TS2304 errors.

Co-authored-by: Francis Nepomuceno <n3ps@users.noreply.github.com>
@sonarqubecloud
Copy link

sonarqubecloud bot commented Mar 9, 2026

Quality Gate Failed Quality Gate failed

Failed conditions
68.6% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

@metamaskbotv2
Copy link
Contributor

metamaskbotv2 bot commented Mar 9, 2026

Builds ready [aba8525]
⚡ Performance Benchmarks
👆 Interaction Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Load New Accountload_new_account27226329714265297
total27226329714265297
Confirm Txconfirm_tx603960286048860466048
total603960286048860466048
Bridge User Actionsbridge_load_page27725730717283307
bridge_load_asset_picker17911024253224242
bridge_search_token73070178131751781
total1186107513128612501312
🔌 Startup Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Standard HomeuiStartup14501224171410615081637
load1214102014669612721376
domContentLoaded1207101214199512691367
domInteractive281884162575
firstPaint1566843582215320
backgroundConnect22619827316230260
firstReactRender20125162231
initialActions2012225
loadScripts99981012139310601160
setupStore1473761625
numNetworkReqs322289193180
Power User HomeuiStartup20901748246613121662261
load12291090185316112151677
domContentLoaded12121081183715311911601
domInteractive42221593042129
firstPaint200821767179244335
backgroundConnect32026840728338374
firstReactRender25175572742
initialActions104112
loadScripts98184816071489641372
setupStore1684461925
numNetworkReqs69351824558168
🧭 User Journey Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Onboarding Import WalletimportWalletToSocialScreen2192182201220220
srpButtonToSrpForm97969719797
confirmSrpToPwForm22222202222
pwFormToMetricsScreen16151601616
metricsToWalletReadyScreen16161601616
doneButtonToHomeScreen63559172351661723
openAccountMenuToAccountListLoaded2937290629743029612974
total3920386740055839424005
Onboarding New WalletcreateWalletToSocialScreen2192182201219220
srpButtonToPwForm1111051227114122
createPwToRecoveryScreen888088
skipBackupToMetricsScreen35343713537
agreeButtonToOnboardingSuccess16161701617
doneButtonToAssetList53448261250572612
total9278661009519571009
Asset DetailsassetClickToPriceChart1207015029137150
total1207015029137150
Solana Asset DetailsassetClickToPriceChart1017115336136153
total1017115336136153
Import Srp HomeloginToHomeScreen1942184520818619262081
openAccountMenuAfterLogin46444924749
homeAfterImportWithNewWallet24432340261610525112616
total44124253458013845134580
Send TransactionsopenSendPageFromHome441869205969
selectTokenToSendFormLoaded291754143654
reviewTransactionToConfirmationPage1055849153827011681538
total1128893164329612811643
SwapopenSwapPageFromHome41384324343
fetchAndDisplaySwapQuotes268226792686326822686
total2722270727381127232738
🌐 Dapp Page Load Benchmarks

Current Commit: aba8525 | Date: 3/9/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.04s (±41ms) 🟡 | historical mean value: 1.04s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 731ms (±39ms) 🟢 | historical mean value: 727ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 81ms (±13ms) 🟢 | historical mean value: 81ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.04s 41ms 1.01s 1.35s 1.08s 1.35s
domContentLoaded 731ms 39ms 707ms 1.02s 769ms 1.02s
firstPaint 81ms 13ms 68ms 196ms 88ms 196ms
firstContentfulPaint 81ms 13ms 68ms 196ms 88ms 196ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 5.15 MiB (100%)
  • ui: 8.38 MiB (100%)
  • common: 10.99 MiB (100%)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size-L team-core-extension-ux Core Extension UX team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants