feat: wallet-ui multiple accounts scrollbar

[khanti42]

This PR adds the support of infinite account to Wallet-UI

Changes :

• The "My Account" is replaced by "Account X" where is X is the account number (accountIndex + 1)
• The list of accounts now uses the Account Icon and Account name and short address for better UI/UX
• When the account number is higher than 3 a scrollbar appears

See the video below :

Screen.Recording.2025-01-28.at.15.08.41.mov

[stanleyyconsensys]

Left some comments, and there are 2 important comments/questions here

1. Didnt we agree to use modal , rather than pull out to support scroll bar? as. modal can be more responsive, but im okay with that too (Network poll up is different, it only have 2, not dynamic)

2. Address index is a requirement for next ticket (https://consensyssoftware.atlassian.net/browse/SF-785), what is the reason to have this in this ticket? as the user story has not mention this (https://consensyssoftware.atlassian.net/jira/software/projects/SF/boards/472?selectedIssue=SF-784)

[khanti42]

The reason to use index here already, is to show Account Number in the list. We could have a separate index but as we already have it from backend I thought it would make sense to add it here already.

Regarding the modal. I felt that the UX/UI was good. The switch appears closer to the button so it's less extra movement for the mouse and this feels more like an integrated approach. Except if there is a strong no go on that I would suggest to keep it this way. Maybe we can revisit this when integrating design change to include dApps listing..

[stanleyyconsensys]

Left 2 comments,

And there is a recommend comment
i can see some component retrieve state from redux, but at the meanwhile it retrieve the redux state from parent

if you dont mind, i will suggest, to align to use redux
the redux purpose is to avoid pass state from each level

as i already seen passing state from
home -> sidebar -> account detail / account switch

in general a component only stateless if it is a re-useable component , such as AddressInput, AmountInput

i know it may have a lot of change if we do that

I would suggest lets move that slowly, at least

• AccountSwitchModalView -> keep full , and starkName
• SideBarView - no props
• AccountDetailsModal - no props

those can be stateful without the need passing address / addressIndex

in additional, i think you can also make the currentAccount from redux state to have a dummy object to include the dummy address, so when changing SideBarView, you dont need to much effort

WDYT

[sonarqubecloud]

Quality Gate passed for 'consensys_starknet-snap-wallet-ui'

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
3.3% Duplication on New Code

See analysis details on SonarQube Cloud

[sonarqubecloud]

Quality Gate passed for 'consensys_starknet-snap-starknet-snap'

Issues
17 New issues
0 Accepted issues

Measures
0 Security Hotspots
1.8% Coverage on New Code
0.6% Duplication on New Code

See analysis details on SonarQube Cloud

[khanti42]

Regarding this comment :

in additional, i think you can also make the currentAccount from redux state to have a dummy object to include the dummy address, so when changing SideBarView, you dont need to much effort

Its solved in an other PR: #502

[stanleyyconsensys]

LGTM