frontend: Add vite react boilerplate

oasisprotocol · Nov 5, 2024 · 18ee3b3 · 18ee3b3
1 parent 4e3fe10
commit 18ee3b3
Show file tree

Hide file tree

Showing 15 changed files with 944 additions and 2,428 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -2,18 +2,18 @@
 
 /** @type { import('eslint').Linter.ConfigType } */
 module.exports = {
-    root: true,
-    env: { browser: true, es2020: true },
-    extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:react-hooks/recommended',
-        'eslint-config-prettier',
-    ],
-    parser: '@typescript-eslint/parser',
-    plugins: ['react-refresh'],
-    rules: {
-        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
-        indent: ['error', 2, { SwitchCase: 1 }],
-    },
-}
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'eslint-config-prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    indent: ['error', 2, { SwitchCase: 1 }],
+  },
+}
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
@@ -2,29 +2,29 @@
 
 /** @type { import("prettier").ConfigType } */
 module.exports = {
-    printWidth: 110,
-    tabWidth: 2,
-    useTabs: false,
-    semi: false,
-    singleQuote: true,
-    trailingComma: 'es5',
-    arrowParens: 'avoid',
-    overrides: [
-        {
-            files: ['**/*.json'],
-            options: {
-                trailingComma: 'none',
-            },
-        },
-        {
-            files: '*.sol',
-            options: {
-                printWidth: 100,
-                tabWidth: 4,
-                useTabs: false,
-                singleQuote: false,
-                bracketSpacing: false,
-            }
-        }
-    ],
-}
+  printWidth: 110,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'es5',
+  arrowParens: 'avoid',
+  overrides: [
+    {
+      files: ['**/*.json'],
+      options: {
+        trailingComma: 'none',
+      },
+    },
+    {
+      files: '*.sol',
+      options: {
+        printWidth: 100,
+        tabWidth: 4,
+        useTabs: false,
+        singleQuote: false,
+        bracketSpacing: false,
+      },
+    },
+  ],
+}
diff --git a/README.md b/README.md
@@ -78,7 +78,7 @@ deploy your dApp.
 You can use one of the deployed test accounts and associated private key with
 MetaMask. If you use the same MetaMask accounts on fresh local networks such as
 Hardhat Node, Foundry Anvil or sapphire-dev docker image, don't forget to
-*clear your account's activity* each time or manually specify the correct
+_clear your account's activity_ each time or manually specify the correct
 account nonce.
 
 ### Frontend Deployment
@@ -109,7 +109,7 @@ Then copy the `dist` folder to a place of your `/my/public/path` location.
 
 ## Troubleshooting
 
-When click button Connect Wallet, in some case you will constantly get the error: 
+When click button Connect Wallet, in some case you will constantly get the error:
 `Uncaught (in promise) Error: [useEthereumStore] Request account failed!`
 
 To resolve it, try to open MetaMask and manually connect site:

diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Demo starter</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@oasisprotocol/demo-starter-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "license": "See License in ../LICENSE",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.10",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.8"
+  }
+}
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -0,0 +1,7 @@
+import { FC } from 'react'
+
+export const App: FC = () => {
+  return <>Demo starter</>
+}
+
+export default App
diff --git a/frontend/src/index.css b/frontend/src/index.css
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})