fix: add new modal to allow selecting which wallet to use

[janniks]

This PR was published to npm with the alpha versions:

• connect npm install @stacks/connect@7.4.3-alpha.edd9f52.0 --save-exact
• connect-react npm install @stacks/connect-react@22.2.3-alpha.edd9f52.0 --save-exact
• connect-ui npm install @stacks/connect-ui@6.1.4-alpha.edd9f52.0 --save-exact

• A potential solution for #325
• Allows for selecting available providers, eliminating conflicts

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: edd9f52260bf8258dc944aeb08eda8c3b751a4b0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

| Name | Type | | --------------------- | ----- | | @stacks/connect-ui | Minor | | @stacks/connect | Minor | | @stacks/connect-react | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
connect-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 30, 2023 2:07pm

[ginny-d]

Here's the revised UI for this modal: https://www.figma.com/file/taNNRIyF5NvW2a2KmL1MB8/Connect-UI?type=design&node-id=0%3A1&mode=design&t=Lm6PwiJjB1L3ndLZ-1

Let me know if you have any comments!

[janniks]

@eugeniadigon thanks 🙏 Updated ✅ I made some minor changes

[beguene]

@janniks I added this to the hiro platform to test. The popup display the available wallets correctly

But when I installed Xverse and reloaded my page, then clicked on 'Connect', then in the popup I select Xverse, the Leather Wallet pops up instead

https://github.com/hirosystems/connect/assets/1501454/32b94998-697e-43e0-b396-2c1e4385c9c2

[ginny-d]

nit: Can you please remove the "www." from the Xverse URL?

[janniks]

But when I installed Xverse and reloaded my page, then clicked on 'Connect', then in the popup I select Xverse, the Leather Wallet pops up instead

Thanks @beguene I forgot to add an important handling of providers 🫡 Should be fixed now

[beguene]

@janniks I installed the latest version

    "@stacks/connect": "7.4.3-alpha.92feb0f.0",
    "@stacks/connect-react": "22.2.3-alpha.92feb0f.0",

But when I click on the 'Connect' button, I get this

I also tried with browser cache disabled.

[janniks]

Try adding npm install @stacks/connect-ui@6.1.4-alpha.92feb0f.0 --save-exact -- alpha versions are often not used exactly for dependencies, because npm doesn't know how to follow the semver for commit SHAs.

I just tried on the starters repo and it seems to work 👍

---

Thanks for testing 🙏 Helps a lot 🚀

[janniks]

Wonderful thanks for the review 🙇