chore: cherry-pick solutions for QA issues

* fix: forceful quit (#497)
* chore: Upgrade to NodeJS 20 (#501)
* fix: Accessing colors from `scss` (#510)

.github/workflows/e2e.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-20.04
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [20.x]
     steps:
       - name: Checkout
         # https://github.com/actions/checkout/releases/tag/v4.0.0

.github/workflows/main.yml

@@ -16,7 +16,7 @@ jobs:
     timeout-minutes: 40  # default is 360
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [20.x]
     steps:
       # https://github.com/actions/checkout/releases/tag/v4.0.0
     - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac

.nvmrc

@@ -1 +1 @@
-v14
+v20

ELECTRON.md

@@ -1,6 +1,6 @@
 ## Install
 
-Must use node v14
+Must use node v20 or greater
 
 ## Running on Electron
 

README.md

@@ -28,7 +28,7 @@ A transaction is displayed.
 
 ### Prerequisites
 
-* Install node v14
+* Install node v20
 
 ### To Install
 

package.json

@@ -23,6 +23,10 @@
   "description": "Light wallet for Hathor Network",
   "author": "Hathor Labs <[email protected]> (https://hathor.network/)",
   "version": "0.27.1-rc4",
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=10.0.0"
+  },
   "private": true,
   "dependencies": {
     "@hathor/wallet-lib": "1.0.4",
@@ -57,11 +61,11 @@
   "main": "public/electron.js",
   "homepage": "./",
   "scripts": {
-    "build-css": "sass --no-source-map src/index.scss src/index.css",
-    "watch-css": "npm run build-css && sass --no-source-map -w src/index.scss src/index.css",
-    "start-js": "react-scripts start",
+    "build-css": "sass --no-source-map src/index.module.scss src/index.css",
+    "watch-css": "npm run build-css && sass --no-source-map -w src/index.module.scss src/index.css",
+    "start-js": "react-scripts --openssl-legacy-provider start",
     "start": "npm-run-all -p watch-css start-js",
-    "build-js": "react-scripts build",
+    "build-js": "react-scripts --openssl-legacy-provider build",
     "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=./tests/env.js",
     "e2e": "cypress run",

src/App.js

@@ -72,7 +72,7 @@ class Root extends React.Component {
     // When Ledger device loses connection or the app is closed
     if (this.props.ledgerClosed && !prevProps.ledgerClosed) {
       LOCAL_STORE.lock();
-      this.props.history.push('/wallet_type/');
+      this.props.history.push('/locked/');
     }
   }
 

src/ErrorWrapper.js

@@ -6,17 +6,20 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { Route } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import $ from 'jquery';
 import App from './App';
-import ModalUnhandledError from './components/ModalUnhandledError';
+import ModalUnhandledError, { UNHANDLED_ERROR_MODAL_ID_SELECTOR } from './components/ModalUnhandledError';
 
 import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'font-awesome/css/font-awesome.min.css';
 import './index.css';
 
-function ErrorBoundary({ onError }) {
+function ErrorBoundary(props) {
+	const { onError } = props;
+	const history = useHistory();
+
 	const handleErrorEvent = (event) => {
 		onError(event.error);
 	}
@@ -30,7 +33,7 @@ function ErrorBoundary({ onError }) {
 	}, []);
 
 	return (
-		<Route path="/" children={<App/>}/>
+		<App history={history} />
 	)
 }
 
@@ -41,7 +44,7 @@ function ErrorWrapper(props) {
 		// Don't propagate error messages listened more than once
 		if (newError !== error) {
 			setError(error);
-			$('#unhandledErrorModal').modal('show');
+			$(UNHANDLED_ERROR_MODAL_ID_SELECTOR).modal('show');
 		}
 	}
 

src/components/Loading.js

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import ReactLoading from 'react-loading';
-import colors from '../index.scss';
+import { colors } from '../constants';
 
 const defaults = {
   width: 18,

src/components/ModalSendTx.js

@@ -12,7 +12,7 @@ import $ from 'jquery';
 import PropTypes from "prop-types";
 import SendTxHandler from '../components/SendTxHandler';
 import ReactLoading from 'react-loading';
-import colors from '../index.scss';
+import { colors } from '../constants';
 
 
 const mapStateToProps = (state) => {

src/components/ModalUnhandledError.js

@@ -12,6 +12,9 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { walletReset } from '../actions';
 import { connect } from 'react-redux';
 
+const UNHANDLED_ERROR_MODAL_ID = 'unhandledErrorModal';
+export const UNHANDLED_ERROR_MODAL_ID_SELECTOR = `#${UNHANDLED_ERROR_MODAL_ID}`;
+
 const mapDispatchToProps = dispatch => {
   return {
     walletReset: () => dispatch(walletReset()),
@@ -68,7 +71,7 @@ class ModalUnhandledError extends React.Component {
     const { renderError } = this.props
     const readableError = t`Error Message: ${message}\nStack trace: ${stack}`
     return (
-      <div className="modal fade" id="unhandledErrorModal" tabIndex="-1" role="dialog" aria-labelledby="unhandledErrorModal" aria-hidden="true">
+      <div className="modal fade" id={UNHANDLED_ERROR_MODAL_ID} tabIndex="-1" role="dialog" aria-labelledby="unhandledErrorModal" aria-hidden="true">
         <div className="modal-dialog" role="document">
           <div className="modal-content">
             <div className="modal-header">

src/components/TokenHistory.js

@@ -15,7 +15,7 @@ import { connect } from 'react-redux';
 import { get } from 'lodash';
 import wallet from '../utils/wallet';
 import helpers from '../utils/helpers';
-import colors from '../index.scss';
+import { colors } from '../constants';
 import TokenPagination from './TokenPagination';
 import HathorAlert from './HathorAlert';
 import { TOKEN_DOWNLOAD_STATUS } from '../sagas/tokens';

src/components/tokens/TokenAction.js

@@ -8,7 +8,7 @@
 import React from 'react';
 import { t } from 'ttag';
 import ReactLoading from 'react-loading';
-import colors from '../../index.scss';
+import { colors } from '../../constants';
 import { connect } from "react-redux";
 import { MODAL_TYPES, GlobalModalContext } from '../../components/GlobalModal';
 

src/components/tokens/TokenMelt.js

@@ -16,7 +16,7 @@ import ReactLoading from 'react-loading';
 import { connect } from 'react-redux';
 import { get } from 'lodash';
 import { TOKEN_DOWNLOAD_STATUS } from '../../sagas/tokens';
-import colors from '../../index.scss';
+import { colors } from '../../constants';
 
 const mapStateToProps = (state) => {
   return {

src/constants.js

@@ -11,6 +11,7 @@
  */
 
 import { t } from 'ttag';
+import scssColors from './index.module.scss';
 
 /**
  * Quantity of elements to show in the wallet history
@@ -267,3 +268,12 @@ export const FEATURE_TOGGLE_DEFAULTS = {
   [WALLET_SERVICE_FEATURE_TOGGLE]: false,
   [ATOMIC_SWAP_SERVICE_FEATURE_TOGGLE]: false,
 };
+
+/**
+ * This property filters the full exported scss properties and exposes only the ones
+ * relevant to the javascript context.
+ * @type {object}
+ */
+export const colors = {
+  purpleHathor: scssColors.purpleHathor,
+}

src/screens/LoadingAddresses.js

@@ -15,7 +15,7 @@ import SpanFmt from '../components/SpanFmt';
 import RequestErrorModal from '../components/RequestError';
 import logo from '../assets/images/hathor-logo.png';
 import { updateLoadedData } from "../actions/index";
-import colors from '../index.scss';
+import { colors } from '../constants';
 import InitialImages from '../components/InitialImages';
 
 /**

src/screens/LockedWallet.js

@@ -14,7 +14,7 @@ import RequestErrorModal from '../components/RequestError';
 import ReactLoading from 'react-loading';
 import { GlobalModalContext, MODAL_TYPES } from '../components/GlobalModal';
 import { resolveLockWalletPromise, startWalletRequested, walletReset } from '../actions';
-import colors from '../index.scss';
+import { colors } from '../constants';
 import LOCAL_STORE from '../storage';
 
 /**

src/screens/NewWallet.js

@@ -111,14 +111,14 @@ class NewWallet extends React.Component {
   pinSuccess = () => {
     // Getting redux variables before cleaning all data
     const { words, pin, password } = this.props;
+    LOCAL_STORE.unlock();
     // Generate addresses and load data
     wallet.generateWallet(words, '', pin, password, this.props.history);
+    LOCAL_STORE.open(); // Mark this wallet as open, so that it does not appear locked after loading
     // Clean pin, password and words from redux
     this.props.updatePassword(null);
     this.props.updatePin(null);
     this.props.updateWords(null);
-    // Go to wallet
-    this.props.history.push('/wallet/');
   }
 
   /**

src/screens/SendTokens.js

@@ -16,9 +16,8 @@ import SendTxHandler from '../components/SendTxHandler';
 import ledger, { LedgerError } from '../utils/ledger';
 import tokens from '../utils/tokens';
 import version from '../utils/version';
-import { IPC_RENDERER, LEDGER_TX_CUSTOM_TOKEN_LIMIT } from '../constants';
+import { IPC_RENDERER, LEDGER_TX_CUSTOM_TOKEN_LIMIT, colors } from '../constants';
 import ReactLoading from 'react-loading';
-import colors from '../index.scss';
 import { GlobalModalContext, MODAL_TYPES } from '../components/GlobalModal';
 import LOCAL_STORE from '../storage';
 

src/screens/Server.js

@@ -16,8 +16,8 @@ import {
   DEFAULT_SERVERS,
   DEFAULT_WALLET_SERVICE_SERVERS,
   DEFAULT_WALLET_SERVICE_WS_SERVERS,
+  colors,
 } from '../constants';
-import colors from '../index.scss';
 import { connect } from "react-redux";
 import { GlobalModalContext, MODAL_TYPES } from '../components/GlobalModal';
 import LOCAL_STORE from '../storage';

src/screens/TransactionDetail.js

@@ -12,7 +12,7 @@ import { t } from 'ttag';
 import TxData from '../components/TxData';
 import BackButton from '../components/BackButton';
 import hathorLib from '@hathor/wallet-lib';
-import colors from '../index.scss';
+import { colors } from '../constants';
 import helpers from '../utils/helpers';
 import path from 'path';
 

src/screens/Wallet.js

@@ -23,7 +23,7 @@ import tokens from '../utils/tokens';
 import version from '../utils/version';
 import wallet from '../utils/wallet';
 import BackButton from '../components/BackButton';
-import colors from '../index.scss';
+import { colors } from '../constants';
 import { TOKEN_DOWNLOAD_STATUS } from '../sagas/tokens';
 import { GlobalModalContext, MODAL_TYPES } from '../components/GlobalModal';
 import {