test version 1

Author: KewbitXMR

.nvmrc

@@ -1 +1 @@
-8.9.4
+18

.prettierignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

eslint.config.mjs

@@ -0,0 +1,42 @@
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import globals from 'globals';
+
+export default [
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        project: './tsconfig.json',
+        tsconfigRootDir: process.cwd(),
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+      react: pluginReact,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      ...tseslint.configs.recommended[0].rules,
+      ...pluginReact.configs.recommended.rules,
+      '@typescript-eslint/await-thenable': 'warn',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-require-imports': 'off',
+      'react/no-deprecated': 'warn',
+      // Uncomment this if you want to ignore apostrophe warnings
+      'react/no-unescaped-entities': 'off',
+    },
+  },
+  {
+    ignores: ['node_modules', 'dist', 'public'],
+  },
+];

package.json

@@ -27,6 +27,7 @@
     "what-input": "5.0.5"
   },
   "devDependencies": {
+    "@types/node": "^18.19.115",
     "@types/react": "16.1.0",
     "@types/react-dom": "16.0.4",
     "@types/react-hot-loader": "3.0.6",
@@ -37,56 +38,66 @@
     "@types/react-transition-group": "2.0.8",
     "@types/valid-url": "1.0.2",
     "@types/webpack-env": "1.13.5",
+    "@typescript-eslint/eslint-plugin": "^8.36.0",
+    "@typescript-eslint/parser": "^8.36.0",
     "babel-loader": "7.1.4",
     "chalk": "2.3.2",
     "clean-webpack-plugin": "0.1.19",
     "copy-webpack-plugin": "4.5.1",
+    "cross-env": "^7.0.3",
     "css-loader": "0.28.11",
+    "eslint": "^9.30.1",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "express": "4.16.3",
     "extract-text-webpack-plugin": "4.0.0-beta.0",
     "favicons-webpack-plugin": "0.0.9",
     "file-loader": "1.1.11",
+    "globals": "^16.3.0",
     "html-webpack-plugin": "3.0.6",
-    "husky": "0.14.3",
+    "husky": "^9.1.7",
     "lint-staged": "7.0.4",
-    "sass": "^1.73.0",
+    "prettier": "^3.6.2",
     "redux-devtools-extension": "2.13.2",
     "resolve-url-loader": "2.3.0",
+    "sass": "^1.73.0",
     "sass-loader": "6.0.7",
     "style-loader": "0.20.3",
+    "terser-webpack-plugin": "^2.3.8",
     "ts-loader": "4.0.1",
-    "tslint": "5.9.1",
     "tslint-config-prettier": "1.10.0",
-    "tslint-microsoft-contrib": "5.0.3",
     "tslint-react": "3.5.1",
-    "typescript": "2.7.2",
-    "uglifyjs-webpack-plugin": "1.2.4",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.36.0",
     "webpack": "4.1.1",
     "webpack-cli": "2.0.12",
     "webpack-dev-server": "3.1.1",
     "webpack-hot-middleware": "2.21.2",
     "webpack-merge": "4.1.2",
     "webpackbar": "2.6.1"
   },
+  "overrides": {
+    "node-sass": "npm:sass@^1.73.0"
+  },
   "scripts": {
-    "tscheck": "tsc --noEmit",
-    "tslint": "tslint --project .",
-    "prepush": "npm run tscheck",
-    "precommit": "lint-staged",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "prepare": "husky install",
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "webpack-dev-server --mode development --config ./webpack_config/webpack.dev.js",
-    "build": "webpack --mode production --config webpack_config/webpack.prod.js -p",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode production --config webpack_config/webpack.prod.js -p",
     "prettier:diff": "prettier --write --config ./.prettierrc --list-different \"src/**/*.ts\" \"src/**/*.tsx\"",
     "formatAll": "find ./src/ -name '*.ts*' | xargs prettier --write --config ./.prettierrc --config-precedence file-override"
   },
-  "precommit": "lint-staged",
   "lint-staged": {
     "*.{ts,tsx}": [
       "prettier --write --config ./.prettierrc --config-precedence file-override",
       "git add"
     ]
   },
-  "prepush": "npm run tslint && npm run tscheck",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/MyCryptoHQ/React-Typescript-Web3.git"

src/app/app.scss

@@ -1,5 +1,5 @@
-@import 'src/sass/mixins/index';
-@import 'src/sass/variables/index';
+@use 'src/sass/mixins/index' as mixins;
+@use 'src/sass/variables/index' as vars;
 
 .App {
   display: flex;

src/app/details/block-details.tsx

@@ -24,7 +24,7 @@ export class BlockDetailsClass extends React.Component<Props, State> {
     data: { block: null, pending: false }
   };
 
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     this.fetchBlock();
   }
 

src/app/details/details.scss

