Hey everyone! I recently built an example website using Next.js and Web3Modal. For those of you who don't know, Web3Modal is a simple way to connect your website to a Web3 / Ethereum wallet.
This is essential when building a decentralized application (dApp) because you need a wallet to interact with the Ethereum application.
Here is the example site: http://web3modal-example.vercel.app
Here is the source code: https://github.com/ChangoMan/web3modal-example
In order for the Web3Modal to work in your browser, you'll need the MetaMask Chrome extension, or a WalletConnect compatible wallet.
I was going to create a full blog post explaining how everything worked, but wasn't sure if anyone would be interested.
If you would like a more in depth explanation of the source code, let me know in the comments down below! Thanks for looking!
Top comments (7)
Hi Hunter,
Thanks for the example. I think a blog post would be great and welcomed by others who want to integrate the Web3Modal into their web3 dapps.
You do several things the main Web3Modal example & docs don't cover very clearly, like:
Those features would all be helpful to different readers. Plus you add a nice structure to the project that makes it easy to add / remove parts readers require or don't.
Thanks again,
James
How does the modal itself actually pop up?
Awesome! I'm trying to find a similar example that doesn't use TypeScript ... do you know of one? Or how to convert your code to JS?
Hey! thanks for this example. One issue is, I cant seem to get it to work on mobile web! I opened a github issue as well!
github.com/ChangoMan/web3modal-exa...
The modal won't be available on chrome mobile if you are using. You will be able to use this on Metamask browser or web3 enabled browsers only
How can we modify the modal that pops up??
This is not working on iphone safari anymore!