Dynamic Chains React Template

Connected with the user information dropdown showing
Connected with the chain list dropdown showing

Inspiration

I was inspired to make this project because of a dapp I'm building. I wanted my dapp to live on many different chains so that users could use whatever chain they prefer are already comfortable with.

What it does

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.

How we built it

I started by creating a new Nextjs 13 project with app routing, from here I created a blank header to live at the top of the app. Then the first thing I did was implement a custom rainbow button using Rainbowkit. Once the connect button was finished, I added a dropdown menu that allows you to change chains in a single click. Finally, I created a component that shows the user's balance in terms of their current chain's native currency, and USD. A big chunk of my code was taken directly from Scaffold-eth 2 and repurposed to fit my needs. 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.

Challenges we ran into

I ran into a handful of challenges like any project does, some of the big ones were getting the components from Scaffold-eth to work without having access to all of the hooks that Scaffold-eth does and getting the prices of native chain currencies in terms of USD.

Accomplishments that we're proud of

I'm honestly proud to have accomplished building this template. I know that it will be helpful for me in the future when I want to start building a frontend for any web3-related project and I hope that other people find this useful as well!

What we learned

I learned how to use Rainbowkit and Wagmi and even make custom components based on their already existing ones. I learned about different chains, for example, what their native currency is, what their block explorers look like, their chain IDs, and what some of them were created to do.

What's next for Dynamic Chains React Template

I have a few things in mind for the future of this project:

I want to refine and fine-tune the master branch to use the most efficient and least amount of code as possible.
I want to create different themes for the header so users can choose one that fits their dapp's theme.
I want to create example pages where you can interact with smart contracts on different chains.
I want to create different branches that are slight variations of the master branch, such as my already existing vanilla branch which doesn't contain any components relating to the user's balance.