feat(extension) Create Account management components [LW-9029]

[DominikGuzei]

Checklist

• https://input-output.atlassian.net/browse/LW-9029
• Screenshots added.

Please note: this PR is based on #742 which needs to be merged first.

---

This PR implements the account item components for the new multi-wallet menu.

• Adds a mock UI without real data
• Also adds a new control button variant for extra small, purple version

Screenshots

Videos

The mocked accounts list UI in action:

Monosnap.screencast.2023-11-24.13-40-05.mp4

[github-actions]

Allure report

allure-report-publisher generated test report!

smokeTests: ✅ test report for 8305fddf

	passed	failed	skipped	flaky	total	result
Total	31	0	0	0	31	✅

[coveralls]

coverage: 53.21% (-0.04%) from 53.248%
when pulling 8305fdd on feat/lw-9029-account-management-components
into f7c4fd1 on main.

[DominikGuzei]

@renanvalentin I changed the base branch to your PR which simplifies review because your changes will not be included anymore. In order to make this PR even easier to review, we need to update #742 to latest main branch (otherwise these changes show up here)

[DominikGuzei]

@renanvalentin @lucas-barros PR updated to latest main and double checked from my side 👍

[renanvalentin]

LGTM! Also, chromatic didn't show up any regression. great job @DominikGuzei

[ljagiela]

@DominikGuzei

• I am unable to scroll the list in the popup view.
• The unlock button has no hover effect
• Unlock caption on Unlock button should start with capital "U" (?)
• Shouldn't the list item have hover effect (eg similar to the one that we have in user menu)
• When I open accounts menu, account numbers are displayed with 1-2s delay (circle bubbles are empty for a moment)
• Account menu width is 291px but in figma it's 258px (It looks to me it should have the same width as user menu ?)

[DominikGuzei]

@DominikGuzei

• I am unable to scroll the list in the popup view.
• The unlock button has no hover effect
• Unlock caption on Unlock button should start with capital "U" (?)
• Shouldn't the list item have hover effect (eg similar to the one that we have in user menu)
• When I open accounts menu, account numbers are displayed with 1-2s delay (circle bubbles are empty for a moment)
• Account menu width is 291px but in figma it's 258px (It looks to me it should have the same width as user menu ?)

@ljagiela the following issues have been fixed:

• list is scrollable
• list width is 258px
• unlock button says "Unlock" (uppercase)
• The hover effects of the unlock button needs to be clarified with design because in Figma the hover shadow is also barely visible (same as implemented)
• account numbers are displayed immediately

[sonarqubecloud]

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud