Repository files navigation

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. 👀

ByDennis 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

• 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

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

# Install pnpmnpm i -g pnpm# Install dependenciespnpm install# Copy & fill environments# NOTE: Documentation of environment variables can be found in the according `.example` filescp packages/frontend/.env.local.example packages/frontend/.env.localcp packages/contracts/.env.example packages/contracts/.env

# Generate contract-types, start local hardhat node, and start frontend with turborepopnpm dev# Only start frontend (from root-dir)# NOTE: Alternatively it can just be started via `pnpm dev` inside `packages/frontend`pnpm frontend:dev

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.

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

The filepackages/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 aFC component boilerplate with an empty TypeScript interface declaration and already imported 'twin.macro'. Check out the snippet-file itself to get a full overview.

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 thetodo-tree pluginlisted 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 withinpackage.json,packages/frontend/package.json, andpackages/contracts/package.json
• The workspace dependency defined inpackages/frontend/package.json

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

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