DEV Community

Hunter Chang
Hunter Chang

Posted on

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!

Discussion (6)

Collapse
afinetooth profile image
James Kessler • Edited on

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 on

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 on

How can we modify the modal that pops up??