UX: Added Account list pinning and Unpinning

[NidhiKJha]

This PR is to add accounts pinning in the account list menu

Description

List management for accounts has been one of the most requested features from the community. In this iteration, we'll implement account list management through pin and unpinning accounts.

Related issues

Fixes: #20918

Manual testing steps

1. Run the extension with NETWORK_ACCOUNT_DND=1 yarn start command
2. Go to account list menu
3. Click on the options
4. Click on Pin Account to Top
5. See the pinned account is on top
6. Click on Pin Account for a new account, this account should be on second position from top
7. Unpin Accounts

Screenshots/Recordings

Before

After

Screen.Recording.2023-11-17.at.7.25.07.PM.mov

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained what problem this PR is solving and how it is solved.
• I've linked related issues
• I've included manual testing steps
• I've included screenshots/recordings if applicable
• 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.
• 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]

Builds ready [08581fc]

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

Page Load Metrics (1350 ± 66 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	89	146	111	16	8
		domContentLoaded	10	26	17	4	2
		load	1024	1633	1350	138	66
		domInteractive	10	26	17	4	2

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

• background: 1.42 KiB (0.04%)
• ui: 664 Bytes (0.01%)
• common: 102 Bytes (0.00%)

[k-g-j]

Pinning worked well but the expected behavior of when you pin a second account to top did not function as described. The second account pinned to top replaced the first pinned account as the top-most pin. I believe this may be due to account numbering. If a new pinned account has a lower account number than the top pinned account it replaces it on top and if its number is higher, it is pinned below. See attached videos:

Screen.Recording.2023-12-04.at.11.45.31.AM.mov

Screen.Recording.2023-12-04.at.11.51.32.AM.mov

[NidhiKJha]

Pinning worked well but the expected behavior of when you pin a second account to top did not function as described. The second account pinned to top replaced the first pinned account as the top-most pin. I believe this may be due to account

@k-g-j @owencraston Nice shout, Have updated the logic here, also tried to address your comments in this commit @owencraston ceefd58. Also, the logic is once a new account is pinned, it will go in the bottom of the list. Example if account 1 is pinned and then account 5 is pinned and then account 3 is pinned, the list would look like:

account1
Account 5
account 3

then unpinned accounts.

Please refer to this screencast.

Screen.Recording.2023-12-05.at.2.26.38.PM.mov

[codecov]

Codecov Report

Attention: 29 lines in your changes are missing coverage. Please review.

Comparison is base (2023178) 67.71% compared to head (b9cfbc9) 67.68%.
Report is 1 commits behind head on develop.

Files	Patch %	Lines
...n/account-list-item-menu/account-list-item-menu.js	23.53%	13 Missing ⚠️
app/scripts/metamask-controller.js	50.00%	6 Missing ⚠️
app/scripts/controllers/account-order.ts	63.64%	4 Missing ⚠️
ui/store/actions.ts	0.00%	3 Missing ⚠️
.../multichain/account-list-menu/account-list-menu.js	75.00%	2 Missing ⚠️
.../multichain/account-list-item/account-list-item.js	80.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #21865      +/-   ##
===========================================
- Coverage    67.71%   67.68%   -0.03%     
===========================================
  Files         1061     1062       +1     
  Lines        41143    41214      +71     
  Branches     11028    11053      +25     
===========================================
+ Hits         27859    27895      +36     
- Misses       13284    13319      +35     

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

[metamaskbot]

Builds ready [b9cfbc9]

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

Page Load Metrics (1474 ± 146 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	92	400	188	78	37
		domContentLoaded	10	199	60	61	29
		load	997	2038	1474	305	146
		domInteractive	10	199	60	61	29

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

• background: 1.42 KiB (0.05%)
• ui: 758 Bytes (0.01%)
• common: 102 Bytes (0.00%)