feat: show other wallet options

[Imamah-Zafar]

Description

The Connect UI currently only shows Hiro Wallet as the wallet to connect with if no wallet installation is detected. Since Hiro Wallet is not on mobile, users should be shown option to connect with Xverse, to retain mobile users. The UI is updated to add Xverse in the wallet options to connect with. On Desktop:

On Mobile

For details refer to issue #266

Type of Change

• [ ] New feature
• [ ] Bug fix
• [ ] API reference/documentation update
• [x] Other

Are documentation updates required?

No

Testing information

The initial wallet connect flow needs to be tested on supported browsers such as Chrome and Firefox as well as on unsupported browser like Safari. The wallet connect flow also needs to be tested on mobile

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

Imamah Zafar seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[markmhendrickson]

Thanks for this PR! It's great to see movement on this front.

Some design suggestions:

• Retain the illustrations (seen on https://github.com/hirosystems/connect/issues/266) somehow since they're helpful for exciting and informing the user, even if reduced in size to accommodate the new format
• "Add a Wallet to Chrome" / "Add a Wallet to your mobile" -> "Get wallet to use [APP NAME]"
• "...you will need a Stacks compatible wallet" -> "...you will need a Stacks-compatible wallet"
• "Browser Extension" -> "Browser extension"
• "Mobile Application" -> "Mobile application"
• Remove "Choose a wallet" subheader since unnecessary
• "Download it on your device.." -> "Install it on your device..."

@eugeniadigon wdyt?

[QUDBS]

• Retain the illustrations (seen on Show other wallet options #266) somehow since they're helpful for exciting and informing the user, even if reduced in size to accommodate the new format

Hi! All the feedback have been taken into account. Regarding the illustrations, it will be an issue on mobile for both dialogs that will be too long on smaller devices (for example on iPhone SE).

If it is mandatory to keep the illustrations, we will have to scroll inside the modal which isn't an optimal behavior. What do you think?

Thanks,

[ginny-d]

The illustration can/should be removed as this should be wallet/brand-agnostic. Thanks!

[Imamah-Zafar]

The design changes suggested have been implemented. the screenshots in the description have also been updated

[Imamah-Zafar]

The latest commit has the changes suggested to remove repetitive mobile conditional check in styling

[yknl]

Is there anything holding up this PR from release?

[janniks]

👋 Great PR, thanks for the contribution — we do currently require signing a CLA for legal reasons. Should be possible via CLA Assistant

[Imamah-Zafar]

👋 Great PR, thanks for the contribution — we do currently require signing a CLA for legal reasons. Should be possible via CLA Assistant

I actually did sign a CLA for this but every time it shows me this screen saying that the CLA has been signed but it still says pending on the PR.

[janniks]

Thanks, it might be possible that CLA can't connect the email to the GitHub user. Maybe try updating the commit email to the same as the GitHub user.

Sorry about these annoyances.

[diwakergupta]

@janniks for now we can use the screenshot as evidence of the signed CLA and merge this PR?

[janniks]

Thanks 🙏🏻