fix: updated edit modals #27623

NidhiKJha · 2024-10-04T12:25:47Z

This PR is to update edit modals followed by design QA

Description

Following changes have been made in this PR:

The update CTA is now fixed/pinned to the bottom
The warning message while clicking on disconnect has been updated:

Simple the copy to This will disconnect you from this site
Increase Icon size from 12px to 16px
Center align warning message with the button

NOTE: Add new accounts will be handled in a separate PR
Including RPC URL is a new change proposed so I will update that in a different PR as well

Related issues

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

Manual testing steps

Run extension with yarn start
Connect to dapp
Click on All Permissions and the go to individual permission page
Click on Edit Accounts Modal and observe the above UI changes

Screenshots/Recordings

Before

Screen.Recording.2024-10-04.at.1.25.19.PM.mov

After

Screen.Recording.2024-10-04.at.1.22.12.PM.mov

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.

metamaskbot · 2024-10-08T13:25:56Z

Builds ready [dad8ffe]

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, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1746 ± 88 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	421	2376	1676	342	164
		domContentLoaded	1463	2169	1708	144	69
		load	1470	2383	1746	182	88
		domInteractive	15	80	39	20	10

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: -305 Bytes (-0.00%)
common: -34 Bytes (-0.00%)

andreahaku

LGTM

This PR is to update edit modals followed by design QA ## **Description** Following changes have been made in this PR: 1. The update CTA is now fixed/pinned to the bottom 2. The warning message while clicking on disconnect has been updated: - Simple the copy to This will disconnect you from this site - Increase Icon size from 12px to 16px - Center align warning message with the button NOTE: Add new accounts will be handled in a separate PR Including RPC URL is a new change proposed so I will update that in a different PR as well ## **Related issues** Fixes: [https://github.com/MetaMask/MetaMask-planning/issues/3390](https://github.com/MetaMask/MetaMask-planning/issues/3390) ## **Manual testing steps** 1. Run extension with yarn start 2. Connect to dapp 3. Click on All Permissions and the go to individual permission page 4. Click on Edit Accounts Modal and observe the above UI changes ## **Screenshots/Recordings** ### **Before** https://github.com/user-attachments/assets/8d3c95e8-5f49-486d-9d70-69e50339fe43 ### **After** https://github.com/user-attachments/assets/9f48b909-8c3a-4435-9a38-99b71e05e5d2 ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] 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](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). 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.

metamaskbot · 2024-10-14T14:34:27Z

Builds ready [522be69]

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, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2050 ± 161 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	256	2880	1811	681	327
		domContentLoaded	1687	2600	1958	226	109
		load	1702	3041	2050	336	161
		domInteractive	20	158	50	31	15

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: -305 Bytes (-0.00%)
common: -34 Bytes (-0.00%)

metamaskbot · 2024-10-14T17:47:21Z

Builds ready [59bc530]

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, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1887 ± 108 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	405	2415	1823	390	187
		domContentLoaded	1605	2390	1851	219	105
		load	1616	2433	1887	226	108
		domInteractive	26	180	50	33	16

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: 500 Bytes (0.01%)
common: -34 Bytes (-0.00%)

andreahaku

small comment on a label value

ui/components/multichain/edit-accounts-modal/edit-accounts-modal.tsx

metamaskbot · 2024-10-16T10:31:30Z

Builds ready [073fdc1]

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, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2009 ± 98 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1770	2510	2011	199	95
		domContentLoaded	1746	2441	1972	201	97
		load	1772	2512	2009	203	98
		domInteractive	21	110	50	25	12
		backgroundConnect	8	107	37	29	14
		firstReactRender	62	162	102	26	13
		getState	4	65	20	19	9
		initialActions	0	1	0	0	0
		loadScripts	1251	1929	1490	181	87
		setupStore	12	69	26	19	9
		uiStartup	1978	2801	2228	229	110

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: -286 Bytes (-0.00%)
common: -34 Bytes (-0.00%)

andreahaku

LGTM

andreahaku

LGTM

sonarqubecloud · 2024-10-16T15:56:12Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

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

See analysis details on SonarCloud

metamaskbot · 2024-10-16T16:18:26Z

Builds ready [24d9f3c]

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, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1771 ± 92 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	255	2244	1701	387	186
		domContentLoaded	1452	2190	1740	182	87
		load	1460	2199	1771	193	92
		domInteractive	16	233	49	46	22
		backgroundConnect	8	93	39	26	12
		firstReactRender	44	194	87	39	19
		getState	5	65	33	22	11
		initialActions	0	1	0	0	0
		loadScripts	1023	1777	1280	159	76
		setupStore	11	66	24	16	8
		uiStartup	1707	2384	1987	187	90

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: -286 Bytes (-0.00%)
common: -34 Bytes (-0.00%)

darkwing · 2024-10-16T16:30:20Z

Approved; useful follow up would be to make the "Select all" and "New Account" static as well, and just have the accounts list scroll.

NidhiKJha requested review from a team as code owners October 4, 2024 12:25

NidhiKJha added team-wallet-ux needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. labels Oct 4, 2024

andreahaku previously approved these changes Oct 9, 2024

View reviewed changes

sahar-fehri previously approved these changes Oct 11, 2024

View reviewed changes

NidhiKJha added this pull request to the merge queue Oct 11, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 11, 2024

salimtb previously approved these changes Oct 11, 2024

View reviewed changes

NidhiKJha added this pull request to the merge queue Oct 14, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 14, 2024

NidhiKJha enabled auto-merge October 14, 2024 12:41

NidhiKJha added this pull request to the merge queue Oct 14, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 14, 2024

NidhiKJha added this pull request to the merge queue Oct 14, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 14, 2024

NidhiKJha added this pull request to the merge queue Oct 14, 2024

github-merge-queue bot removed this pull request from the merge queue due to a conflict with the base branch Oct 14, 2024

NidhiKJha dismissed stale reviews from salimtb, sahar-fehri, and andreahaku via 59bc530 October 14, 2024 17:16

NidhiKJha force-pushed the fix-3390 branch from 522be69 to 59bc530 Compare October 14, 2024 17:16

andreahaku reviewed Oct 16, 2024

View reviewed changes

ui/components/multichain/edit-accounts-modal/edit-accounts-modal.tsx Show resolved Hide resolved

jonybur previously approved these changes Oct 16, 2024

View reviewed changes

andreahaku previously approved these changes Oct 16, 2024

View reviewed changes

NidhiKJha added this pull request to the merge queue Oct 16, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 16, 2024

NidhiKJha added this pull request to the merge queue Oct 16, 2024

github-merge-queue bot removed this pull request from the merge queue due to a conflict with the base branch Oct 16, 2024

NidhiKJha added 4 commits October 16, 2024 15:17

updated edit modals

546ca12

fixed lint

a33abe3

fixed lint

ffca762

footer update

93f2dc7

NidhiKJha dismissed stale reviews from andreahaku and jonybur via 93f2dc7 October 16, 2024 14:19

NidhiKJha force-pushed the fix-3390 branch from 073fdc1 to 93f2dc7 Compare October 16, 2024 14:19

sahar-fehri previously approved these changes Oct 16, 2024

View reviewed changes

andreahaku previously approved these changes Oct 16, 2024

View reviewed changes

update edit accounts

24d9f3c

NidhiKJha dismissed stale reviews from andreahaku and sahar-fehri via 24d9f3c October 16, 2024 15:44

sahar-fehri approved these changes Oct 16, 2024

View reviewed changes

darkwing approved these changes Oct 16, 2024

View reviewed changes

NidhiKJha added this pull request to the merge queue Oct 16, 2024

Merged via the queue into develop with commit 526d3ec Oct 16, 2024
78 checks passed

NidhiKJha deleted the fix-3390 branch October 16, 2024 17:03

github-actions bot locked and limited conversation to collaborators Oct 16, 2024

metamaskbot added the release-12.7.0 Issue or pull request that will be included in release 12.7.0 label Oct 16, 2024

gauthierpetetin added release-12.6.0 Issue or pull request that will be included in release 12.6.0 and removed release-12.7.0 Issue or pull request that will be included in release 12.7.0 labels Oct 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: updated edit modals #27623

fix: updated edit modals #27623

NidhiKJha commented Oct 4, 2024 •

edited

Loading

metamaskbot commented Oct 8, 2024

andreahaku left a comment

metamaskbot commented Oct 14, 2024

metamaskbot commented Oct 14, 2024

andreahaku left a comment

metamaskbot commented Oct 16, 2024

andreahaku left a comment

andreahaku left a comment

sonarqubecloud bot commented Oct 16, 2024

metamaskbot commented Oct 16, 2024

darkwing commented Oct 16, 2024

fix: updated edit modals #27623

fix: updated edit modals #27623

Conversation

NidhiKJha commented Oct 4, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

metamaskbot commented Oct 8, 2024

andreahaku left a comment

Choose a reason for hiding this comment

metamaskbot commented Oct 14, 2024

metamaskbot commented Oct 14, 2024

andreahaku left a comment

Choose a reason for hiding this comment

metamaskbot commented Oct 16, 2024

andreahaku left a comment

Choose a reason for hiding this comment

andreahaku left a comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Oct 16, 2024

Quality Gate passed

metamaskbot commented Oct 16, 2024

darkwing commented Oct 16, 2024

NidhiKJha commented Oct 4, 2024 •

edited

Loading