Skip to content

💭A reusable header template for developing web3 apps with Next 13 app routing on any chain.

Notifications You must be signed in to change notification settings

RohanNero/dynamic-chains-react-template

Repository files navigation

🍨 Dynamic Chains React Template

💭 This repo showcases a simple reusable header template for developing web3 apps with nextjs 13 app routing.

You can view a live example here

Image of the header

Image of the header with dropdown menu

💎 Features

The header consists of:

  1. A custom rainbow connect button that allows the user to connect to a handful of different wallets with support for additional ones being relatively simple to add.
  2. An option to display the user's address in the form of a QR code.
  3. A button linking the user to the chain's block explorer.
  4. An interactive dropdown menu containing a list of the apps supported chains that you can easily switch to by a single click.
  5. A reactive balance component displaying the user's balance in terms of the chain's native token and in USD next to the currency's symbol.

🧑‍🔧 Under the hood

This project was built using a handful of components from existing tools and frameworks such as:

  1. Viem 🌤️
  2. Wagmi 🌥️
  3. Rainbowkit 🌈
  4. Scaffold-eth-2 🏗️
  5. Chainlink 🔗

Special thanks to Avelous for his ETH-Splitter header which served as a big source of inspiration for this project!

And Special thanks to Carlos and Shiv Blonde for their major contributions to Scaffold-eth 2, which a huge chunk of the code here was pulled from.

Quickstart

Clone the repo

git clone https://github.com/RohanNero/dynamic-chains-react-template

Install the dependencies

npm install

Run the development server

npm run dev

Open http://localhost:3000 with your browser to see the result

Updating supported chains

To update which chains your app lives on, add/remove the chain's chainId from the includedChains array in /config/chainData.ts

If you are adding a chain that isn't listed inside /config/chainData.ts's chainData object, you will need to add a pricefeed address from Chainlink's list.

If a USD pricefeed doesn't exist on Ethereum mainnet for your chain, then you will need to provide an RPC url for your chain inside of the chainData object.

Preview

Connected

Image of entire screen

Connected while dropdown menu is down

Image of entire screen with dropdown menu

Not connected

Image of entire screen while not connected

When the user is on a chain that isn't supported

Wrong network image

When the user is connected and the login information menu is down

Login information menu

The QR code component

QR code

About

💭A reusable header template for developing web3 apps with Next 13 app routing on any chain.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published