UX: Multichain: Move PickerNetwork to Wallet Tabs #21220

darkwing · 2023-10-06T02:54:37Z

Description

The multichain effort requires that we move the PickerNetwork from the header to each home tab. This PR moves the PickerNetwork to each of those tabs. This PR does not account for the formatting of the header.

Manual testing steps

If the MULTICHAIN flag is not enabled, nothing should change.
With the MULTICHAIN flag enabled, see no PickerNetwork in the unlocked state, regardless of full screen or popup
Clicking the PickerNetwork should launch the Network menu, and clicking an item should change the network
Test changing networks on each Wallet screen tab.

Screenshots/Recordings

Related issues

Fixes: https://app.zenhub.com/workspaces/metamask-extension-63529dce65cbb100265a3842/issues/gh/metamask/metamask-planning/683

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.

github-actions · 2023-10-06T02:54:49Z

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.

## **Description** This PR adds a separator to the Multichain global menu under View on Explorer ## **Manual testing steps** 1. Open the Global Menu 2. See the separator between View on Explorer and its next menu item ## **Screenshots/Recordings** <img width="290" alt="SCR-20231005-txgc" src="https://github.com/MetaMask/metamask-extension/assets/46655/5e8dbbd5-45dc-4eda-999a-117580569190"> ## **Related issues** Fixes: #21220 This issue also references the position of the Account Picker but that is addressed in #21220 ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've clearly explained: - [ ] What problem this PR is solving. - [ ] How this problem was solved. - [ ] How reviewers can test my changes. - [ ] I’ve indicated what issue this PR is linked to: Fixes #??? - [ ] I’ve included tests if applicable. - [ ] I’ve documented any added code. - [ ] 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)). - [ ] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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.

@danjm

commit f987a9d Merge: 5522af7 1e5578e Author: Gustavo Antunes <[email protected]> Date: Tue Oct 10 21:46:06 2023 -0300 Merge branch 'develop' into feat/accounts-feedback-link commit 1e5578e Author: Daniel Rocha <[email protected]> Date: Tue Oct 10 23:32:20 2023 +0200 Add `getAllowedKeyringMethods` hook for Account Snaps (MetaMask#21246) This PR adds the `getAllowedKeyringMethods` hook. It is used in the `rpc-methods` packed to get the list of allowed Keyring methods for a given origin. --------- Co-authored-by: Frederik Bolding <[email protected]> Co-authored-by: Maarten Zuidhoorn <[email protected]> Co-authored-by: MetaMask Bot <[email protected]> commit b8b3dd6 Author: Brad Decker <[email protected]> Date: Tue Oct 10 15:17:54 2023 -0500 ci(codeowners): add privacy reviewers to codeowners (MetaMask#21241) ## **Description** Further locks down the privacy snapshot by adding codeowners for the snapshot file. A new team for this was created by @danjm @MetaMask/extension-privacy-reviewers ## **Manual testing steps** 1. In theory if you branch off this PR and change the codeowners, then push up your branch you'll see that the team has been added to the PR as a codeowner. ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've clearly explained: - [x] What problem this PR is solving. - [x] How this problem was solved. - [x] How reviewers can test my changes. - [x] I’ve indicated what issue this PR is linked to: Fixes #??? - [x] I’ve included tests if applicable. - [x] I’ve documented any added code. - [x] 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)). - [x] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [x] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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. commit a6f058f Author: David Walsh <[email protected]> Date: Tue Oct 10 12:12:37 2023 -0500 UX: Multichain: Add separator under 'View on Explorer' (MetaMask#21223) ## **Description** This PR adds a separator to the Multichain global menu under View on Explorer ## **Manual testing steps** 1. Open the Global Menu 2. See the separator between View on Explorer and its next menu item ## **Screenshots/Recordings** <img width="290" alt="SCR-20231005-txgc" src="https://github.com/MetaMask/metamask-extension/assets/46655/5e8dbbd5-45dc-4eda-999a-117580569190"> ## **Related issues** Fixes: MetaMask#21220 This issue also references the position of the Account Picker but that is addressed in MetaMask#21220 ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've clearly explained: - [ ] What problem this PR is solving. - [ ] How this problem was solved. - [ ] How reviewers can test my changes. - [ ] I’ve indicated what issue this PR is linked to: Fixes #??? - [ ] I’ve included tests if applicable. - [ ] I’ve documented any added code. - [ ] 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)). - [ ] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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 · 2023-10-11T21:18:30Z

Builds ready [8a1e6c2]

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
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (748 ± 351 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	81	114	91	10	5
		domContentLoaded	65	115	84	15	7
		load	76	1601	748	731	351
		domInteractive	65	115	84	15	7

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 753 Bytes (0.01%)
common: 0 Bytes (0.00%)

DDDDDanica · 2023-10-12T10:00:56Z

ui/pages/home/home.component.js

+            e.stopPropagation();
+            e.preventDefault();


Optional: can we move these 2 events related actions to component PickerNetwork level?

darkwing · 2023-10-12T14:14:39Z

This is blocked by #21301

metamaskbot · 2023-10-13T18:10:00Z

Builds ready [30dad92]

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
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1126 ± 401 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	87	147	113	20	10
		domContentLoaded	70	144	106	23	11
		load	81	2015	1126	836	401
		domInteractive	70	144	106	23	11

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 698 Bytes (0.01%)
common: 0 Bytes (0.00%)

## **Description** This PR adds a separator to the Multichain global menu under View on Explorer ## **Manual testing steps** 1. Open the Global Menu 2. See the separator between View on Explorer and its next menu item ## **Screenshots/Recordings** <img width="290" alt="SCR-20231005-txgc" src="https://github.com/MetaMask/metamask-extension/assets/46655/5e8dbbd5-45dc-4eda-999a-117580569190"> ## **Related issues** Fixes: #21220 This issue also references the position of the Account Picker but that is addressed in #21220 ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've clearly explained: - [ ] What problem this PR is solving. - [ ] How this problem was solved. - [ ] How reviewers can test my changes. - [ ] I’ve indicated what issue this PR is linked to: Fixes #??? - [ ] I’ve included tests if applicable. - [ ] I’ve documented any added code. - [ ] 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)). - [ ] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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.

@danjm

commit f987a9d Merge: 5522af7 1e5578e Author: Gustavo Antunes <[email protected]> Date: Tue Oct 10 21:46:06 2023 -0300 Merge branch 'develop' into feat/accounts-feedback-link commit 1e5578e Author: Daniel Rocha <[email protected]> Date: Tue Oct 10 23:32:20 2023 +0200 Add `getAllowedKeyringMethods` hook for Account Snaps (MetaMask#21246) This PR adds the `getAllowedKeyringMethods` hook. It is used in the `rpc-methods` packed to get the list of allowed Keyring methods for a given origin. --------- Co-authored-by: Frederik Bolding <[email protected]> Co-authored-by: Maarten Zuidhoorn <[email protected]> Co-authored-by: MetaMask Bot <[email protected]> commit b8b3dd6 Author: Brad Decker <[email protected]> Date: Tue Oct 10 15:17:54 2023 -0500 ci(codeowners): add privacy reviewers to codeowners (MetaMask#21241) ## **Description** Further locks down the privacy snapshot by adding codeowners for the snapshot file. A new team for this was created by @danjm @MetaMask/extension-privacy-reviewers ## **Manual testing steps** 1. In theory if you branch off this PR and change the codeowners, then push up your branch you'll see that the team has been added to the PR as a codeowner. ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've clearly explained: - [x] What problem this PR is solving. - [x] How this problem was solved. - [x] How reviewers can test my changes. - [x] I’ve indicated what issue this PR is linked to: Fixes #??? - [x] I’ve included tests if applicable. - [x] I’ve documented any added code. - [x] 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)). - [x] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [x] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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. commit a6f058f Author: David Walsh <[email protected]> Date: Tue Oct 10 12:12:37 2023 -0500 UX: Multichain: Add separator under 'View on Explorer' (MetaMask#21223) ## **Description** This PR adds a separator to the Multichain global menu under View on Explorer ## **Manual testing steps** 1. Open the Global Menu 2. See the separator between View on Explorer and its next menu item ## **Screenshots/Recordings** <img width="290" alt="SCR-20231005-txgc" src="https://github.com/MetaMask/metamask-extension/assets/46655/5e8dbbd5-45dc-4eda-999a-117580569190"> ## **Related issues** Fixes: MetaMask#21220 This issue also references the position of the Account Picker but that is addressed in MetaMask#21220 ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've clearly explained: - [ ] What problem this PR is solving. - [ ] How this problem was solved. - [ ] How reviewers can test my changes. - [ ] I’ve indicated what issue this PR is linked to: Fixes #??? - [ ] I’ve included tests if applicable. - [ ] I’ve documented any added code. - [ ] 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)). - [ ] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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.

darkwing requested a review from a team as a code owner October 6, 2023 02:54

darkwing added team-extension-ux DEPRECATED: please use "team-wallet-ux" label instead needs-ux-ds-review labels Oct 6, 2023

darkwing force-pushed the 683-multichain-network-picker branch from ea7be75 to a14bdd3 Compare October 6, 2023 03:44

darkwing mentioned this pull request Oct 6, 2023

UX: Multichain: Add separator under 'View on Explorer' #21223

Merged

14 tasks

vthomas13 previously approved these changes Oct 6, 2023

View reviewed changes

darkwing dismissed vthomas13’s stale review via 3da4c13 October 6, 2023 16:32

darkwing closed this in #21223 Oct 10, 2023

github-actions bot locked and limited conversation to collaborators Oct 10, 2023

darkwing reopened this Oct 11, 2023

darkwing force-pushed the 683-multichain-network-picker branch from c27bb61 to 200eabd Compare October 11, 2023 18:55

DDDDDanica reviewed Oct 12, 2023

View reviewed changes

darkwing added 7 commits October 13, 2023 08:01

UX: Multichain: Move PickerNetwork to Wallet Tabs

e95f074

Fix the alignment of the account picker

fd448c2

Update snapshot

bb96de2

Avoid stale element error in E2E

715ee4c

Fix code fencing import

8fe354f

Move width adjustments to PickerNetwork component

24f677a

Remove customizations from PickerNetwork

68b400c

darkwing force-pushed the 683-multichain-network-picker branch from 8a1e6c2 to 68b400c Compare October 13, 2023 13:18

darkwing added 3 commits October 13, 2023 08:45

Merge branch 'develop' into 683-multichain-network-picker

462f9f3

Merge branch 'develop' into 683-multichain-network-picker

688b351

Merge branch 'develop' into 683-multichain-network-picker

30dad92

vthomas13 approved these changes Oct 13, 2023

View reviewed changes

NidhiKJha approved these changes Oct 16, 2023

View reviewed changes

darkwing added the DO-NOT-MERGE Pull requests that should not be merged label Oct 17, 2023

darkwing closed this Dec 4, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UX: Multichain: Move PickerNetwork to Wallet Tabs #21220

UX: Multichain: Move PickerNetwork to Wallet Tabs #21220

darkwing commented Oct 6, 2023 •

edited

Loading

github-actions bot commented Oct 6, 2023

metamaskbot commented Oct 11, 2023

DDDDDanica Oct 12, 2023

darkwing commented Oct 12, 2023

metamaskbot commented Oct 13, 2023

UX: Multichain: Move PickerNetwork to Wallet Tabs #21220

UX: Multichain: Move PickerNetwork to Wallet Tabs #21220

Conversation

darkwing commented Oct 6, 2023 • edited Loading

Description

Manual testing steps

Screenshots/Recordings

Related issues

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Oct 6, 2023

metamaskbot commented Oct 11, 2023

DDDDDanica Oct 12, 2023

Choose a reason for hiding this comment

darkwing commented Oct 12, 2023

metamaskbot commented Oct 13, 2023

darkwing commented Oct 6, 2023 •

edited

Loading