Redesign Wallet Connect popup

[yangwao]

    Okay, here it is. It's updated in figma. 

Mobile

Frames are named accordingly to what they show. When you don't have a connected wallet, there are a few versions. Once you connect your burger menu changes. The category of account and wallet are shown. There you can access your profile, identity, settings, and also after connecting the language switcher. At the bottom, there is information about which address you are logged as. The wallet section shows the balance/tokens and the total sum with the option to add funds or disconnect the wallet. Add funds is basically the former credit button.

• animation when clicking the burger menu in the navbar - slide from the right side.

desktop

Once you click connect, it shows a popup with the connecting wallet. When you are connected, the profile icon changes into your address picture, the connect button disappears, and instead, it shows the wallet icon. Like this:
navbar (2)

Nothing has changed, I have just added the wallet hover popup. Again, shows your address with balance and tokens in it.
Right from the navbar, there are connect wallet popups, they are a bit changed. Clicking on connect in many ways results in connect wallet popup. Also when the popup is on screen, there is a background - true black on 30% opacity - behind it.

The first picture shows the options, second is when the user clicks on one of them. Other options collapse and the chosen take the rest of the space with accounts. The hover is accentlight2.
And I think that's it. If something isn't clear, contact me.

Originally posted by @exezbcz in #3946 (comment)

[zhengow]

👋

[kodabot]

ASSIGNED - @zhengow 🔒 LOCKED -> Friday, October 14th 2022, 17:43:50 UTC -> 72 hours

[zhengow]

@exezbcz
Hi, I am wonder what's the design about this, which is for wallets that is not installed.?

[exezbcz]

good q, I have updated the Figma: