Enable users to enter Lisk Service URL in network switcher - Closes #3475

Jenkinsfile

@@ -89,120 +89,6 @@ pipeline {
 							}
 						}
 					},
-					"cypress": {
-						dir('lisk') {
-							checkout([$class: 'GitSCM',
-							          branches: [[name: "${params.LISK_CORE_VERSION}" ]],
-								  userRemoteConfigs: [[url: 'https://github.com/LiskHQ/lisk-core']]])
-						}
-						dir('lisk-service') {
-							checkout([$class: 'GitSCM',
-								  branches: [[name: "${params.LISK_SERVICE_VERSION}" ]],
-								  userRemoteConfigs: [[url: 'https://github.com/LiskHQ/lisk-service']]])
-							sh '''
-							make build-core
-							make build-gateway
-							make build-template
-							make build-tests
-							'''
-						}
-						withCredentials([string(credentialsId: 'lisk-hub-testnet-passphrase', variable: 'TESTNET_PASSPHRASE'), string(credentialsId: 'lisk-hub-cypress-record-key', variable: 'CYPRESS_RECORD_KEY')]) {
-							ansiColor('xterm') {
-								wrap([$class: 'Xvfb', parallelBuild: true, autoDisplayName: true]) {
-									nvm(getNodejsVersion()) {
-										sh '''#!/bin/bash -xe
-
-										rm -rf $WORKSPACE/$BRANCH_NAME/
-										cp -rf $WORKSPACE/lisk/docker/ $WORKSPACE/$BRANCH_NAME/
-										cp $WORKSPACE/test/dev_blockchain.db.gz $WORKSPACE/$BRANCH_NAME/dev_blockchain.db.gz
-										cd $WORKSPACE/$BRANCH_NAME
-										cp .env.development .env
-										sed -i -r -e "s/ENV_LISK_VERSION=.*$/ENV_LISK_VERSION=$LISK_CORE_IMAGE_VERSION/" .env
-
-										sed -i -r -e '/ports:/,+2d' docker-compose.yml
-										# random port assignment
-										cat <<EOF >docker-compose.override.yml
-version: "3"
-services:
-
-  lisk:
-    ports:
-      - 4000:4000
-    environment:
-      - LISK_CONSOLE_LOG_LEVEL=debug
-EOF
-
-										rm -rf $WORKSPACE/$BRANCH_NAME-service/
-										cp -rf $WORKSPACE/lisk-service/docker/ $WORKSPACE/$BRANCH_NAME-service/
-
-										ENV_LISK_VERSION="$LISK_CORE_IMAGE_VERSION" make coldstart
-										cd -
-
-										cd $WORKSPACE/$BRANCH_NAME-service/
-										# TODO: use random port when the tests support it
-										cat <<EOF >docker-compose.override.yml
-version: "3"
-services:
-
-  gateway:
-    ports:
-      - 127.0.0.1:9901:9901
-EOF
-
-										cat <<EOF >custom.env
-LISK_CORE_HTTP=http://10.127.0.1:4000
-LISK_CORE_WS=ws://10.127.0.1:4000
-EOF
-										sed -i '/compose := docker-compose/a\\\t-f docker-compose.override.yml \\\\' Makefile.jenkins
-										sed -i 's/docker-compose.testnet.yml/docker-compose.custom.yml/' Makefile.jenkins
-										ENABLE_HTTP_API='http-version1,http-version1-compat,http-status,http-test' \
-										ENABLE_WS_API='rpc,rpc-v1,blockchain,rpc-test' \
-										make -f Makefile.jenkins up
-										ready=1
-										retries=0
-										set +e
-										while [ $ready -ne 0 ]; do
-										  curl --fail --verbose http://127.0.0.1:9901/api/v1/blocks
-										  ready=$?
-										  sleep 10
-										  let retries++
-										  if [ $retries = 6 ]; then
-										    break
-										  fi
-										done
-										set -e
-										if [ $retries -ge 6 ]; then
-										  exit 1
-										fi
-										cd -
-
-										npm run serve -- $WORKSPACE/app/build -p 5650 -a 127.0.0.1 &>server.log &
-
-										export CYPRESS_baseUrl=http://127.0.0.1:5650/#/
-										export CYPRESS_coreUrl=http://127.0.0.1:4000
-										export CYPRESS_serviceUrl=http://127.0.0.1:9901
-										set +e
-										set -o pipefail
-										npm run cypress:run |tee cypress.log
-										ret=$?
-
-										# this is to save on cypress credits
-										if [ $ret -ne 0 ]; then
-										  FAILED_TESTS="$( awk '/Spec/{f=1}f' cypress.log |grep --only-matching '✖ .*.feature' |awk '{ print "test/cypress/features/"$2 }' |xargs| tr -s ' ' ',' )"
-										  cd $WORKSPACE/$BRANCH_NAME
-										  make coldstart
-										  sleep 10
-										  cd -
-										  npm run cypress:run -- --record --spec $FAILED_TESTS |tee cypress.log
-										  ret=$?
-										fi
-										exit $ret
-										'''
-									}
-								}
-							}
-						}
-					},
 					"percy": {
 						script {
 							if(params.SKIP_PERCY){

config/webpack.config.electron.js

@@ -9,7 +9,7 @@ module.exports = merge(baseConfig, {
   },
   output: {
     path: resolve(__dirname, '../app/build'),
-    filename: 'main.[name].js',
+    filename: '[name].js',
   },
   target: 'electron-main',
   node: {

i18n/locales/en/common.json

@@ -455,8 +455,8 @@
   "Try again": "Try again",
   "Twitter": "Twitter",
   "Type": "Type",
+  "Unable to connect to Lisk Service, please check the address and try again": "Unable to connect to Lisk Service, please check the address and try again",
   "Unable to connect to the node, no response from the server.": "Unable to connect to the node, no response from the server.",
-  "Unable to connect to the node, please check the address and try again": "Unable to connect to the node, please check the address and try again",
   "Undo": "Undo",
   "Unlock": "Unlock",
   "Unnamed account": "Unnamed account",

src/components/screens/login/login.js

@@ -20,13 +20,13 @@ import styles from './login.css';
 class Login extends React.Component {
   constructor() { // eslint-disable-line max-statements
     super();
-    const { liskCoreUrl } = getAutoLogInData();
+    const { liskServiceUrl } = getAutoLogInData();
     let loginNetwork = findMatchingLoginNetwork();
     let address = '';
 
     if (!loginNetwork) {
-      loginNetwork = liskCoreUrl ? networks.customNode : networks[networkKeys.mainNet];
-      address = liskCoreUrl || '';
+      loginNetwork = liskServiceUrl ? networks.customNode : networks[networkKeys.mainNet];
+      address = liskServiceUrl || '';
     }
 
     this.state = {
@@ -48,7 +48,7 @@ class Login extends React.Component {
 
   async componentDidMount() {
     // istanbul ignore else
-    if (!this.props.settings.areTermsOfUseAccepted) {
+    if (!this.props.settings.areTermsOfUseAccepted && this.props.network.networks?.LSK) {
       this.props.history.push(routes.termsOfUse.path);
     }
 
@@ -106,7 +106,7 @@ class Login extends React.Component {
   // eslint-disable-next-line complexity
   render() {
     const { t, network, settings } = this.props;
-    const canHWSignIn = !network.networks.LSK;
+    const canHWSignIn = !network.networks?.LSK;
 
     return (
       <React.Fragment>

src/components/screens/login/networkSelector/networkSelector.js

@@ -25,9 +25,9 @@ const getNetwork = (name, url) => {
 };
 
 const getInitialState = (address) => {
-  const { liskCoreUrl } = getAutoLogInData();
+  const { liskServiceUrl } = getAutoLogInData();
   return {
-    address: liskCoreUrl || address,
+    address: liskServiceUrl || address,
     connected: true,
     isValid: true,
     isCustomSelected: false,
@@ -83,7 +83,7 @@ const NetworkSelector = ({
           name: networkName,
           address: networkToSet.address,
         }, tokenMap.LSK.key);
-        if (response.data) {
+        if (response) {
           setState({ isValid: true, connected: true });
           changeNetworkInSettings(networkName);
           networkSelected(networkToSet);
@@ -115,15 +115,15 @@ const NetworkSelector = ({
     isValidationLoading,
   } = state;
 
-  const validationError = isValid ? '' : t('Unable to connect to the node, please check the address and try again');
+  const validationError = isValid ? '' : t('Unable to connect to Lisk Service, please check the address and try again');
 
   return (
     <DropdownButton
       ref={childRef}
       buttonClassName={`${isValid ? '' : styles.dropdownError} ${styles.dropdownHandler} network`}
       wrapperClassName={styles.NetworkSelector}
       className={`${styles.menu} network-dropdown`}
-      buttonLabel={(<span>{networks[selectedNetworkName].label}</span>)}
+      buttonLabel={(<span>{networks[selectedNetworkName]?.label}</span>)}
       ButtonComponent={SecondaryButton}
       align="right"
     >

src/components/shared/customRoute/index.js

@@ -4,6 +4,7 @@ import { Redirect, Route } from 'react-router-dom';
 
 import Piwik from '@utils/piwik';
 import { routes } from '@constants';
+import Login from '@screens/login';
 import ErrorBoundary from '../errorBoundary';
 import offlineStyle from '../offlineWrapper/offlineWrapper.css';
 
@@ -29,10 +30,6 @@ const CustomRoute = ({
   const isNetworkSet = useSelector(checkNetwork);
   const { search = '' } = history.location;
 
-  if (!isNetworkSet) {
-    return null;
-  }
-
   Piwik.tracking(history, settings);
 
   if (forbiddenTokens.indexOf(settings.token.active) !== -1) {
@@ -51,10 +48,10 @@ const CustomRoute = ({
     <main className={`${isPrivate ? offlineStyle.disableWhenOffline : ''} offlineWrapper`}>
       <ErrorBoundary errorMessage={t('An error occurred while rendering this page')}>
         <Route
-          path={path}
+          path={isNetworkSet ? path : routes.login.path}
           exact={exact}
-          key={path}
-          component={component}
+          key={isNetworkSet ? path : routes.login.path}
+          component={isNetworkSet ? component : Login}
         />
       </ErrorBoundary>
     </main>

src/constants/settings.js

@@ -2,7 +2,7 @@ const settings = {
   currencies: ['USD', 'EUR', 'CHF'],
   keys: {
     loginKey: 'loginKey',
-    liskCoreUrl: 'liskCoreUrl',
+    liskServiceUrl: 'liskServiceUrl',
   },
 };
 export default settings;

src/store/middlewares/account.js

@@ -106,10 +106,10 @@ const autoLogInIfNecessary = async ({ dispatch, getState }) => {
   } = getState().settings;
   const autoLoginData = getAutoLogInData();
 
-  const address = autoLoginData[settings.keys.liskCoreUrl];
+  const address = autoLoginData[settings.keys.liskServiceUrl];
   const network = address
     ? { name: networkKeys.customNode, address }
-    : { name: networkKeys.mainNet, address: networks.mainnet.nodes[0] };
+    : { name: networkKeys.mainNet, address: networks.mainnet.serviceUrl };
   dispatch(networkSelected(network));
   dispatch(networkStatusUpdated({ online: true }));
 
@@ -139,7 +139,9 @@ const accountMiddleware = store => next => async (action) => {
       store.dispatch(emptyTransactionsData());
       break;
     case actionTypes.settingsUpdated:
-      store.dispatch(accountDataUpdated('enabled'));
+      if (action.data.token) {
+        store.dispatch(accountDataUpdated('enabled'));
+      }
       break;
     /* istanbul ignore next */
     default: break;

src/store/middlewares/settings.js

@@ -1,13 +1,19 @@
 import { actionTypes } from '@constants';
 import { setInStorage } from '@utils/localJSONStorage';
-import { pricesRetrieved, emptyTransactionsData } from '@actions';
+import { pricesRetrieved, emptyTransactionsData, settingsUpdated } from '@actions';
 
 const settings = store => next => (action) => {
   const { token } = store.getState().settings;
   next(action);
   switch (action.type) {
     case actionTypes.networkConfigSet:
       store.dispatch(pricesRetrieved());
+      store.dispatch(settingsUpdated({
+        network: {
+          name: action.data.name,
+          address: action.data.networks.LSK.serviceUrl,
+        },
+      }));
       break;
     case actionTypes.settingsUpdated:
       if (action.data.token && action.data.token.active !== token.active) {

src/store/middlewares/settings.test.js

@@ -1,4 +1,4 @@
-import { pricesRetrieved, emptyTransactionsData } from '@actions';
+import { pricesRetrieved, emptyTransactionsData, settingsUpdated } from '@actions';
 import { actionTypes } from '@constants';
 import settingsMiddleware from './settings';
 
@@ -33,10 +33,19 @@ describe('Middleware: Settings', () => {
     it('should dispatch pricesRetrieved', () => {
       const action = {
         type: actionTypes.networkConfigSet,
+        data: {
+          name: 'customNode',
+          networks: {
+            LSK: {
+              serviceUrl: 'http://test.io',
+            },
+          },
+        },
       };
 
       settingsMiddleware(store)(next)(action);
       expect(pricesRetrieved).toBeCalled();
+      expect(settingsUpdated).toBeCalled();
     });
   });
 

src/utils/api/network/lsk.js

@@ -28,14 +28,7 @@ const getServiceUrl = ({ name, address = 'http://localhost:4000' }) => {
   if ([networkKeys.mainNet, networkKeys.testNet].includes(name)) {
     return networks[name].serviceUrl;
   }
-  if (name === networkKeys.customNode) {
-    const serviceUrl = window.localStorage.getItem('serviceUrl');
-    if (serviceUrl) {
-      return serviceUrl;
-    }
-    return address.replace(/:\d{2,4}/, ':9901');
-  }
-  throw Error('The node url entered does not have a corresponding service url');
+  return address;
 };
 
 /**

src/utils/login.js

@@ -35,16 +35,16 @@ export const validateUrl = (value) => {
 // Ignore coverage because this is only development feature
 export const getAutoLogInData = /* istanbul ignore next */ () => ({
   [settings.keys.loginKey]: localStorage.getItem(settings.keys.loginKey),
-  [settings.keys.liskCoreUrl]: localStorage.getItem(settings.keys.liskCoreUrl),
+  [settings.keys.liskServiceUrl]: localStorage.getItem(settings.keys.liskServiceUrl),
 });
 
 // Ignore coverage because this is only development feature
 export const shouldAutoLogIn = /* istanbul ignore next */ autologin =>
-  autologin[settings.keys.liskCoreUrl] && autologin[settings.keys.liskCoreUrl] !== ''
+  autologin[settings.keys.liskServiceUrl] && autologin[settings.keys.liskServiceUrl] !== ''
     && autologin[settings.keys.loginKey] && autologin[settings.keys.loginKey] !== '';
 
 export const findMatchingLoginNetwork = () => {
-  const { liskCoreUrl } = getAutoLogInData();
+  const { liskServiceUrl } = getAutoLogInData();
   return Object.values(networks).find(({ nodes }) =>
-    (Array.isArray(nodes) ? nodes.includes(liskCoreUrl) : false));
+    (Array.isArray(nodes) ? nodes.includes(liskServiceUrl) : false));
 };

test/cypress/support/commands.js

@@ -61,6 +61,6 @@ Cypress.Commands.add('addObjectToLocalStorage', (item, key, value) => {
 });
 
 Cypress.Commands.add('autologin', (passphrase, network) => {
-  localStorage.setItem('liskCoreUrl', network);
+  localStorage.setItem('liskServiceUrl', network);
   localStorage.setItem('loginKey', passphrase);
 });