(15) refactor: network settings actions

__tests__/sagas/networkSettings.test.ts

@@ -4,7 +4,7 @@ import { all, effectTypes, fork } from 'redux-saga/effects';
 import createSagaMiddleware, { END, runSaga } from 'redux-saga';
 import { applyMiddleware, createStore } from 'redux';
 import { reducer } from '../../src/reducers/reducer';
-import { networkSettingsUpdate, networkSettingsUpdateSuccess, reloadWalletRequested, types } from '../../src/actions';
+import { networkSettingsUpdateRequest, networkSettingsUpdateSuccess, reloadWalletRequested, types } from '../../src/actions';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { networkSettingsKeyMap } from '../../src/constants';
 import { STORE } from '../../src/store';
@@ -46,63 +46,63 @@ describe('updateNetworkSettings', () => {
         const task = middleware.run(defaultSaga);
 
         Promise.resolve()
-            .then(() => store.dispatch(networkSettingsUpdate(null)))
-            .then(() => store.dispatch(networkSettingsUpdate(undefined)))
-            .then(() => store.dispatch(networkSettingsUpdate({})))
-            .then(() => store.dispatch(networkSettingsUpdate({ explorerUrl: undefined })))
-            .then(() => store.dispatch(networkSettingsUpdate({ explorerUrl: null })))
-            .then(() => store.dispatch(networkSettingsUpdate({ explorerUrl: '' })))
-            .then(() => store.dispatch(networkSettingsUpdate({ explorerUrl: 1 })))
-            .then(() => store.dispatch(networkSettingsUpdate({ explorerUrl: 'invalid.url.com' })))
+            .then(() => store.dispatch(networkSettingsUpdateRequest(null)))
+            .then(() => store.dispatch(networkSettingsUpdateRequest(undefined)))
+            .then(() => store.dispatch(networkSettingsUpdateRequest({})))
+            .then(() => store.dispatch(networkSettingsUpdateRequest({ explorerUrl: undefined })))
+            .then(() => store.dispatch(networkSettingsUpdateRequest({ explorerUrl: null })))
+            .then(() => store.dispatch(networkSettingsUpdateRequest({ explorerUrl: '' })))
+            .then(() => store.dispatch(networkSettingsUpdateRequest({ explorerUrl: 1 })))
+            .then(() => store.dispatch(networkSettingsUpdateRequest({ explorerUrl: 'invalid.url.com' })))
             // explorerUrl is valid, however it must have at least nodeUrl
-            .then(() => store.dispatch(networkSettingsUpdate({ explorerUrl: 'http://localhost:8081/' })))
+            .then(() => store.dispatch(networkSettingsUpdateRequest({ explorerUrl: 'http://localhost:8081/' })))
             // explorerUrl is valid, but explorerServiceUrl is empty
-            .then(() => store.dispatch(networkSettingsUpdate({
+            .then(() => store.dispatch(networkSettingsUpdateRequest({
                 explorerUrl: 'http://localhost:8081/',
                 explorerServiceUrl: '',
             })))
             // explorerUrl is valid, but explorerServiceUrl is invalid 
-            .then(() => store.dispatch(networkSettingsUpdate({
+            .then(() => store.dispatch(networkSettingsUpdateRequest({
                 explorerUrl: 'http://localhost:8081/',
                 explorerServiceUrl: 'invalid.url.com',
             })))
             // explorer urls are valid, but nodeUrl is empty
-            .then(() => store.dispatch(networkSettingsUpdate({
+            .then(() => store.dispatch(networkSettingsUpdateRequest({
                 explorerUrl: 'http://localhost:8081/',
                 explorerServiceUrl: 'http://localhost:8082/',
                 nodeUrl: '',
             })))
             // explorer urls are valid, but nodeUrl is invalid 
-            .then(() => store.dispatch(networkSettingsUpdate({
+            .then(() => store.dispatch(networkSettingsUpdateRequest({
                 explorerUrl: 'http://localhost:8081/',
                 explorerServiceUrl: 'http://localhost:8082/',
                 nodeUrl: 'invalid.url.com'
             })))
             // explorer and node urls are valid, but waletServiceUrl is invalid
-            .then(() => store.dispatch(networkSettingsUpdate({
+            .then(() => store.dispatch(networkSettingsUpdateRequest({
                 explorerUrl: 'http://localhost:8081/',
                 explorerServiceUrl: 'http://localhost:8082/',
                 nodeUrl: 'http://localhost:3000/',
                 walletServiceUrl: 'invalid.url.com'
             })))
             // explorer, node, and wallet service urls are valid, but walletServiceWsUrl is empty
-            .then(() => store.dispatch(networkSettingsUpdate({
+            .then(() => store.dispatch(networkSettingsUpdateRequest({
                 explorerUrl: 'http://localhost:8081/',
                 explorerServiceUrl: 'http://localhost:8082/',
                 nodeUrl: 'http://localhost:3000/',
                 walletServiceUrl: 'http://localhost:8083/',
                 walletServiceWsUrl: ''
             })))
             // explorer, node, and wallet service urls are valid, but walletServiceWsUrl is invalid 
-            .then(() => store.dispatch(networkSettingsUpdate({
+            .then(() => store.dispatch(networkSettingsUpdateRequest({
                 explorerUrl: 'http://localhost:8081/',
                 explorerServiceUrl: 'http://localhost:8082/',
                 nodeUrl: 'http://localhost:3000/',
                 walletServiceUrl: 'http://localhost:8083/',
                 walletServiceWsUrl: 'invalid.url.com'
             })))
             // all urls are valid, except nodeUrl
-            .then(() => store.dispatch(networkSettingsUpdate({
+            .then(() => store.dispatch(networkSettingsUpdateRequest({
                 explorerUrl: 'http://localhost:8081/',
                 explorerServiceUrl: 'http://localhost:8082/',
                 nodeUrl: 'invalid.url.com',
@@ -171,36 +171,36 @@ describe('updateNetworkSettings', () => {
 
         Promise.resolve()
             // calls getFullnodeNetwork 
-            .then(() => store.dispatch(networkSettingsUpdate({
+            .then(() => store.dispatch(networkSettingsUpdateRequest({
                 explorerUrl: 'http://localhost:8081/',
                 explorerServiceUrl: 'http://localhost:8082/',
                 nodeUrl: 'http://localhost:3000/',
             })))
             // calls getWalletServiceNetwork 
             // it will fail because is lacking the walletServiceWsUrl
-            .then(() => store.dispatch(networkSettingsUpdate({
+            .then(() => store.dispatch(networkSettingsUpdateRequest({
                 explorerUrl: 'http://localhost:8081/',
                 explorerServiceUrl: 'http://localhost:8082/',
                 nodeUrl: 'http://localhost:3000/',
                 walletServiceUrl: 'http://localhost:8080/'
             })))
             // calls getWalletServiceNetwork 
-            .then(() => store.dispatch(networkSettingsUpdate({
+            .then(() => store.dispatch(networkSettingsUpdateRequest({
                 explorerUrl: 'http://localhost:8081/',
                 explorerServiceUrl: 'http://localhost:8082/',
                 nodeUrl: 'http://localhost:3000/',
                 walletServiceUrl: 'http://localhost:8080/',
                 walletServiceWsUrl: 'ws://ws.localhost:4040/'
             })))
             // calls getFullnodeNetwork 
-            .then(() => store.dispatch(networkSettingsUpdate({
+            .then(() => store.dispatch(networkSettingsUpdateRequest({
                 explorerUrl: 'http://localhost:8081/',
                 explorerServiceUrl: 'http://localhost:8082/',
                 nodeUrl: 'http://localhost:3000/',
             })))
             // calls getFullnodeNetwork 
             // here the getFullnodeNetwork rejects throwing an error
-            .then(() => store.dispatch(networkSettingsUpdate({
+            .then(() => store.dispatch(networkSettingsUpdateRequest({
                 explorerUrl: 'http://localhost:8081/',
                 explorerServiceUrl: 'http://localhost:8082/',
                 nodeUrl: 'http://localhost:3000/',

src/actions.js

@@ -120,11 +120,22 @@ export const types = {
   // NOTE: These actions follows a taxonomy that should be applied
   // to all other actions.
   // See: https://github.com/HathorNetwork/hathor-wallet-mobile/issues/334
-  NETWORKSETTINGS_UPDATE: 'NETWORK_SETTINGS_UPDATE',
+  /* It delivers the user's network settings input from the form. */
+  NETWORKSETTINGS_UPDATE_REQUEST: 'NETWORK_SETTINGS_UPDATE_REQUEST',
+  /* It updates the redux state */
+  NETWORKSETTINGS_UPDATE_STATE: 'NETWORKSETTINGS_UPDATE_STATE',
+  /* It persists the complete structure of network settings in the app storage and updates the redux store. */
+  NETWORKSETTINGS_PERSIST_STORE: 'NETWORKSETTINGS_PERSIST_STORE',
+  /* It indicates the persistence is complete and the wallet will be reloaded. */
+  NETWORKSETTINGS_UPDATE_WAITING: 'NETWORKSETTINGS_UPDATE_WAITING',
+  /* It indicates the update is complete after wallet reloads. */
   NETWORKSETTINGS_UPDATE_SUCCESS: 'NETWORK_SETTINGS_UPDATE_SUCCESS',
-  NETWORKSETTINGS_UPDATE_READY: 'NETWORK_SETTINGS_UPDATE_READY',
+  /* It indicates the update request has invalid inputs. */
+  NETWORKSETTINGS_UPDATE_INVALID: 'NETWORKSETTINGS_UPDATE_INVALID',
+  /* It indicates the update request has failed. */
   NETWORKSETTINGS_UPDATE_FAILURE: 'NETWORK_SETTINGS_UPDATE_FAILURE',
-  NETWORKSETTINGS_UPDATE_ERRORS: 'NETWORK_SETTINGS_UPDATE_ERRORS',
+  /* It updates the redux state of network settings status */
+  NETWORKSETTINGS_UPDATE_READY: 'NETWORK_SETTINGS_UPDATE_READY',
 };
 
 export const featureToggleInitialized = () => ({
@@ -861,13 +872,13 @@ export const setWCConnectionFailed = (failed) => ({
  *   walletServiceWsUrl?: string
  * }} customNetworkRequest Request input
  */
-export const networkSettingsUpdate = (customNetworkRequest) => ({
-  type: types.NETWORKSETTINGS_UPDATE,
+export const networkSettingsUpdateRequest = (customNetworkRequest) => ({
+  type: types.NETWORKSETTINGS_UPDATE_REQUEST,
   payload: customNetworkRequest,
 });
 
 /**
- * Emits the custom network settings to be stored and persisted.
+ * Emits the custom network settings to update the redux store.
  * @param {{
  *   stage: string,
  *   network: string,
@@ -878,22 +889,56 @@ export const networkSettingsUpdate = (customNetworkRequest) => ({
  *   walletServiceWsUrl?: string
  * }} customNetwork Settings to persist
  */
-export const networkSettingsUpdateSuccess = (customNetwork) => ({
-  type: types.NETWORKSETTINGS_UPDATE_SUCCESS,
+export const networkSettingsUpdateState = (customNetwork) => ({
+  type: types.NETWORKSETTINGS_UPDATE_STATE,
+  payload: customNetwork,
+});
+
+/**
+ * Emits the custom network settings to persist in the app storage and update the redux store.
+ * @param {{
+ *   stage: string,
+ *   network: string,
+ *   nodeUrl: string,
+ *   explorerUrl: string,
+ *   explorerServiceUrl: string,
+ *   walletServiceUrl?: string
+ *   walletServiceWsUrl?: string
+ * }} customNetwork Settings to persist
+ */
+export const networkSettingsPersistStore = (customNetwork) => ({
+  type: types.NETWORKSETTINGS_PERSIST_STORE,
   payload: customNetwork,
 });
 
+/**
+ * Emits the waiting signal after persist the custom network.
+ * It means the wallet will reload.
+ */
+export const networkSettingsUpdateWaiting = () => ({
+  type: types.NETWORKSETTINGS_UPDATE_WAITING,
+});
+
+/**
+ * Emits the success signal after wallet reloads.
+ * It servers as hook for the frontend to provide feedback for the user.
+ */
+export const networkSettingsUpdateSuccess = () => ({
+  type: types.NETWORKSETTINGS_UPDATE_SUCCESS,
+});
+
 /**
  * Emits the failure signal for custom network settings request.
  * It means the request couldn't be processed due to internal error.
+ * It serves as hook for the frontend to provide feedback for the user.
  */
 export const networkSettingsUpdateFailure = () => ({
   type: types.NETWORKSETTINGS_UPDATE_FAILURE,
 });
 
 /**
- * Emits errors signal for custom network settings form representing
- * invalid inputs.
+ * Emits invalid signal for custom network settings request inputs.
+ * It means the form should present the invalid message on the corresponding inputs.
  * @param {{
  *   message: string,
  *   nodeUrl: string,
@@ -903,8 +948,8 @@ export const networkSettingsUpdateFailure = () => ({
  *   walletServiceWsUrl?: string
  * }} errors The validation errors from custom network settings form
  */
-export const networkSettingsUpdateErrors = (errors) => ({
-  type: types.NETWORKSETTINGS_UPDATE_ERRORS,
+export const networkSettingsUpdateInvalid = (errors) => ({
+  type: types.NETWORKSETTINGS_UPDATE_INVALID,
   payload: errors,
 });
 

src/components/NetworkSettings/NetworkStatusBar.js

@@ -5,26 +5,46 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { useSelector } from 'react-redux';
-import { eq } from 'lodash';
+import { isEqual } from 'lodash';
 import { t } from 'ttag';
 import { AlertUI } from '../../styles/themes';
 import { ToplineBar } from '../ToplineBar';
 import { PRE_SETTINGS_MAINNET } from '../../constants';
 
 const customNetworkText = t`Custom network`;
 
-export const NetworkStatusBar = () => {
-  const networkSettings = useSelector((state) => state.networkSettings);
-  if (eq(networkSettings, PRE_SETTINGS_MAINNET)) {
-    return null;
+function notMainnet(networkSettings) {
+  if (networkSettings.walletServiceUrl) {
+    return !isEqual(networkSettings, PRE_SETTINGS_MAINNET);
   }
 
-  const style = {
-    backgroundColor: AlertUI.primaryColor,
-    color: AlertUI.dark40Color,
+  const currNetwork = {
+    stage: networkSettings.stage,
+    network: networkSettings.network,
+    nodeUrl: networkSettings.nodeUrl,
+    explorerUrl: networkSettings.explorerUrl,
+    explorerServiceUrl: networkSettings.explorerServiceUrl,
+  };
+  const mainnet = {
+    stage: PRE_SETTINGS_MAINNET.stage,
+    network: PRE_SETTINGS_MAINNET.network,
+    nodeUrl: PRE_SETTINGS_MAINNET.nodeUrl,
+    explorerUrl: PRE_SETTINGS_MAINNET.explorerUrl,
+    explorerServiceUrl: PRE_SETTINGS_MAINNET.explorerServiceUrl,
   };
-  const text = `${customNetworkText}: ${networkSettings.network}`;
-  return (
-    <ToplineBar style={style} text={text} />
+  return !isEqual(currNetwork, mainnet);
+}
+
+const style = {
+  backgroundColor: AlertUI.primaryColor,
+  color: AlertUI.dark40Color,
+};
+
+export const NetworkStatusBar = () => {
+  const getStatusText = (networkSettings) => `${customNetworkText}: ${networkSettings.network}`;
+  const networkSettings = useSelector((state) => state.networkSettings);
+
+  return notMainnet(networkSettings) && (
+    <ToplineBar style={style} text={getStatusText(networkSettings)} />
   );
 };

src/constants.js

@@ -209,6 +209,8 @@ export const NETWORKSETTINGS_STATUS = {
   READY: 'ready',
   FAILED: 'failed',
   LOADING: 'loading',
+  WAITING: 'waiting',
+  SUCCESSFUL: 'successful',
 };
 
 /**