feat: Redesign Approve confirmation #26464

pedronfigueiredo · 2024-08-16T10:32:48Z

Description

Implements redesigned confirmation screens for tokenMethodApprove (ERC721 and ERC1155). Includes e2e and integration tests.

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/2936

Manual testing steps

Go to this page...

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-16T10:33:00Z

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-16T16:08:01Z

Builds ready [a78699e]

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

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	76	135	97	16	8
		domContentLoaded	11	63	27	14	7
		load	44	107	70	18	9
		domInteractive	11	63	27	14	7

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

background: 0 Bytes (0.00%)
ui: 4.95 KiB (0.07%)
common: 286 Bytes (0.00%)

codecov · 2024-08-16T16:08:21Z

Codecov Report

Attention: Patch coverage is 74.19355% with 8 lines in your changes missing coverage. Please review.

Project coverage is 69.97%. Comparing base (81af2e8) to head (dc347b2).

Files	Patch %	Lines
...s/confirmations/components/confirm/title/title.tsx	0.00%	4 Missing ⚠️
...m/info/approve/approve-details/approve-details.tsx	80.00%	3 Missing ⚠️
...ges/confirmations/components/confirm/info/info.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #26464   +/-   ##
========================================
  Coverage    69.96%   69.97%           
========================================
  Files         1405     1407    +2     
  Lines        48996    49023   +27     
  Branches     13697    13705    +8     
========================================
+ Hits         34280    34299   +19     
- Misses       14716    14724    +8

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

jpuri · 2024-08-19T06:53:05Z

ui/pages/confirmations/components/confirm/info/shared/approve-details/approve-details.tsx

+      )}
+    </ConfirmInfoSection>
+  );
+};


Will be nice to have some unit test coverage also for info components.

jpuri

Changes look great 👍

metamaskbot · 2024-08-19T09:42:19Z

Builds ready [bf40520]

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

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	71	167	118	27	13
		domContentLoaded	43	115	82	20	10
		load	50	115	85	18	9
		domInteractive	11	58	30	13	6

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

background: 0 Bytes (0.00%)
ui: 4.95 KiB (0.07%)
common: 286 Bytes (0.00%)

metamaskbot · 2024-08-19T10:31:33Z

Builds ready [d342ee5]

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, 6
- 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 (86 ± 11 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	79	185	115	25	12
		domContentLoaded	45	149	83	25	12
		load	52	149	86	23	11
		domInteractive	14	63	30	12	6

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

background: 0 Bytes (0.00%)
ui: 4.95 KiB (0.07%)
common: 286 Bytes (0.00%)

ui/pages/confirmations/components/confirm/info/approve/approve.tsx

ui/pages/confirmations/components/confirm/info/shared/approve-details/approve-details.tsx

...ges/confirmations/components/confirm/info/shared/transaction-details/transaction-details.tsx

test/e2e/tests/confirmations/transactions/erc721-approve-redesign.spec.ts

metamaskbot · 2024-08-19T16:46:07Z

Builds ready [dc347b2]

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 (68 ± 5 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	74	155	96	17	8
		domContentLoaded	49	97	64	13	6
		load	56	97	68	11	5
		domInteractive	10	56	24	9	4

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

background: 0 Bytes (0.00%)
ui: 5.01 KiB (0.07%)
common: 286 Bytes (0.00%)

sonarqubecloud · 2024-08-21T10:44:22Z

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-08-21T11:13:53Z

Builds ready [c3c19fc]

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

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	79	167	109	23	11
		domContentLoaded	45	127	76	20	10
		load	52	128	82	19	9
		domInteractive	11	55	30	12	6

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

background: 0 Bytes (0.00%)
ui: 5.01 KiB (0.07%)
common: 286 Bytes (0.00%)

pedronfigueiredo added the team-confirmations Push issues to confirmations team label Aug 16, 2024

pedronfigueiredo self-assigned this Aug 16, 2024

pedronfigueiredo requested review from a team as code owners August 16, 2024 10:32

pedronfigueiredo force-pushed the pnf/2936 branch 4 times, most recently from a96f39f to a78699e Compare August 16, 2024 15:34

jpuri reviewed Aug 19, 2024

View reviewed changes

pedronfigueiredo force-pushed the pnf/2936 branch from a78699e to 773f9a3 Compare August 19, 2024 08:52

pedronfigueiredo force-pushed the pnf/2936 branch from bf40520 to d342ee5 Compare August 19, 2024 09:57

matthewwalsh0 requested changes Aug 19, 2024

View reviewed changes

pedronfigueiredo requested review from matthewwalsh0 and jpuri August 19, 2024 15:41

pedronfigueiredo force-pushed the pnf/2936 branch from d77dbef to 7e14394 Compare August 19, 2024 15:51

jpuri approved these changes Aug 20, 2024

View reviewed changes

pedronfigueiredo added 7 commits August 21, 2024 11:42

feat: Redesign Approve confirmation

4526197

feat: Redesign Approve confirmation

b8e9c30

wip

079981d

wip

cf13350

address feedback

371db78

fix snapshots

3da6684

fix linting

c3c19fc

pedronfigueiredo force-pushed the pnf/2936 branch from dc347b2 to c3c19fc Compare August 21, 2024 10:42

matthewwalsh0 approved these changes Aug 21, 2024

View reviewed changes

pedronfigueiredo merged commit 72b9e86 into develop Aug 21, 2024
75 of 78 checks passed

pedronfigueiredo deleted the pnf/2936 branch August 21, 2024 13:20

github-actions bot locked and limited conversation to collaborators Aug 21, 2024

metamaskbot added the release-12.5.0 Issue or pull request that will be included in release 12.5.0 label Aug 21, 2024

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Redesign Approve confirmation #26464

feat: Redesign Approve confirmation #26464

pedronfigueiredo commented Aug 16, 2024 •

edited

Loading

github-actions bot commented Aug 16, 2024

metamaskbot commented Aug 16, 2024

codecov bot commented Aug 16, 2024 •

edited

Loading

jpuri Aug 19, 2024

jpuri left a comment

metamaskbot commented Aug 19, 2024

metamaskbot commented Aug 19, 2024

metamaskbot commented Aug 19, 2024

sonarqubecloud bot commented Aug 21, 2024

metamaskbot commented Aug 21, 2024

feat: Redesign Approve confirmation #26464

feat: Redesign Approve confirmation #26464

Conversation

pedronfigueiredo commented Aug 16, 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 16, 2024

metamaskbot commented Aug 16, 2024

codecov bot commented Aug 16, 2024 • edited Loading

Codecov Report

jpuri Aug 19, 2024

Choose a reason for hiding this comment

jpuri left a comment

Choose a reason for hiding this comment

metamaskbot commented Aug 19, 2024

metamaskbot commented Aug 19, 2024

metamaskbot commented Aug 19, 2024

sonarqubecloud bot commented Aug 21, 2024

Quality Gate passed

metamaskbot commented Aug 21, 2024

pedronfigueiredo commented Aug 16, 2024 •

edited

Loading

codecov bot commented Aug 16, 2024 •

edited

Loading