Build On Base Boilerplate (BoBB)

Simple, minimalistic and opinionated Next.js + Foundry boilerplate to start developing Onchain Apps on Base.

This boilerplate is designed to work with the following stack:

Foundry
Next.js - Next.js 14.0.2, with App router
Anvil
RainbowKit
Op-Wagmi

Features

Automatic React hooks generation (see guide below)
Wallet integration with RainbowKit
Next.JS app router integration
Bring your own UI framework
Tailwind CSS integration

Requirements

NVM
Yarn # Once you run nvm use install it globally via corepack enable
Foundry
Alchemy provider
Wallet connect id

*Note: Since WalletConnect requires a projectId and it is free and easy to get, we recommend getting a projectId from WalletConnect Cloud.

Architecture 📦

The project consist of 2 packages:

App - Next.js 14.0.2, with App router
Foundry - Smart contract project

Getting started

Clone the repository and install dependencies

$ git clone https://github.com/edsonalcala/dapp-boilerplate

$ nvm use

$ yarn

Set values in the .env file. You will need:

MNEMONIC
BASESCAN_API_KEY
CHAIN_ID
NEXT_PUBLIC_WALLET_CONNECT_ID
NEXT_PUBLIC_ALCHEMY_ID

Check the .env.sample file that includes some default values.

In order to get a BaseScan API Key, please refer to this guide.

Start Anvil by running:

yarn chain

On a second terminal, deploy the smart contracts contract to the local Anvil instance by running:

yarn deploy

On a new terminal, start the NextJS app by running:

yarn dev

Automatic React hooks generation

This boilerplate contains a Wagmi integration that automatically generates React hooks, so you don't need to copy ABIs anymore or addresses from your deployed contracts. You can see an example in app/src/views/ConnectedView.tsx, where we read the value of the storedData of the SimpleStorage contract via:

const { data: simpleStorageValue } = useSimpleStorageRead({
  functionName: 'storedData'
})

Notice the hook import:

import { useSimpleStorageRead } from '@app/generated'

The hooks generated are in the app/src/generated.ts file. You can customise this output path in the wagmi.config.ts.

export default defineConfig({
  out: 'src/generated.ts',
  plugins: [
    foundry({
      project: '../foundry',
      deployments: require('../foundry/deployments/deploymentAddresses.json')
    }),
    react()
  ],
})

The wagmi.config.ts also contains a reference to the deploymentAddresses.json. This file is required in order to generate the React hooks and is generated by the Deploy.s.sol file in the foundry project.

However, in order to generate this file we need to explicitly tell to our solidity script to do the exporting.

The foundry/script/Deploy.s.sol contains at the end of the run function the following:

_startExport();
_addExport("SimpleStorage", address(simpleStorage));
_stopExport();

With these lines of code we are explicitly exporting into the deploymentAddresses.json the name of the contract with its respective address per network.

{
  "SimpleStorage": {
    "31337": "0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9"
  }
}

If you need to add more contracts, you will do it as:

_startExport();
_addExport("Contract1", address(contract1));
_addExport("Contract2", address(contract2));
_addExport("Contract3", address(contract3));
_stopExport();

Roadmap

[ ] Add deploy to vercel button

[ ] Add support for op-wagmi

[ ] Integrate React hot toast or React toastify

wbnns/dapp-boilerplate