[deps] Update to React v18

app/components/inputs/ReceiveAccountsSelect.jsx

@@ -3,6 +3,7 @@ import AccountsSelect from "./AccountsSelect";
 import { useSelector, useDispatch } from "react-redux";
 import * as ca from "actions/ControlActions";
 import * as sel from "selectors";
+import { compose, get, eq } from "lodash/fp";
 
 function ReceiveAccountsSelect({
   onChange,
@@ -12,7 +13,16 @@ function ReceiveAccountsSelect({
 }) {
   const dispatch = useDispatch();
   const mixedAccount = useSelector(sel.getMixedAccount);
-  const nextAddressAccount = useSelector(sel.nextAddressAccount);
+  const getNextAddressResponse = useSelector(sel.getNextAddressResponse);
+  const visibleAccounts = useSelector(sel.visibleAccounts);
+
+  const nextAddressAccountNumber = getNextAddressResponse
+    ? getNextAddressResponse.accountNumber
+    : null;
+
+  const nextAddressAccount = visibleAccounts.find(
+    compose(eq(nextAddressAccountNumber), get("value"))
+  );
 
   const getNextAddressAttempt = useCallback(
     (value) => dispatch(ca.getNextAddressAttempt(value)),

app/components/shared/SendTransaction/hooks.js

@@ -4,6 +4,7 @@ import * as ca from "actions/ControlActions";
 import { baseOutput } from "./helpers";
 import { useSelector, useDispatch, shallowEqual } from "react-redux";
 import { usePrevious } from "hooks";
+import { compose, get, eq } from "lodash/fp";
 
 export function useSendTransaction() {
   const defaultSpendingAccount = useSelector(
@@ -16,7 +17,16 @@ export function useSendTransaction() {
   const estimatedSignedSize = useSelector(sel.estimatedSignedSize);
   const totalSpent = useSelector(sel.totalSpent);
   const nextAddress = useSelector(sel.nextAddress);
-  const nextAddressAccount = useSelector(sel.nextAddressAccount, shallowEqual);
+  const getNextAddressResponse = useSelector(sel.getNextAddressResponse);
+  const visibleAccounts = useSelector(sel.visibleAccounts);
+
+  const nextAddressAccountNumber = getNextAddressResponse
+    ? getNextAddressResponse.accountNumber
+    : null;
+
+  const nextAddressAccount = visibleAccounts.find(
+    compose(eq(nextAddressAccountNumber), get("value"))
+  );
   const constructTxLowBalance = useSelector(sel.constructTxLowBalance);
   const publishTxResponse = useSelector(sel.publishTxResponse);
   const notMixedAccounts = useSelector(

app/components/views/ProposalDetailsPage/helpers/ProposalCard/ProposalCard.jsx

@@ -3,12 +3,13 @@ import { classNames, StatusBar, Tooltip, Text, StatusTag } from "pi-ui";
 import { FormattedMessage as T } from "react-intl";
 import { PoliteiaLink } from "shared";
 import {
-  Event,
   VOTE_ENDS_EVENT,
   VOTE_ENDED_EVENT,
-  PROPOSAL_UPDATED_EVENT,
-  Join
-} from "../";
+  PROPOSAL_UPDATED_EVENT
+} from "../Event";
+import Join from "../Join";
+import Event from "../Event";
+
 import { getStatusBarData, getProposalStatusTagProps } from "../../utils";
 
 const ProposalCard = ({

app/containers/App/App.jsx

@@ -8,7 +8,6 @@ import ShutdownPage from "components/views/ShutdownPage/ShutdownPage";
 import FatalErrorPage from "components/views/FatalErrorPage/FatalErrorPage";
 import Snackbar from "components/Snackbar";
 import TrezorModals from "components/modals/TrezorModals/TrezorModals";
-import { hot } from "react-hot-loader/root";
 import { CantCloseModals, AboutModal, ConfirmationDialogModal } from "modals";
 import { useApp } from "../hooks";
 import styles from "./App.module.css";
@@ -52,4 +51,4 @@ const App = () => {
   );
 };
 
-export default hot(App);
+export default App;

app/index.js

@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { ConnectedRouter } from "connected-react-router";
 import { Switch, Route } from "react-router-dom";
@@ -18,7 +18,6 @@ import {
 } from "constants";
 import * as cfgConstants from "constants/config";
 import { wallet } from "wallet-preload-shim";
-import { AppContainer } from "react-hot-loader";
 import {
   defaultLightTheme,
   ThemeProvider,
@@ -560,23 +559,19 @@ const defaultThemeName = currentTheme.includes("dark")
   ? DEFAULT_DARK_THEME_NAME
   : DEFAULT_LIGHT_THEME_NAME;
 
-const render = () =>
-  ReactDOM.render(
-    <AppContainer>
-      <ThemeProvider
-        themes={themes}
-        defaultThemeName={defaultThemeName}
-        fonts={fonts}>
-        <Provider store={store}>
-          <ConnectedRouter history={history}>
-            <Switch>
-              <Route path="/" component={App} />
-            </Switch>
-          </ConnectedRouter>
-        </Provider>
-      </ThemeProvider>
-    </AppContainer>,
-    document.getElementById("root")
-  );
-
-render();
+const container = document.getElementById("root");
+const root = createRoot(container);
+root.render(
+  <ThemeProvider
+    themes={themes}
+    defaultThemeName={defaultThemeName}
+    fonts={fonts}>
+    <Provider store={store}>
+      <ConnectedRouter history={history}>
+        <Switch>
+          <Route path="/" component={App} />
+        </Switch>
+      </ConnectedRouter>
+    </Provider>
+  </ThemeProvider>
+);

app/selectors.js

@@ -717,7 +717,10 @@ export const buyerAccount = createSelector(
 );
 export const buyerMaxFeePercentage = get(["vsp", "maxFeePercentage"]);
 
-const getNextAddressResponse = get(["control", "getNextAddressResponse"]);
+export const getNextAddressResponse = get([
+  "control",
+  "getNextAddressResponse"
+]);
 const nextAddressAccountNumber = compose(
   (res) => (res ? res.accountNumber : null),
   getNextAddressResponse

babel.config.js

@@ -27,7 +27,6 @@ module.exports = function (api) {
       "@babel/plugin-proposal-optional-chaining",
       "@babel/plugin-proposal-throw-expressions",
       "./scripts/aliasDefaultMessage.js",
-      "react-hot-loader/babel",
       [ "react-intl", { "messagesDir": "app/i18n/extracted" } ],
       [ "module-resolver", {
         "root": [ "./app" ],

package.json

@@ -5,7 +5,7 @@
   "description": "Decrediton based on React, React Router, Webpack, React Hot Loader for rapid application development",
   "main": "main.js",
   "scripts": {
-    "test": "TZ=UTC cross-env NODE_ENV=test jest",
+    "test": "TZ=UTC cross-env NODE_ENV=test jest -i",
     "test-watch": "TZ=UTC ./node_modules/.bin/jest --watch",
     "test-debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watch",
     "test-e2e": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 mocha --retries 2 --compilers js:@babel/register --require ./test/setup.js ./test/e2e.js",
@@ -225,10 +225,11 @@
     "@babel/preset-react": "7.18.6",
     "@babel/register": "7.18.9",
     "@electron/rebuild": "3.3.0",
-    "@testing-library/dom": "^7.21.3",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.4.0",
-    "@testing-library/user-event": "12.8.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@testing-library/dom": "^8.20.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^26.6.0",
     "babel-loader": "8.3.0",
@@ -258,6 +259,7 @@
     "node-loader": "1.0.3",
     "prettier": "2.7.1",
     "react-intl-translations-manager": "^5.0.0",
+    "react-refresh": "^0.14.0",
     "redux-logger": "^2.7.4",
     "source-map-explorer": "^2.5.3",
     "style-loader": "^2.0.0",
@@ -305,11 +307,10 @@
     "qr-image": "^3.2.0",
     "qrcode": "1.5.3",
     "raw-loader": "^0.5.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-draggable": "4.4.5",
     "react-event-listener": "^0.6.6",
-    "react-hot-loader": "4.13.1",
     "react-infinite-scroller": "1.2.6",
     "react-intl": "^3.11.0",
     "react-intl-po": "^2.2.2",

test/test-utils.js

@@ -1,4 +1,5 @@
 import { render as rtlRender } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom/extend-expect";
 import { createMemoryHistory } from "history";
 import configureStore from "store/configureStore";
@@ -18,6 +19,8 @@ import {
   DEFAULT_LIGHT_THEME_NAME
 } from "pi-ui";
 
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
 beforeAll(() => {
   jest.spyOn(console, "groupCollapsed").mockImplementation(() => {});
   jest.spyOn(console, "info").mockImplementation(() => {});
@@ -43,6 +46,7 @@ const themes = {
 
 function render(ui, renderOptions) {
   const history = createMemoryHistory();
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   let currentSettings = {
     locale: locale.key,
     theme: DEFAULT_LIGHT_THEME_NAME,
@@ -112,7 +116,8 @@ function render(ui, renderOptions) {
   return {
     ...rtlRender(ui, { wrapper: Wrapper, ...renderOptions }),
     history,
-    store
+    store,
+    user
   };
 }
 

test/unit/actions/AccountMixerActions.spec.js

@@ -1,4 +1,4 @@
-import { wait } from "@testing-library/dom";
+import { waitFor } from "@testing-library/dom";
 import * as ama from "actions/AccountMixerActions";
 import * as cla from "actions/ClientActions";
 import * as cta from "actions/ControlActions";
@@ -299,15 +299,15 @@ test("test runAccountMixer start and stop", async () => {
     })
   );
 
-  await wait(() =>
+  await waitFor(() =>
     expect(mockUnlockAccount).toHaveBeenCalledWith(
       testWalletService,
       testPassphrase,
       changeAccountNumber
     )
   );
 
-  await wait(() =>
+  await waitFor(() =>
     expect(mockRunAccountMixerRequest).toHaveBeenCalledWith(
       testAccountMixerService,
       {
@@ -318,7 +318,7 @@ test("test runAccountMixer start and stop", async () => {
       }
     )
   );
-  await wait(() =>
+  await waitFor(() =>
     expect(store.getState().grpc.accountMixerRunning).toBeTruthy()
   );
   mockOnEvent("data");
@@ -335,7 +335,7 @@ test("test runAccountMixer start and stop", async () => {
   mockOnEvent("end");
   expect(store.getState().grpc.mixerStreamerError).toBe(testError);
 
-  await wait(() =>
+  await waitFor(() =>
     expect(mockLockAccount).toHaveBeenCalledWith(
       testWalletService,
       changeAccountNumber
@@ -344,7 +344,7 @@ test("test runAccountMixer start and stop", async () => {
 
   expect(mockCleanPrivacyLogs).toHaveBeenCalled();
   expect(mockMixerStreamerCancel).toHaveBeenCalled();
-  await wait(() =>
+  await waitFor(() =>
     expect(store.getState().grpc.accountMixerRunning).toBeFalsy()
   );
   expect(store.getState().grpc.mixerStreamer).toBeNull();
@@ -376,15 +376,15 @@ test("test runAccountMixer - unlockAcctAndExecFn failed", async () => {
     })
   );
 
-  await wait(() =>
+  await waitFor(() =>
     expect(mockUnlockAccount).toHaveBeenCalledWith(
       testWalletService,
       testPassphrase,
       changeAccountNumber
     )
   );
 
-  await wait(() =>
+  await waitFor(() =>
     expect(store.getState().grpc.mixerStreamerError).toBe(testError)
   );
 });

test/unit/actions/ClientActions.spec.js

@@ -1,7 +1,7 @@
 import * as wal from "wallet";
 import * as cla from "actions/ClientActions";
 import { createStore } from "test-utils.js";
-import { wait } from "@testing-library/react";
+import { waitFor } from "@testing-library/react";
 import {
   defaultMockAvailableMainnetVsps,
   defaultMockAvailableTestnetVsps,
@@ -42,7 +42,7 @@ test("test getTreasuryPolicies", async () => {
   const store = createStore({});
 
   await store.dispatch(clientActions.getTreasuryPolicies());
-  await wait(() =>
+  await waitFor(() =>
     expect(store.getState().grpc.getTreasuryPoliciesRequestAttempt).toBeFalsy()
   );
   expect(store.getState().grpc.getTreasuryPoliciesResponse).toBe(
@@ -56,7 +56,7 @@ test("test getTreasuryPolicies (failed request)", async () => {
   const store = createStore({});
 
   await store.dispatch(clientActions.getTreasuryPolicies());
-  await wait(() =>
+  await waitFor(() =>
     expect(store.getState().grpc.getTreasuryPoliciesRequestAttempt).toBeFalsy()
   );
   expect(store.getState().grpc.getTreasuryPoliciesResponse).toBe(undefined);
@@ -67,7 +67,7 @@ test("test setTreasuryPolicy", async () => {
   const store = createStore({});
 
   await store.dispatch(clientActions.setTreasuryPolicy());
-  await wait(() =>
+  await waitFor(() =>
     expect(store.getState().grpc.setTreasuryPolicyRequestAttempt).toBeFalsy()
   );
   expect(store.getState().grpc.setTreasuryPolicyError).toBe(null);
@@ -85,7 +85,7 @@ test("test setTreasuryPolicy (failed request)", async () => {
   const store = createStore({});
 
   await store.dispatch(clientActions.setTreasuryPolicy());
-  await wait(() =>
+  await waitFor(() =>
     expect(store.getState().grpc.setTreasuryPolicyRequestAttempt).toBeFalsy()
   );
   expect(store.getState().grpc.setTreasuryPolicyError).toBe(testErrorMsg);
@@ -100,7 +100,7 @@ test("test getTSpendPolicies", async () => {
   const store = createStore({});
 
   await store.dispatch(clientActions.getTSpendPolicies());
-  await wait(() =>
+  await waitFor(() =>
     expect(store.getState().grpc.getTSpendPoliciesRequestAttempt).toBeFalsy()
   );
   expect(store.getState().grpc.getTSpendPoliciesResponse).toBe(
@@ -114,7 +114,7 @@ test("test getTSpendPolicies (failed request)", async () => {
   const store = createStore({});
 
   await store.dispatch(clientActions.getTSpendPolicies());
-  await wait(() =>
+  await waitFor(() =>
     expect(store.getState().grpc.getTSpendPoliciesRequestAttempt).toBeFalsy()
   );
   expect(store.getState().grpc.getTSpendPoliciesResponse).toBe(undefined);
@@ -125,7 +125,7 @@ test("test setTSpendPolicy", async () => {
   const store = createStore({});
 
   await store.dispatch(clientActions.setTSpendPolicy());
-  await wait(() =>
+  await waitFor(() =>
     expect(store.getState().grpc.setTSpendPolicyRequestAttempt).toBeFalsy()
   );
   expect(store.getState().grpc.setTSpendPolicyError).toBe(null);
@@ -143,7 +143,7 @@ test("test setTSpendPolicy (failed request)", async () => {
   const store = createStore({});
 
   await store.dispatch(clientActions.setTSpendPolicy());
-  await wait(() =>
+  await waitFor(() =>
     expect(store.getState().grpc.setTSpendPolicyRequestAttempt).toBeFalsy()
   );
   expect(store.getState().grpc.setTSpendPolicyError).toBe(testErrorMsg);