upgrade nodejs

jest.config.js

@@ -2,14 +2,14 @@ module.exports = {
   roots: [
     "<rootDir>/src"
   ],
-  globals: {
-    'ts-jest': {
-      babelConfig: '.babelrc',
-    },
-  },
   transform: {
-    "^.+\\.(ts|tsx)$": "ts-jest"
+    "^.+\\.(ts|tsx|js)$": ["ts-jest", {
+      babelConfig: '.babelrc'
+    }]
   },
+  transformIgnorePatterns: [
+    "/node_modules/(?!gsap)"
+  ],
   testMatch: [
     "**/__tests__/**/*.+(ts|tsx|js)",
     "**/?(*.)+(spec|test).+(ts|tsx|js)"

package.json

@@ -28,105 +28,104 @@
   },
   "dependencies": {
     "@babel/preset-env": "7.23.2",
-    "@date-io/core": "2.17.0",
-    "@date-io/date-fns": "2.17.0",
+    "@date-io/core": "3.0.0",
+    "@date-io/date-fns": "3.0.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@highlight-run/react": "3.2.1",
-    "@loadable/component": "5.15.3",
-    "@mui/icons-material": "5.14.18",
-    "@mui/lab": "5.0.0-alpha.153",
-    "@mui/material": "5.14.18",
-    "@mui/styled-engine-sc": "6.0.0-alpha.6",
-    "@mui/styles": "5.14.18",
-    "@mui/system": "5.14.18",
-    "@mui/x-date-pickers": "6.18.2",
+    "@loadable/component": "5.16.3",
+    "@mui/icons-material": "5.15.12",
+    "@mui/lab": "5.0.0-alpha.167",
+    "@mui/material": "5.15.12",
+    "@mui/styled-engine-sc": "6.0.0-alpha.17",
+    "@mui/styles": "5.15.12",
+    "@mui/system": "5.15.12",
     "@types/react-router-dom": "5.3.3",
-    "axios": "1.5.1",
+    "axios": "1.6.7",
     "buffer": "6.0.3",
     "css-vendor": "2.0.8",
-    "date-fns": "2.30.0",
-    "echarts": "5.4.3",
+    "date-fns": "3.3.1",
+    "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
     "file-saver": "2.0.5",
     "fzstd": "0.1.0",
-    "gsap": "3.12.2",
+    "gsap": "3.12.5",
     "highlight.run": "8.0.0",
-    "html-react-parser": "4.2.5",
+    "html-react-parser": "5.1.8",
     "html-to-image": "1.11.11",
-    "i18next": "23.5.1",
-    "i18next-http-backend": "2.2.2",
-    "js-base64": "3.7.5",
+    "i18next": "23.10.0",
+    "i18next-http-backend": "2.5.0",
+    "js-base64": "3.7.7",
     "jss": "10.10.0",
     "jss-preset-default": "10.10.0",
     "lodash.debounce": "4.0.8",
     "lz-string": "1.5.0",
-    "polished": "4.2.2",
+    "polished": "4.3.1",
     "react": "18.2.0",
     "react-csv": "2.2.2",
-    "react-datepicker": "4.21.0",
+    "react-datepicker": "6.2.0",
     "react-dom": "18.2.0",
-    "react-helmet-async": "1.3.0",
-    "react-i18next": "13.3.0",
+    "react-helmet-async": "2.0.4",
+    "react-i18next": "14.1.0",
     "react-jvectormap": "0.0.16",
     "react-paginate": "8.2.0",
     "react-perfect-scrollbar": "1.5.8",
-    "react-redux": "8.1.3",
+    "react-redux": "9.1.0",
     "react-router-dom": "6.17.0",
     "react-scripts": "5.0.1",
-    "react-share": "4.4.1",
+    "react-share": "5.1.0",
     "react-timeago": "7.2.0",
     "react-virtualized": "9.22.5",
-    "redux": "4.2.1",
+    "redux": "5.0.1",
     "redux-persist": "6.0.0",
-    "redux-thunk": "2.4.2",
-    "socket.io-client": "4.7.2",
-    "styled-components": "6.1.0",
-    "swr": "2.2.4"
+    "redux-thunk": "3.1.0",
+    "socket.io-client": "4.7.4",
+    "styled-components": "6.1.8",
+    "swr": "2.2.5"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
-    "@types/enzyme": "3.10.15",
-    "@types/file-saver": "2.0.6",
-    "@types/jest": "29.5.6",
-    "@types/loadable__component": "5.13.6",
-    "@types/lodash.debounce": "4.0.8",
-    "@types/node": "20.8.6",
-    "@types/react": "18.2.38",
-    "@types/react-csv": "1.1.9",
-    "@types/react-datepicker": "4.19.0",
-    "@types/react-dom": "18.2.17",
-    "@types/react-helmet": "6.1.7",
-    "@types/react-paginate": "7.1.2",
-    "@types/react-redux": "7.1.27",
-    "@types/react-timeago": "4.1.4",
-    "@types/react-virtualized": "9.21.23",
-    "@types/redux-mock-store": "1.0.4",
-    "@types/styled-components": "5.1.28",
-    "@typescript-eslint/eslint-plugin": "6.8.0",
-    "@typescript-eslint/parser": "6.8.0",
+    "@redux-devtools/extension": "3.3.0",
+    "@types/enzyme": "3.10.18",
+    "@types/file-saver": "2.0.7",
+    "@types/jest": "29.5.12",
+    "@types/loadable__component": "5.13.9",
+    "@types/lodash.debounce": "4.0.9",
+    "@types/node": "20.11.25",
+    "@types/react": "18.2.64",
+    "@types/react-csv": "1.1.10",
+    "@types/react-datepicker": "6.0.3",
+    "@types/react-dom": "18.2.21",
+    "@types/react-helmet": "6.1.11",
+    "@types/react-paginate": "7.1.4",
+    "@types/react-redux": "7.1.33",
+    "@types/react-timeago": "4.1.7",
+    "@types/react-virtualized": "9.21.29",
+    "@types/redux-mock-store": "1.0.6",
+    "@types/styled-components": "5.1.34",
+    "@typescript-eslint/eslint-plugin": "7.2.0",
+    "@typescript-eslint/parser": "7.2.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "axios-mock-adapter": "1.22.0",
     "babel-jest": "29.7.0",
     "enzyme": "3.11.0",
-    "eslint": "8.51.0",
+    "eslint": "8.57.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-import": "2.28.1",
-    "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-prettier": "5.0.1",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-styled-components": "7.2.0",
-    "prettier": "3.0.3",
+    "prettier": "3.2.5",
     "prop-types": "15.8.1",
     "react-app-rewire-alias": "1.1.7",
     "react-app-rewired": "2.2.1",
-    "redux-devtools-extension": "2.13.9",
     "redux-mock-store": "1.5.4",
-    "ts-jest": "29.1.1",
-    "typescript": "5.2.2"
+    "ts-jest": "29.1.2",
+    "typescript": "5.4.2"
   }
 }

