chore: add boilerplate (#1)

# 🤖 Linear
Closes WOR-93
Closes WOR-94

.env.example

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_RPC_URL= # Example: https://localhost:8545
+NEXT_PUBLIC_PROJECT_ID= # ProjectID from WalletConnect
+NEXT_PUBLIC_ALCHEMY_KEY= # API key from Alchemy 

.eslintrc.cjs

@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'prettier',
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:jsx-a11y/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/typescript',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+    'plugin:prettier/recommended',
+    'plugin:@next/next/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};

.github/pull_request_template.md

@@ -1,3 +1,10 @@
-# 🤖 Linear
-Closes WOR-XXX
-
+## Describe your changes
+
+## Issue ticket number and link
+
+## Checklist before requesting a review
+
+- [ ] I have conducted a self-review of my code.
+- [ ] If it is a core feature, I have included comprehensive tests.
+- [ ] Do we need to implement analytics?
+- [ ] Will this be part of a product update? If yes, please write one sentence about this update.

.github/workflows/build-test.yml

@@ -0,0 +1,78 @@
+name: Build and Format
+
+on:
+  pull_request:
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '21.4'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
+
+      - name: Install project dependencies
+        run: pnpm install --frozen-lockfile --prefer-frozen-lockfile
+
+      - name: Build project dependencies
+        run: pnpm run build
+        env:
+          NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
+
+  check:
+    name: Check for crypto
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Check for crypto
+        uses: defi-wonderland/check-crypto-action@v1
+        with:
+          title: Check private key and notify
+          branch: dev
+          only_notify: true
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+  test:
+    name: Lint and Test
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.15
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '21.4'
+          cache: 'pnpm'
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Build the project
+        run: pnpm run build
+
+      - name: Run Prettier
+        run: pnpm prettier
+
+      - name: Run Linter
+        run: pnpm lint
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v5
+        with:
+          start: pnpm start, pnpm test

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.next
+next-env.d.ts
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.eslintcache
+.env
+tsconfig.tsbuildinfo

.husky/pre-commit

@@ -0,0 +1,7 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+
+npx lint-staged
+
+. "$(dirname "$0")/wonderland/find-crypto-keys.sh"

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "printWidth": 120,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "bracketSpacing": true
+}

README.md

@@ -1 +1,46 @@
-# worldid-ui
+# Web3 React Boilerplate
+
+## Features
+
+- Modern React setup with the latest tools and libraries.
+- Boilerplate for building web3-enabled applications.
+- Example unit and integration tests included.
+- Code linting and formatting for clean and maintainable code.
+- GitHub workflows for continuous integration.
+
+## Setup
+
+1. Clone this repository.
+2. Copy the `.env.example` file to `.env` and fill in the variables.
+3. Install the project dependencies by running:
+
+   ```bash
+   pnpm install
+   ```
+
+## Available Scripts
+
+Available scripts that can be run using `pnpm`:
+
+| Script         | Description                                                  |
+| -------------- | ------------------------------------------------------------ |
+| `dev`          | Start the development server using Next.                     |
+| `build`        | Build the project for production.                            |
+| `preview`      | Preview the production build using Next.                     |
+| `lint`         | Run ESLint on the source code to check for coding standards. |
+| `lint:fix`     | Run ESLint and automatically fix code formatting issues.     |
+| `prettier`     | Check code formatting using Prettier.                        |
+| `prettier:fix` | Format code using Prettier and automatically fix issues.     |
+| `format`       | Run Prettier and ESLint to format and fix code issues.       |
+| `format:check` | Check code formatting and linting without making changes.    |
+| `test`         | Run tests using Cypress                                 |
+| `test:watch`   | Run Cypress in watch mode.                                    |
+
+## Technologies Used
+
+This boilerplate leverages the latest technologies, including:
+
+- [NextJS](https://nextjs.org/)
+- [Wagmi](https://wagmi.sh/)
+- [Viem](https://viem.sh/)
+- [Rainbowkit](https://www.rainbowkit.com/)

cypress.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+  },
+});

cypress/cypress.d.ts

@@ -0,0 +1,5 @@
+declare namespace Cypress {
+  interface Chainable {
+    getByTestId(testId: string): Chainable<JQuery<HTMLElement>>;
+  }
+}

cypress/e2e/spec.cy.ts

@@ -0,0 +1,6 @@
+describe('Renders every component', () => {
+  it('Renders App component', () => {
+    cy.visit('/');
+    cy.getByTestId('boilerplate-title').should('exist');
+  });
+});

cypress/support/commands.ts

@@ -0,0 +1,4 @@
+/// <reference types="cypress" />
+Cypress.Commands.add('getByTestId', (testId) => {
+  return cy.get(`[data-testid="${testId}"]`);
+});

cypress/support/e2e.ts

@@ -0,0 +1 @@
+import './commands';

cypress/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+      "noEmit": true,
+      "types": ["cypress"],
+    },
+    "include": ["**/*.ts"]
+  }
+

next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package.json

@@ -0,0 +1,76 @@
+{
+  "name": "web3-react-boilerplate",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "license": "MIT",
+  "author": "Wonderland",
+  "engines": {
+    "node": ">=18.17.0"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start -p 3000",
+    "preview": "next start",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+    "lint:fix": "pnpm run lint -- --fix",
+    "prettier": "prettier src --check",
+    "prettier:fix": "pnpm run prettier -- --write",
+    "format": "pnpm run prettier:fix && yarn run lint:fix",
+    "format:check": "pnpm run prettier && yarn run lint",
+    "prepare": "husky install && wonderland-crypto-husky-checks install",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "test": "pnpm cypress:run"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
+    "src/**/*.{js,jsx,ts,tsx,css,scss,md,html}": "prettier --write --ignore-unknown"
+  },
+  "dependencies": {
+    "@emotion/cache": "11.11.0",
+    "@emotion/react": "11.11.3",
+    "@emotion/server": "11.11.0",
+    "@emotion/styled": "11.11.0",
+    "@mui/icons-material": "5.15.6",
+    "@mui/material": "5.15.14",
+    "@mui/material-nextjs": "5.15.11",
+    "@next/eslint-plugin-next": "14.1.3",
+    "@rainbow-me/rainbowkit": "2.0.2",
+    "@tanstack/react-query": "5.28.0",
+    "next": "14.1.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "6.15.0",
+    "viem": "2.8.6",
+    "wagmi": "2.5.7"
+  },
+  "devDependencies": {
+    "@defi-wonderland/crypto-husky-checks": "1.3.0",
+    "@testing-library/jest-dom": "6.1.2",
+    "@testing-library/react": "14.2.1",
+    "@testing-library/user-event": "14.4.3",
+    "@types/lodash.merge": "4.6.7",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
+    "@typescript-eslint/eslint-plugin": "6.0.0",
+    "@typescript-eslint/parser": "6.0.0",
+    "cypress": "13.7.0",
+    "eslint": "8.45.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "0.4.3",
+    "husky": "8.0.3",
+    "jsdom": "24.0.0",
+    "lodash.merge": "4.6.2",
+    "prettier": "3.0.3",
+    "start-server-and-test": "2.0.3",
+    "styled-components": "6.0.7",
+    "typescript": "5.4.2"
+  }
+}