@@ -1,4 +1,4 @@
-@import 'src/sass/variables/index';
+@use 'src/sass/variables/index' as vars;
 
 .Details {
   div.skeleton,
@@ -18,19 +18,19 @@
     padding: 1rem 2rem;
     margin: -1rem -2rem;
     margin-bottom: 2rem;
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid vars.$border-color;
     &-title {
       font-size: 1.25rem;
       font-weight: 500;
-      color: $text-color;
+      color: vars.$text-color;
       word-break: break-all;
     }
     &-timestamp {
       margin-left: 1rem;
       text-align: right;
       font-size: 1rem;
       font-weight: 400;
-      color: $blue-gray;
+      color: vars.$blue-gray;
       min-width: 120px;
     }
 
@@ -69,12 +69,12 @@
 
       &:not(:last-child) {
         margin-bottom: 2rem;
-        border-bottom: 1px solid $border-color;
+        border-bottom: 1px solid vars.$border-color;
       }
       &-title {
         font-size: 1rem;
         font-weight: 400;
-        color: $text-color;
+        color: vars.$text-color;
         width: 8rem;
         margin-right: 3rem;
 
@@ -109,11 +109,11 @@
             }
           }
           p {
-            color: $blue-gray;
+            color: vars.$blue-gray;
             font-weight: 400;
             font-size: 1.1rem;
             &:first-child {
-              color: $blue-gray-light;
+              color: vars.$blue-gray-light;
               font-size: 0.9rem;
             }
           }
@@ -128,10 +128,10 @@
         th {
           font-size: 1rem;
           font-weight: 400;
-          color: $text-color;
+          color: vars.$text-color;
           padding-bottom: 1rem;
           padding-left: 1rem;
-          border-bottom: 1px solid $border-color;
+          border-bottom: 1px solid vars.$border-color;
           text-align: right;
           &:first-child {
             text-align: left;
@@ -143,7 +143,7 @@
           font-size: 1rem;
           font-weight: 400;
           padding: 1rem 0rem;
-          color: $blue-gray;
+          color: vars.$blue-gray;
           text-align: right;
           white-space: nowrap;
           vertical-align: top;
@@ -157,7 +157,7 @@
           }
         }
         tr:not(:last-child) > td {
-          border-bottom: 1px solid $border-color;
+          border-bottom: 1px solid vars.$border-color;
         }
       }
     }

src/app/details/tx-details.tsx

@@ -27,7 +27,7 @@ export class TxDetailsClass extends React.Component<Props, State> {
     data: { transaction: null, pending: false, confirmationDuration: null, txs: [] }
   };
 
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     this.setState({ data: { ...this.state.data, pending: true } });
     this.setConfirmationDuration();
     this.fetchTransaction();
@@ -90,9 +90,9 @@ export class TxDetailsClass extends React.Component<Props, State> {
       this.setState({ data: { ...this.state.data, pending: true } });
       fetchAsync(node.url + '/api/block/' + blockHeight)
         .then(json => {
-          const txs = json.data.txs.slice(0, 5);
-
-          this.setState({ data: { ...this.state.data, txs, pending: true } });
+          //const txs = json.data.txs.slice(0, 5);
+          console.log(json)
+          this.setState({ data: { ...this.state.data, pending: true } });
         })
         .catch(error => {
           console.log(error);
@@ -154,7 +154,7 @@ export class TxDetailsClass extends React.Component<Props, State> {
             </MetaTags>
             {!transaction.tx_hash && (
               <h1 className="Details-header-title">
-                Can't find transaction data for tx hash {this.props.match.params.transaction}
+                Can&rsquo;t find transaction data for tx hash {this.props.match.params.transaction}
               </h1>
             )}
             {transaction.tx_hash && (

src/app/footer/footer.scss

@@ -1,8 +1,8 @@
-@import 'src/sass/variables/index';
+@use 'src/sass/variables/index' as vars;
 
 .Footer {
   display: block;
-  background-color: $footer-color;
+  background-color: vars.$footer-color;
   width: 100%;
   background-size: 5rem;
   color: white;
@@ -107,6 +107,6 @@
     color: white;
   }
   a {
-    transition: opacity $transition;
+    transition: opacity vars.$transition;
   }
 }

src/app/home/home.scss

@@ -1,5 +1,5 @@
-@import 'src/sass/variables/index';
-@import 'src/sass/mixins/index';
+@use 'src/sass/variables/index' as vars;
+@use 'src/sass/mixins/index' as mixins;
 
 .New-User-CTA {
   display: flex;
@@ -16,13 +16,13 @@
   &-title {
     font-size: 2rem;
     font-weight: 400;
-    color: $text-color;
+    color: vars.$text-color;
     white-space: nowrap;
     margin-bottom: 0.5rem;
   }
   &-text {
     font-size: 1rem;
-    color: $blue-gray-light;
+    color: vars.$blue-gray-light;
     margin-bottom: 1rem;
     line-height: 1.75;
   }
@@ -31,7 +31,7 @@
     flex-direction: row;
     flex-wrap: nowrap;
     padding-top: 1rem;
-    border-top: 1px solid $border-color;
+    border-top: 1px solid vars.$border-color;
   }
   &-link {
     display: block;
@@ -41,8 +41,8 @@
   }
   &-graph {
     margin: 0.5rem 0;
-    border: 1px solid $border-color;
-    border-radius: $border-radius;
+    border: 1px solid vars.$border-color;
+    border-radius: vars.$border-radius;
     height: inherit;
     width: 133%;
   }