Skip to content

Conversation

@smgv
Copy link
Contributor

@smgv smgv commented Oct 27, 2025

Description

In this PR, I updated the MetaMetric UI to remove scroll state when the user opens it on small-screen devices.

Jira Link: https://consensyssoftware.atlassian.net/browse/SL-218

Figma Link: https://www.figma.com/design/pViOUcmjwhEzFsdrwknpNc/Onboarding?node-id=12818-150216&m=dev

Open in GitHub Codespaces

Changelog

CHANGELOG entry: Removed scroll state for MetaMetric UI when opening it on small-screen devices.

Related issues

Fixes:

Manual testing steps

  1. Open the extension.
  2. Create a new wallet and go with SRP flow
  3. Validate MetaMetric UI from the above Figma link.

Screenshots/Recordings

Before

After

Screenshot 2025-10-27 at 12 37 11 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

Shortens the MetaMetrics onboarding title and reduces the user-control image height to 175px, updating locales, UI styles, snapshots, and E2E selectors accordingly.

  • Onboarding UI (MetaMetrics):
    • Change heading copy to Help improve MetaMask and remove extra bottom margin on the title in ui/pages/onboarding-flow/metametrics/metametrics.js.
    • Reduce illustration height from 200 to 175 via index.scss and component <img>.
  • Localization:
    • Update onboardingMetametricsTitle string in app/_locales/en/messages.json and app/_locales/en_GB/messages.json.
  • Tests:
    • Update Jest snapshots to reflect new title and image size.
    • Adjust E2E page object expected heading text in test/e2e/.../onboarding-metrics-page.ts.

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

@smgv smgv self-assigned this Oct 27, 2025
@smgv smgv requested a review from a team as a code owner October 27, 2025 07:13
@smgv smgv added area-onboarding needs-qa Label will automate into QA workspace team-web3auth Web3Auth team labels Oct 27, 2025
@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
Copy link
Collaborator

metamaskbot commented Oct 27, 2025

✨ Files requiring CODEOWNER review ✨

🧪 @MetaMask/qa (1 files, +1 -1)
  • 📁 test/
    • 📁 e2e/
      • 📁 page-objects/
        • 📁 pages/
          • 📁 onboarding/
            • 📄 onboarding-metrics-page.ts +1 -1

🔐 @MetaMask/web3auth (3 files, +8 -9)
  • 📁 ui/
    • 📁 pages/
      • 📁 onboarding-flow/
        • 📁 metametrics/
          • 📁 __snapshots__/
            • 📄 metametrics.test.js.snap +6 -6
            • 📄 index.scss +1 -1
            • 📄 metametrics.js +1 -2

cursor[bot]

This comment was marked as outdated.

@metamaskbot
Copy link
Collaborator

📊 Page Load Benchmark Results

Current Commit: 1b3e656 | Date: 10/27/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.04s (±49ms) 🟡 | historical mean value: 1.05s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 724ms (±62ms) 🟢 | historical mean value: 737ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 88ms (±128ms) 🟢 | historical mean value: 78ms ⬆️ (historical data)
📈 Detailed Results
Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.04s 49ms 1.01s 1.44s 1.07s 1.44s
domContentLoaded 724ms 62ms 695ms 1.29s 750ms 1.29s
firstPaint 88ms 128ms 60ms 1.36s 84ms 1.36s
firstContentfulPaint 88ms 128ms 60ms 1.36s 84ms 1.36s
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms

Results generated automatically by MetaMask CI

@metamaskbot
Copy link
Collaborator

