Chore: React 18 (#1195)

* chore: fix some lint

* chore: upgrade dependencies

* revert to react-script 4

* upgrade react-springs

* fix: line chart

* lint: add unused import and sort import rule

* lint: add husky and lint-staged

* better sort import

Signed-off-by: Nam Nguyen <nam.nguyen@kyber.network>

* run yarn lint --fix

Signed-off-by: Nam Nguyen <nam.nguyen@kyber.network>

* remove lint-staged and husky due to we already run lint on CI

* fix menulayout

* build: remove generate_source_map for save memory

* improve rule

Signed-off-by: Nam Nguyen <nam.nguyen@kyber.network>

Co-authored-by: Nam Nguyen <nam.nguyen@kyber.network>
Co-authored-by: Doan Sy Hung <hungdoansy@gmail.com>

.env

@@ -7,7 +7,7 @@ REACT_APP_AGGREGATOR_STATS_API=https://aggregator-stats.kyberswap.com
 REACT_APP_KRYSTAL_API=https://api.krystal.app
 REACT_APP_SENTRY_DNS=https://d94ee2d3c22043bdaec966758680b5a8@sentry.ops.kyberengineering.io/4
 
-GENERATE_SOURCEMAP=true
+GENERATE_SOURCEMAP=false
 REACT_APP_SERVICE_WORKER=false
 
 REACT_APP_TRUESIGHT_API=https://truesight.kyberswap.com

.env.dev

@@ -7,7 +7,7 @@ REACT_APP_AGGREGATOR_STATS_API=https://aggregator-stats.kyberswap.com
 REACT_APP_KRYSTAL_API=https://api.krystal.app
 REACT_APP_SENTRY_DNS=https://d94ee2d3c22043bdaec966758680b5a8@sentry.ops.kyberengineering.io/4
 
-GENERATE_SOURCEMAP=true
+GENERATE_SOURCEMAP=false
 REACT_APP_SERVICE_WORKER=true
 
 REACT_APP_TRUESIGHT_API=https://truesight.kyberswap.com

.env.stg

@@ -7,7 +7,7 @@ REACT_APP_AGGREGATOR_STATS_API=https://aggregator-stats.kyberswap.com
 REACT_APP_KRYSTAL_API=https://api.krystal.app
 REACT_APP_SENTRY_DNS=https://d94ee2d3c22043bdaec966758680b5a8@sentry.ops.kyberengineering.io/4
 
-GENERATE_SOURCEMAP=true
+GENERATE_SOURCEMAP=false
 REACT_APP_SERVICE_WORKER=false
 
 REACT_APP_TRUESIGHT_API=https://truesight.stg.kyberengineering.io

.eslintrc.json

@@ -8,26 +8,51 @@
       "jsx": true
     }
   },
-  "ignorePatterns": ["node_modules/**/*"],
+    "ignorePatterns": [
+    "src/locales/**/*.js",
+    "src/locales/**/en-US.po",
+    "node_modules",
+    "src/**/charting_library.*",
+    "src/**/charting_library/**",
+    "build",
+    "dist",
+    ".DS_Store",
+    ".env.local",
+    ".env.development.local",
+    ".env.test.local",
+    ".env.production.local",
+    ".idea/",
+    ".vscode/",
+    "public",
+    "package-lock.json",
+    "yarn.lock"
+  ],
   "settings": {
     "react": {
       "version": "detect"
     }
   },
   "extends": [
+    "react-app",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
-    "prettier/@typescript-eslint",
     "plugin:prettier/recommended"
   ],
+  "plugins": ["better-styled-components", "unused-imports"],
   "rules": {
+    "unused-imports/no-unused-imports": "error",
     "@typescript-eslint/explicit-function-return-type": "off",
     "prettier/prettier": "error",
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/camelcase": "off",
     "react/prop-types": "off",
     "@typescript-eslint/interface-name-prefix": "off",
-    "no-duplicate-imports": "error"
+    "no-duplicate-imports": "error",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-pascal-case": "off",
+    "@typescript-eslint/no-var-requires": "off"
+
   }
 }

.github/workflows/ci.yaml

@@ -114,6 +114,9 @@ jobs:
       - name: Install dependences
         uses: bahmutov/npm-install@HEAD
 
+      - name: Run Lint
+        run: yarn lint --quiet
+
       - name: Yarn Build
         env:
           CI: false

.github/workflows/pr.yaml

@@ -104,6 +104,9 @@ jobs:
       - name: Install dependences
         uses: bahmutov/npm-install@HEAD
 
+      - name: Run Lint
+        run: yarn lint --quiet
+
       - name: Yarn Build
         env:
           CI: false

.github/workflows/release.yaml

@@ -50,6 +50,9 @@ jobs:
       - name: Install dependences
         uses: bahmutov/npm-install@HEAD
 
+      - name: Run Lint
+        run: yarn lint --quiet
+
       - name: Yarn Build
         env:
           CI: false

.prettierrc

@@ -3,5 +3,12 @@
   "singleQuote": true,
   "printWidth": 120,
   "trailingComma": "all",
-  "arrowParens": "avoid"
-}
+  "arrowParens": "avoid",
+  "importOrder": [
+    "<THIRD_PARTY_MODULES>",
+    "^(apollo|assets|components|connectors|constants|data|hooks|locales|pages|state|theme|types|utils)(/.+)?$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

config-overrides.js

@@ -13,8 +13,8 @@ module.exports = function override(config, env) {
         vendor: {
           test: /[\\/]node_modules[\\/](ethers|@ethersproject)[\\/]/,
           name: 'ethers',
-          chunks: 'all'
-        }
+          chunks: 'all',
+        },
         // commons: {
         //   test: /[\\/]node_modules[\\/]/,
         //   // cacheGroupKey here is `commons` as the key of the cacheGroup
@@ -28,12 +28,12 @@ module.exports = function override(config, env) {
         //   },
         //   chunks: 'all'
         // }
-      }
-    }
+      },
+    },
   }
 
   return {
     ...config,
-    plugins: [...config.plugins, new CompressionPlugin()]
+    plugins: [...config.plugins, new CompressionPlugin()],
   }
 }