ETHathon – EVM-based Smart Contract & DApp Boilerplate

This is an opinionated boilerplate/starterkit/scaffold to get up and running with smart contract & dApp development in the EVM-ecosystem.

It also comes in handy for hackathons. 👀

By Dennis Zoma 🧙‍♂️ & Scio Labs 💫.

Table of Contents:

1. The Stack
2. Projects using it
3. Getting Started
4. Development
   1. Quickstart
   2. VSCode Setup
   3. Customization
5. Deployment
6. FAQs & Troubleshooting

The Stack

• Package-Manager: pnpm
• Monorepo Tooling: turborepo
• Smart Contract Development: hardhat
  • Deploy & Address-Export: hardhat-deploy
  • Typescript-Types: typechain
• Frontend: next
  • Contract Interactions: wagmi, rainbowkit
  • Styling: chakra, tailwindcss, twin.macro, emotion
• Misc:
  • Linting & Formatting: eslint, prettier, husky, lint-staged

Projects using it

Below you find a few live projects that use ETHathon, a variation of it, or have a similar setup setup that inspired it:

• Yieldgate – Hackathon project that built a patreon-like platform to support projects with yield.
• Debate3 – Hackathon project that built discourse-like forums for DAOs.
• Stablecoins.wtf (frontend only) – Crypto Stablecoin Dashboard & Resources

Getting Started

# Install pnpm
npm i -g pnpm

# Install dependencies
pnpm install

# Copy & fill environments
# NOTE: Documentation of environment variables can be found in the according `.example` files
cp packages/frontend/.env.local.example packages/frontend/.env.local
cp packages/contracts/.env.example packages/contracts/.env

Development

Quickstart

# Generate contract-types, start local hardhat node, and start frontend with turborepo
pnpm dev

# Only start frontend (from root-dir)
# NOTE: Alternatively it can just be started via `pnpm dev` inside `packages/frontend`
pnpm frontend:dev

VSCode Setup

Workspace

I strongly reommend developing in VSCode by opening the workspace file located at .vscode/ethathon.code-workspace instead of just the directory. This has multiple advantages and assures a more predictable monorepo configuration. The first plugin listed below will help with getting used to it.

Plugins

I strongly recommend installing all plugins listed inside .vscode/extensions.json. They should be suggested automatically by VSCode.

Snippets

The file packages/frontend/.vscode/frontend.code-snippets contains useful snippets for quickly creating components & pages with Next.js, React, Typescript, and twin.macro. Example: Enter "Function Component with Props" in an empty .tsx file to get a FC component boilerplate with an empty TypeScript interface declaration and already imported 'twin.macro'. Check out the snippet-file itself to get a full overview.

Customization

There are multiple places where you need to insert your actual project name/identifier. I've highlighted most of these occurences with a /* TODO */ comment in the code. When installing the todo-tree plugin listed above you can easily replace them one by one.

Additionally, there are the following un-highlighted occurences:

• The name of the .vscode/*.code-workspace file
• The package names within package.json, packages/frontend/package.json, and packages/contracts/package.json
• The workspace dependency defined in packages/frontend/package.json

Deployment

Setting up a deployment via Vercel is pretty straightforward as build settings are preconfigured in vercel.json. To get started, press the Deploy button and enter the default environment variables listed below.

You can find mode documentation on those environment variables in packages/frontend/.env.local.example. Always make sure to include respective RPCs for supported chains and define them within packages/frontend/src/shared/environment.ts. Valid hardhat deployments under packages/contracts/deployments are mandatory for each supported chain.

FAQs & Troubleshooting