Update React frontend dependency

Also updates: * Typescript config * packages in package.json * yarn.lock * Improves comments * Remove web3 dependency (onboarding will come later)
RetroAI · Oct 5, 2023 · c5d712b · c5d712b
1 parent 10c8cf2
commit c5d712b
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 459 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -39,24 +39,21 @@
     "test:ui": "vitest --ui"
   },
   "dependencies": {
-    "@web3-react/core": "^8.2.2",
-    "@web3-react/metamask": "^8.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",
     "three": "^0.157.0"
   },
   "devDependencies": {
-    "@types/node": "^20.8.0",
-    "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.8",
+    "@types/node": "^20.8.2",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.10",
     "@types/react-router-dom": "^5.3.3",
     "@types/three": "^0.156.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "@vitejs/plugin-react": "^4.1.0",
     "@vitest/ui": "^0.34.6",
-    "@web3-react/types": "^8.2.2",
     "audit-ci": "^6.6.1",
     "eslint": "^8.50.0",
     "eslint-plugin-prettier": "^5.0.0",
@@ -65,7 +62,7 @@
     "prettier-plugin-pkg": "^0.18.0",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9",
+    "vite": "^4.4.11",
     "vitest": "^0.34.6"
   },
   "bundleDependencies": false,

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -39,7 +39,7 @@ nav li a:hover {
   background: transparent !important; /* Using !important to avoid override by other styles */
   border: none !important; /* Remove border */
   cursor: pointer; /* Pointer cursor on hover */
-  padding: 8px; /* Adjust padding as needed */
+  padding: 8px; /* Adjust padding */
 }
 
 .hideNavbarButton {
@@ -48,8 +48,8 @@ nav li a:hover {
   border: none; /* Remove border */
   cursor: pointer; /* Pointer cursor on hover */
   padding: 8px; /* Add some padding */
-  font-size: 1.2rem; /* Adjust font-size as needed */
-  position: absolute; /* Positioning it */
+  font-size: 1.2rem; /* Adjust font-size */
+  position: absolute; /* Positioning */
   right: 0; /* Align to the right */
   top: 50%; /* Center vertically */
   transform: translateY(-50%); /* Centering adjustment */

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -72,8 +72,6 @@ function App() {
             className="showNavbarButton"
             onClick={() => setIsNavbarVisible(true)}
             aria-label="Show Menu"
-            // Inline styles for additional assurance
-            style={{ background: "transparent", border: "none" }}
           >
             {/*
              * Show a hamburger icon to bring back the navbar menu

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -9,16 +9,23 @@
 import "./index.css";
 
 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 
 import App from "./App";
 
 /*
  * Vite entry point
  */
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root"),
-);
+const root = document.getElementById("root");
+if (root) {
+  // Obtain a root instance from ReactDOM using the createRoot method
+  const appRoot = ReactDOM.createRoot(root);
+
+  // Render the App component within the root instance
+  appRoot.render(
+    // Using React's StrictMode to highlight potential problems in an app
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  );
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -6,17 +6,17 @@
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "module": "ESNext",
-    "moduleResolution": "Node",
+    "lib": ["dom", "ES2022"],
+    "module": "ES2022",
+    "moduleResolution": "node",
     "noEmit": true,
+    "outDir": "./dist",
     "resolveJsonModule": true,
+    "rootDir": "./src",
     "skipLibCheck": true,
     "strict": true,
-    "target": "ESNext",
-    "types": ["node", "vite/client"],
-    "useDefineForClassFields": true
+    "target": "ES2022",
+    "types": ["node", "vite/client"]
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src"]
 }
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -11,5 +11,8 @@ import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    // Other plugins
+  ],
 });