Update NodeJS & packages

Author: tombertrand

.github/workflows/deploy.yml

@@ -15,7 +15,7 @@ jobs:
         id: setup-node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.17.0
+          node-version: 18.16.0
           cache: "npm"
 
       - name: Build static assets

.nvmrc

@@ -1 +1 @@
-16.17.0
+18.16.0

package-lock.json

@@ -30,15 +30,16 @@
     ]
   },
   "overrides": {
-    "autoprefixer": "10.4.5"
+    "autoprefixer": "10.4.5",
+    "react-scripts": {
+      "typescript": "$typescript"
+    }
   },
   "dependencies": {
     "@antv/g2plot": "^2.3.39",
     "@google-cloud/translate": "^6.2.0",
-    "@material-ui/core": "^4.12.4",
     "@sentry/node": "^6.19.2",
-    "@umijs/plugin-antd": "^0.15.2",
-    "antd": "^4.23.2",
+    "antd": "^5.5.0",
     "bignumber.js": "^9.0.0",
     "body-parser": "^1.19.0",
     "cors": "^2.8.5",
@@ -49,7 +50,7 @@
     "fs-extra": "^10.0.0",
     "ga-4-react": "^0.1.281",
     "html5-qrcode": "github:mebjas/html5-qrcode#master",
-    "i18next": "^19.9.0",
+    "i18next": "^22.4.15",
     "i18next-browser-languagedetector": "^6.0.1",
     "leaflet": "^1.8.0",
     "leaflet-extra-markers": "^1.2.1",
@@ -69,9 +70,10 @@
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.7.1",
-    "react-i18next": "^11.8.8",
+    "react-i18next": "^12.2.2",
     "react-leaflet": "^3.2.5",
     "react-markdown": "^8.0.1",
+    "react-responsive": "^9.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.1",
     "reconnecting-websocket": "^4.4.0",
@@ -106,7 +108,7 @@
     "@types/prettier": "^2.2.1",
     "@types/qrcode": "^1.3.4",
     "@types/qs": "^6.9.1",
-    "@types/react": "^16.9.23",
+    "@types/react": "^18.2.6",
     "@types/react-beautiful-dnd": "^12.1.2",
     "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-dom": "^16.9.0",
@@ -132,6 +134,6 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "nodemon": "^2.0.20",
     "prettier": "^2.2.1",
-    "typescript": "^4.8.3"
+    "typescript": "^5.0.4"
   }
 }

package.json

@@ -64,8 +64,8 @@ ws.onclose = () => {
   updateDb();
 };
 
-ws.onerror = () => {
-  console.log("WS ERROR");
+ws.onerror = err => {
+  console.log("WS ERROR", err);
   clearInterval(updateDbInterval);
   updateDb();
 };

server/ws/index.js

@@ -124,7 +124,7 @@ a:hover {
 }
 
 .app-sub-header {
-  padding: 3px 12px;
+  padding: 6px 12px;
 }
 
 .cps-container {
@@ -162,7 +162,7 @@ h3.ant-typography,
   }
 
   .app-sub-header {
-    padding: 3px 18px;
+    padding: 6px 18px;
   }
 
   .cps-container {
@@ -333,7 +333,8 @@ h3.ant-typography,
   font-weight: bold;
 }
 
-.detail-layout .ant-row + .ant-row {
+.detail-layout .ant-row + .ant-row,
+.detail-layout.ant-row + .ant-row {
   margin-top: 8px;
   padding-top: 8px;
   border-top: solid 1px #f0f2f5;
@@ -390,10 +391,6 @@ h4.ant-typography {
   border-color: rgba(255, 255, 255, 0.7);
 }
 
-/* .home-banner .ant-input-affix-wrapper {
-  border: none;
-} */
-
 .what-is-card {
   text-align: center;
 }
@@ -448,19 +445,6 @@ h4.ant-typography {
   margin-top: 2px;
 }
 
-body,
-.ant-card,
-.ant-menu,
-.ant-input,
-.ant-timeline,
-.ant-typography,
-.ant-dropdown-menu-item,
-.ant-dropdown-menu-submenu-title,
-.ant-select-item,
-.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
-  color: rgba(0, 0, 0, 0.65);
-}
-
 .ant-input-search .anticon-search,
 .ant-input-search .search-history-icon {
   color: rgba(0, 0, 0, 0.45);
@@ -495,7 +479,7 @@ body,
 }
 
 .transaction-card .ant-row:not(:last-child) {
-  border-bottom: solid 1px #f0f0f0;
+  border-bottom: solid 1px #f0f2f5;
 }
 
 .transaction-card .ant-row.row-header {
@@ -515,25 +499,10 @@ body,
   margin-bottom: 12px;
 }
 
-.ant-menu-horizontal .ant-menu-item,
-.ant-menu-horizontal .ant-menu-submenu:not(.ant-menu-submenu-popup) {
-  margin: 0 6px !important;
-  padding: 0 18px 0 12px !important;
-}
-
 .ant-menu-item .anticon,
 .ant-menu-submenu-title .anticon {
   min-width: 14px;
   margin-right: 10px;
-  font-size: 14px;
-}
-
-.ant-menu-vertical > .ant-menu-item:hover {
-  background-color: #f5f5f5;
-}
-
-.ant-menu-vertical > .ant-menu-item:not(.ant-menu-item-selected) {
-  color: rgba(0, 0, 0, 0.65);
 }
 
 .qrcode-reader {
@@ -581,3 +550,15 @@ body,
 .guide td {
   padding: 0 6px;
 }
+
+.ant-tree-switcher {
+  display: none;
+}
+
+.tree-container {
+  margin: 10px 0;
+}
+
+.ant-tree {
+  padding: 10px 0;
+}

src/App.css

@@ -1,4 +1,5 @@
-import "antd/dist/antd.css";
+// import "antd/dist/antd.css";
+import "antd/dist/reset.css";
 import "leaflet/dist/leaflet.css";
 import "leaflet-extra-markers/dist/css/leaflet.extra-markers.min.css";
 import "./App.css";
@@ -9,7 +10,7 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 import { Route, Switch } from "react-router-dom";
 
-import { Layout } from "antd";
+import { ConfigProvider, Layout, theme } from "antd";
 
 import "components/utils/analytics";
 import { PreferencesContext, Theme } from "api/contexts/Preferences";
@@ -45,10 +46,15 @@ const { Content } = Layout;
 
 const App: React.FC = () => {
   const { t } = useTranslation();
-  const { theme } = React.useContext(PreferencesContext);
+  const { theme: themeContext } = React.useContext(PreferencesContext);
 
   return (
-    <>
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeContext === Theme.DARK ? theme.darkAlgorithm : undefined,
+      }}
+    >
       <Helmet>
         <html lang={i18next.language} />
         <title>NanoLooker {t("common.blockExplorer")}</title>
@@ -58,12 +64,12 @@ const App: React.FC = () => {
         />
         <meta
           name="theme-color"
-          content={theme === Theme.DARK ? "#131313" : "#eff2f5"}
+          content={themeContext === Theme.DARK ? "#131313" : "#eff2f5"}
         />
       </Helmet>
       <Layout
         style={{ minHeight: "100vh" }}
-        className={theme ? `theme-${theme}` : undefined}
+        className={themeContext ? `theme-${themeContext}` : undefined}
       >
         <NodeHealth />
         <AppHeader />
@@ -108,7 +114,7 @@ const App: React.FC = () => {
         </Content>
         <AppFooter />
       </Layout>
-    </>
+    </ConfigProvider>
   );
 };