Skip to content

refactor: migrate account-exist and account-not-found to design-system-react (onboarding)#40735

Open
smgv wants to merge 10 commits intomainfrom
fix/account-exist-design-update
Open

refactor: migrate account-exist and account-not-found to design-system-react (onboarding)#40735
smgv wants to merge 10 commits intomainfrom
fix/account-exist-design-update

Conversation

@smgv
Copy link
Contributor

@smgv smgv commented Mar 10, 2026

Description

The onboarding flow pages "Account exist" and "Account not found" (seedless onboarding) currently use the legacy component library and design-system constants (Display, AlignItems, JustifyContent, BlockSize, etc.). The codebase is moving to @metamask/design-system-react for consistency and maintainability.

Open in GitHub Codespaces

Changelog

CHANGELOG entry: migrate account-exist and account-not-found to design-system-react

Related issues

Fixes:

Manual testing steps

  1. Go to this page...

Screenshots/Recordings

Before

After

Screenshot 2026-03-10 at 12 53 47 PM Screenshot 2026-03-10 at 12 55 35 PM

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.

Note

Low Risk
Primarily a UI refactor to a shared layout component with minimal logic changes; risk is limited to potential styling/regression in onboarding page rendering and click wiring.

Overview
Refactors the seedless onboarding AccountExist and AccountNotFound pages to use a new shared AccountStatusLayout built on @metamask/design-system-react, removing the legacy component-library/design-system constants and duplicative markup.

Adds AccountStatusLayout (with types + tests) to standardize title/description rendering via i18n keys and provide consistent primary/secondary CTA buttons, while keeping existing navigation and metrics behavior intact. Updates Jest console baselines and adjusts tests to stop asserting DOM node type for the CTAs.

Written by Cursor Bugbot for commit c1d838c. This will update automatically on new commits. Configure here.

@smgv smgv self-assigned this Mar 10, 2026
@smgv smgv requested a review from a team as a code owner March 10, 2026 07:39
@github-actions
Copy link
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.

@metamaskbot metamaskbot added the team-onboarding Onboarding team label Mar 10, 2026
@metamaskbotv2
Copy link
Contributor

metamaskbotv2 bot commented Mar 10, 2026

✨ Files requiring CODEOWNER review ✨

🔐 @MetaMask/web3auth (8 files, +214 -201)
  • 📁 ui/
    • 📁 pages/
      • 📁 onboarding-flow/
        • 📁 account-exist/
          • 📄 account-exist.test.tsx +0 -1
          • 📄 account-exist.tsx +15 -104
        • 📁 account-not-found/
          • 📄 account-not-found.test.tsx +0 -1
          • 📄 account-not-found.tsx +12 -95
        • 📁 account-status-layout/
          • 📄 account-status-layout.test.tsx +66 -0
          • 📄 account-status-layout.tsx +97 -0
          • 📄 account-status-layout.types.ts +22 -0
          • 📄 index.ts +2 -0

@metamaskbotv2
Copy link
Contributor

metamaskbotv2 bot commented Mar 10, 2026

Builds ready [9732ae9]
⚡ Performance Benchmarks
👆 Interaction Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Load New Accountload_new_account28226431821293318
total28226431821293318
Confirm Txconfirm_tx6046602260701960596070
total6046602260701960596070
Bridge User Actionsbridge_load_page24420828733279287
bridge_load_asset_picker22420023915232239
bridge_search_token74370277533768775
total1188109412837312301283
🔌 Startup Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Standard HomeuiStartup14821209192712515381725
load12321023148610312801429
domContentLoaded1225994147810212761423
domInteractive3019114192680
firstPaint1567342979213306
backgroundConnect22120128214224247
firstReactRender2114208192028
initialActions301681725
loadScripts1021796127610110791206
setupStore186317321634
numNetworkReqs322295202287
Power User HomeuiStartup2679162512709183424834714
load12051054179615312581513
domContentLoaded11871038178315112091483
domInteractive3820217323681
firstPaint222781631192271322
backgroundConnect732263993413253952466
firstReactRender2515101102739
initialActions104113
loadScripts96883215551489891270
setupStore1583551825
numNetworkReqs82342224594173
🧭 User Journey Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Onboarding Import WalletimportWalletToSocialScreen2202202200220220
srpButtonToSrpForm9693100399100
confirmSrpToPwForm22212312323
pwFormToMetricsScreen16161601616
metricsToWalletReadyScreen17161811718
doneButtonToHomeScreen67360376771753767
openAccountMenuToAccountListLoaded2942293229561029452956
total3979391940977240294097
Onboarding New WalletcreateWalletToSocialScreen2202202210221221
srpButtonToPwForm1101081122110112
createPwToRecoveryScreen989099
skipBackupToMetricsScreen37344233942
agreeButtonToOnboardingSuccess17161811718
doneButtonToAssetList49448150710501507
total89987795131888951
Asset DetailsassetClickToPriceChart13710815818155158
total13710815818155158
Solana Asset DetailsassetClickToPriceChart77718358283
total77718358283
Import Srp HomeloginToHomeScreen1929182919745719711974
openAccountMenuAfterLogin55466166061
homeAfterImportWithNewWallet23632162248713124662487
total43474196449210444034492
Send TransactionsopenSendPageFromHome24183042630
selectTokenToSendFormLoaded18171911819
reviewTransactionToConfirmationPage8508478543853854
total8908838975892897
SwapopenSwapPageFromHome32263743437
fetchAndDisplaySwapQuotes269126902692126922692
total272027162724327212724
🌐 Dapp Page Load Benchmarks

