dAppBooster

dAppBooster is a template to help you in the development of blockchain frontend applications. It aims to provide an opinionated set of tools and best practices to speed up the development process and make it more reliable.

Table of Contents

1. Requirements
2. Installation
3. Configuration
4. Development
5. Advanced configuration
6. Contributing
7. Tools and libraries

Requirements

• Node v20+
• pnpm

Installation

Ensure pnpm is installed (https://pnpm.io/) and clone the repository.

# Clone the repository
git clone git@github.com:BootNodeDev/dAppBooster.git my-dapp

# Change the directory
cd my-dapp

# Checkout the latest release
git checkout main

# Create a local .env file
cp .env.example .env.local

# Install the dependencies
pnpm i

Now you might want to change your project's name and description in the package.json file.

{
  "name": "my-dapp",
  "description": "My dApp"
}

Also you might want to change your project's remote repository to a different one.

# Change the remote repository
git remote set-url origin

Configuration

Configuration File

Configure the appropriate settings in the .env.local file. Most vars are optional and they should be self-explanatory.

Development

Serve dev mode

pnpm dev

You can start modifying the content of the home page by editing src/components/pageComponents/home/index.tsx. The page auto-updates as you edit the file.

You can also modify and see how our Web3 components work in the demos folder.

Build for production

pnpm build

Serve production build

pnpm preview

Basic folder structure

• src/: Source code
  • components/: Reusable components
    • components/sharedComponents: Components shared across multiple pages
    • components/pageComponents: Components specific to a page
  • routes/: TanStack Router routes
  • styles/: App styles

Advanced configuration

Networks

To add / remove / edit a network supported by the dApp you can do it directly in the networks.config.ts file.

1. Import the supported network of your choice, say base.

- import { mainnet, optimismSepolia, sepolia } from 'viem/chains'
+ import { base, mainnet, optimismSepolia, sepolia } from 'viem/chains'

...

- export const chains = [mainnet, optimismSepolia, sepolia] as const
+ export const chains = [base, mainnet, optimismSepolia, sepolia] as const

2. Include it in the trasports, using the default RPC provided by wagmi/viem...

export const transports: RestrictedTransports = {
    ...
+   [base.id]: http(env.PUBLIC_RPC_BASE),
}

Specifying the RPC

If you want to use an RPC different from the one provided by wagmi

1. Define the env variable

+ PUBLIC_RPC_BASE=https://base.llamarpc.com

2. Import it in the src/env.ts file

export const env = createEnv({
  client: {
    ...
+   PUBLIC_RPC_BASE: z.string().optional(),
  },
})

Note: if not specified, it will be undefined making the app to use the wagmi-defined RPC.

ESLint configuration for production releases

If you are developing a production application, we recommend updating the configuration file to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended for plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked

Contributing

If you want to contribute to this project, please read the contributing guidelines. Issues and pull requests are welcome!

(Very) opinionated list of tools and libraries

Vite

Oficial site

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. It uses SWC for fast refresh.

React SWC

Github repository

TanStack

React Query

Official docs

React Virtual

Official docs

React Router

Official docs

Serve dev mode watching for routes changes:

 pnpm routes:watch

Manually generate routeTree.gen file:

 pnpm routes:generate

Dev tools

Dev tools are not visible in production mode.

Wallet connection

You should be able to seamlessly switch between several libraries for wallet connection.

Connectkit

Official docs | Setup file

Rainbowkit

Official docs | Setup file

Web3modal

Official docs | Setup file

Number Formatting

Conedison

Github repository | numberFormat.ts | numberFormat.test.ts

Styles

Modern Normalize

Github repository

Styled Components

Official docs | Global CSS vars | Global styles

Stylelint

Official docs | Setup file

The official extension is recommended if you're using VSCode.

Note: check the "Extension Settings" section if you want errors to be fixed on save, etc.

Next Themes

Github repository | Light theme CSS vars | Dark theme CSS vars

Faceless UI Modal

Github repository | Official docs

React Hot Toast

Github repository

Vercel Web Analytics

Official docs

Simply Enable Web Analytics in Vercel within your Vercel project. Everything else is already integrated and ready to go.