dapp Wallet Connection - Ability to change active account on Login

[smaroudasunicorn]

User shall be able through Wallet Connection Modal to switch active account on popup. Account switcher screen should be shown to the user.

Also it should be investigated if latest account that was used in the dapp, to be proposed to the user.

[onvisions]

ACCEPTANCE CRITERIA:

• Update design of the connecting account card according to mockups provided below;
• Pay attention to the different states according to the type of account (regular, imported with private key, imported from Ledger or AirGap), account with .chain name, account with long .chain name (shortening animation is applied, we already have the component for that implemented);
• If technically possible propose to the user as default account the latest used in the dApp and not the currently active account;
  ................................... @smaroudasunicorn the next specs can be separated into a different user story but they are low hanging fruit and needed to accomplish this task consistently:
• related to task: update of positioning of the "Imported account" icon (Private key, AirGap, Ledger) in the select account modal single item and in the main account card (account switcher on Dashboard);
• Improve Select Account Modal: update margin between account items and recheck single item name line-height; update wording in the search box from "Search for account" to "Search for account name or address".
  ...................................

PROTOTYPE REC:

changeconnectingaccount.mp4

DESIGN:

Types of accounts:

Select Account Modal:

FIGMA REFERENCE: https://www.figma.com/design/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?node-id=38393-287490&t=rgmLREuMfq8YDIFz-0

....................................................................

Imported account icon positioning at different UI spots:

Figma reference 2: https://www.figma.com/design/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?node-id=34330-306136&t=kszgJ7UevD26J6pi-0

[smaroudasunicorn]

@onvisions we should a wording, kindly ensure that dapp network matches the network used in the wallet.

@alex-k8 please explore the ability to receive network from dapp and change it in the wallet upon connection,

[onvisions]

@alex-k8 @smaroudasunicorn

Providing the design as requested. Minor comment on my side will be that this message is meaningful only for dApps that allow changing the active network from their UI. And in the best case switching the network in the dApp UI will also auto-change the active network in the wallet we are currently connected with.

I am just a bit concerned it might become a point of confusion to the users in case they don't have any option to change the network from a particular dApp they are using. Actually I have seen only a few dApps that have the option to select between mainnet/testnet in their UI. Users usually select this only in the wallet.

VERSION 1

VERSION 2

[smaroudasunicorn]

Version 1. seems milder.

About the message, I would propose the following.

Ensure that wallet and dApp are connected to the same network before making any transaction.

[onvisions]

Version 1. seems milder.

About the message, I would propose the following.

Ensure that wallet and dApp are connected to the same network before making any transaction.