Skip to content

Conversation

@david0xd
Copy link
Contributor

@david0xd david0xd commented Aug 29, 2025

Description

This PR adds SRP reveal/backup item to the Multichain Account List page.

Notes:

  • Reveal SRP process and JSX template is extracted into a new component to reduce code duplication.
  • Some minor refactoring is done to Wallet Details and Account Details pages to improve maintainability.
  • Some minor UI adjustments are done in order to match the design specification from Figma.

Open in GitHub Codespaces

Changelog

CHANGELOG entry: Added SRP backup process to Multichain Account Details

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MUL-701

Manual testing steps

  1. Build extension with multichain accounts state 2 feature flag enabled.
  2. Open extension > account list > account details.
  3. Check that account details contains SRP backup row.
  4. Use SRP backup process by clicking on the SRP backup row and test.
  5. Check the same process on wallet details.
  6. Check the same process for new fresh wallet (single wallet) for which backup of SRP is skipped on creation. Make sure that backup text is red and the process links to the SRP backup page instead to a modal.

Screenshots/Recordings

Before

SRP reveal/backup was not available on the account details page before, so nothing important to show here. Please have a look at the "After" section and confirm that everything is as expected and by design.

After

Screen.Recording.2025-09-01.at.17.24.38.mov
Screen.Recording.2025-09-01.at.17.33.08.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.

@david0xd david0xd self-assigned this Aug 29, 2025
@david0xd david0xd added the team-accounts-framework Accounts Framework team label Aug 29, 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 Aug 29, 2025

✨ Files requiring CODEOWNER review ✨

🔑 @MetaMask/accounts-engineers (12 files, +337 -99)
  • 📁 ui/
    • 📁 components/
      • 📁 multichain-accounts/
        • 📁 account-details-row/
          • 📄 account-details-row.tsx +1 -1
          • 📄 index.scss +1 -0
        • 📁 multichain-srp-backup/
          • 📄 index.scss +5 -0
          • 📄 index.ts +1 -0
          • 📄 multichain-srp-backup.stories.tsx +71 -0
          • 📄 multichain-srp-backup.test.tsx +110 -0
          • 📄 multichain-srp-backup.tsx +97 -0
          • 📄 multichain-accounts.scss +1 -0
    • 📁 pages/
      • 📁 multichain-accounts/
        • 📁 multichain-account-details-page/
          • 📄 index.scss +8 -1
          • 📄 multichain-account-details-page.test.tsx +1 -2
          • 📄 multichain-account-details-page.tsx +34 -29
        • 📁 wallet-details-page/
          • 📄 wallet-details-page.tsx +7 -66

@metamaskbot
Copy link
Collaborator

📊 Page Load Benchmark Results

Current Commit: a83ebd3 | Date: 8/29/2025

📄 https://metamask.github.io/test-dapp/

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.31s (±102ms) 🟡 | historical mean value: 1.30s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 981ms (±67ms) 🟢 | historical mean value: 979ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 89ms (±27ms) 🟢 | historical mean value: 90ms ⬇️ (historical data)
📈 Detailed Results
Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.31s 102ms 1.26s 2.04s 1.43s 2.04s
domContentLoaded 981ms 67ms 942ms 1.42s 1.07s 1.42s
firstPaint 89ms 27ms 72ms 232ms 148ms 232ms
firstContentfulPaint 89ms 27ms 72ms 232ms 148ms 232ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms

Results generated automatically by MetaMask CI

@david0xd david0xd force-pushed the dd/add-srp-backup-account-details branch 2 times, most recently from f4857c3 to 444474a Compare September 1, 2025 15:26
@metamaskbot
Copy link
Collaborator

📊 Page Load Benchmark Results

Current Commit: 5f0f215 | Date: 9/1/2025

📄 https://metamask.github.io/test-dapp/

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.28s (±130ms) 🟡 | historical mean value: 1.30s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 969ms (±105ms) 🟢 | historical mean value: 983ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 90ms (±47ms) 🟢 | historical mean value: 93ms ⬇️ (historical data)
📈 Detailed Results
Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.28s 130ms 1.24s 2.39s 1.32s 2.39s
domContentLoaded 969ms 105ms 931ms 1.78s 1.01s 1.78s
firstPaint 90ms 47ms 68ms 440ms 124ms 440ms
firstContentfulPaint 90ms 47ms 68ms 440ms 124ms 440ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms

Results generated automatically by MetaMask CI

@metamaskbot
Copy link
Collaborator

Builds ready [500de51]
UI Startup Metrics (1210 ± 71 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1210109614397112321373
load105194212957010821208
domContentLoaded104593612887010751200
domInteractive17135271738
firstPaint70973129642910541206
backgroundConnect2362242506240245
firstReactRender22164652335
getState1357891527
initialActions40203612
loadScripts815707105970842977
setupStore962531014
WebpackHomeuiStartup20081468261326522112461
load16091192203619717361896
domContentLoaded15951183202019417241871
domInteractive181292171475
firstPaint1726954169207310
backgroundConnect46153426734330
firstReactRender99383407889308
getState4043208415286
initialActions8227727711
loadScripts15911172201019317211865
setupStore1263341421
FirefoxBrowserifyHomeuiStartup13881178187511614371646
load1203103414968112581347
domContentLoaded1203103414968112581347
domInteractive1103234152110235
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect3919197283992
firstReactRender27215242935
getState7220320613
initialActions3143438
loadScripts1173101613317412311307
setupStore1047511827
WebpackHomeuiStartup15351360198214216111864
load13211158165512013971600
domContentLoaded13201158165412013971599
domInteractive1053143661100280
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect29204863538
firstReactRender41356644349
getState731351369
initialActions5113814315
loadScripts12991137163112113781574
setupStore95869816
Benchmark value 237 exceeds gate value 10 for chrome browserify home mean backgroundConnect
Benchmark value 5 exceeds gate value 1 for chrome browserify home mean initialActions
Benchmark value 1373 exceeds gate value 1365 for chrome browserify home p95 uiStartup
Benchmark value 1208 exceeds gate value 1190 for chrome browserify home p95 load
Benchmark value 1201 exceeds gate value 1180 for chrome browserify home p95 domContentLoaded
Benchmark value 1207 exceeds gate value 1180 for chrome browserify home p95 firstPaint
Benchmark value 245 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 12 exceeds gate value 1.2 for chrome browserify home p95 initialActions
Benchmark value 977 exceeds gate value 940 for chrome browserify home p95 loadScripts
Benchmark value 47 exceeds gate value 40 for chrome webpack home mean backgroundConnect
Benchmark value 40 exceeds gate value 29 for chrome webpack home mean getState
Benchmark value 9 exceeds gate value 7 for chrome webpack home mean initialActions
Benchmark value 2461 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 76 exceeds gate value 57 for chrome webpack home p95 domInteractive
Benchmark value 331 exceeds gate value 90 for chrome webpack home p95 backgroundConnect
Benchmark value 286 exceeds gate value 195 for chrome webpack home p95 getState
Benchmark value 11 exceeds gate value 7 for chrome webpack home p95 initialActions
Benchmark value 111 exceeds gate value 110 for firefox browserify home mean domInteractive
Benchmark value 40 exceeds gate value 25 for firefox browserify home mean backgroundConnect
Benchmark value 28 exceeds gate value 25 for firefox browserify home mean firstReactRender
Benchmark value 4 exceeds gate value 1 for firefox browserify home mean initialActions
Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore
Benchmark value 235 exceeds gate value 195 for firefox browserify home p95 domInteractive
Benchmark value 92 exceeds gate value 70 for firefox browserify home p95 backgroundConnect
Benchmark value 8 exceeds gate value 2 for firefox browserify home p95 initialActions
Benchmark value 106 exceeds gate value 100 for firefox webpack home mean domInteractive
Benchmark value 30 exceeds gate value 26 for firefox webpack home mean backgroundConnect
Benchmark value 42 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 5 exceeds gate value 1 for firefox webpack home mean initialActions
Benchmark value 280 exceeds gate value 156 for firefox webpack home p95 domInteractive
Benchmark value 15 exceeds gate value 2 for firefox webpack home p95 initialActions
Sum of mean exceeds: 292ms | Sum of p95 exceeds: 915.8ms
Sum of all benchmark exceeds: 1207.8ms

Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 43 Bytes (0%)
  • ui: 2.82 KiB (0.04%)
  • common: 10 Bytes (0%)

@metamaskbot
Copy link
Collaborator

📊 Page Load Benchmark Results

Current Commit: fec58d3 | Date: 9/1/2025

📄 https://metamask.github.io/test-dapp/

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.30s (±138ms) 🟡 | historical mean value: 1.30s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 981ms (±108ms) 🟢 | historical mean value: 981ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 93ms (±46ms) 🟢 | historical mean value: 92ms ⬆️ (historical data)
📈 Detailed Results
Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.30s 138ms 1.25s 2.35s 1.51s 2.35s
domContentLoaded 981ms 108ms 936ms 1.61s 1.18s 1.61s
firstPaint 93ms 46ms 68ms 324ms 236ms 324ms
firstContentfulPaint 93ms 46ms 68ms 324ms 236ms 324ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms

Results generated automatically by MetaMask CI

@metamaskbot
Copy link
Collaborator

Builds ready [73d8ee8]
UI Startup Metrics (1242 ± 68 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1242109213926812851360
load107994712406511201191
domContentLoaded107294312306511111184
domInteractive18144571740
firstPaint63873123443910751184
backgroundConnect2392272616243250
firstReactRender23175062440
getState1354471626
initialActions60749615
loadScripts84071599365876948
setupStore963131013
WebpackHomeuiStartup20121521255926921932459
load16201248194019617591882
domContentLoaded16111237192919417481870
domInteractive161194121442
firstPaint1656150469202282
backgroundConnect291685123054
firstReactRender96383317291304
getState3543127615273
initialActions9217224720
loadScripts16071234191719317421857
setupStore186288371524
FirefoxBrowserifyHomeuiStartup13471175174510914111546
load1169101414168112301304
domContentLoaded1169101414168112291303
domInteractive1143342563118280
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect321993113657
firstReactRender26225252836
getState828012625
initialActions416910311
loadScripts114599713918012071274
setupStore1048911828
WebpackHomeuiStartup15531387190013116651846
load13361186164411714241570
domContentLoaded13361186164211714241570
domInteractive1053130454106277
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect30195373643
firstReactRender43355444549
getState63172611
initialActions401091137
loadScripts13131168161911814051551
setupStore85203917
Benchmark value 1243 exceeds gate value 1234 for chrome browserify home mean uiStartup
Benchmark value 1080 exceeds gate value 1070 for chrome browserify home mean load
Benchmark value 1072 exceeds gate value 1061 for chrome browserify home mean domContentLoaded
Benchmark value 239 exceeds gate value 10 for chrome browserify home mean backgroundConnect
Benchmark value 24 exceeds gate value 23 for chrome browserify home mean firstReactRender
Benchmark value 6 exceeds gate value 1 for chrome browserify home mean initialActions
Benchmark value 840 exceeds gate value 830 for chrome browserify home mean loadScripts
Benchmark value 1192 exceeds gate value 1190 for chrome browserify home p95 load
Benchmark value 1184 exceeds gate value 1180 for chrome browserify home p95 domContentLoaded
Benchmark value 1185 exceeds gate value 1180 for chrome browserify home p95 firstPaint
Benchmark value 250 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 15 exceeds gate value 1.2 for chrome browserify home p95 initialActions
Benchmark value 948 exceeds gate value 940 for chrome browserify home p95 loadScripts
Benchmark value 36 exceeds gate value 29 for chrome webpack home mean getState
Benchmark value 10 exceeds gate value 7 for chrome webpack home mean initialActions
Benchmark value 2460 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 273 exceeds gate value 195 for chrome webpack home p95 getState
Benchmark value 20 exceeds gate value 7 for chrome webpack home p95 initialActions
Benchmark value 114 exceeds gate value 110 for firefox browserify home mean domInteractive
Benchmark value 32 exceeds gate value 25 for firefox browserify home mean backgroundConnect
Benchmark value 27 exceeds gate value 25 for firefox browserify home mean firstReactRender
Benchmark value 5 exceeds gate value 1 for firefox browserify home mean initialActions
Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore
Benchmark value 280 exceeds gate value 195 for firefox browserify home p95 domInteractive
Benchmark value 25 exceeds gate value 24 for firefox browserify home p95 getState
Benchmark value 11 exceeds gate value 2 for firefox browserify home p95 initialActions
Benchmark value 28 exceeds gate value 27 for firefox browserify home p95 setupStore
Benchmark value 106 exceeds gate value 100 for firefox webpack home mean domInteractive
Benchmark value 31 exceeds gate value 26 for firefox webpack home mean backgroundConnect
Benchmark value 43 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 4 exceeds gate value 1 for firefox webpack home mean initialActions
Benchmark value 277 exceeds gate value 156 for firefox webpack home p95 domInteractive
Benchmark value 7 exceeds gate value 2 for firefox webpack home p95 initialActions
Sum of mean exceeds: 322ms | Sum of p95 exceeds: 583.8ms
Sum of all benchmark exceeds: 905.8ms

Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 43 Bytes (0%)
  • ui: 3.06 KiB (0.04%)
  • common: 10 Bytes (0%)

@david0xd david0xd marked this pull request as ready for review September 1, 2025 17:38
@david0xd david0xd requested a review from a team as a code owner September 1, 2025 17:38
cursor[bot]

This comment was marked as outdated.

Copy link
Member

@gantunesr gantunesr left a comment

Choose a reason for hiding this comment

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

Looks good, left two minor comments. One is about a text color that @eriknson mentioned last week

@david0xd david0xd force-pushed the dd/add-srp-backup-account-details branch from 181d374 to badb9fc Compare September 1, 2025 18:35
@gantunesr
Copy link
Member

Looks good but still pending confirmation of #35518 (comment)

@metamaskbot
Copy link
Collaborator

📊 Page Load Benchmark Results

Current Commit: 57c8095 | Date: 9/1/2025

📄 https://metamask.github.io/test-dapp/

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.29s (±58ms) 🟡 | historical mean value: 1.30s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 974ms (±50ms) 🟢 | historical mean value: 981ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 88ms (±20ms) 🟢 | historical mean value: 92ms ⬇️ (historical data)
📈 Detailed Results
Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.29s 58ms 1.25s 1.80s 1.34s 1.80s
domContentLoaded 974ms 50ms 941ms 1.43s 1.02s 1.43s
firstPaint 88ms 20ms 72ms 192ms 140ms 192ms
firstContentfulPaint 88ms 20ms 72ms 192ms 140ms 192ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms

Results generated automatically by MetaMask CI

@metamaskbot
Copy link
Collaborator

Builds ready [badb9fc]
UI Startup Metrics (1182 ± 54 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1182106813685412121286
load103092812065710651139
domContentLoaded102392011965710531128
domInteractive17134571637
firstPaint64779112941010301076
backgroundConnect2352222597238249
firstReactRender22154352333
getState1253261423
initialActions41677511
loadScripts79568296758823905
setupStore952031015
WebpackHomeuiStartup19221475256026720972376
load15621189200020117121844
domContentLoaded15521178197820017021820
domInteractive161174101441
firstPaint1628037149187253
backgroundConnect28186782949
firstReactRender86373215981274
getState3043176913274
initialActions5224369
loadScripts15481175196719916991808
setupStore146262251326
FirefoxBrowserifyHomeuiStartup13641168183212414231599
load1184102714599012371360
domContentLoaded1183102614599012361360
domInteractive1083431347110217
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect3218106153467
firstReactRender26225142832
getState738810615
initialActions41517312
loadScripts1160100514068612111338
setupStore1047412829
WebpackHomeuiStartup15491356190014516481834
load13281161168212614221570
domContentLoaded13281161168112614211570
domInteractive110343096499296
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect31225263641
firstReactRender42346954450
getState63132610
initialActions511041338
loadScripts13051134166312714011546
setupStore95677919
Benchmark value 235 exceeds gate value 10 for chrome browserify home mean backgroundConnect
Benchmark value 5 exceeds gate value 1 for chrome browserify home mean initialActions
Benchmark value 250 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 11 exceeds gate value 1.2 for chrome browserify home p95 initialActions
Benchmark value 30 exceeds gate value 29 for chrome webpack home mean getState
Benchmark value 274 exceeds gate value 195 for chrome webpack home p95 getState
Benchmark value 9 exceeds gate value 7 for chrome webpack home p95 initialActions
Benchmark value 32 exceeds gate value 25 for firefox browserify home mean backgroundConnect
Benchmark value 27 exceeds gate value 25 for firefox browserify home mean firstReactRender
Benchmark value 4 exceeds gate value 1 for firefox browserify home mean initialActions
Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore
Benchmark value 217 exceeds gate value 195 for firefox browserify home p95 domInteractive
Benchmark value 12 exceeds gate value 2 for firefox browserify home p95 initialActions
Benchmark value 29 exceeds gate value 27 for firefox browserify home p95 setupStore
Benchmark value 111 exceeds gate value 100 for firefox webpack home mean domInteractive
Benchmark value 32 exceeds gate value 26 for firefox webpack home mean backgroundConnect
Benchmark value 42 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 5 exceeds gate value 1 for firefox webpack home mean initialActions
Benchmark value 296 exceeds gate value 156 for firefox webpack home p95 domInteractive
Benchmark value 8 exceeds gate value 2 for firefox webpack home p95 initialActions
Sum of mean exceeds: 268ms | Sum of p95 exceeds: 502.8ms
Sum of all benchmark exceeds: 770.8ms

Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 43 Bytes (0%)
  • ui: 2.76 KiB (0.04%)
  • common: 10 Bytes (0%)

@david0xd david0xd added this pull request to the merge queue Sep 2, 2025
Merged via the queue into main with commit 469e570 Sep 2, 2025
145 checks passed
@david0xd david0xd deleted the dd/add-srp-backup-account-details branch September 2, 2025 09:24
@github-actions github-actions bot locked and limited conversation to collaborators Sep 2, 2025
@metamaskbot metamaskbot added the release-13.4.0 Issue or pull request that will be included in release 13.4.0 label Sep 2, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-13.4.0 Issue or pull request that will be included in release 13.4.0 size-M team-accounts-framework Accounts Framework team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants