diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0094778 --- /dev/null +++ b/.gitignore @@ -0,0 +1,37 @@ +# dependencies +**/node_modules +/.pnp +.pnp.js + +# yarn +.pnp.* +.yarn/* +yarn.lock +.yarnrc + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel +.gitsigners + +# typescript +*.tsbuildinfo + +# turbo +.turbo \ No newline at end of file diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..fc18f3f --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,7 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +export NVM_DIR="$HOME/.nvm" +[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" + +npx lint-staged diff --git a/.lintstagedrc.json b/.lintstagedrc.json new file mode 100644 index 0000000..93d8d0a --- /dev/null +++ b/.lintstagedrc.json @@ -0,0 +1,4 @@ +{ + "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"], + "*.{md,html,css,json}": "prettier --write" +} diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..b316454 --- /dev/null +++ b/.npmrc @@ -0,0 +1,3 @@ +strict-peer-dependencies = false +auto-install-peers = true +enable-pre-post-scripts = true \ No newline at end of file diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..5edcff0 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v16 \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..c3830c7 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,8 @@ +{ + "semi": false, + "singleQuote": true, + "trailingComma": "es5", + "printWidth": 100, + "tabWidth": 2, + "useTabs": false +} diff --git a/.vscode/ethathon.code-workspace b/.vscode/ethathon.code-workspace new file mode 100644 index 0000000..147f15a --- /dev/null +++ b/.vscode/ethathon.code-workspace @@ -0,0 +1,44 @@ +{ + "folders": [ + { + "name": "_ROOT", + "path": "../" + }, + { + "name": "Frontend", + "path": "../packages/frontend" + }, + { + "name": "Hardhat", + "path": "../packages/hardhat" + } + ], + "settings": { + "files.exclude": { + "**/node_modules/": true, + "**/package-lock.json": true, + "**/pnpm-lock.yaml": true, + "**/yarn.lock": true, + "**/yarn-error.log": true, + "**/.yarn": true, + "**/.turbo": true, + "**/.next": true, + "packages/hardhat/cache": true + }, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.organizeImports": true, + "source.fixAll.eslint": true + }, + "peacock.color": "#00f5d4", + "workbench.colorCustomizations": { + "sash.hoverBorder": "#29ffe2", + "statusBar.background": "#00f5d4", + "statusBar.foreground": "#15202b", + "statusBarItem.hoverBackground": "#00c2a8", + "statusBarItem.remoteBackground": "#00f5d4", + "statusBarItem.remoteForeground": "#15202b" + } + } +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..58c9ec0 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,8 @@ +{ + "recommendations": [ + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "mikestead.dotenv", + "NomicFoundation.hardhat-solidity" + ] +} diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..4d20996 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..11583d4 --- /dev/null +++ b/README.md @@ -0,0 +1,52 @@ +# ETHathon Smart Contract & dApp Development Boilerplate + +![Typescript](https://img.shields.io/badge/Typescript-blue) +![Hardhat](https://img.shields.io/badge/Hardhat-yellow) +![Next.js](https://img.shields.io/badge/Next.js-gray) +![Tailwind](https://img.shields.io/badge/Tailwind-pink) + +This is a very opinionated boilerplate/starterkit/scaffold to get up and running with smart contract & dApp development. Comes in handy for hackathons. 👀 + +By [Dennis Zoma](https://twitter.com/dennis_zoma) 🤠 + +## Disclaimer + +This is **work-in-progress** and there are many open tasks: + +- [ ] Remove packages that are not actually used +- [ ] Give in instructions on how to initialize this (where to replace placeholder string etc.) +- [ ] Show a sample contract-interaction and build a very basic default layout +- [ ] Make Turborepo Configuration less verbose + +## The Stack + +- Package-Manager: `pnpm` +- Monorepo Tooling: `turborepo` +- Smart Contract Development: `hardhat` + - TS-Types: `typechain` +- Frontend: `next` + - Contract Interactions: `wagmi`, `rainbowkit` + - Styling: `tailwindcss` + - Styled Components: `twin.macro`, `emotion` +- Linting on Git Hooks: `husky`, `lint-staged` + +## Getting Started + +```bash +# Install pnpm +npm i -g pnpm + +# Install dependencies +pnpm install + +# Copy & fill environments +cp packages/frontend/.env.local.example packages/frontend/.env.local +cp packages/hardhat/.env.example packages/hardhat/.env +``` + +## Development + +```bash +# Generate contract-types & start frontend with turborepo +pnpm dev +``` diff --git a/package.json b/package.json new file mode 100644 index 0000000..35cb2b4 --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "name": "@ethathon/monorepo", + "version": "0.0.1", + "license": "MIT", + "private": true, + "workspaces": [ + "packages/*" + ], + "scripts": { + "dev": "turbo run dev", + "build": "turbo run build", + "format": "turbo run format", + "frontend:dev": "pnpm --filter frontend dev", + "frontend:start": "pnpm --filter frontend start", + "prepare": "husky install" + }, + "devDependencies": { + "husky": "^8.0.1", + "lint-staged": "^13.0.3", + "turbo": "^1.3.1", + "typescript": "^4.7.4", + "next": "^12.2.2" + }, + "pnpm": { + "overrides": { + "react-query": "4.0.0-beta.23" + } + } +} diff --git a/packages/frontend/.babelrc.js b/packages/frontend/.babelrc.js new file mode 100644 index 0000000..d1fb0d2 --- /dev/null +++ b/packages/frontend/.babelrc.js @@ -0,0 +1,14 @@ +module.exports = { + presets: [ + [ + 'next/babel', + { + 'preset-react': { + runtime: 'automatic', + importSource: '@emotion/react', + }, + }, + ], + ], + plugins: ['@emotion/babel-plugin', 'babel-plugin-macros'], +} diff --git a/packages/frontend/.env.local.example b/packages/frontend/.env.local.example new file mode 100644 index 0000000..f2f950b --- /dev/null +++ b/packages/frontend/.env.local.example @@ -0,0 +1,9 @@ +NEXT_PUBLIC_PRODUCTION_MODE=false +NEXT_PUBLIC_URL=http://localhost:3000 + +NEXT_PUBLIC_DEFAULT_CHAIN=1337 +NEXT_PUBLIC_SUPPORTED_CHAINS=[1337, 4] + +NEXT_PUBLIC_RPC_HARDHAT=TODO +NEXT_PUBLIC_RPC_RINKEBY=TODO +NEXT_PUBLIC_RPC_MAINNET=TODO \ No newline at end of file diff --git a/packages/frontend/.eslintignore b/packages/frontend/.eslintignore new file mode 100644 index 0000000..70cb7bd --- /dev/null +++ b/packages/frontend/.eslintignore @@ -0,0 +1,7 @@ +**/node_modules/* +**/out/* +**/.next/* +**/artifacts/* +**/sql/* +**/public/* +**/types/typechain/* \ No newline at end of file diff --git a/packages/frontend/.eslintrc.json b/packages/frontend/.eslintrc.json new file mode 100644 index 0000000..b881813 --- /dev/null +++ b/packages/frontend/.eslintrc.json @@ -0,0 +1,24 @@ +{ + "root": true, + "parser": "@typescript-eslint/parser", + "plugins": ["@typescript-eslint"], + "extends": [ + "eslint:recommended", + "next/core-web-vitals", + "plugin:@typescript-eslint/recommended", + "prettier" + ], + "rules": { + "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/no-empty-interface": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-non-null-assertion": "warn", + "@typescript-eslint/no-empty-function": "warn", + "react/no-children-prop": "warn", + "react-hooks/exhaustive-deps": "off", + "react/jsx-no-target-blank": "off", + "no-extra-boolean-cast": "off", + "prefer-const": "warn" + } +} diff --git a/packages/frontend/.gitignore b/packages/frontend/.gitignore new file mode 100644 index 0000000..efbffd9 --- /dev/null +++ b/packages/frontend/.gitignore @@ -0,0 +1,40 @@ +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo + +# typechain +src/artifacts +src/types/typechain/** \ No newline at end of file diff --git a/packages/frontend/.prettierignore b/packages/frontend/.prettierignore new file mode 100644 index 0000000..a285a1e --- /dev/null +++ b/packages/frontend/.prettierignore @@ -0,0 +1,7 @@ +node_modules +.next +yarn.lock +package-lock.json +src/public +src/types/typechain +src/artifacts \ No newline at end of file diff --git a/packages/frontend/next-env.d.ts b/packages/frontend/next-env.d.ts new file mode 100644 index 0000000..4f11a03 --- /dev/null +++ b/packages/frontend/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/packages/frontend/next.config.js b/packages/frontend/next.config.js new file mode 100644 index 0000000..44a45e6 --- /dev/null +++ b/packages/frontend/next.config.js @@ -0,0 +1,11 @@ +/* eslint-env node */ +// @ts-check + +/** + * @type {import('next').NextConfig} + **/ +const nextConfig = { + /* config options here */ +} + +module.exports = nextConfig diff --git a/packages/frontend/package.json b/packages/frontend/package.json new file mode 100644 index 0000000..ade3286 --- /dev/null +++ b/packages/frontend/package.json @@ -0,0 +1,85 @@ +{ + "name": "@ethathon/frontend", + "license": "MIT", + "version": "0.0.1", + "babelMacros": { + "twin": { + "preset": "emotion" + } + }, + "scripts": { + "dev": "NODE_ENV=development next dev", + "build": "NODE_ENV=production next build", + "start": "NODE_ENV=production next start", + "type-check": "tsc --pretty --noEmit", + "lint": "eslint --ext .js,.jsx,.ts,.tsx --fix .", + "format": "prettier --write .", + "test": "jest --passWithNoTests" + }, + "dependencies": { + "@apollo/client": "^3.6.9", + "@chakra-ui/react": "^2.2.4", + "@emotion/css": "^11.9.0", + "@emotion/react": "^11.9.3", + "@emotion/server": "^11.4.0", + "@emotion/styled": "^11.9.3", + "@headlessui/react": "^1.6.6", + "@rainbow-me/rainbowkit": "^0.4.2", + "@supabase/gotrue-js": "^1.22.20", + "@supabase/supabase-js": "^1.35.4", + "axios": "^0.27.2", + "cookies-next": "^2.1.1", + "copy-to-clipboard": "^3.3.1", + "dayjs": "^1.11.3", + "ethereumjs-util": "^7.1.5", + "ethers": "^5.6.9", + "framer-motion": "^6.5.1", + "graphql": "^16.5.0", + "graphql-request": "^4.3.0", + "next": "^12.2.0", + "next-seo": "^5.4.0", + "next-themes": "^0.2.0", + "nprogress": "^0.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-hook-form": "^7.33.1", + "react-hot-toast": "^2.3.0", + "react-icons": "^4.4.0", + "react-tippy": "^1.4.0", + "sharp": "^0.30.7", + "use-async-effect": "^2.2.6", + "wagmi": "^0.5.9" + }, + "devDependencies": { + "@babel/core": "^7.18.9", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.18.6", + "@emotion/babel-plugin": "^11.9.2", + "@ethersproject/abi": "^5.6.4", + "@ethersproject/providers": "^5.6.8", + "@tailwindcss/typography": "^0.5.4", + "@testing-library/react": "^13.3.0", + "@types/downloadjs": "^1.4.3", + "@types/jest": "^28.1.6", + "@types/node": "^16.11.41", + "@types/nprogress": "^0.2.0", + "@types/react": "^18.0.15", + "@types/three": "^0.141.0", + "@typescript-eslint/eslint-plugin": "^5.30.7", + "@typescript-eslint/parser": "^5.30.7", + "babel-jest": "^28.1.3", + "babel-loader": "^8.2.5", + "babel-plugin-macros": "^3.1.0", + "eslint": "^8.20.0", + "eslint-config-next": "^12.2.2", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-react": "^7.30.1", + "jest": "^28.1.3", + "jest-watch-typeahead": "^2.0.0", + "next-sitemap": "^3.1.11", + "prettier": "^2.7.1", + "tailwindcss": "^3.1.6", + "twin.macro": "3.0.0-rc.3", + "typescript": "^4.7.4" + } +} diff --git a/packages/frontend/src/addresses/1337.ts b/packages/frontend/src/addresses/1337.ts new file mode 100644 index 0000000..9633a9d --- /dev/null +++ b/packages/frontend/src/addresses/1337.ts @@ -0,0 +1,3 @@ +export const ContractAddresses_1337 = { + Lock: '0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512', +} diff --git a/packages/frontend/src/addresses/addresses.ts b/packages/frontend/src/addresses/addresses.ts new file mode 100644 index 0000000..9d6c4b2 --- /dev/null +++ b/packages/frontend/src/addresses/addresses.ts @@ -0,0 +1,3 @@ +import { ContractAddresses_1337 } from './1337' +export const ContractAddresses = { '1337': ContractAddresses_1337 } +export type ContractAddressesKey = keyof typeof ContractAddresses diff --git a/packages/frontend/src/components/layout/CenterBody.tsx b/packages/frontend/src/components/layout/CenterBody.tsx new file mode 100644 index 0000000..847da93 --- /dev/null +++ b/packages/frontend/src/components/layout/CenterBody.tsx @@ -0,0 +1,3 @@ +import tw from 'twin.macro' + +export const CenterBody = tw.div`h-full flex flex-col justify-center items-center relative` diff --git a/packages/frontend/src/components/layout/Layout.tsx b/packages/frontend/src/components/layout/Layout.tsx new file mode 100644 index 0000000..5c3e6de --- /dev/null +++ b/packages/frontend/src/components/layout/Layout.tsx @@ -0,0 +1,10 @@ +import { FC, PropsWithChildren } from 'react' +import 'twin.macro' + +export const Layout: FC = ({ children }) => { + return ( + <> +
{children}
+ + ) +} diff --git a/packages/frontend/src/components/layout/Wrapper.tsx b/packages/frontend/src/components/layout/Wrapper.tsx new file mode 100644 index 0000000..77ef6da --- /dev/null +++ b/packages/frontend/src/components/layout/Wrapper.tsx @@ -0,0 +1,12 @@ +import tw, { styled } from 'twin.macro' + +export const Wrapper = styled.div({ + ...tw`relative mx-auto w-full max-w-[1600px] px-4 py-4 sm:(px-8 py-6) lg:py-8`, + variants: { + noVerticalPadding: { + true: tw`py-0!`, + }, + }, +}) + +export const NegativeWrapper = tw.div`relative -mx-4 -my-4 sm:(-mx-6) lg:(-mx-8 -my-6)` diff --git a/packages/frontend/src/pages/_app.tsx b/packages/frontend/src/pages/_app.tsx new file mode 100644 index 0000000..c412d9a --- /dev/null +++ b/packages/frontend/src/pages/_app.tsx @@ -0,0 +1,80 @@ +import { Layout } from '@components/layout/Layout' +import { cache } from '@emotion/css' +import { CacheProvider } from '@emotion/react' +import { RainbowKitProvider } from '@rainbow-me/rainbowkit' +import '@rainbow-me/rainbowkit/styles.css' +import { chains, wagmiClient } from '@shared/wagmiClient' +import GlobalStyles from '@styles/GlobalStyles' +import type { AppProps } from 'next/app' +import Head from 'next/head' +import Router from 'next/router' +import NProgress from 'nprogress' +import { Toaster } from 'react-hot-toast' +import { WagmiConfig } from 'wagmi' + +// Router Loading Animation with @tanem/react-nprogress +Router.events.on('routeChangeStart', () => NProgress.start()) +Router.events.on('routeChangeComplete', () => NProgress.done()) +Router.events.on('routeChangeError', () => NProgress.done()) + +function MyApp({ Component, pageProps }: AppProps) { + return ( + <> + {/* SEO TODO */} + {/* */} + + + + + {/* Favicon TODO */} + {/* + + + + + + + + */} + + + + + + + + + + + + + + + + + ) +} + +export default MyApp diff --git a/packages/frontend/src/pages/_document.tsx b/packages/frontend/src/pages/_document.tsx new file mode 100644 index 0000000..dc0d4e0 --- /dev/null +++ b/packages/frontend/src/pages/_document.tsx @@ -0,0 +1,34 @@ +import { extractCritical } from '@emotion/server' +import Document, { Head, Html, Main, NextScript } from 'next/document' +import { Fragment, ReactFragment } from 'react' + +export default class MyDocument extends Document { + static async getInitialProps(ctx: any) { + const initialProps = await Document.getInitialProps(ctx) + const critical = extractCritical(initialProps.html) + initialProps.html = critical.html + initialProps.styles = ( + + {initialProps.styles} +