DEV Community

Hunter Chang
Hunter Chang

Posted on • Updated on • Originally published at codebushi.com

Next.js with Web3Modal Example

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)

Collapse
 
afinetooth profile image
James Kessler • Edited

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:

  • Subscribing to changes and updating page elements when they change,
  • Displaying both MetaMask & Coinbase wallet options in the modal at the same time (triggering each one separately), and
  • Putting it all in the context of a Next.js app and deploying it to Vercel.

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

Collapse
 
lpatipat profile image
lpatipat

How does the modal itself actually pop up?

Collapse
 
imkane profile image
Kane

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?

Collapse
 
siddharthsharma94 profile image
siddharthsharma94 • Edited

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...

Collapse
 
pratos profile image
Prathamesh

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

Collapse
 
itsrahulmanas profile image
Rahul • Edited

How can we modify the modal that pops up??

Collapse
 
andrewpixelgoal3 profile image
andrewpixelgoal3

This is not working on iphone safari anymore!