feat(frontend): initialize frontend project (#1)

* feat(frontend): init frontend project
* chore(frontend): spelling check
* feat(frontend): handle some files
* feat(frontend): link component

.github/workflows/frontend-spell-check.yml

@@ -0,0 +1,29 @@
+name: Frontend Spell Check
+
+on:
+  push:
+
+jobs:
+  spellcheck:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+        with:
+          submodules: 'true'
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 20
+
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run Check
+        run: npx cspell "**/*"
+        working-directory: frontend

.gitignore

@@ -130,3 +130,5 @@ dist
 .pnp.*
 .devbox
 .envrc
+
+.idea

frontend/.eslintrc.json

@@ -0,0 +1,208 @@
+{
+  "extends": "next/core-web-vitals",
+  "plugins": [
+    "no-relative-import-paths",
+    "eslint-plugin-simple-import-sort",
+    "@typescript-eslint/eslint-plugin",
+    "eslint-plugin-unicorn",
+    "eslint-plugin-import",
+    "eslint-plugin-react",
+    "eslint-plugin-react-hooks",
+    "unused-imports"
+  ],
+  "rules": {
+    "no-control-regex": "error",
+    "no-debugger": "warn",
+    "no-div-regex": "error",
+    "no-duplicate-case": "error",
+    "no-empty-character-class": "error",
+    "no-empty-pattern": "warn",
+    "no-ex-assign": "warn",
+    "no-extra-bind": "warn",
+    "no-extra-boolean-cast": "warn",
+    "no-extra-label": "warn",
+    "no-global-assign": "error",
+    "no-invalid-regexp": "error",
+    "no-irregular-whitespace": "warn",
+    "no-label-var": "error",
+    "no-misleading-character-class": "error",
+    "no-new-wrappers": "error",
+    "default-case-last": "error",
+    "eqeqeq": "error",
+    "import/no-empty-named-blocks": "warn",
+    "import/no-named-default": "warn",
+    "import/no-useless-path-segments": "warn",
+    "import/no-webpack-loader-syntax": "error",
+    "no-bitwise": "error",
+    "no-compare-neg-zero": "error",
+    "no-cond-assign": "error",
+    "no-constant-binary-expression": "error",
+    "no-constant-condition": "warn",
+    "no-constructor-return": "error",
+    "no-plusplus": "error",
+    "no-regex-spaces": "error",
+    "no-restricted-globals": [
+      "error",
+      "event",
+      "name",
+      "length",
+      "closed"
+    ],
+    "no-script-url": "error",
+    "no-self-assign": "error",
+    "no-self-compare": "error",
+    "no-sequences": "error",
+    "no-sparse-arrays": "error",
+    "no-template-curly-in-string": "error",
+    "no-unmodified-loop-condition": "error",
+    "no-unneeded-ternary": "warn",
+    "no-unreachable-loop": "error",
+    "no-unsafe-finally": "error",
+    "no-unused-labels": "warn",
+    "no-unused-vars": "off",
+    "no-useless-backreference": "error",
+    "no-useless-call": "warn",
+    "no-useless-catch": "warn",
+    "no-useless-concat": "warn",
+    "no-useless-escape": "warn",
+    "object-shorthand": "warn",
+    "prefer-const": "warn",
+    "prefer-numeric-literals": "warn",
+    "prefer-object-has-own": "warn",
+    "prefer-regex-literals": "warn",
+    "radix": "warn",
+    "spaced-comment": [
+      "warn",
+      "always",
+      {
+        "line": {
+          "markers": [
+            "/"
+          ]
+        }
+      }
+    ],
+    "unused-imports/no-unused-imports": "error",
+    "valid-typeof": "error",
+    "yoda": "warn",
+    "react/jsx-no-comment-textnodes": "warn",
+    "react/jsx-no-leaked-render": "error",
+    "react/jsx-no-script-url": "error",
+    "react/no-danger": "error",
+    "react/no-danger-with-children": "error",
+    "react/no-namespace": "error",
+    "react/no-unstable-nested-components": "error",
+    "react/void-dom-elements-no-children": "error",
+    "react/no-invalid-html-attribute": "warn",
+    "react/jsx-key": [
+      "warn",
+      {
+        "checkFragmentShorthand": true,
+        "checkKeyMustBeforeSpread": true,
+        "warnOnDuplicates": true
+      }
+    ],
+    "react/jsx-no-constructed-context-values": "warn",
+    "react/no-deprecated": "error",
+    "react/no-find-dom-node": "error",
+    "react/function-component-definition": [
+      "warn",
+      {
+        "namedComponents": "function-declaration",
+        "unnamedComponents": [
+          "function-expression",
+          "arrow-function"
+        ]
+      }
+    ],
+    "react/jsx-boolean-value": [
+      "error",
+      "never"
+    ],
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        "types": {
+          "{}": false,
+          "FC": {
+            "message": "To declare a component, you don't have to use FC to annotate it. To type something that accepts/is a React Component, use ComponentType<T>.",
+            "fixWith": "ComponentType"
+          },
+          "React.FC": {
+            "message": "To declare a component, you don't have to use React.FC to annotate it. To type something that accepts/is a React Component, use React.ComponentType<T>.",
+            "fixWith": "React.ComponentType"
+          }
+        },
+        "extendDefaults": true
+      }
+    ],
+    "@typescript-eslint/array-type": [
+      "warn",
+      {
+        "default": "array-simple"
+      }
+    ],
+    "@typescript-eslint/await-thenable": "warn",
+    "@typescript-eslint/consistent-type-assertions": [
+      "warn",
+      {
+        "assertionStyle": "as"
+      }
+    ],
+    "@typescript-eslint/dot-notation": "warn",
+    "@typescript-eslint/no-array-constructor": "warn",
+    "@typescript-eslint/no-base-to-string": "error",
+    "@typescript-eslint/no-confusing-non-null-assertion": "error",
+    "@typescript-eslint/no-duplicate-enum-values": "error",
+    "@typescript-eslint/no-extra-non-null-assertion": "warn",
+    "@typescript-eslint/no-for-in-array": "warn",
+    "@typescript-eslint/no-implied-eval": "error",
+    "@typescript-eslint/no-loop-func": "warn",
+    "@typescript-eslint/no-loss-of-precision": "error",
+    "@typescript-eslint/no-meaningless-void-operator": "warn",
+    "@typescript-eslint/no-mixed-enums": "error",
+    "@typescript-eslint/no-non-null-asserted-nullish-coalescing": "warn",
+    "@typescript-eslint/no-this-alias": "warn",
+    "@typescript-eslint/no-unnecessary-qualifier": "warn",
+    "@typescript-eslint/no-unnecessary-type-arguments": "warn",
+    "@typescript-eslint/no-unnecessary-type-constraint": "warn",
+    "@typescript-eslint/no-unsafe-declaration-merging": "error",
+    "@typescript-eslint/prefer-as-const": "warn",
+    "@typescript-eslint/prefer-enum-initializers": "warn",
+    "@typescript-eslint/prefer-for-of": "warn",
+    "@typescript-eslint/prefer-includes": "warn",
+    "@typescript-eslint/prefer-literal-enum-member": "error",
+    "@typescript-eslint/prefer-optional-chain": "warn",
+    "@typescript-eslint/prefer-reduce-type-parameter": "warn",
+    "@typescript-eslint/prefer-return-this-type": "error",
+    "@typescript-eslint/prefer-string-starts-ends-with": "warn",
+    "@typescript-eslint/require-array-sort-compare": "error",
+    "@typescript-eslint/no-misused-new": "error",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
+    "no-relative-import-paths/no-relative-import-paths": [
+      "warn",
+      {
+        "prefix": "@",
+        "rootDir": "src"
+      }
+    ]
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "project": "./tsconfig.json",
+    "warnOnUnsupportedTypeScriptVersion": false,
+    "allowAutomaticSingleRunInference": true
+  }
+}

frontend/.gitignore

@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+## Panda
+styled-system
+styled-system-studio
+
+## Lingui
+src/locales/*/*.ts
+src/locales/*/*.js

frontend/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "insertPragma": false,
+  "requirePragma": false,
+  "proseWrap": "preserve",
+  "endOfLine": "auto"
+}

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

frontend/cspell.json

@@ -0,0 +1,25 @@
+{
+  "version": "0.1",
+  "language": "en",
+  "words": [
+    "utxo"
+  ],
+  "ignoreWords": [
+    "lingui",
+    "pandacss",
+    "outdir"
+  ],
+  "ignorePaths": [
+    "pnpm-lock.yaml",
+    "package.json",
+    "cspell.json",
+    "tsconfig.tsbuildinfo",
+    "node_modules/**",
+    "dist/**",
+    "build/**",
+    ".next/**",
+    "public/**",
+    "src/locales/**",
+    "styled-system"
+  ]
+}

frontend/lingui.config.mjs

@@ -0,0 +1,15 @@
+/** @type {import('@lingui/conf').LinguiConfig} */
+const linguiConfig = {
+  locales: ["en", "zh-cn", "zh-tw"],
+  sourceLocale: "en",
+  catalogs: [
+    {
+      path: "<rootDir>/src/locales/{locale}/messages",
+      include: ["src"],
+    },
+  ],
+  format: "po",
+  compileNamespace: 'ts',
+}
+
+export default linguiConfig;

frontend/next.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  experimental: {
+    swcPlugins: [["@lingui/swc-plugin", {}]]
+  },
+};
+
+export default nextConfig;