Skip to content

refactor: simplify home tabs #37636

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

refactor: simplify home tabs #37636

wants to merge 1 commit into from
+148 −234

Conversation

@n3ps
Copy link
Contributor

@n3ps n3ps commented Nov 8, 2025 •
edited
Loading

Description

Simplify home screen tab state by replacing Redux with URL query parameters: ie. ?tab=nft

For Users

  • Bookmarkable tabs - save direct links to DeFi, Activity or NFTs tab
  • Browser back/forward works - native navigation through tab history
  • Better UX - Matches modern web app expectations

For Development

  • Reduced overhead - Remove Redux state, actions, and multiple dispatch calls
  • Simple architecture - Single source of truth (URL), no state sync issues

For Testing

  • Faster E2E tests - Navigate directly instead of loading the Tokens page, then click the NFT tab, before asserting
  • Efficient testing - No more indirectly asserting "do tabs work" over and over

Changelog

CHANGELOG entry: refactor: simplify home tabs

Related issues

Fixes:

Manual testing steps

  1. Home screen, navigate between tabs

Screenshots/Recordings

Before

After

Tabs.mov

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 Nov 8, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Nov 8, 2025

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.

@metamaskbot
Copy link
Collaborator

metamaskbot commented Nov 8, 2025 •
edited
Loading

✨ Files requiring CODEOWNER review ✨

🔑 @MetaMask/accounts-engineers (8 files, +96 -67)
  • 📁 ui/
    • 📁 components/
      • 📁 multichain/
        • 📁 account-list-menu/
          • 📄 account-list-menu.tsx +14 -18
        • 📁 account-overview/
          • 📄 account-overview-eth.test.tsx +0 -2
          • 📄 account-overview-non-evm.test.tsx +0 -2
          • 📄 account-overview-tabs.tsx +50 -10
          • 📄 account-overview-unknown.test.tsx +0 -2
          • 📄 common.ts +0 -4
      • 📁 multichain-accounts/
        • 📁 multichain-account-list/
          • 📄 multichain-account-list.tsx +16 -11
        • 📁 multichain-account-list-menu/
          • 📄 multichain-account-list-menu.tsx +16 -18
👨‍🔧 @MetaMask/core-extension-ux (6 files, +64 -38)
  • 📁 ui/
    • 📁 components/
      • 📁 multichain/
        • 📁 account-list-menu/
          • 📄 account-list-menu.tsx +14 -18
        • 📁 account-overview/
          • 📄 account-overview-eth.test.tsx +0 -2
          • 📄 account-overview-non-evm.test.tsx +0 -2
          • 📄 account-overview-tabs.tsx +50 -10
          • 📄 account-overview-unknown.test.tsx +0 -2
          • 📄 common.ts +0 -4
🧪 @MetaMask/qa (1 files, +0 -1)
  • 📁 test/
    • 📁 e2e/
      • 📄 default-fixture.js +0 -1
🔄 @MetaMask/swaps-engineers (1 files, +1 -2)
  • 📁 ui/
    • 📁 pages/
      • 📁 bridge/
        • 📁 hooks/
          • 📄 useSubmitBridgeTransaction.test.tsx +1 -2

@github-actions github-actions bot added the size-M label Nov 8, 2025
@metamaskbot
Copy link
Collaborator

metamaskbot commented Nov 8, 2025

Builds ready [b827206]
UI Startup Metrics (1213 ± 86 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1213108215978612521390
load103992513227410911183
domContentLoaded103392013167310841178
domInteractive211379121855
firstPaint64078120741910301143
backgroundConnect2302162617233246
firstReactRender23183632431
getState21760102538
initialActions001001
loadScripts809702106972862950
setupStore1062121015
numNetworkReqs1367620674
BrowserifyPower User HomeuiStartup19861747292532022202925
load1051899162420312221624
domContentLoaded1042890161420412181614
domInteractive321583233583
firstPaint480236954307928954
backgroundConnect23922026212254262
firstReactRender28253322933
getState17615925023188250
initialActions001011
loadScripts815673136320010021363
setupStore12102331323
numNetworkReqs1187525363172253
WebpackStandard HomeuiStartup82570012721018271107
load609554103092602886
domContentLoaded602549100989595864
domInteractive16125291443
firstPaint215551012218206702
backgroundConnect231056122453
firstReactRender28174873335
getState1162941217
initialActions001001
loadScripts59954799886593854
setupStore1252951326
numNetworkReqs1367519671
WebpackPower User HomeuiStartup12021095149211912961492
load59454477864660778
domContentLoaded58053476562621765
domInteractive30131563436156
firstPaint36865769240599769
backgroundConnect49101825458182
firstReactRender27243122931
getState1318314820142148
initialActions001011
loadScripts57653275860613758
setupStore1363192731
numNetworkReqs1086520745164207
FirefoxBrowserifyStandard HomeuiStartup14011250207313114201656
load1196108514698312241377
domContentLoaded1196108514698312241376
domInteractive993521735116176
firstPaint------
backgroundConnect41241592445102
firstReactRender23194942429
getState8320020614
initialActions001001
loadScripts1172106614287812051349
setupStore157204211341
numNetworkReqs1367819770
BrowserifyPower User HomeuiStartup25222111295426127742954
load14401152209929417702099
domContentLoaded14401151209929417702099
domInteractive17673575155270575
firstPaint------
backgroundConnect12626378109208378
firstReactRender502993175893
getState1297818031160180
initialActions001001
loadScripts13861132188026517451880
setupStore2961183137118
numNetworkReqs1326420859198208
WebpackStandard HomeuiStartup16271394221614816821986
load13841210166610614371592
domContentLoaded13841210166510614371592
domInteractive1003032948110189
firstPaint------
backgroundConnect4826215255284
firstReactRender302379103044
getState74576616
initialActions002001
loadScripts13531193162010014031553
setupStore197253331366
numNetworkReqs1366816765
WebpackPower User HomeuiStartup25342168340436629763404
load15281288193721717581937
domContentLoaded15271288193621717581936
domInteractive18637663190343663
firstPaint------
backgroundConnect1044832280124322
firstReactRender39325454054
getState1227924138137241
initialActions001011
loadScripts14791225191122016761911
setupStore17567171867
numNetworkReqs1336731593237315
📊 Page Load Benchmark Results

Current Commit: b827206 | Date: 11/8/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.02s (±41ms) 🟡 | historical mean value: 1.04s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 716ms (±63ms) 🟢 | historical mean value: 723ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 78ms (±43ms) 🟢 | historical mean value: 77ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.02s 41ms 1.00s 1.33s 1.06s 1.33s
domContentLoaded 716ms 63ms 693ms 1.28s 736ms 1.28s
firstPaint 78ms 43ms 56ms 500ms 84ms 500ms
firstContentfulPaint 78ms 43ms 56ms 500ms 84ms 500ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚀 Bundle size reduced!]
  • background: -214 Bytes (0%)
  • ui: 335 Bytes (0%)
  • common: -276 Bytes (0%)

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

Reviewers

No reviews

Assignees

No one assigned

Labels

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

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@n3ps @metamaskbot