feat(2793): permission UI requirements from figma, avatar groups and other stuff #11827

EtherWizard33 · 2024-10-16T20:33:32Z

Description

This PR connects the avatar group used for account addresses:

in the initial connect to the dapp where these avatars represent the accounts the user is granting permission for the dapp to use
in the connected flow, where the dapp is already connected and those avatar represents accounts the user has already granted permission for the dapp to use

Related issues

Contributes to solve issue: https://github.com/MetaMask/MetaMask-planning/issues/2796

Manual testing steps

I have added screenshot below to see how it looks.

Go to the in-app brower on the mobile wallet, connect to a dapp like uniswap
Switch netowrk to a network for which permission was not added before
A modal will show up and show have the same margin width on the right side as on the left side.

Screenshots/Recordings

Initial Connection Before	Initial Connection After

Already Connected Dapp Before	Already Connected Dapp After

Pre-merge author checklist

I’ve followed MetaMask Contributor Docs and MetaMask Mobile 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.

… in one submit

… back are feature complete, feature flag removed, dead code removed, and ready to write new tests

…y, this is the case where the user is on the connectMore screen

…playing, and hide irrelevant text or select all checkbox

…er than closing the bottom sheet. On initial connect, clicking the confirm button navs back to summary without submiting, the summary has a button to submit. On connected flow, in this case it submits before naviging back to summary, a toast is also shown as usual.

… scenario

…han Confirm, this is now fixed.

…any accounts

…e abilty for the user to see avatar for his connected accounts in the permission summary

… avatar group. Use the account address prop added in previous commit to add the abilty for the user to see avatar for the accounts he is requesting permissions for.

github-actions · 2024-10-16T20:33:46Z

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.

…the account permissions checkbox list

…e avatar group was updated

github-actions · 2024-10-18T01:45:59Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: fe7e9db
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/6dc53df6-5cbb-4f1f-96f8-eb8af7647120

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

…gma-avatar-groups-and-other-stuff

github-actions · 2024-10-21T17:41:05Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 49312a8
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/ebecce3a-1235-471b-9737-450ec600fb9b

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

…gma-avatar-groups-and-other-stuff

sonarcloud · 2024-10-22T18:41:28Z

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

EtherWizard33 added 16 commits October 10, 2024 16:52

feat: add the ability to make multiple edit (permissions (add/remove)…

594dd04

… in one submit

chore: exclude this file from stat converage from now until we circle…

2c7ae15

… back are feature complete, feature flag removed, dead code removed, and ready to write new tests

feat: add the ability to hide the disconnect all button when necessar…

923ba5c

…y, this is the case where the user is on the connectMore screen

feat: add the ability to show something relevant when no accounts dis…

4b840db

…playing, and hide irrelevant text or select all checkbox

style: lint

60dd6a9

style: lint

b224569

fix: the initialization of the list when its used in the connect more…

06d6a85

… scenario

Merge branch 'main' into feat

1a04123

feat: when connecting to dapp, the button should say Connect rather t…

80046bc

…han Confirm, this is now fixed.

feat: displays the correct account label for one account, next step m…

298400c

…any accounts

Merge branch 'main' into feat

0130024

Merge branch 'main' into feat

8e4f244

Merge branch 'account-selection-with-cal-input' into minor-ui-fixes

c8214aa

feat: use the account address prop added in previous commit to add th…

10a3c30

…e abilty for the user to see avatar for his connected accounts in the permission summary

feat: and now for the flow of initial connection, connect the account…

dcc9e5e

… avatar group. Use the account address prop added in previous commit to add the abilty for the user to see avatar for the accounts he is requesting permissions for.

EtherWizard33 added the No QA Needed Apply this label when your PR does not need any QA effort. label Oct 16, 2024

github-actions bot added the team-wallet-ux label Oct 16, 2024

EtherWizard33 added 3 commits October 16, 2024 18:16

feat: add the ability for the back button to discard changes made to …

39b094c

…the account permissions checkbox list

test: update snapshot as expecred, since the the label in front of th…

74516ed

…e avatar group was updated

fix: cta buttons were truncated on android only, for some reason

fe7e9db

EtherWizard33 added Run Smoke E2E Triggers smoke e2e on Bitrise and removed No QA Needed Apply this label when your PR does not need any QA effort. labels Oct 18, 2024

EtherWizard33 changed the title ~~feat(2793): permission UI requirements from figma avatar groups and other stuff~~ feat(2793): permission UI requirements from figma, avatar groups and other stuff Oct 18, 2024

EtherWizard33 added 2 commits October 18, 2024 08:34

feat: small phones lke iphone SE also had truncated cta buttons

eb516a4

Merge branch 'temp' into feat

ebd88e4

EtherWizard33 marked this pull request as ready for review October 18, 2024 15:00

EtherWizard33 requested a review from a team as a code owner October 18, 2024 15:00

EtherWizard33 requested a review from tommasini October 18, 2024 19:06

EtherWizard33 added 4 commits October 18, 2024 13:12

Merge branch 'main' into fdeat

a34a7c7

Merge branch 'main' into feat-2793-permission-ui-requirements-from-fi…

f1a5290

…gma-avatar-groups-and-other-stuff

Merge branch 'main' into feat-2793-permission-ui-requirements-from-fi…

321f5e8

…gma-avatar-groups-and-other-stuff

test: update snapshot to match the updated labels

49312a8

EtherWizard33 added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Oct 21, 2024

tommasini approved these changes Oct 21, 2024

View reviewed changes