feat: Add full screen Snap Home and Dialog #25670

david0xd · 2024-07-03T23:31:54Z

Description

This PR adds redesigned UI and new UX to the Snap home page and Snap dialog. Snap Authorship header is also updated and its new UX/UI reflected across the related pages.

Related issues

Fixes: #25068

Manual testing steps

Try installing or updating a Snap, check the new authorship header UI and functionality.
Try account Snap features and verify the new header.
Try Snap-related permission requests and verify the new header.
Install a Snap with Home permission and verify the UI/UX (new header, menu, removed delineator, etc.)
Verify new menu and header functionality on Snap home.
Verify new UX/UI on Snap dialog.

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-07-03T23:32:05Z

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.

GuillaumeRx · 2024-07-05T13:06:07Z

The info icon on the header seems to be the wrong color

GuillaumeRx · 2024-07-05T13:09:15Z

Shouldn't we always keep the fade at the bottom. It seems to create a "jump" when it's removed

ui/pages/confirmations/confirmation/confirmation.js

ui/components/app/snaps/snap-home-menu/snap-home-menu.js

david0xd · 2024-07-05T14:55:15Z

Shouldn't we always keep the fade at the bottom. It seems to create a "jump" when it's removed

If this refers to the bottom fade behind the scroll arrow, this is done in the separate PR that is waiting to be merged (still in review, needs some refactoring).

metamaskbot · 2024-07-10T23:28:38Z

