Hunter Chang

Posted on Jul 19, 2021 • Updated on Aug 22, 2023 • Originally published at codebushi.com

Next.js with Web3Modal Example

#nextjs #ethereum #web3 #dapps

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)

James Kessler • Mar 26 '22 • 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