Wallet Connect Modal Not Working?! [Vite / Replit / TSX]

[Shinixagami]

This Components Wallet Connect Features does not work.
Link

---

The Components Docs looks like this & I wished they also had detailed documents on the modal. Its just blank & most people ignore the Wallet Connect Option usually using MetaMask.

Main Problem:
-No docs on Wallet Modal
-Wallet Connect Pop-Up not showing
-This might also apply to other components providers like Trust Wallet.

Details:
-No issues pop-up on console
+I am using just the modal itself & calling it via my own button
+This issue also applies to the "ConnectButon" component which is used to call the modal.
+Hosted on Replit (Boosted)
+Uses TypeScript (TSX) -superscript to JSX react. They have no dif.
+Moralis Server
+Metamask is the only button that works (Probably because its native to most browsers & moralis)

Dependencies Installed:
+Vite
+React-Moralis
+Moralis
+Web3UiKit
+Ethers

Take a look at these documents from Web3Modal which is very similar (Which Web3UIKit should built upon.)
Link

Suggestions:
Web3Modal from Wallet Connect is cool -I wish they had the same docs that Web3UiKit has, I also wish it had more robust settings -as I want to be able to pick the Modals Providers & change more things on it. Its the gateway to web3, this should definitely be improved.

[truffleAh]

same , just 2 days ago it works when I click Metamask option , btw I use create-react-app

[zihangg]

+1, can't find any documentation as to how to actually utilize the WalletModal.

[alexnguyennz]

This seems to be related to the use of Vite which also doesn't play well with react-moralis e.g. MoralisWeb3/react-moralis#228 or MoralisWeb3/react-moralis#229. Other providers like Web3Auth also do not work in a new Vite/React project (but both will work fine in a regular Create-React-App/webpack project).

@zihangg You can check out the props for WalletModal here.

[BillyG83]

thanks for the feedback @Shinixagami @TaiyangAh @zihangg @alexnguyennz

i dont suppose any of you have a proposed solution or could help out here? Else we will pick this up soon but it could be a week to two as the team is very small and it is holiday season, sorry

[AbhinavMV]

Hey @Shinixagami , @TaiyangAh , @zihangg , @alexnguyennz
TY for using the kit. ❤️
Like @alexnguyennz mentioned in the above comment, this seems to be an issue with vite.
Wallet connect is not getting bundled with Vite. Please check out this solution - https://stackoverflow.com/questions/71067299/walletconnect-fails-to-get-bundled-with-vite

Wallet connect is working correctly in our storybook(It is bundled with webpack5). Checkout - https://web3ui.github.io/web3uikit/?path=/story/1-web3-connectbutton--default

[BillyG83]

I am closing this issue as soon this section of the repo will be depreciated so no further developed should be expected. Thanks

If you have questions please reach out to me on Moralis Discord