Builds ready [369a1ff]

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, 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 (392 ± 367 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	66	270	124	51	25
		domContentLoaded	10	57	31	15	7
		load	40	2577	392	765	367
		domInteractive	10	57	31	15	7

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 5.93 KiB (0.08%)
common: 70 Bytes (0.00%)

codecov · 2024-07-10T23:28:43Z

Codecov Report

Attention: Patch coverage is 16.66667% with 10 lines in your changes missing coverage. Please review.

Project coverage is 69.74%. Comparing base (3c100bc) to head (1084cc0).
Report is 2 commits behind head on develop.

Files	Patch %	Lines
...i/pages/confirmations/confirmation/confirmation.js	0.00%	5 Missing ⚠️
...rmissions-connect/permissions-connect.component.js	0.00%	4 Missing ⚠️
ui/pages/routes/routes.component.js	66.67%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #25670      +/-   ##
===========================================
- Coverage    69.75%   69.74%   -0.01%     
===========================================
  Files         1400     1400              
  Lines        49419    49428       +9     
  Branches     13668    13673       +5     
===========================================
+ Hits         34470    34472       +2     
- Misses       14949    14956       +7

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

metamaskbot · 2024-07-11T13:53:09Z

Builds ready [0073e3f]

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, 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 (242 ± 238 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	80	135	103	13	6
		domContentLoaded	10	66	27	13	6
		load	46	1807	242	495	238
		domInteractive	10	66	26	13	6

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 5.93 KiB (0.08%)
common: 70 Bytes (0.00%)

ui/pages/confirmations/confirmation/templates/create-snap-account.js

metamaskbot · 2024-07-16T22:17:29Z

Builds ready [1ba09e8]

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, 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 (65 ± 9 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	68	130	95	18	9
		domContentLoaded	9	56	24	14	7
		load	41	101	65	19	9
		domInteractive	9	56	24	14	7

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 6.19 KiB (0.08%)
common: 70 Bytes (0.00%)

metamaskbot · 2024-07-17T14:22:50Z

Builds ready [d1d76a2]

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, 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 (416 ± 314 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	83	293	130	46	22
		domContentLoaded	9	83	37	19	9
		load	56	1798	416	654	314
		domInteractive	9	83	37	19	9

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 6.19 KiB (0.08%)
common: 70 Bytes (0.00%)

hmalik88

LGTM

Remove duplicate header and fix lint

This reverts commit 57ead65.

sonarqubecloud · 2024-07-18T10:09:00Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

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

See analysis details on SonarCloud

metamaskbot · 2024-07-18T10:46:08Z

Builds ready [1084cc0]

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, 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 (147 ± 169 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	67	134	94	19	9
		domContentLoaded	10	52	25	13	6
		load	43	1677	147	352	169
		domInteractive	10	52	25	13	6

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 5.93 KiB (0.08%)
common: 70 Bytes (0.00%)

matthewwalsh0 · 2024-07-18T11:32:52Z

ui/pages/confirmations/confirmation/confirmation.js

+            onCancel={
+              templatedValues.onCancel ||
+              // /!\ Treat cancel as submit only if approval type is appropriate /!\
+              (pendingConfirmation?.type === ApprovalType.SnapDialogAlert


Rather than adding further coupling to specific types in this generic component, could we instead just specify a suitable onReject in the relevant templates such as ui/pages/confirmations/confirmation/templates/snaps/snap-alert/snap-alert.js?

The problem with this is when onCancel is added to the snap-alert.js, the confirmation popup renders an extra button. Alert needs to have only one button by design. We just want to have the possibility to close popup from header everywhere (in all Snaps dialogs) and this case was somehow exception because there is no reason to have two buttons on alert screen.

Do you see quick fix for this maybe?

Might be too much extra scope for now, but we could add a hideCancelButton property to the template to match hideSubmitButton so you could still define an onCancel but explicitly hide the button so it's only used for this header exit behaviour.

matthewwalsh0 · 2024-07-18T13:07:37Z

ui/pages/confirmations/confirmation/confirmation.js

+            onCancel={
+              templatedValues.onCancel ||
+              // /!\ Treat cancel as submit only if approval type is appropriate /!\
+              (pendingConfirmation?.type === ApprovalType.SnapDialogAlert


Might be too much extra scope for now, but we could add a hideCancelButton property to the template to match hideSubmitButton so you could still define an onCancel but explicitly hide the button so it's only used for this header exit behaviour.

david0xd added the team-snaps-platform Snaps Platform team label Jul 3, 2024

david0xd self-assigned this Jul 3, 2024

david0xd force-pushed the dd/full-screen-snap-home branch 4 times, most recently from 117bcd1 to 7bd3b9a Compare July 5, 2024 10:51

GuillaumeRx reviewed Jul 5, 2024

View reviewed changes

ui/pages/confirmations/confirmation/confirmation.js Show resolved Hide resolved

GuillaumeRx reviewed Jul 5, 2024

View reviewed changes

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

GuillaumeRx reviewed Jul 5, 2024

View reviewed changes

ui/components/app/snaps/snap-home-menu/snap-home-menu.js Show resolved Hide resolved

david0xd force-pushed the dd/full-screen-snap-home branch 4 times, most recently from ba61c9c to 6cbd3d7 Compare July 9, 2024 20:06

david0xd force-pushed the dd/full-screen-snap-home branch from 369a1ff to 0073e3f Compare July 11, 2024 10:36

david0xd marked this pull request as ready for review July 11, 2024 13:53

david0xd requested review from a team as code owners July 11, 2024 13:53

GuillaumeRx reviewed Jul 16, 2024

View reviewed changes

ui/pages/confirmations/confirmation/templates/create-snap-account.js Show resolved Hide resolved

GuillaumeRx previously approved these changes Jul 17, 2024

View reviewed changes

david0xd force-pushed the dd/full-screen-snap-home branch from 1ba09e8 to d1d76a2 Compare July 17, 2024 12:50

hmalik88 previously approved these changes Jul 17, 2024

View reviewed changes

david0xd requested a review from jpuri July 18, 2024 09:53

david0xd dismissed stale reviews from hmalik88 and GuillaumeRx via 8b31e04 July 18, 2024 10:06

david0xd and others added 15 commits July 18, 2024 12:06

Add full screen Snap Home and Dialog

e158d55

Remove duplicate header and fix lint

Add cancel button in header on custom Snap pages

3f1b762

Add cancel in Snap header for accounts flow

f272d3b

Fix unit tests

c7a5f2e

Fix code fencing in import

b368a24

Fix lint error in test

3247e46

Fix some minor issues

d2cb7db

Fix unit test snapshots

9bc00ca

Adjust loader position

a1def97

Add flag for delineator and fix e2e test

e8bee6e

fixed snap management test

f596950

Revert "fixed snap management test"

308b5a8

This reverts commit 57ead65.

fixed snap management test

7cab6bc

Refactor header close functionality approach

a7d5c88

Revert reject logic changes

1084cc0

david0xd force-pushed the dd/full-screen-snap-home branch from 8b31e04 to 1084cc0 Compare July 18, 2024 10:06

GuillaumeRx approved these changes Jul 18, 2024

View reviewed changes

hmalik88 approved these changes Jul 18, 2024

View reviewed changes

matthewwalsh0 requested changes Jul 18, 2024

View reviewed changes

matthewwalsh0 approved these changes Jul 18, 2024

View reviewed changes

david0xd merged commit 3da665c into develop Jul 18, 2024
79 checks passed

david0xd deleted the dd/full-screen-snap-home branch July 18, 2024 13:34

github-actions bot locked and limited conversation to collaborators Jul 18, 2024

metamaskbot added the release-12.3.0 Issue or pull request that will be included in release 12.3.0 label Jul 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add full screen Snap Home and Dialog #25670

feat: Add full screen Snap Home and Dialog #25670

david0xd commented Jul 3, 2024 •

edited

Loading

github-actions bot commented Jul 3, 2024

GuillaumeRx commented Jul 5, 2024

GuillaumeRx commented Jul 5, 2024

david0xd commented Jul 5, 2024

metamaskbot commented Jul 10, 2024

codecov bot commented Jul 10, 2024 •

edited

Loading

metamaskbot commented Jul 11, 2024

metamaskbot commented Jul 16, 2024

metamaskbot commented Jul 17, 2024

hmalik88 left a comment

sonarqubecloud bot commented Jul 18, 2024

metamaskbot commented Jul 18, 2024

matthewwalsh0 Jul 18, 2024 •

edited

Loading

david0xd Jul 18, 2024

matthewwalsh0 Jul 18, 2024 •

edited

Loading

matthewwalsh0 Jul 18, 2024 •

edited

Loading

feat: Add full screen Snap Home and Dialog #25670

feat: Add full screen Snap Home and Dialog #25670

Conversation

david0xd commented Jul 3, 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 Jul 3, 2024

GuillaumeRx commented Jul 5, 2024

GuillaumeRx commented Jul 5, 2024

david0xd commented Jul 5, 2024

metamaskbot commented Jul 10, 2024

codecov bot commented Jul 10, 2024 • edited Loading

Codecov Report

metamaskbot commented Jul 11, 2024

metamaskbot commented Jul 16, 2024

metamaskbot commented Jul 17, 2024

hmalik88 left a comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Jul 18, 2024

Quality Gate passed

metamaskbot commented Jul 18, 2024

matthewwalsh0 Jul 18, 2024 • edited Loading

Choose a reason for hiding this comment

david0xd Jul 18, 2024

Choose a reason for hiding this comment

matthewwalsh0 Jul 18, 2024 • edited Loading

Choose a reason for hiding this comment

matthewwalsh0 Jul 18, 2024 • edited Loading

Choose a reason for hiding this comment

david0xd commented Jul 3, 2024 •

edited

Loading

codecov bot commented Jul 10, 2024 •

edited

Loading

matthewwalsh0 Jul 18, 2024 •

edited

Loading

matthewwalsh0 Jul 18, 2024 •

edited

Loading

matthewwalsh0 Jul 18, 2024 •

edited

Loading