public/locales/en/translation.json

@@ -1618,6 +1618,18 @@
       "size": {
         "message": "Size (kB)",
         "description": "Used for the Blocks page"
+      },
+      "timeBetweenBlocks": {
+        "message": "Time in Minutes Between Blocks",
+        "description": "Used for the Blocks page"
+      },
+      "minute": {
+        "message": "minute",
+        "description": "Used for the Blocks page"
+      },
+      "minutes": {
+        "message": "minutes",
+        "description": "Used for the Blocks page"
       }
     },
     "cascadeAndSenseStatistics": {
@@ -1854,7 +1866,16 @@
       "viewFull": {
         "message": "View full",
         "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "minedByCPU": {
+        "message": "Mined by CPU",
+        "description": "Used for the CascadeAndSenseStatistics page"
+      },
+      "minedByPool": {
+        "message": "Mined by a pool",
+        "description": "Used for the CascadeAndSenseStatistics page"
       }
+
     },
     "pastelIdDetails": {
       "tickets": {

src/App.tsx

@@ -4,18 +4,18 @@ import { H } from 'highlight.run';
 import jssPreset from 'jss-preset-default';
 import { ThemeProvider } from 'styled-components';
 import { create } from 'jss';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { LocalizationProvider } from '@mui/x-date-pickers';
+import { useSelector, useDispatch } from 'react-redux';
+
 import { ThemeProvider as MuiThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import { StylesProvider } from '@mui/styles';
 
 import ErrorHandler from '@pages/ErrorHandler/ErrorHandler';
 import ResponseErrorAlert from '@components/ResponseErrorAlert/ResponseErrorAlert';
 import InfoDrawer from '@components/InfoDrawer/InfoDrawer';
-import { useSelector, useDispatch } from 'react-redux';
 import { getThemeState } from '@redux/reducers/appThemeReducer';
 import { setAppThemeAction } from '@redux/actions/appThemeAction';
 import { setApiHostingAction } from '@redux/actions/clusterAction';
+import { AppDispatchType } from '@redux/store';
 import { socket, SocketContext } from '@context/socket';
 import { DEFAULT_CURRENCY } from '@utils/appInfo';
 import {
@@ -51,7 +51,7 @@ const jss = create({
 });
 
 const App: React.FC = () => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatchType>();
   const [succeed, setSucceed] = useState<boolean>(false);
   useEffect(() => {
     const isDarkModeInit = localStorage.getItem('darkMode') === 'true';
@@ -95,17 +95,15 @@ const App: React.FC = () => {
       <SocketContext.Provider value={socket}>
         <StyledEngineProvider injectFirst>
           <StylesProvider jss={jss}>
-            <LocalizationProvider dateAdapter={AdapterDateFns}>
-              <MuiThemeProvider theme={isDarkMode ? themeDark : themeLight}>
-                <ThemeProvider theme={isDarkMode ? themeDark : themeLight}>
-                  <ErrorHandler>
-                    <Routes />
-                    <ResponseErrorAlert />
-                  </ErrorHandler>
-                  <InfoDrawer />
-                </ThemeProvider>
-              </MuiThemeProvider>
-            </LocalizationProvider>
+            <MuiThemeProvider theme={isDarkMode ? themeDark : themeLight}>
+              <ThemeProvider theme={isDarkMode ? themeDark : themeLight}>
+                <ErrorHandler>
+                  <Routes />
+                  <ResponseErrorAlert />
+                </ErrorHandler>
+                <InfoDrawer />
+              </ThemeProvider>
+            </MuiThemeProvider>
           </StylesProvider>
         </StyledEngineProvider>
       </SocketContext.Provider>

src/components/Charts/DoughnutChart/__test__/DoughnutChart.test.tsx

@@ -4,7 +4,8 @@ import ReactECharts from 'echarts-for-react';
 
 import 'jest-styled-components';
 
-// import i18next from '../../../../utils/helpers/i18n';
+import { MyMockType } from '@utils/types/MockType';
+import i18next from '@utils/helpers/i18n';
 import DoughnutChart from '../DoughnutChart';
 import * as Styles from '../DoughnutChart.styles';
 
@@ -28,12 +29,9 @@ jest.mock('react-i18next', () => ({
     },
   },
 }));
-jest.mock('i18next', () => ({
-  t: (str: string) => str,
-}));
-// i18next.t = jest.fn().mockImplementation((...arg) => {
-//   return arg[0];
-// });
+i18next.t = jest.fn().mockImplementation((...arg) => {
+  return arg[0];
+}) as MyMockType;
 
 describe('components/Charts/DoughnutChart', () => {
   const data = {

src/components/Charts/DoughnutChart/__test__/__snapshots__/DoughnutChart.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/Charts/DoughnutChart renders correctly 1`] = `ShallowWrapper {}`;

src/components/ChooseCluster/ExplorerAPI.helpers.tsx

@@ -733,6 +733,9 @@ const ApiList = {
 };
 
 const getNode = (str: string, isCapitalizeAll = false) => {
+  if (!str) {
+    return '';
+  }
   const arr = str.split('-');
   const results: string[] = [];
   arr.forEach((val, index) => {

src/components/ChooseCluster/__test__/__snapshots__/ChooseCluster.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/ChooseCluster renders correctly 1`] = `ShallowWrapper {}`;

src/components/DateTimePicker/DateTimePicker.tsx

@@ -1,8 +1,7 @@
 import { useState, useRef } from 'react';
 import DatePicker from 'react-datepicker';
 import DateRangeIcon from '@mui/icons-material/DateRange';
-import differenceInDays from 'date-fns/differenceInDays';
-import subDays from 'date-fns/subDays';
+import { differenceInDays, subDays } from 'date-fns';
 import parse from 'html-react-parser';
 
 import { translate } from '@utils/helpers/i18n';

src/components/Footer/Footer.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material';
-import getYear from 'date-fns/getYear';
+import { getYear } from 'date-fns';
 import { NavLink } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';

src/components/Header/__test__/Header.test.tsx

@@ -1,5 +1,6 @@
 import { shallow } from 'enzyme';
 import { Grid } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import 'jest-styled-components';
 
 import { MyMockType } from '@utils/types/MockType';
@@ -46,7 +47,7 @@ describe('components/Header', () => {
     expect(wrapper.find(Styles.Container).length).toBeGreaterThanOrEqual(1);
   });
 
-  test('should render <Styles.Typography>', () => {
-    expect(wrapper.find(Styles.Typography).length).toBeGreaterThanOrEqual(1);
+  test('should render <Typography>', () => {
+    expect(wrapper.find(Typography).length).toBeGreaterThanOrEqual(1);
   });
 });