💭 This repo showcases a simple reusable header template for developing web3 apps with nextjs 13 app routing.
You can view a live example here
The header consists of:
- 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.
- An option to display the user's address in the form of a QR code.
- A button linking the user to the chain's block explorer.
- An interactive dropdown menu containing a list of the apps supported chains that you can easily switch to by a single click.
- 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.
This project was built using a handful of components from existing tools and frameworks such as:
- Viem 🌤️
- Wagmi 🌥️
- Rainbowkit 🌈
- Scaffold-eth-2 🏗️
- 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.
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
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.
Connected
Connected while dropdown menu is down
Not connected
When the user is on a chain that isn't supported
When the user is connected and the login information menu is down
The QR code component