Builds ready [1b3e656]
UI Startup Metrics (1284 ± 90 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1284109115619013371444
load110493513599111691261
domContentLoaded109893013469011631255
domInteractive20145582046
firstPaint634161135644011031235
backgroundConnect2332182628236248
firstReactRender27185483046
getState1773152026
initialActions61659621
loadScripts8727111120909411026
setupStore952121014
BrowserifyPower User HomeuiStartup23321850399864030633998
load1181951183931615971839
domContentLoaded1171946182531215911825
domInteractive32161082454108
firstPaint720101175051910241750
backgroundConnect27822253284302532
firstReactRender26233222732
getState21015937947214379
initialActions182119318119
loadScripts911712139525812941395
setupStore1372971129
WebpackStandard HomeuiStartup8337131107758501071
load62658190569633860
domContentLoaded61856989067627846
domInteractive15115991438
firstPaint18854878182192706
backgroundConnect22134882442
firstReactRender26164073133
getState1152131417
initialActions30173413
loadScripts61556788065625836
setupStore1052131214
WebpackPower User HomeuiStartup17501283241331819332413
load697614983102740983
domContentLoaded66860089978726899
domInteractive201343103243
firstPaint40459903310729903
backgroundConnect9925343101121343
firstReactRender25232812528
getState1805924037200240
initialActions9143132243
loadScripts66459888975715889
setupStore22693252793
FirefoxBrowserifyStandard HomeuiStartup1439126618489914951596
load1228108113957312741367
domContentLoaded1227108113957312741367
domInteractive1163433455122304
firstPaint------
backgroundConnect3723134144364
firstReactRender24205152534
getState849310824
initialActions41739312
loadScripts1204106413697312501347
setupStore136132151226
BrowserifyPower User HomeuiStartup27422430336526128853365
load14541250164211616121642
domContentLoaded14531250164211616121642
domInteractive1424334276193342
firstPaint------
backgroundConnect21229450143398450
firstReactRender34286283362
getState1397821028155210
initialActions1116918969
loadScripts13931228159110914981591
setupStore22559163459
WebpackStandard HomeuiStartup15741386241414716181840
load13521177188912014021550
domContentLoaded13521177188912014021550
domInteractive1073140972106321
firstPaint------
backgroundConnect48231672456107
firstReactRender28227492847
getState8412112915
initialActions6118318317
loadScripts13201162173610813751517
setupStore14782121343
WebpackPower User HomeuiStartup30602470433755334164337
load16871401218821819042188
domContentLoaded16861401218821819042188
domInteractive1468129064206290
firstPaint------
backgroundConnect24036993295376993
firstReactRender493197175397
getState18212026338220263
initialActions1911473525147
loadScripts16231368204717917642047
setupStore3051223255122
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: -15 Bytes (0%)
  • common: 7 Bytes (0%)

@smgv smgv requested a review from a team as a code owner October 27, 2025 07:55
@github-actions github-actions bot added size-S and removed size-XS labels Oct 27, 2025
@metamaskbot
Copy link
Collaborator

📊 Page Load Benchmark Results

Current Commit: f5b93d6 | Date: 10/27/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.03s (±36ms) 🟡 | historical mean value: 1.06s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 721ms (±35ms) 🟢 | historical mean value: 743ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 77ms (±11ms) 🟢 | historical mean value: 78ms ⬇️ (historical data)
📈 Detailed Results
Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.03s 36ms 1.01s 1.30s 1.06s 1.30s
domContentLoaded 721ms 35ms 696ms 980ms 745ms 980ms
firstPaint 77ms 11ms 56ms 168ms 88ms 168ms
firstContentfulPaint 77ms 11ms 56ms 168ms 88ms 168ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms

Results generated automatically by MetaMask CI

@metamaskbot
Copy link
Collaborator

Builds ready [f5b93d6]
UI Startup Metrics (1263 ± 85 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1263111815318513101428
load108191913608311291234
domContentLoaded107491513538311191226
domInteractive191462101850
firstPaint62874135844110911215
backgroundConnect23221935013235243
firstReactRender26166582941
getState1985582335
initialActions61769717
loadScripts8496961125838951008
setupStore1063951021
BrowserifyPower User HomeuiStartup22941895399262930363992
load1179954200433515712004
domContentLoaded1171947199533215631995
domInteractive281567184567
firstPaint726193167643010201676
backgroundConnect274226651101254651
firstReactRender26233632636
getState19015521420205214
initialActions12346141246
loadScripts924723165030013171650
setupStore1573182531
WebpackStandard HomeuiStartup782670102663806905
load57653383859586737
domContentLoaded56852883159579727
domInteractive15116271333
firstPaint19753736192164672
backgroundConnect23124972736
firstReactRender25165473032
getState1162331315
initialActions3014246
loadScripts56552682457577719
setupStore1042431114
WebpackPower User HomeuiStartup16401402213827120452138
load652575938104741938
domContentLoaded61855878369707783
domInteractive201243103043
firstPaint43764826283744826
backgroundConnect10225323105248323
firstReactRender24212822528
getState1601421688167168
initialActions10138142938
loadScripts61555677567699775
setupStore20654153054
FirefoxBrowserifyStandard HomeuiStartup14851295199611415411709
load1259111215158113041429
domContentLoaded1259111215158213031429
domInteractive1233638063127276
firstPaint------
backgroundConnect4226112155170
firstReactRender27215672647
getState948413744
initialActions5118018310
loadScripts1234109514317812811385
setupStore1365671335
BrowserifyPower User HomeuiStartup27812226362849932123628
load14211173188821315061888
domContentLoaded14211173188721315061887
domInteractive1474129167223291
firstPaint------
backgroundConnect25240929290378929
firstReactRender442983155283
getState14810225042176250
initialActions814210942
loadScripts13411132161214214621612
setupStore33677214977
WebpackStandard HomeuiStartup16251410213314916641976
load13851192187211714391569
domContentLoaded13851192187211714391569
domInteractive1133240978109379
firstPaint------
backgroundConnect47241202053101
firstReactRender28227482940
getState9417417814
initialActions516610326
loadScripts13561174185211614121539
setupStore13668111245
WebpackPower User HomeuiStartup29352483356036833193560
load16511401193415418081934
domContentLoaded16501401193415318071934
domInteractive1488237475203374
firstPaint------
backgroundConnect22255610176301610
firstReactRender413171115071
getState1368521534153215
initialActions81308830
loadScripts15921360186514917571865
setupStore34983245583
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: -15 Bytes (0%)
  • common: 7 Bytes (0%)

@LeVinhGithub LeVinhGithub added QA Passed and removed needs-qa Label will automate into QA workspace labels Oct 27, 2025
Copy link
Contributor

@LeVinhGithub LeVinhGithub left a comment

Choose a reason for hiding this comment

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

lgtm QA

@chaitanyapotti chaitanyapotti added this pull request to the merge queue Oct 27, 2025
Any commits made after this event will not be merged.
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 27, 2025
@smgv smgv added this pull request to the merge queue Oct 28, 2025
Any commits made after this event will not be merged.
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 28, 2025
@smgv smgv enabled auto-merge October 28, 2025 06:35
@metamaskbot
Copy link
Collaborator

📊 Page Load Benchmark Results

Current Commit: 674292c | Date: 10/28/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.04s (±45ms) 🟡 | historical mean value: 1.04s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 726ms (±43ms) 🟢 | historical mean value: 728ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 77ms (±12ms) 🟢 | historical mean value: 80ms ⬇️ (historical data)
📈 Detailed Results
Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.04s 45ms 1.02s 1.38s 1.07s 1.38s
domContentLoaded 726ms 43ms 704ms 1.04s 750ms 1.04s
firstPaint 77ms 12ms 60ms 180ms 88ms 180ms
firstContentfulPaint 77ms 12ms 60ms 180ms 88ms 180ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms

Results generated automatically by MetaMask CI

@metamaskbot
Copy link
Collaborator

Builds ready [674292c]
UI Startup Metrics (1278 ± 91 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1278111414869113391434
load109893913038711541255
domContentLoaded109293412988611471246
domInteractive19145991941
firstPaint73174130344711341224
backgroundConnect2332162608238244
firstReactRender27195573040
getState1985782236
initialActions61608618
loadScripts8667181073869271030
setupStore1073141016
BrowserifyPower User HomeuiStartup22881814414668629064146
load1177942215836715452158
domContentLoaded1168936212636115402126
domInteractive291578194478
firstPaint869164216653610282166
backgroundConnect25322640842257408
firstReactRender25242812628
getState19318222311199223
initialActions62286528
loadScripts925709174233013001742
setupStore1292961129
WebpackStandard HomeuiStartup8797401193828931103
load66359196774674877
domContentLoaded65558495673669858
domInteractive171164101445
firstPaint20660921208179743
backgroundConnect24134172938
firstReactRender27177293335
getState1272531417
initialActions41153512
loadScripts65258294671667847
setupStore1053541216
WebpackPower User HomeuiStartup17631511248230921192482
load72862910541368451054
domContentLoaded705617979122802979
domInteractive221351113451
firstPaint46269987341806987
backgroundConnect12613454152350454
firstReactRender25233132631
getState17512020217181202
initialActions8174181174
loadScripts700615968118792968
setupStore14640102240
FirefoxBrowserifyStandard HomeuiStartup1484125719019115421623
load1271108314397613221407
domContentLoaded1271108314387613221406
domInteractive1163723841134213
firstPaint------
backgroundConnect4224133184776
firstReactRender24214542532
getState74243813
initialActions611922136
loadScripts1244106714147512951378
setupStore1366281229
BrowserifyPower User HomeuiStartup28932469371044034143710
load14421292166810215271668
domContentLoaded14411291166810215271668
domInteractive19411439869225398
firstPaint------
backgroundConnect23545594170434594
firstReactRender45301081953108
getState1698824543216245
initialActions1821273312127
loadScripts13801221159310014481593
setupStore4491384152138
WebpackStandard HomeuiStartup15951397229313916261916
load1362118216998713941539
domContentLoaded1362118216998713941539
domInteractive1133139571111374
firstPaint------
backgroundConnect47201402454105
firstReactRender28227282740
getState83557721
initialActions5113315319
loadScripts1331116616028013651509
setupStore146109151230
WebpackPower User HomeuiStartup30452551409752637924097
load16481415206618118062066
domContentLoaded16481415206618118052066
domInteractive1548229455211294
firstPaint------
backgroundConnect23841665223456665
firstReactRender46336595265
getState1657927953207279
initialActions9239101039
loadScripts15911375196316717331963
setupStore3851784665178
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: -15 Bytes (0%)
  • common: 7 Bytes (0%)

@smgv smgv added this pull request to the merge queue Oct 28, 2025
Any commits made after this event will not be merged.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants