feat: Editing flow #26635

NidhiKJha · 2024-08-23T12:08:09Z

This PR is to add editing flow while switching networks via dapp
This PR also includes the connections flow which includes editing

Related issues

Fixes:

Manual testing steps

run the extension with CHAIN_PERMISSIONS flag
Connect to a dapp
Switch network via metamask
toast should show up
Then click on edit permissions, it should route to new permissions screen
We have edit networks and edit accounts modal there

Screenshots/Recordings

Before

NA

After

Screen.Recording.2024-09-04.at.5.05.21.PM.mov

Screen.Recording.2024-09-04.at.5.27.57.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.

github-actions · 2024-08-23T16:24:33Z

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.

ui/selectors/permissions.js

jiexi · 2024-09-25T15:24:23Z

Seeing an issue when switching to a network not currently permissioned for a dapp:

Great catch. Should be fixed here 1bc9e0f

Screen.Recording.2024-09-25.at.8.21.46.AM.mov

…ave permitted accounts

…unpermitted chain on the review permission component on permitted origin and then the origin is disconnected

metamaskbot · 2024-09-25T17:01:07Z

Builds ready [e69d0f7]

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, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1751 ± 91 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1568	2209	1751	202	97
		domContentLoaded	1555	2195	1719	183	88
		load	1569	2202	1751	190	91
		domInteractive	15	187	53	48	23

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

background: 1.17 KiB (0.03%)
ui: 28.66 KiB (0.39%)
common: 5.64 KiB (0.07%)

…r setShowNetworkToast

sonarcloud · 2024-09-25T19:42:02Z

Quality Gate failed

Failed conditions
59.8% Coverage on New Code (required ≥ 80%)
5.7% Duplication on New Code (required ≤ 3%)

See analysis details on SonarCloud

metamaskbot · 2024-09-25T20:00:38Z

Builds ready [2429f51]

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, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1756 ± 67 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	237	2131	1694	361	173
		domContentLoaded	1579	2088	1724	131	63
		load	1617	2134	1756	139	67
		domInteractive	23	69	39	15	7

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

background: 1.17 KiB (0.03%)
ui: 28.8 KiB (0.39%)
common: 5.73 KiB (0.07%)

adonesky1

Awesome! So excited for this to go live!

Mrtenz · 2024-09-26T08:24:06Z

ui/store/actions.ts

+    });
+    await forceUpdateMetamaskState(dispatch);
+  };
+}


Nit:

Suggested change

}

}

Mrtenz

Snaps-related changes look good. I haven't reviewed everything else in-depth.

darkwing

Nit: The Sepolia network circle doesn't have the same background color as the networks menu:

darkwing · 2024-09-26T15:27:54Z

ui/pages/permissions-connect/connect-page/connect-page.tsx

+        [[] as NetworkConfiguration[], [] as NetworkConfiguration[]],
+      ),
+    [networkConfigurations],
+  );


Nit: Please move this to maybe a selector or somewhere outside of this UI component if possible.

darkwing · 2024-09-26T15:28:24Z

app/scripts/metamask-controller.js

+          // if(chains.length === 0) {
+          // TODO: This particular case should also occur at the same time
+          // that eth_accounts is revoked. When eth_accounts is revoked,
+          // the networkClientId for that origin should be reset to track
+          // the globally selected network.
+          // }


Nit: Again, should this comment be removed?

…flag (#27459)  ## **Description** Recent permission flow changes introduced behind the `CHAIN_PERMISSIONS` feature flag have broken permission connection for Snaps. This PR fixes it by removing an incorrect forced route direct in the permission connection component. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27459?quickstart=1) ## **Related issues** Fixes: #26635 ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **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.

github-actions bot added the team-wallet-ux label Aug 23, 2024

NidhiKJha force-pushed the editing-flow branch from 8ff52ad to da2478a Compare August 23, 2024 16:06

adonesky1 reviewed Aug 23, 2024

View reviewed changes

ui/selectors/permissions.js Outdated Show resolved Hide resolved

NidhiKJha and others added 24 commits September 4, 2024 12:29

added networks screen modal

4e2ceac

added test and checkbo

5d1adc4

lint fix

ec54d0b

lint fix

62fc967

updated snapshot

cfe64f4

updated jest

2a038a8

updated tests

46d3441

lint fix

6b4486c

added edit accounts modal

1d3180b

added toast for permission switch

1fde970

added review perm page

0f9b049

added review permission page

e0d2bce

editing flow

f60df8f

updated selector

b6cc4d9

fix

a295937

permitted chains and accounts updated for review screen

c7f4507

removed unused console

ecdf8a5

added edit accounts functionality

6c81230

updated toast

43eb0dc

added no connection page

d2da713

added edit networks functionality

5e0cacf

fix

aa4c368

removed console statements

5ce582a

updated final screen for editing flow

acaddf8

NidhiKJha force-pushed the editing-flow branch from 34e3b54 to acaddf8 Compare September 4, 2024 11:40

updated controllers

1b44b21

jiexi added 3 commits September 25, 2024 08:22

fix typo in actions

1bc9e0f

Merge remote-tracking branch 'origin/editing-flow' into editing-flow

3bbcb3d

Merge branch 'develop' into editing-flow

b4395ad

NidhiKJha and others added 7 commits September 25, 2024 16:37

updated test

1b853f4

updated test

bb51d59

Fix action grantPermittedChain specs

c67c60f

Merge remote-tracking branch 'origin/editing-flow' into editing-flow

ab5b004

Merge branch 'develop' into editing-flow

2e955c5

do not grant permitted changes on network switch if origin does not h…

84159e5

…ave permitted accounts

fix permitted chain toast being shown when network is switched to an …

e69d0f7

…unpermitted chain on the review permission component on permitted origin and then the origin is disconnected

jiexi and others added 2 commits September 25, 2024 12:14

Use showPermittedNetworkToastOpen in ReviewPermissions page to trigge…

5fadd78

…r setShowNetworkToast

Merge branch 'develop' into editing-flow

2429f51

adonesky1 approved these changes Sep 25, 2024

View reviewed changes

Mrtenz reviewed Sep 26, 2024

View reviewed changes

ui/store/actions.ts

});

await forceUpdateMetamaskState(dispatch);

};

}

Copy link

Member

Mrtenz Sep 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit:

Suggested change

}

}

Mrtenz approved these changes Sep 26, 2024

View reviewed changes

darkwing approved these changes Sep 26, 2024

View reviewed changes

NidhiKJha merged commit 7b4eb5b into develop Sep 26, 2024
76 of 77 checks passed

NidhiKJha deleted the editing-flow branch September 26, 2024 15:38

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Editing flow #26635

feat: Editing flow #26635

NidhiKJha commented Aug 23, 2024 •

edited

Loading

github-actions bot commented Aug 23, 2024

jiexi commented Sep 25, 2024

metamaskbot commented Sep 25, 2024

sonarcloud bot commented Sep 25, 2024

metamaskbot commented Sep 25, 2024

adonesky1 left a comment

Mrtenz Sep 26, 2024

Mrtenz left a comment

darkwing left a comment

darkwing Sep 26, 2024

darkwing Sep 26, 2024

feat: Editing flow #26635

feat: Editing flow #26635

Conversation

NidhiKJha commented Aug 23, 2024 • edited Loading

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Aug 23, 2024

jiexi commented Sep 25, 2024

metamaskbot commented Sep 25, 2024

sonarcloud bot commented Sep 25, 2024

Quality Gate failed

metamaskbot commented Sep 25, 2024

adonesky1 left a comment

Choose a reason for hiding this comment

Mrtenz Sep 26, 2024

Choose a reason for hiding this comment

Mrtenz left a comment

Choose a reason for hiding this comment

darkwing left a comment

Choose a reason for hiding this comment

darkwing Sep 26, 2024

Choose a reason for hiding this comment

darkwing Sep 26, 2024

Choose a reason for hiding this comment

NidhiKJha commented Aug 23, 2024 •

edited

Loading