Sync networks with application state

src/modules/blockchainApplication/manage/store/action.js

@@ -43,6 +43,17 @@ export const deleteApplication = (chainId, network) => ({
   network,
 });
 
+export const deleteNetworkInApplications = (network) => ({
+  type: actionTypes.deleteNetworkInApplications,
+  network,
+});
+
+export const updateNetworkNameInApplications = (currentName, newName) => ({
+  type: actionTypes.updateNetworkNameInApplications,
+  currentName,
+  newName
+});
+
 /**
  * Trigger this action to set current blockchain application
  *

src/modules/blockchainApplication/manage/store/actionTypes.js

@@ -4,6 +4,8 @@ const actionTypes = {
   deleteApplicationByChainId: 'DELETE_APPLICATION_BY_CHAIN_ID',
   setCurrentApplication: 'SET_CURRENT_APPLICATION',
   setApplications: 'SET_APPLICATIONS',
+  deleteNetworkInApplications: 'DELETE_NETWORK_IN_APPLICATIONS',
+  updateNetworkNameInApplications: 'UPDATE_NETWORK_NAME_IN_APPLICATIONS',
 };
 
 export default actionTypes;

src/modules/blockchainApplication/manage/store/reducer.js

@@ -33,7 +33,7 @@ export const pins = (state = initialState.pins, { type, chainId }) => {
 
 export const applications = (
   state = initialState.applications,
-  { type, app, apps, chainId, network }
+  { type, app, apps, chainId, network, currentName, newName }
 ) => {
   switch (type) {
     case actionTypes.addApplicationByChainId:
@@ -49,6 +49,16 @@ export const applications = (
       );
     }
 
+    case actionTypes.deleteNetworkInApplications: {
+      delete state[network];
+      return { ...state };
+    }
+
+    case actionTypes.updateNetworkNameInApplications: {
+      const { [currentName]: oldName, ...rest } = state;
+      return { ...rest, [newName]: { ...oldName } };
+    }
+
     case actionTypes.deleteApplicationByChainId: {
       delete state[network][chainId];
       const { [chainId]: chainToRemove, ...restApplications } = state[network];

src/modules/blockchainApplication/manage/store/reducer.test.js

@@ -68,6 +68,19 @@ describe('BlockchainApplication reducer', () => {
       expect(changedState).not.toHaveProperty(actionData.chainId);
     });
 
+    it('should delete network in applications', async () => {
+      const actionData = {
+        type: actionTypes.deleteNetworkInApplications,
+        network: 'devnet',
+      };
+
+      const changedState = applications(
+        { devnet: applicationsMap, betanet: applicationsMap },
+        actionData
+      );
+      expect(changedState).toEqual({ betanet: applicationsMap });
+    });
+
     it('should return list of applications with the newly added applications', async () => {
       const newApplication1 = mockApplicationsManage[0];
       const newApplication2 = mockApplicationsManage[1];

src/modules/network/components/DialogAddNetwork/DialogAddNetwork.js

@@ -20,14 +20,18 @@ import {
   useNetworkCheck,
 } from '@network/components/DialogAddNetwork/utils';
 import networks from '@network/configuration/networks';
+import { useDispatch } from 'react-redux';
+import { updateNetworkNameInApplications } from '@blockchainApplication/manage/store/action';
 import styles from './DialogAddNetwork.css';
 
 // eslint-disable-next-line max-statements,complexity
 const DialogAddNetwork = () => {
   const { t } = useTranslation();
   const history = useHistory();
   const { setValue, customNetworks } = useSettings('customNetworks');
+  const { setValue: setMainChainNetwork, mainChainNetwork } = useSettings('mainChainNetwork');
   const [errorText, setErrorText] = useState('');
+  const dispatch = useDispatch();
 
   const { name: defaultName = '' } = parseSearchParams(history.location.search);
 
@@ -68,13 +72,23 @@ const DialogAddNetwork = () => {
     if (!networkCheck.isNetworkOK) return null;
 
     const wsServiceUrl = values.wsServiceUrl || values.serviceUrl.replace(/^http(s?)/, 'ws$1');
+    const networkToAdd = { ...values, isAvailable: true, wsServiceUrl, label: values.name };
     const updatedCustomNetworks = immutableSetToArray({
       array: customNetworks,
-      mapToAdd: { ...values, isAvailable: true, wsServiceUrl, label: values.name },
+      mapToAdd: networkToAdd,
       index: customNetworks.findIndex((network) => network.name === defaultName),
     });
     setValue(updatedCustomNetworks);
 
+    if (defaultName) {
+      dispatch(updateNetworkNameInApplications(defaultName, values.name));
+
+      const isCurrentMainChainNetwork = mainChainNetwork.serviceUrl === networkToAdd.serviceUrl;
+      if (isCurrentMainChainNetwork) {
+        setMainChainNetwork(networkToAdd);
+      }
+    }
+
     if (!defaultName) {
       reset();
     }

src/modules/network/components/DialogAddNetwork/DialogAddNetwork.test.js

@@ -1,7 +1,8 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { smartRender } from 'src/utils/testHelpers';
-import useSettings from '@settings/hooks/useSettings';
 import { toast } from 'react-toastify';
+import useSettings from '@settings/hooks/useSettings';
+import networks from '@network/configuration/networks';
 import { useNetworkCheck } from '@network/components/DialogAddNetwork/utils';
 import DialogAddNetwork from './DialogAddNetwork';
 
@@ -91,6 +92,7 @@ describe('DialogAddNetwork', () => {
           isAvailable: true,
         },
       ],
+      mainChainNetwork: networks.devnet,
     });
     smartRender(DialogAddNetwork, null, config);
 
@@ -117,6 +119,7 @@ describe('DialogAddNetwork', () => {
           isAvailable: true,
         },
       ],
+      mainChainNetwork: networks.devnet,
     });
     const updatedConfig = {
       ...config,

src/modules/network/components/DialogRemoveNetwork/DialogRemoveNetwork.js

@@ -7,17 +7,20 @@ import Dialog from '@theme/dialog/dialog';
 import Box from '@theme/box';
 import BoxHeader from '@theme/box/header';
 import BoxContent from '@theme/box/content';
-import { PrimaryButton, OutlineButton } from '@theme/buttons';
+import { OutlineButton, PrimaryButton } from '@theme/buttons';
 import useSettings from '@settings/hooks/useSettings';
 import { parseSearchParams, removeSearchParamsFromUrl } from 'src/utils/searchParams';
 import { immutableDeleteFromArrayById } from 'src/utils/immutableUtils';
+import { deleteNetworkInApplications } from '@blockchainApplication/manage/store/action';
+import { useDispatch } from 'react-redux';
 import styles from './DialogRemoveNetwork.css';
 
 const DialogRemoveNetwork = () => {
   const history = useHistory();
   const { t } = useTranslation();
   const { name, serviceUrl } = parseSearchParams(history.location.search);
   const { customNetworks, setValue } = useSettings('customNetworks');
+  const dispatch = useDispatch();
 
   const onCancel = () => {
     removeSearchParamsFromUrl(history, ['modal'], true);
@@ -26,6 +29,7 @@ const DialogRemoveNetwork = () => {
   const onConfirm = () => {
     const modifiedCustomNetworks = immutableDeleteFromArrayById(customNetworks, 'name', name);
     setValue(modifiedCustomNetworks);
+    dispatch(deleteNetworkInApplications(name));
     removeSearchParamsFromUrl(history, ['modal'], true);
     toast.info(t(`Network removed "${name}"`), { position: 'bottom-right' });
   };