Current Commit: 9732ae9 | Date: 3/10/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.05s (±49ms) 🟡 | historical mean value: 1.05s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 738ms (±44ms) 🟢 | historical mean value: 740ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 81ms (±12ms) 🟢 | historical mean value: 83ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.05s 49ms 1.02s 1.39s 1.08s 1.39s
domContentLoaded 738ms 44ms 709ms 1.04s 765ms 1.04s
firstPaint 81ms 12ms 64ms 184ms 88ms 184ms
firstContentfulPaint 81ms 12ms 64ms 184ms 88ms 184ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 5.15 MiB (100%)
  • ui: 8.24 MiB (100%)
  • common: 10.99 MiB (100%)

@smgv smgv requested a review from LeVinhGithub March 10, 2026 09:28
@smgv smgv added the needs-qa Label will automate into QA workspace label Mar 10, 2026
Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

@metamaskbotv2
Copy link
Contributor

metamaskbotv2 bot commented Mar 10, 2026

Builds ready [fb68e91]
⚡ Performance Benchmarks
👆 Interaction Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Load New Accountload_new_account28827630310292303
total28827630310292303
Confirm Txconfirm_tx6044599260974060836097
total6044599260974060836097
Bridge User Actionsbridge_load_page2342292426242242
bridge_load_asset_picker21514826249260262
bridge_search_token7587487708759770
total1200108912957412611295
🔌 Startup Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Standard HomeuiStartup14361236176010914801655
load1193100614679212311378
domContentLoaded1186100214599312281367
domInteractive3017119192676
firstPaint1496837367206248
backgroundConnect21419837421214239
firstReactRender2112191182130
initialActions109124
loadScripts99080612669310291151
setupStore1463151722
numNetworkReqs312293192583
Power User HomeuiStartup2807169012591189227114986
load12301054168716212651606
domContentLoaded12131044167815412481579
domInteractive4220483493991
firstPaint1757964394213338
backgroundConnect761272985016533771763
firstReactRender26176392743
initialActions105113
loadScripts993829145614610201333
setupStore1764871932
numNetworkReqs843822945100179
🧭 User Journey Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Onboarding Import WalletimportWalletToSocialScreen2172162181218218
srpButtonToSrpForm93929519595
confirmSrpToPwForm21212102121
pwFormToMetricsScreen15151501515
metricsToWalletReadyScreen16151611616
doneButtonToHomeScreen70461182674735826
openAccountMenuToAccountListLoaded2911290229251029252925
total3955389739984339983998
Onboarding New WalletcreateWalletToSocialScreen2192162222220222
srpButtonToPwForm1101081122111112
createPwToRecoveryScreen989099
skipBackupToMetricsScreen36353813738
agreeButtonToOnboardingSuccess17171701717
doneButtonToAssetList51650154518515545
total90789193819906938
Asset DetailsassetClickToPriceChart13710117928152179
total13710117928152179
Solana Asset DetailsassetClickToPriceChart79798008080
total79798008080
Import Srp HomeloginToHomeScreen1963189120475619712047
openAccountMenuAfterLogin513865105865
homeAfterImportWithNewWallet2435238724924324922492
total4425431945288545284528
Send TransactionsopenSendPageFromHome352150124950
selectTokenToSendFormLoaded21202212122
reviewTransactionToConfirmationPage8468468470847847
total90889292010915920
SwapopenSwapPageFromHome372454124854
fetchAndDisplaySwapQuotes268526812688226852688
total2729270927501427382750
🌐 Dapp Page Load Benchmarks

