Boilerplate Hardhat | Wagmi V2 | Viem V2 | RainbowKit V2 | Typescript | NextJS | ChakraUI

This project is a template that can serve as a basis for any new decentralized application project wanting to use hardhat for the development of smart contracts and Next.js and Wagmi for the user interface.

https://www.loom.com/share/9a3456032f4d4123a47201bb8f36add0

Preview

Back-end

Description

The smart contract is just a simple smart contract for storing and reading a digital value. It generates an event when the value is changed.

All commands must be executed in the backend folder (cd backend).

Configuration

First you need to create a .env file in the root folder of the backend. The file must have these properties:

PRIVATE_KEY="8[...]b" // Private key for deploying contract on mainnet or testnet (without "0x" prefix)
# or use seed phrase
#ACCOUNT_MNEMONIC=""
 
ETHERSCAN_API_KEY="D[...]V" // To verify you contract on etherscan after deployment
ALCHEMY_SEPOLIA_KEY="Q[...]O" // To deploy on Sepolia testnet

And if necessary modify the hardhat.config.ts if you want to use a specific RPC or use the seed phrase.

  etherscan: {
    apiKey: ETHERSCAN_API_KEY,
  },
  networks: {
     localhost: {
      url: "http://127.0.0.1:8545",
      chainId: 31337,
      // blockGasLimit: 999999999999999, // Use to increase the block gas limit when testing with coverage
    },
    sepolia: {
      url: `https://eth-sepolia.g.alchemy.com/v2/${ALCHEMY_SEPOLIA_KEY}`,
      accounts: [`0x${PRIVATE_KEY}`],
      // accounts: {
      //   mnemonic: ACCOUNT_MNEMONIC,
      // },
      chainId: 11155111,
    },
  },

Deploying onchain

• To deploy the local node, simply run you node with the command make node (or npx hardhat node) and execute the command make deploy (or npx hardhat run ./scripts/deploy.ts --network localhost). Hardhat will execute the deploy.ts script and use the first prefunding account to deploy the contract on the local chain.
• To deploy on sepolia testnet, don't forget to configure the .env file and execute the command make deploy chain=sepolia (or npx hardhat run ./scripts/deploy.ts --network sepolia). Hardhat will use the private key indicated in the .env file to deploy the contract on the specified chain (don't forget to have faucet tokens in the wallet).

After deploying the script will copy the ABI of the contract (generated at compilation and saved in the artifacts folder) into a folder in the front directory (editable in the script) This makes it easy to modify and redeploy your contract and test it without importing the ABI.

Testing contract (optional)

Launch the coverage command make test (or npx hardhat test) or make test coverage ( or npx hardhat coverage) to build and test the contract with or without the coverage. Do not hesitate to uncomment the instruction in hardhat.config.ts to increase the gas limit before running the tests with coverage.

Front-end

Description

The front is an interface which will allow interaction with the deployed smart contract. It allows the user to connect their wallet using the rainbow kit tool and to get and update the contract value on the blockchain. The front is already deployed and you can interact with it https://boilerplate-hardhat-nextjs-wagmi-rainbowkit.vercel.app

All commands must be executed in the frontend folder (cd frontend).

Configuration

If you want to deploy the front in local you must create a .env file in the root folder of the front-end. The file must have these properties:

NEXT_PUBLIC_WALLET_CONNECT=1[...]4 // Project ID created on wallet connect cloud to allow the user to connect via Wallet connect 

Deploying on localhost

Simply run the command npm run dev to deploy the front-end.