WalletConnect design references

[peronczyk]

This task needs some designs: https://github.com/superhero-com/superhero-wallet/issues/2664 - you can open the PR and use the deployed test version. Please use only the web (not the extension).

The demo app is available here: https://feat-eth-dapps-support.wallet.z52da5wt.xyz/

Here is the list of required elements & screens:

1. App header icon design - connected and not connected
2. Modal window that opens up after clicking on the header WalletConnect icon a. With an error if user has no ETH accounts b When not connected c. When connected d. When connection failed
3. Transaction approval modal that pops up when we try to propose transaction in the Uniswap.

[onvisions]

WalletConnect feature

Acceptance criteria:

1. Wallet connect icon for the top bar:

   • not connected state;
   • connected state.

2. WalletConnect modal with options to scan QR and input/paste URI link:

   • State: Scan QR or use input URI;
   • State: Connecting;
   • State: "Unable to connect";
   • State: Connected to dapp (disconnect?).

Prototype recording:

https://github.com/superhero-com/superhero-wallet/assets/12225410/6b159e69-4b17-45fb-9b99-ef22a260909f

Design:

Not connected icon:

Connected icon:

Scan QR or use input URI:

Connecting:

Unable to connect:

Connected to dapp (disconnect?):

Figma Design Reference:

https://www.figma.com/file/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?type=design&node-id=31639-178033&mode=design&t=gMamfsyUU0oNkHkt-0

@smaroudasunicorn updated design after syncing with @peronczyk on Friday (26.04).

[smaroudasunicorn]

I am ok with updated Proposals

[onvisions]

WalletConnect feature

@smaroudasunicorn updated design after syncing with @peronczyk. Design update after updated technical requirements:

Acceptance criteria:

1. Wallet connect icon for the top bar:

   • not connected state;
   • connected state.

2. WalletConnect modal with options to scan QR and input/paste URI link:

   • State: Scan QR or use input URI;
   • State: Connecting;
   • State: "Unable to connect";
   • State: Connected to dapp (disconnect?).

Prototype recording:

https://github.com/superhero-com/superhero-wallet/assets/12225410/ddcddb63-e41c-4fee-b767-a6bc2ac809e0

Design:

Not connected icon:

Connected icon:

Scan QR or use input URI:

Connecting:

Unable to connect:

Connected to dapp modal (disconnect?):

Figma Design Reference:

https://www.figma.com/file/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?type=design&node-id=31639-178033&mode=design&t=gMamfsyUU0oNkHkt-0

[onvisions]

@peronczyk

Following issues should be addressed:

1. Case: SH wallet has been connected to WC but there is no Internet connection at the moment. 12.07 We discussed with @peronczyk and agreed that the "yellow" state of the wallet top bar WC icon is not needed when user is offline. The status in the modal however should be "Connected. No Internet" as in the mockups below.

3. Case: No Ethereum account found.

4. Update icon used and text of Connection failed modal according to design.

5. Discrepancies with design:

! 5. Unknown connection error observed:

[peronczyk]

@onvisions this task can be reviewed now.

[onvisions]

@peronczyk unfortunately there are still a lot of issues.

I am listing all issues I have found here and I will not make another review for a third time so @Liubov-crypto you may use these as reference later when testing.

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

[onvisions]

@peronczyk by the way, this is my mistake but let's update it for consistency. I already updated the Figma reference.

[peronczyk]

1. "Dapp" replaced with "dapp"
2. The visual difference between text labels ("Connecting as") and the input labels ("WaleltConnect URI") is fixed within different PR: https://github.com/superhero-com/superhero-wallet/issues/3154
3. I have updated the error icon.
4. The way how multiline fields works is something that was developed long time ago by Konrad Odo and was approved back then. If we wan't to change this behavior I suggest to create separate task to avoid making this PR too big.
5. I just used component that we have. It was created 17 months ago and if you feel we need to update it please create separate task.
6. I updated the hover color styling for URL row.
7. The error message "No Ethereum account found..." is centered because the InfoBox component was developed this way. We use it in several other places. I can change the alignment globally, provide the ability to left-align only for selected places or leaver it as it is. Which option should I choose?
8. Updated the modal buttons to not hide the connect button in case there are no eth accounts. Only disabling it. @onvisions can you take a look?