From 7cc9b29c363411392e2459f322be9dfbf8e6dfea Mon Sep 17 00:00:00 2001 From: Oskar Fransson Date: Fri, 22 Sep 2023 17:55:05 +0200 Subject: [PATCH 1/2] Sync networks and blockchainApplication when network is deleted or name is changed --- .../blockchainApplication/manage/store/action.js | 11 +++++++++++ .../manage/store/actionTypes.js | 2 ++ .../manage/store/reducer.js | 12 +++++++++++- .../DialogAddNetwork/DialogAddNetwork.js | 16 +++++++++++++++- .../DialogRemoveNetwork/DialogRemoveNetwork.js | 6 +++++- 5 files changed, 44 insertions(+), 3 deletions(-) diff --git a/src/modules/blockchainApplication/manage/store/action.js b/src/modules/blockchainApplication/manage/store/action.js index a58bfc8133..367fec2d32 100644 --- a/src/modules/blockchainApplication/manage/store/action.js +++ b/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 * diff --git a/src/modules/blockchainApplication/manage/store/actionTypes.js b/src/modules/blockchainApplication/manage/store/actionTypes.js index f73fa3edb9..d9c2e4181e 100644 --- a/src/modules/blockchainApplication/manage/store/actionTypes.js +++ b/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; diff --git a/src/modules/blockchainApplication/manage/store/reducer.js b/src/modules/blockchainApplication/manage/store/reducer.js index 2e106f9582..e93d3b661f 100644 --- a/src/modules/blockchainApplication/manage/store/reducer.js +++ b/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]; diff --git a/src/modules/network/components/DialogAddNetwork/DialogAddNetwork.js b/src/modules/network/components/DialogAddNetwork/DialogAddNetwork.js index 13ac06122e..76ceaab840 100644 --- a/src/modules/network/components/DialogAddNetwork/DialogAddNetwork.js +++ b/src/modules/network/components/DialogAddNetwork/DialogAddNetwork.js @@ -20,6 +20,8 @@ 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 @@ -27,7 +29,9 @@ 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(); } diff --git a/src/modules/network/components/DialogRemoveNetwork/DialogRemoveNetwork.js b/src/modules/network/components/DialogRemoveNetwork/DialogRemoveNetwork.js index bb15cb33bd..35c87ad15f 100644 --- a/src/modules/network/components/DialogRemoveNetwork/DialogRemoveNetwork.js +++ b/src/modules/network/components/DialogRemoveNetwork/DialogRemoveNetwork.js @@ -7,10 +7,12 @@ 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 = () => { @@ -18,6 +20,7 @@ const DialogRemoveNetwork = () => { 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' }); }; From 5b0d52b7f1cd1421e1c219259304a4b5397eadbd Mon Sep 17 00:00:00 2001 From: Oskar Fransson Date: Sat, 23 Sep 2023 11:59:41 +0200 Subject: [PATCH 2/2] Fixed tests --- .../manage/store/reducer.test.js | 13 +++++++++++++ .../DialogAddNetwork/DialogAddNetwork.test.js | 5 ++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/modules/blockchainApplication/manage/store/reducer.test.js b/src/modules/blockchainApplication/manage/store/reducer.test.js index 6271bf4896..13e4e7e925 100644 --- a/src/modules/blockchainApplication/manage/store/reducer.test.js +++ b/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]; diff --git a/src/modules/network/components/DialogAddNetwork/DialogAddNetwork.test.js b/src/modules/network/components/DialogAddNetwork/DialogAddNetwork.test.js index 4c20b831d9..f784e20174 100644 --- a/src/modules/network/components/DialogAddNetwork/DialogAddNetwork.test.js +++ b/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,