Wallet connect dialog v2

[exezbcz]

connected with:

• wallet connect new design remarks #4144
• Move the login box to be drop-down under connect menu #4303
• Mention for first timers how to interact with kodadot on login #4720

Basics

• this is how it will look like when you open the sidebar on
• darker screen, black bg with 17% opacity
• I experienced with background blur but its not that usable when then displaying wallet.

Phases

warning

• confirmation
  
• primary button there

Connect wallet

Wallet providers as dropdowns, you can only see wallet you have downloaded.
Other wallet are hidden under "more option"

• these wallets have icon next to it co it indicates you can download them.

At the bottom there is dialog with introducing into wallets and link to a educational video in case you are a beginner.

Wallet

• we are moving it to the sidebar
  

hover states

wallet provider:

• same as the search results, when you hover over, the background turns into k-accentlight2 (lighter version than k-accentlight), in dark mode its k-accentlight2dark
  

sub-select:

• when you click the chevron turns down and reveals your accounts.
• there is a name and short adress
• next to the icon there is line, like in vscode etc. (its clear that its sub section)
• the line is only big as the max height of the content
• hover effect starts at the line but is slightly bigger vertically, should have same size as the wallet provider hovers.
• there are different screens that show it.
  this shows the hover on account:
  

More options:
default state is k-grey, when hovering it turns into k-black

• when clicking it displays the other options/wallets you can download

Cross icon:
turn into k-hovergrey, in case of darkmode its k-shade.

there is a close button at the top right in every sidebar + a clickable button (with left chevron) you can use to close it as well.

Mobile

on mobile the wallet section in menu stays the same. We wont change it.
We are going to change only the connect part.
It will popup over the whole page - it should be a overlay so once you close it you stay where you had been last time.

Darkmode

pretty straightforward, hover on the bigger areas have k-accentlightdark instead of the k-accentlight2.
If you have any questions about the dark mode feel free to ping.

Figma

designs are now available in gallery item handoff.

https://www.figma.com/file/gHSzqGPeQ9qK4L0qIDcTjY/gallery-item-handoff?node-id=1270%3A5615&t=s0dzfVDc0DFz66R4-1

Thanks!

[yangwao]

@exezbcz will soon drop the hand-off file for this, and we can start work on this 💪

[prachi00]

is this only for mobile?

[exezbcz]

is this only for mobile?

Nope

[yangwao]

I guess time for @exezbcz to make issue with design and description this week so we can start working on this for next release

[exezbcz]

updated ✔️

[yangwao]

@Jarsen136 let's take this one

[Jarsen136]

👋

[kodabot]

ASSIGNED - @Jarsen136 🔒 LOCKED -> Wednesday, January 25th 2023, 22:31:07 UTC -> 36 hours

[Jarsen136]

At the bottom there is dialog with introducing into wallets and link to a educational video in case you are a beginner.

I wonder which URL should we open when clicking this one. 👀 @yangwao

[yangwao]

oh, seems onboarding materials are missing

I found only this available on docs https://docs.kodadot.xyz/tutorials/how-to-kodadot-phone-ios.html#what-we-need

oh ok, probably we can put it this one there https://docs.kodadot.xyz/tutorial-overview.html