Added support for Node.js version 20 (jamaljsr#827)

* chore(deps): updated dependencies @types/react to v18.2.46 and @types/react-dom to v18.2.18

* chore(deps): added dependency @babel/plugin-proposal-private-property-in-object

* chore(deps): added openssl-legacy-provider flag to build and start commands to allow electron run

* chore(deps): added engines for node v20+ and upgraded polar version to v3.0.0

* chore(deps): generated new yarn.lock file

* refactor: updated component files to match react typings

* fix: updated lineargradient tag to linearGradient; pascal-case

* docs: added nodejs version in README - Tech Stack

* docs: updated nodejs version in README to >= 20

* Revert "chore(deps): added engines for node v20+ and upgraded polar version to v3.0.0"

This reverts commit c81c940.

* chore(deps): added engines for node v20+

* refactor: used string type instead of any

* chore(deps): updated github workflows node_version to 20.x

* chore(deps): generated new yarn.lock file

.github/workflows/main.yml

@@ -24,7 +24,7 @@ jobs:
 
     strategy:
       matrix:
-        node_version: [16.x]
+        node_version: [20.x]
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:

README.md

@@ -87,6 +87,7 @@ If you would like to learn how to package Polar from source code or want to fix
 
 ### Tech Stack
 
+- [Node.js](https://nodejs.org/en): nodejs version >= 20
 - [Electron](https://github.com/electron/electron/): cross platform desktop app framework
 - [Typescript](https://github.com/microsoft/TypeScript): increased productivity with a typed language
 - [ReactJS](https://github.com/facebook/react/): declarative UI library for JavaScript

package.json

@@ -9,8 +9,11 @@
     "url": "https://lightningpolar.com"
   },
   "main": "public/main/electron/index.js",
+  "engines": {
+    "node": ">=20"
+  },
   "scripts": {
-    "build": "cross-env CI=false PUBLIC_URL=./ rescripts build",
+    "build": "cross-env CI=false PUBLIC_URL=./ rescripts --openssl-legacy-provider build",
     "ci": "yarn lint:all && yarn test:ci",
     "dev": "concurrently --kill-others --success first \"yarn:dev:*\"",
     "dev:app": "yarn theme && cross-env BROWSER=none yarn start",
@@ -27,7 +30,7 @@
     "prebuild": "tsc -p electron/tsconfig.json && yarn theme",
     "prepare": "husky install",
     "release": "standard-version --no-verify --skip.commit --skip.tag",
-    "start": "rescripts start",
+    "start": "rescripts --openssl-legacy-provider start",
     "test": "cross-env DEBUG_PRINT_LIMIT=15000 rescripts test --env=jest-environment-jsdom-sixteen",
     "test:ci": "cross-env CI=true yarn test --coverage",
     "test:all": "yarn test:ci && yarn test:e2e",
@@ -60,6 +63,7 @@
   },
   "devDependencies": {
     "@ant-design/icons": "5.2.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@commitlint/cli": "17.8.1",
     "@commitlint/config-conventional": "17.8.1",
     "@emotion/babel-plugin": "11.11.0",
@@ -79,9 +83,9 @@
     "@types/jest": "29.5.11",
     "@types/js-yaml": "4.0.9",
     "@types/node": "18.17.19",
-    "@types/react": "17.0.66",
+    "@types/react": "18.2.46",
     "@types/react-copy-to-clipboard": "5.0.7",
-    "@types/react-dom": "18.2.8",
+    "@types/react-dom": "18.2.18",
     "@types/react-redux": "7.1.33",
     "@types/react-router": "5.1.20",
     "@types/react-router-dom": "5.3.3",

src/components/common/DetailsList.tsx

@@ -65,7 +65,7 @@ interface Props {
   className?: string;
 }
 
-const DetailsList: React.SFC<Props> = ({ details, title, oneCol, className }) => {
+const DetailsList: React.FC<Props> = ({ details, title, oneCol, className }) => {
   return (
     <>
       {title && <h3>{title}</h3>}

src/components/common/NavMenu.tsx

@@ -19,7 +19,10 @@ const Styled = {
 const NavMenu: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.common.NavMenu');
   const { navigateTo } = useStoreActions(s => s.app);
-  const handleClick: MenuProps['onClick'] = useCallback(info => navigateTo(info.key), []);
+  const handleClick: MenuProps['onClick'] = useCallback(
+    (info: { key: string }) => navigateTo(info.key),
+    [],
+  );
 
   const items: MenuProps['items'] = [
     { label: l('createNetwork'), key: NETWORK_NEW, icon: <PlusOutlined /> },

src/components/common/StatusBadge.tsx

@@ -28,7 +28,7 @@ const Styled = {
   `,
 };
 
-const StatusBadge: React.SFC<StatusBadgeProps> = ({ status, text }) => {
+const StatusBadge: React.FC<StatusBadgeProps> = ({ status, text }) => {
   const { t } = useTranslation();
   return (
     <>

src/components/designer/AutoMineButton.tsx

@@ -87,7 +87,7 @@ const AutoMineButton: React.FC<Props> = ({ network }) => {
   }, [l]);
 
   const handleAutoMineModeChanged: MenuProps['onClick'] = useCallback(
-    info => {
+    (info: { key: string | number }) => {
       info.key == AutoMineMode.AutoOff
         ? setRemainingPercentage(0)
         : setRemainingPercentage(100);

src/components/designer/LinkContextMenu.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { ILink } from '@mrblenny/react-flow-chart';
 import { Dropdown, MenuProps } from 'antd';
 import { useStoreState } from 'store';
@@ -9,6 +9,7 @@ import CloseChannelButton from './link/CloseChannelButton';
 
 interface Props {
   link: ILink;
+  children: ReactElement;
 }
 
 const LinkContextMenu: React.FC<Props> = ({ link, children }) => {

src/components/designer/NetworkDesigner.spec.tsx

@@ -279,8 +279,8 @@ describe('NetworkDesigner Component', () => {
 
   it('should render the dark links', async () => {
     const { container } = renderComponent(undefined, 'dark');
-    // look for the first lineargradient tag
-    const query = 'lineargradient#lg-alice-backend1';
+    // look for the first linearGradient tag
+    const query = 'linearGradient#lg-alice-backend1';
     const gradientEl = container.querySelector(query) as Element;
     // get the color of the first stop in the gradient
     const color = (gradientEl.firstElementChild as Element).getAttribute('stop-color');
@@ -290,8 +290,8 @@ describe('NetworkDesigner Component', () => {
 
   it('should render the light links', async () => {
     const { container } = renderComponent(undefined, 'light');
-    // look for the first lineargradient tag
-    const query = 'lineargradient#lg-alice-backend1';
+    // look for the first linearGradient tag
+    const query = 'linearGradient#lg-alice-backend1';
     const gradientEl = container.querySelector(query) as Element;
     // get the color of the first stop in the gradient
     const color = (gradientEl.firstElementChild as Element).getAttribute('stop-color');

src/components/designer/NodeContextMenu.tsx

@@ -21,6 +21,7 @@ const addItemIf = (
 
 interface Props {
   node: INode;
+  children: ReactElement;
 }
 
 const NodeContextMenu: React.FC<Props> = ({ node: { id }, children }) => {

src/components/network/NetworkActions.tsx

@@ -96,7 +96,7 @@ const NetworkActions: React.FC<Props> = ({
 
   const mineAsync = useMiningAsync(network);
 
-  const handleClick: MenuProps['onClick'] = useCallback(info => {
+  const handleClick: MenuProps['onClick'] = useCallback((info: { key: string }) => {
     switch (info.key) {
       case 'rename':
         onRenameClick();

src/components/network/NewNetwork.tsx

@@ -37,7 +37,7 @@ const Styled = {
   `,
 };
 
-const NewNetwork: React.SFC = () => {
+const NewNetwork: React.FC = () => {
   useEffect(() => info('Rendering NewNetwork component'), []);
 
   const { l } = usePrefixedTranslation('cmps.network.NewNetwork');

src/components/routing/Switch.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { AnimatedSwitch, spring } from 'react-router-transition';
 import styled from '@emotion/styled';
 import { useTheme } from 'hooks/useTheme';
@@ -52,7 +52,7 @@ const pageTransitions = {
   },
 };
 
-const Switch: React.FC = ({ children }) => {
+const Switch: React.FC<{ children: ReactElement[] }> = ({ children }) => {
   const theme = useTheme();
   return (
     <Styled.AnimatedSwitch