evm-fe-bootstrap

EVM-FE-Bootstrap Repo

Stack

• Next.js
• Tailwind
• WAGMI
• Viem
• RainbowKit
• Typescript
• Abitype
• Rome (EsLint + Prettier on Steroids)

Getting Started

1. Run pnpm install to install dependencies.

2. Create .env.local file in root and add ALCHEMY_API_KEY

3. Run pnpm dev to begin developing.

4. Optional: This repository has an integration with Dependabot (in the .github folder). This means that if you set up the bot on Github, it will check dependencies every week and ask for a pull request to merge into the codebase. Furthermore, I have added in combine-prs-workflow, which will merge all of the Dependabot PR requests from each dependency update into one PR for you to merge. Click here to set up that PR merging, and click here to set up Dependabot

NextJS v13.4^ Help!

• Next.js v13.4^ - Next.js has recently fully released their production-stable version of a new directory architecture, and this repository has been updated to reflect it. Alot of files will need 'use client' on the top of the file to support hooks such as useState and useEffect. When I upgrade the repo to support Viem I will create some SSR (Server Side Rendering) .tsx files. Here are the App/ Directory docs: App Directory Docs.

• Page Directory Branch - If you do not wish to stay up to date with NextJS, this is the older version of the repository that uses NextJS's Page Directory infrastructure v13.3.0. However, it is not recommended to use this version as support for it will be decommissioned

• Pre-Viem Branch - If you do not wish to stay up to date with the WAGMI teams work, this is the older version of the repository that uses NextJS's App/ Directory v13.4^. However, it is not recommended to use this version as support for WAGMI + Ethers has and will continue to be decommissioned

EVM-Stack Explanation

• WAGMI - WAGMI is a React hook library that abstracts out a lot of vanilla ethers.js calls into easy-to-import functions which you just pass props into. There are 20+ hooks to choose from that range from chain information, contract calls, contract writes, balance queries, and more. Each one of these contains all the async properties you would need to create a much more interactive react application.

• Viem - Viem is a recently released low-level Ethereum interface abstraction module that WAGMI and RainbowKit utilizes under the hood. Created by the same developers as WAGMI and ABIType.

• RainbowKit - RainbowKit is an all-in-one multi-wallet library for React that is currently the best that is publicly available. The built-in modules handle wallet connection, disconnection, different types of wallets, display balances, support for multiple chains as well as chain-switching, etc. On top of this, Rainbowkit is extremely customizable stylistically, so developers can rebrand the modals/buttons how they wish. An example of this is provided in this repo, inside Navbar.tsx, where the 'Connect Wallet', 'Wrong Network', and 'Account' buttons have been restyled with tailwind syntax.

• ABIType - ABIType is Typescript for EVM contracts. ABIType provides utilities and type definitions for ABI properties and values, covering the Contract ABI Specification, as well as EIP-712 Typed Data.

Legacy-Stack Explanation

• Next.js - Next.js is a React framework for building fast, production-ready web applications with features such as server-side rendering, automatic code splitting, optimized image loading, and improved error handling. The framework also abstracts page routes, which can simplify and accelerate the development process. Additionally, Next.js has a fast hot reload feature that enables developers to see changes in real-time as they make modifications to their code, which is faster than many other solutions.

• Tailwind - A friend called it 'CSS for Zoomers', which is a pretty apt description. Tailwind is a CSS framework that provides pre-defined utility classes to style web applications consistently and responsively. The inline styling framework helps developers stay in the same .tsx file (and line as the HTML they are targeting) as the logic/component without having to move to a different file to style it. Additionally, the abbreviated syntax of Tailwind can increase developer efficiency once they have learned the syntax.

Tailwind Libaries

• I purposefully have not included tailwind component libraries in this repo to keep bloat low. A few that I would recommend would be:

1. Shadcn - Free
2. Flowbite - Freeminum
3. Daisyui - Free