DEV Community

Hunter Chang
Hunter Chang

Posted on • Updated on • Originally published at

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:

Here is the source code:

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)

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,

lpatipat profile image

How does the modal itself actually pop up?

imkane profile image

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?

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!

pratos profile image

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

itsrahulmanas profile image
Rahul • Edited

How can we modify the modal that pops up??

andrewpixelgoal3 profile image

This is not working on iphone safari anymore!