feat: Add updates to Snaps custom UI #26639

david0xd · 2024-08-23T14:31:34Z

Description

This PR adds changes to update Snaps Custom UI. Affected areas are: Snaps Home, Snap Custom Dialog, Snap components.

Related issues

Fixes: #26436

Manual testing steps

Go to test Snaps.
Install Snaps with custom UI and Snap home.
Check the new UI styling applied.

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

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.

github-actions · 2024-08-23T14:31:53Z

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 · 2024-08-26T11:01:35Z

Builds ready [e9e96d2]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (79 ± 12 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	68	233	110	37	18
		domContentLoaded	39	153	73	28	13
		load	46	153	79	26	12
		domInteractive	9	65	29	13	6

Bundle size diffs

background: 0 Bytes (0.00%)
ui: -2.69 KiB (-0.04%)
common: 0 Bytes (0.00%)

codecov · 2024-08-26T11:01:47Z

Codecov Report

Attention: Patch coverage is 60.00000% with 2 lines in your changes missing coverage. Please review.

Project coverage is 70.17%. Comparing base (416d024) to head (eaee9c9).
Report is 2 commits behind head on develop.

Files with missing lines	Patch %	Lines
...i/pages/confirmations/confirmation/confirmation.js	50.00%	2 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #26639   +/-   ##
========================================
  Coverage    70.17%   70.17%           
========================================
  Files         1425     1425           
  Lines        49659    49661    +2     
  Branches     13891    13891           
========================================
+ Hits         34846    34848    +2     
  Misses       14813    14813

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

metamaskbot · 2024-08-26T13:44:34Z

Builds ready [d1a3ef2]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (113 ± 36 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	86	384	140	71	34
		domContentLoaded	61	304	106	64	31
		load	61	378	113	76	36
		domInteractive	18	98	41	21	10

Bundle size diffs

background: 0 Bytes (0.00%)
ui: -2.57 KiB (-0.04%)
common: 0 Bytes (0.00%)

metamaskbot · 2024-08-26T16:19:59Z

Builds ready [d0eee3e]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (77 ± 17 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	77	402	112	68	33
		domContentLoaded	47	214	73	36	17
		load	53	223	77	36	17
		domInteractive	10	96	27	17	8

Bundle size diffs

background: 0 Bytes (0.00%)
ui: -2.44 KiB (-0.03%)
common: 0 Bytes (0.00%)

ui/components/app/connected-sites-list/connected-snaps.js

ui/pages/snaps/snap-view/snap-home.js

ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js

ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js

metamaskbot · 2024-08-29T11:37:54Z

Builds ready [bd265cc]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1733 ± 163 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	186	2576	1406	600	288
		domContentLoaded	1462	2788	1708	314	151
		load	1471	2824	1733	339	163
		domInteractive	20	131	36	24	12

Bundle size diffs

background: 0 Bytes (0.00%)
ui: -2.2 KiB (-0.03%)
common: 0 Bytes (0.00%)

ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js

ui/components/app/snaps/snap-ui-renderer/components/container.ts

ui/components/app/snaps/snap-home-page/snap-home-renderer.js

metamaskbot · 2024-09-05T14:18:51Z

Builds ready [80f9939]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1515 ± 35 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1408	1652	1521	73	35
		domContentLoaded	1390	1644	1496	70	33
		load	1398	1653	1515	72	35
		domInteractive	12	141	30	27	13

Bundle size diffs

background: 0 Bytes (0.00%)
ui: -2.38 KiB (-0.03%)
common: 0 Bytes (0.00%)

metamaskbot · 2024-09-09T12:18:17Z

Builds ready [eaee9c9]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1738 ± 117 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	206	2717	1530	584	280
		domContentLoaded	1507	2705	1723	246	118
		load	1554	2715	1738	244	117
		domInteractive	12	88	31	17	8

Bundle size diffs

background: 0 Bytes (0.00%)
ui: -2.32 KiB (-0.03%)
common: 0 Bytes (0.00%)

Update unit test snapshots Fix lint issue Update background and border Update unit test snapshot Update file upload UI Update and fix few more Snap custom UI things Update unit test snapshots after snap header fix Add background color handling adjustments Fix and resolve conflicts after rebase Refactor confirmation.js changes Remove empty box Update unit test snapshots Fix background issue on Snap custom UI page Update unit test snapshots after new changes

sonarqubecloud · 2024-09-10T08:07:03Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

metamaskbot · 2024-09-10T08:38:44Z

Builds ready [864aa8d]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1621 ± 87 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	225	2091	1428	511	245
		domContentLoaded	1371	2067	1610	178	85
		load	1379	2088	1621	181	87
		domInteractive	13	220	39	43	21

Bundle size diffs

background: 0 Bytes (0.00%)
ui: -2.37 KiB (-0.03%)
common: 0 Bytes (0.00%)

david0xd added the team-snaps-platform Snaps Platform team label Aug 23, 2024

david0xd self-assigned this Aug 23, 2024

david0xd force-pushed the dd/facelift-snap-custom-ui branch from 96e71f3 to 0fa8196 Compare August 26, 2024 09:24

david0xd force-pushed the dd/facelift-snap-custom-ui branch from 1512132 to d1a3ef2 Compare August 26, 2024 13:13

david0xd force-pushed the dd/facelift-snap-custom-ui branch from be91a43 to d0eee3e Compare August 26, 2024 15:49

david0xd marked this pull request as ready for review August 26, 2024 15:50

david0xd requested review from a team as code owners August 26, 2024 15:50

FrederikBolding reviewed Aug 28, 2024

View reviewed changes

ui/components/app/connected-sites-list/connected-snaps.js Show resolved Hide resolved

FrederikBolding reviewed Aug 28, 2024

View reviewed changes

ui/pages/snaps/snap-view/snap-home.js Outdated Show resolved Hide resolved

FrederikBolding reviewed Aug 28, 2024

View reviewed changes

ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js Outdated Show resolved Hide resolved

david0xd force-pushed the dd/facelift-snap-custom-ui branch 3 times, most recently from 13d4b3a to bd265cc Compare August 29, 2024 11:04

FrederikBolding reviewed Aug 29, 2024

View reviewed changes

ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js Show resolved Hide resolved

FrederikBolding reviewed Sep 5, 2024

View reviewed changes

ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js Outdated Show resolved Hide resolved

david0xd force-pushed the dd/facelift-snap-custom-ui branch 2 times, most recently from 5d79bcb to 80f9939 Compare September 5, 2024 13:45

FrederikBolding reviewed Sep 5, 2024

View reviewed changes

ui/components/app/snaps/snap-ui-renderer/components/container.ts Outdated Show resolved Hide resolved

FrederikBolding reviewed Sep 5, 2024

View reviewed changes

ui/components/app/snaps/snap-home-page/snap-home-renderer.js Outdated Show resolved Hide resolved

david0xd force-pushed the dd/facelift-snap-custom-ui branch from 982ba4a to eaee9c9 Compare September 9, 2024 11:47

david0xd requested a review from a team as a code owner September 9, 2024 11:47

david0xd added 6 commits September 10, 2024 10:04

Make Snap custom footer sticky at the bottom

4142979

Update copyable background

ddcd122

Update copyable colors

7dd0a21

Remove border around Copyable

9b60429

Fix lint in scss

864aa8d

david0xd force-pushed the dd/facelift-snap-custom-ui branch from 747fec8 to 864aa8d Compare September 10, 2024 08:04

ritave approved these changes Sep 10, 2024

View reviewed changes

GuillaumeRx approved these changes Sep 10, 2024

View reviewed changes

matthewwalsh0 approved these changes Sep 10, 2024

View reviewed changes

darkwing approved these changes Sep 10, 2024

View reviewed changes

david0xd merged commit bbbe511 into develop Sep 10, 2024
77 of 78 checks passed

david0xd deleted the dd/facelift-snap-custom-ui branch September 10, 2024 13:39

github-actions bot locked and limited conversation to collaborators Sep 10, 2024

metamaskbot added the release-12.6.0 Issue or pull request that will be included in release 12.6.0 label Sep 10, 2024

gauthierpetetin added release-12.5.0 Issue or pull request that will be included in release 12.5.0 and removed release-12.6.0 Issue or pull request that will be included in release 12.6.0 labels Sep 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add updates to Snaps custom UI #26639

feat: Add updates to Snaps custom UI #26639

david0xd commented Aug 23, 2024 •

edited

Loading

github-actions bot commented Aug 23, 2024

metamaskbot commented Aug 26, 2024

codecov bot commented Aug 26, 2024 •

edited

Loading

metamaskbot commented Aug 26, 2024

metamaskbot commented Aug 26, 2024

metamaskbot commented Aug 29, 2024

metamaskbot commented Sep 5, 2024

metamaskbot commented Sep 9, 2024

sonarqubecloud bot commented Sep 10, 2024

metamaskbot commented Sep 10, 2024

feat: Add updates to Snaps custom UI #26639

feat: Add updates to Snaps custom UI #26639

Conversation

david0xd commented Aug 23, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Aug 23, 2024

metamaskbot commented Aug 26, 2024

codecov bot commented Aug 26, 2024 • edited Loading

Codecov Report

metamaskbot commented Aug 26, 2024

metamaskbot commented Aug 26, 2024

metamaskbot commented Aug 29, 2024

metamaskbot commented Sep 5, 2024

metamaskbot commented Sep 9, 2024

sonarqubecloud bot commented Sep 10, 2024

Quality Gate passed

metamaskbot commented Sep 10, 2024

david0xd commented Aug 23, 2024 •

edited

Loading

codecov bot commented Aug 26, 2024 •

edited

Loading