Web3 Hackathon Template

This template repo includes:

• Typescript
• Next.js
• Foundry
• wagmi/viem
• RainbowKit
• tailwind
• Vercel

Getting Started

1. Install Foundry

Install Foundry to build contracts:

curl -L https://foundry.paradigm.xyz | bash

2. Install Dependencies

Ensure you're using node version >=18.17.0. We suggest using nvm:

nvm install 18.17.0
nvm use 18.17.0

Install node dependencies:

yarn install

3. Set Env Vars

Copy the environment variable example file:

cp .env.example .env

Open .env and set the following values:

• ANVIL_FORK_URL: The RPC that your local chain will initially fork from. We suggest setting up an Alchemy Sepolia node for this.
• ETHERSCAN_API_KEY: Your Etherscan API Key for deployed contract verification.

Finally, open wagmi.ts and set a Wallet Connect Project ID to ensure the Connect Wallet button works.

const projectId = WALLET_CONNECT_PROJECT_ID;

Development

Running Locally

Open a terminal and run:

yarn dev:foundry

This will:

• Start a Next.js dev server,
• Start the @wagmi/cli in watch mode to listen to changes in our contracts, and instantly generate code,
• Start an Anvil instance (Mainnet Fork) on an RPC URL.

Open localhost:3000 in your browser. Once the webpage has loaded, changes made to files inside the src/ directory (e.g. src/pages/index.tsx) will automatically update the webpage.

Generating hooks

This project comes with @wagmi/cli built-in, which means you can generate wagmi-compatible (type safe) ABIs & React Hooks straight from the command line. To generate ABIs & React Hooks from your Foundry project (in ./contracts), you can run:

yarn wagmi

This will use the wagmi config (wagmi.config.ts) to generate a src/generated.ts file which will include your ABIs & Hooks that you can start using in your project.

Here is an example of where Hooks from the generated file is being used.

Deployment

Build

Generate [wagmi] handles and next build

yarn build

Deploy Contracts

Once Anvil is running, deploy smart contract to the Anvil network:

yarn deploy:anvil

Start developing

Now that your contract has been deployed to Anvil, you can start playing around with your contract straight from the web interface!

Head to localhost:3000 in your browser, connect your wallet, and try increment the counter on the Foundry chain.

Tip: If you import an Anvil private key into your browser wallet (MetaMask, Coinbase Wallet, etc) – you will have 10,000 ETH to play with 😎. The private key is found in the terminal under "Private Keys" when you start up an Anvil instance with npm run dev:foundry.

Hosting

Learn more

To learn more about Next.js, Foundry or wagmi, check out the following resources:

• Foundry Documentation – learn more about the Foundry stack (Anvil, Forge, etc).
• wagmi Documentation – learn about wagmi Hooks and API.
• wagmi Examples – a suite of simple examples using wagmi.
• @wagmi/cli Documentation – learn more about the wagmi CLI.
• Next.js Documentation learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Tailwind Documentation - learn more about Tailwind.