feat: display snap account name

[k-g-j]

Description

This feature adds a label for snap accounts with the derived snap name and MetaMask snap icon to the tag on the accounts list and wallet overview UI.

Reason: Account snaps should present a snap tag, including the snap badge and the name of the snap it's derived from.

Improvement: The account-list-menu has been updated to pass a keyring type and optional tag label to child account-list-item components. The wallet-overview screen now shows a tag with the snap name for snap accounts.

Related issues

Fixes: #20819

Manual testing steps

1. Go to the SSK and create a snap account
2. Open the accounts list dropdown in the extension
3. You should see "MetaMask Simple Snap Keyring (Beta)" under the new account with the snap icon
4. Open the expanded view of the extension
5. You should see "MetaMask Simple Snap Keyring (Beta)" under the new account with the snap icon when you navigate to the new account page
6. You should NOT see any tag under an account that is not a snap account (default MM accounts)

Jest

jest ui/components/multichain/account-list-menu/account-list-menu.test.js
jest ui/components/multichain/account-list-item/account-list-item.test.js

Screenshots/Recordings

Before

After

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.

[github-actions]

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.

[codecov]

Codecov Report

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

Comparison is base (7e66e23) 67.90% compared to head (fe9fa3d) 67.92%.

Files	Patch %	Lines
.../components/app/wallet-overview/wallet-overview.js	57.14%	3 Missing ⚠️
.../multichain/account-list-menu/account-list-menu.js	90.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #22342      +/-   ##
===========================================
+ Coverage    67.90%   67.92%   +0.02%     
===========================================
  Files         1071     1071              
  Lines        41378    41399      +21     
  Branches     11112    11123      +11     
===========================================
+ Hits         28095    28118      +23     
+ Misses       13283    13281       -2     

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

[owencraston]

Nice work! 🥳

[metamaskbot]

Builds ready [fe9fa3d]

• 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 (1551 ± 141 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	94	388	178	73	35
		domContentLoaded	12	202	46	58	28
		load	1032	2059	1551	294	141
		domInteractive	12	202	46	58	28

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 1.74 KiB (0.03%)
• common: 0 Bytes (0.00%)

[gantunesr]

LGTM. The feature works as expected. Ship it

Screen.Recording.2023-12-19.at.21.05.42.mov