chore: deps and react-script update (#383)

* chore: deps and react-script update

* ci: bump node version to 18

* ci: depscheck

* docs: mention minimal npm required version

* chore: feedback

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

.depcheckrc.json

@@ -1,19 +1,16 @@
 {
   "ignores": [
-    "@types/jest", 
+    "@types/*",
-    "@commitlint/config-conventional", 
+    "@commitlint/config-conventional",
-    "@types/react-router",
+    "@babel/*",
-    "@babel/core",
+    "babel*",
-    "@babel/plugin-proposal-class-properties",
+    "eslint*",
-    "@babel/plugin-transform-runtime",
-    "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript",
-    "babel-loader",
-    "babel-plugin-syntax-dynamic-import",
-    "babel-plugin-tsconfig-paths",
     "file-loader",
     "ts-node",
-    "webpack-cli"
+    "webpack-cli",
+    "assert",
+    "buffer",
+    "crypto*",
+    "stream*"
   ]
 }

.eslintrc

@@ -23,7 +23,6 @@
     "sourceType": "module",
     "ecmaVersion": 2018
   },
-  "plugins": ["jest"],
   "rules": {
     "array-bracket-newline": ["error", "consistent"],
     "strict": ["error", "safe"],

.github/workflows/check.yaml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [18.x]
 
     env:
       REACT_APP_BEE_HOST: https://api.test-node.staging.ethswarm.org/

.github/workflows/tests.yaml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [18.x]
 
     steps:
       - uses: actions/checkout@v2

README.md

@@ -4,8 +4,8 @@
 [![standard-readme compliant](https://img.shields.io/badge/standard--readme-OK-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
 [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/feross/standard)
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_shield)
-![](https://img.shields.io/badge/npm-%3E%3D6.0.0-orange.svg?style=flat-square)
+![](https://img.shields.io/badge/npm-%3E%3D6.9.0-orange.svg?style=flat-square)
-![](https://img.shields.io/badge/Node.js-%3E%3D10.0.0-orange.svg?style=flat-square)
+![](https://img.shields.io/badge/Node.js-%3E%3D14.0.0-orange.svg?style=flat-square)
 
 > An app which helps users to setup their Bee node and do actions like cash out cheques, upload and download files or
 > manage your postage stamps.
@@ -117,4 +117,4 @@ See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintaine
 [BSD-3-Clause](./LICENSE)
 
 
-[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_large)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_large)

package.json

@@ -32,8 +32,12 @@
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "4.0.0-alpha.57",
+    "assert": "^2.0.0",
     "axios": "0.24.0",
     "bignumber.js": "9.0.1",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
+    "crypto": "npm:crypto-browserify",
     "ethereumjs-wallet": "^1.0.2",
     "ethers": "^5.6.4",
     "file-saver": "^2.0.5",
@@ -53,7 +57,9 @@
     "react-router-dom": "6.2.1",
     "react-syntax-highlighter": "15.4.4",
     "semver": "7.3.5",
-    "serve-handler": "6.1.3"
+    "serve-handler": "6.1.3",
+    "stream": "npm:stream-browserify",
+    "stream-browserify": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.16.0",
@@ -78,34 +84,34 @@
     "@types/react-router-dom": "5.3.2",
     "@types/react-syntax-highlighter": "13.5.2",
     "@types/semver": "7.3.9",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/eslint-plugin": "5.28.0",
-    "@typescript-eslint/parser": "4.33.0",
+    "@typescript-eslint/parser": "5.28.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.1.0",
     "babel-plugin-syntax-dynamic-import": "6.18.0",
     "babel-plugin-tsconfig-paths": "1.0.2",
     "cors": "^2.8.5",
     "depcheck": "^1.4.3",
-    "eslint": "7.24.0",
+    "eslint": "8.17.0 ",
     "eslint-config-prettier": "8.5.0",
-    "eslint-config-react-app": "6.0.0",
+    "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-flowtype": "5.10.0",
+    "eslint-plugin-flowtype": "8.0.3",
-    "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jest": "24.3.5",
+    "eslint-plugin-jest": "26.5.3",
-    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react": "7.30.0",
-    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-react-hooks": "4.5.0",
-    "eslint-plugin-testing-library": "3.10.2",
+    "eslint-plugin-testing-library": "5.5.1",
     "express": "^4.17.3",
     "file-loader": "6.2.0",
     "prettier": "2.4.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
-    "ts-node": "^10.7.0",
+    "ts-node": "^10.8.1",
-    "typescript": "4.4.4",
+    "typescript": "4.7.3",
     "web-vitals": "2.1.2",
-    "webpack": "4.44.2",
+    "webpack": "^5.73.0",
-    "webpack-cli": "^4.9.1"
+    "webpack-cli": "^4.10.0"
   },
   "peerDependencies": {
     "react": ">= 17.0.2",
@@ -143,7 +149,7 @@
   },
   "engines": {
     "node": ">=12.0.0",
-    "npm": ">=6.0.0",
+    "npm": ">=6.9.0",
     "bee": ">=0.6.0"
   }
 }

src/models/BzzToken.ts

@@ -2,7 +2,7 @@ import { BigNumber } from 'bignumber.js'
 import { Token } from './Token'
 
 export class BzzToken extends Token {
-  constructor(amount: BigNumber | string | BigInt) {
+  constructor(amount: BigNumber | string | bigint) {
     super(amount, 16)
   }
 }

src/models/DaiToken.ts

@@ -2,7 +2,7 @@ import { BigNumber } from 'bignumber.js'
 import { Token } from './Token'
 
 export class DaiToken extends Token {
-  constructor(amount: BigNumber | string | BigInt) {
+  constructor(amount: BigNumber | string | bigint) {
     super(amount, 18)
   }
 }

src/models/Token.ts

@@ -10,7 +10,7 @@ export class Token {
   private amount: BigNumber // Represented in the base units, so it is always an integer value
   private readonly decimals: digits
 
-  constructor(amount: BigNumber | string | BigInt, decimals: digits = BZZ_DECIMALS) {
+  constructor(amount: BigNumber | string | bigint, decimals: digits = BZZ_DECIMALS) {
     const a = makeBigNumber(amount)
 
     if (!isInteger(a) || !POSSIBLE_DECIMALS.includes(decimals)) {
@@ -31,7 +31,7 @@ export class Token {
    *
    * @returns new Token
    */
-  static fromDecimal(amount: BigNumber | string | BigInt, decimals: digits = BZZ_DECIMALS): Token | never {
+  static fromDecimal(amount: BigNumber | string | bigint, decimals: digits = BZZ_DECIMALS): Token | never {
     const a = makeBigNumber(amount)
 
     // No need to do any validation here, it is done when the new token is created
@@ -40,7 +40,7 @@ export class Token {
     return new Token(t, decimals)
   }
 
-  get toBigInt(): BigInt {
+  get toBigInt(): bigint {
     return BigInt(this.amount.toFixed(0))
   }
 

src/providers/Bee.tsx

@@ -11,7 +11,7 @@ import {
 } from '@ethersphere/bee-js'
 import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
 import semver from 'semver'
-import { engines } from '../../package.json'
+import PackageJson from '../../package.json'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
 import { Token } from '../models/Token'
 import type { Balance, ChequebookBalance, Settlements } from '../types'
@@ -130,7 +130,7 @@ function getStatus(
   status.version.isEnabled = true
   status.version.checkState =
     debugApiHealth &&
-    semver.satisfies(debugApiHealth.version, engines.bee, {
+    semver.satisfies(debugApiHealth.version, PackageJson.engines.bee, {
       includePrerelease: true,
     })
       ? CheckState.OK

src/utils/index.ts

@@ -24,7 +24,7 @@ export function isInteger(value: unknown): value is BigNumber | bigint {
  *
  * @returns BigNumber - but it may still be NaN or Infinite
  */
-export function makeBigNumber(value: BigNumber | BigInt | number | string): BigNumber | never {
+export function makeBigNumber(value: BigNumber | bigint | number | string): BigNumber | never {
   if (BigNumber.isBigNumber(value)) return value
 
   if (typeof value === 'string') return new BigNumber(value)