Change Connect Wallet Button behaviour if wallet is not present

[nikita-fuchs]

Hey, I just noticed that 'Connect wallet' is always clickable, even if people do not have a wallet installed. It lead to a community member being confused, as he is using the web based SH wallet and therefore was complaining about the button not connecting to his wallet.

@yusufseyrek could you please

1. Run the availability check for both metamask and SH wallet directly on page load and.
2. While it is being detected, make the button read 'Searching for SH / Metamask Wallet'
3. activate the button only when the required wallet is present. Make it disabled otherwise simply and put 'SH/MM wallet not detected.
4. If a wallet is not detected, put some highlighted box under the disabled button, reading 'Get the MM/SH here or or reload the page to rescan for your wallet again.

[yusufseyrek]

Hi @nikita-fuchs, thank you for bringing this issue up. I made some changes that will hopefully resolve the confusion in the wallet connection flow:

1. I fixed the multiple visible notifications for the same message bug.
2. I made the notifications smarter with links to redirect users to the right page to download wallets.
3. The app now checks the wallet extension on the initial load and displays the "wallet extension not found" error if needed for the selected network.
4. Autoconnect flow fixes/improvements.

Closing this now. Please let me know if there are any other issues

[nikita-fuchs]

thanks @yusufseyrek ! This way though, the user's focus needs to bounce to the top of the page to notice there is something missing, and he is still inclined to click the big red button. After all, if a user thinks he has a wallet he would click the button - you read a webpage top-down, and if on load, where all the elements are displayed, a toast appears at the top, it can be missed.

In the philosophy of "Don't allow making mistakes", please either deactivate the connect wallet button when there is no wallet and display something clickable instead right next to it, or make a collapsible appear right under the button so the top-down attention flow can be kept and the user's focus doesn't need to jump around the page. the toast can be kept though 👌

[yusufseyrek]

Hey @nikita-fuchs! There is no mistake can be made here. And your personal philosophy is definitely not the best practice for the UX here IMO.

As I mentioned before, you are over complicating this connect button. I'm tend to keep things simpler. I.e you click something > you get a feedback > then you know what to do next.

On top of that, wallet detection can take time and that means displaying messages in that button will look weird when the button message keep changing on load.

I'm not seeing any use of building this only would be waste of time and resources as this flow is clearly giving the feedback to users about their missing wallet extensions on load already.