Current Commit: fb68e91 | Date: 3/10/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.05s (±41ms) 🟡 | historical mean value: 1.04s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 733ms (±36ms) 🟢 | historical mean value: 735ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 80ms (±13ms) 🟢 | historical mean value: 83ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.05s 41ms 1.02s 1.35s 1.09s 1.35s
domContentLoaded 733ms 36ms 713ms 1.01s 751ms 1.01s
firstPaint 80ms 13ms 64ms 200ms 92ms 200ms
firstContentfulPaint 80ms 13ms 64ms 200ms 92ms 200ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 5.15 MiB (100%)
  • ui: 8.27 MiB (100%)
  • common: 10.99 MiB (100%)

@sonarqubecloud
Copy link

@metamaskbotv2
Copy link
Contributor

metamaskbotv2 bot commented Mar 10, 2026

Builds ready [c1d838c]
⚡ Performance Benchmarks
👆 Interaction Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Load New Accountload_new_account28326431019302310
total28326431019302310
Confirm Txconfirm_tx6082602161253961216125
total6082602161253961216125
Bridge User Actionsbridge_load_page25023227215258272
bridge_load_asset_picker20411727354245273
bridge_search_token76374379622769796
total1232120312521912471252
🔌 Startup Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Standard HomeuiStartup14601232169810715221671
load121999914239212761390
domContentLoaded121199413939012701376
domInteractive3017103192682
firstPaint160721332139202290
backgroundConnect22119938822222242
firstReactRender21134762231
initialActions107113
loadScripts100879711938810621174
setupStore1373151525
numNetworkReqs312294192282
Power User HomeuiStartup33301648124662609375611404
load12241004179816212691574
domContentLoaded1208997178815812571553
domInteractive40193564531112
firstPaint215701195173265386
backgroundConnect127225510296217512175955
firstReactRender25174862737
initialActions106114
loadScripts994808155514810211306
setupStore1665381728
numNetworkReqs954723143101203
🧭 User Journey Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Onboarding Import WalletimportWalletToSocialScreen2212182232222223
srpButtonToSrpForm95959609696
confirmSrpToPwForm22222302323
pwFormToMetricsScreen16161601616
metricsToWalletReadyScreen17161811718
doneButtonToHomeScreen84060912002259791200
openAccountMenuToAccountListLoaded27642486296622429422966
total39803834412110240634121
Onboarding New WalletcreateWalletToSocialScreen2182182180218218
srpButtonToPwForm1121061216116121
createPwToRecoveryScreen889089
skipBackupToMetricsScreen36353813638
agreeButtonToOnboardingSuccess17161811718
doneButtonToAssetList57348468273611682
total96788110697210041069
Asset DetailsassetClickToPriceChart1151081299129129
total1151081299129129
Solana Asset DetailsassetClickToPriceChart82798738787
total82798738787
Import Srp HomeloginToHomeScreen2058197721295820912129
openAccountMenuAfterLogin593790207390
homeAfterImportWithNewWallet25302295275421027252754
total47484362530135648035301
Send TransactionsopenSendPageFromHome19172641826
selectTokenToSendFormLoaded19172112021
reviewTransactionToConfirmationPage8498448533851853
total90287993423926934
SwapopenSwapPageFromHome30193883838
fetchAndDisplaySwapQuotes268826842696526862696
total2726270327501627342750
🌐 Dapp Page Load Benchmarks

Current Commit: c1d838c | Date: 3/10/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.05s (±151ms) 🟡 | historical mean value: 1.03s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 741ms (±168ms) 🟢 | historical mean value: 727ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 103ms (±237ms) 🟢 | historical mean value: 83ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.05s 151ms 1.01s 2.53s 1.07s 2.53s
domContentLoaded 741ms 168ms 699ms 2.39s 757ms 2.39s
firstPaint 103ms 237ms 64ms 2.46s 92ms 2.46s
firstContentfulPaint 103ms 237ms 64ms 2.46s 92ms 2.46s
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 5.15 MiB (100%)
  • ui: 8.27 MiB (100%)
  • common: 10.99 MiB (100%)

@smgv smgv changed the title refactor(onboarding): migrate account-exist and account-not-found to design-system-react refactor: migrate account-exist and account-not-found to design-system-react (onboarding) Mar 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area-onboarding needs-qa Label will automate into QA workspace size-M team-onboarding Onboarding team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants