diff --git a/setup/jest.config.js b/setup/jest.config.js index 778f265879..f4a217e0b5 100644 --- a/setup/jest.config.js +++ b/setup/jest.config.js @@ -300,6 +300,7 @@ module.exports = { 'src/modules/pos/validator/components/ClaimRewardsView/index.js', 'src/modules/blockchainApplication/manage/hooks/useApplicationManagement.js', 'src/modules/wallet/components/MenuSelect/MenuSelect.js', + 'src/modules/network/components/networkSwitcherDropdown/networkMenuItem/NetworkMenuItem.js', 'src/modules/network/components/networkSwitcherDropdown/NetworkSwitcherDropdown.js', 'src/modules/blockchainApplication/manage/components/UserApplicationSelector/UserApplicationSelector.js', 'src/modules/network/components/selectNetwork/SelectNetwork.js', diff --git a/src/modules/blockchainApplication/manage/components/DialogNetworkApplicationSelector/DialogNetworkApplicationSelector.test.js b/src/modules/blockchainApplication/manage/components/DialogNetworkApplicationSelector/DialogNetworkApplicationSelector.test.js index 0de5336b0c..b91b749058 100644 --- a/src/modules/blockchainApplication/manage/components/DialogNetworkApplicationSelector/DialogNetworkApplicationSelector.test.js +++ b/src/modules/blockchainApplication/manage/components/DialogNetworkApplicationSelector/DialogNetworkApplicationSelector.test.js @@ -37,6 +37,7 @@ useApplicationManagement.mockReturnValue({ useSettings.mockReturnValue({ customNetworks: [], mainChainNetwork: networks[DEFAULT_NETWORK], + setValue: jest.fn(), }); describe('ModalNetworkApplicationSelector', () => { diff --git a/src/modules/network/components/networkSwitcherDropdown/NetworkSwitcherDropdown.css b/src/modules/network/components/networkSwitcherDropdown/NetworkSwitcherDropdown.css index 01fc521cc6..939892bad9 100644 --- a/src/modules/network/components/networkSwitcherDropdown/NetworkSwitcherDropdown.css +++ b/src/modules/network/components/networkSwitcherDropdown/NetworkSwitcherDropdown.css @@ -16,41 +16,6 @@ color: var(--color-zodiac-blue); margin-bottom: 16px; } - - & .networkItem { - font-weight: var(--font-weight-normal) !important; - font-size: var(--font-size-h6); - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - padding: 10px 16px !important; - color: var(--color-content-light) !important; - width: calc(100% - 32px) !important; - border-radius: 8px !important; - - &.selected { - background-color: var(--color-network-selected-background); - } - - & .networkIcons { - & > :not(:last-child) { - margin-right: 10px; - } - - & .modifyIcons { - display: none; - } - } - - &:hover { - & .modifyIcons { - display: inline; - cursor: pointer; - vertical-align: top; - } - } - } } & .connectionFailedBlock { @@ -95,7 +60,7 @@ } } -.menuSelect .networkItem { +.menuSelect .networkItemProp { font-family: var(--content-font) !important; background-color: unset !important; font-weight: var(--font-weight-normal); diff --git a/src/modules/network/components/networkSwitcherDropdown/NetworkSwitcherDropdown.js b/src/modules/network/components/networkSwitcherDropdown/NetworkSwitcherDropdown.js index 7feceee148..d45d6bcb8a 100644 --- a/src/modules/network/components/networkSwitcherDropdown/NetworkSwitcherDropdown.js +++ b/src/modules/network/components/networkSwitcherDropdown/NetworkSwitcherDropdown.js @@ -1,9 +1,9 @@ /* eslint-disable complexity, max-statements */ import React, { useCallback, useEffect, useRef, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { useSelector, useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { useTranslation } from 'react-i18next'; -import MenuSelect, { MenuItem } from '@wallet/components/MenuSelect'; +import MenuSelect from '@wallet/components/MenuSelect'; import Icon from '@theme/Icon'; import useSettings from '@settings/hooks/useSettings'; import { Client } from 'src/utils/api/client'; @@ -11,12 +11,13 @@ import DialogLink from '@theme/dialog/link'; import { selectStaking } from 'src/redux/selectors'; import { stakesReset } from 'src/redux/actions'; import { - removeThenAppendSearchParamsToUrl, removeSearchParamsFromUrl, + removeThenAppendSearchParamsToUrl, } from 'src/utils/searchParams'; import { createConfirmSwitchState } from '@common/utils/createConfirmSwitchState'; import stylesSecondaryButton from '@theme/buttons/css/secondaryButton.css'; import classNames from 'classnames'; +import NetworkMenuItem from '@network/components/networkSwitcherDropdown/networkMenuItem/NetworkMenuItem'; import networks from '../../configuration/networks'; import { useNetworkStatus } from '../../hooks/queries'; import styles from './NetworkSwitcherDropdown.css'; @@ -52,15 +53,21 @@ function NetworkSwitcherDropdown({ noLabel, onNetworkSwitchSuccess }) { queryClient.current.create({ http: network.serviceUrl, }); - networkStatus.refetch().then((res) => { + setSelectedNetwork(network); + }, + [networkStatus] + ); + + useEffect(() => { + if (selectedNetwork.serviceUrl) { + networkStatus?.refetch?.()?.then((res) => { if (!res.error) { // clear stakes list during network switch if (pendingStakes.length) { const onCancel = /* istanbul ignore next */ () => removeSearchParamsFromUrl(history, ['modal']); const onConfirm = /* istanbul ignore next */ () => { - setValue(network); - setSelectedNetwork(network); + setValue(selectedNetwork); dispatch(stakesReset()); removeSearchParamsFromUrl(history, ['modal']); @@ -78,25 +85,12 @@ function NetworkSwitcherDropdown({ noLabel, onNetworkSwitchSuccess }) { state ); } else { - setValue(network); - setSelectedNetwork(network); + setValue(selectedNetwork); } } }); - }, - [networkStatus] - ); - - const editCustomNetwork = (e, data) => { - e.stopPropagation(); - removeThenAppendSearchParamsToUrl(history, { modal: 'dialogAddNetwork', ...data }, ['modal']); - }; - const deleteCustomNetwork = (e, data) => { - e.stopPropagation(); - removeThenAppendSearchParamsToUrl(history, { modal: 'dialogRemoveNetwork', ...data }, [ - 'modal', - ]); - }; + } + }, [selectedNetwork.serviceUrl]); useEffect(() => { const isSuccess = networkStatus.isSuccess && !networkStatus.isFetching; @@ -109,7 +103,7 @@ function NetworkSwitcherDropdown({ noLabel, onNetworkSwitchSuccess }) { {!noLabel && } selectedValue.label === option.label} + select={(selectedValue, option) => selectedValue.label === option?.label} onChange={handleChangeNetwork} popupClassName={styles.networksPopup} className={styles.menuSelect} @@ -120,48 +114,15 @@ function NetworkSwitcherDropdown({ noLabel, onNetworkSwitchSuccess }) { .filter((networkKey) => networksWithCustomNetworks[networkKey].isAvailable) .map((networkKey) => { const network = networksWithCustomNetworks[networkKey]; - return ( - - - {network.label} - - - {network.isCustom && ( - <> - - editCustomNetwork(e, { - name: network.name, - serviceUrl: network.serviceUrl, - }) - } - > - - - {currentNetworkName !== network.name && ( - - deleteCustomNetwork(e, { - name: network.name, - serviceUrl: network.serviceUrl, - }) - } - > - - - )} - - )} - {selectedNetwork.label === network.label && } - - + selectedNetwork={selectedNetwork} + currentNetworkName={currentNetworkName} + value={network} + isSelected={network.label === selectedNetwork.label} + /> ); })} diff --git a/src/modules/network/components/networkSwitcherDropdown/networkMenuItem/NetworkMenuItem.css b/src/modules/network/components/networkSwitcherDropdown/networkMenuItem/NetworkMenuItem.css new file mode 100644 index 0000000000..7d47b2b75c --- /dev/null +++ b/src/modules/network/components/networkSwitcherDropdown/networkMenuItem/NetworkMenuItem.css @@ -0,0 +1,36 @@ +@import '../../../../../../setup/react/app/mixins.css'; + +.NetworkMenuItem { + font-weight: var(--font-weight-normal) !important; + font-size: var(--font-size-h6) !important; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 10px 16px !important; + color: var(--color-content-light) !important; + width: calc(100% - 32px) !important; + border-radius: 8px !important; + + &.selected { + background-color: var(--color-network-selected-background) !important; + } + + & .networkIcons { + & > :not(:last-child) { + margin-right: 10px; + } + + & .modifyIcons { + display: none; + } + } + + &:hover { + & .modifyIcons { + display: inline; + cursor: pointer; + vertical-align: top; + } + } +} diff --git a/src/modules/network/components/networkSwitcherDropdown/networkMenuItem/NetworkMenuItem.js b/src/modules/network/components/networkSwitcherDropdown/networkMenuItem/NetworkMenuItem.js new file mode 100644 index 0000000000..093bddb651 --- /dev/null +++ b/src/modules/network/components/networkSwitcherDropdown/networkMenuItem/NetworkMenuItem.js @@ -0,0 +1,67 @@ +import React from 'react'; +import { MenuItem } from '@wallet/components/MenuSelect'; +import Icon from '@theme/Icon'; +import { removeThenAppendSearchParamsToUrl } from 'src/utils/searchParams'; +import { useHistory } from 'react-router-dom'; +import classNames from 'classnames'; +import styles from './NetworkMenuItem.css'; + +function NetworkMenuItem({ className, value, currentNetworkName, isSelected }) { + const history = useHistory(); + + const editCustomNetwork = (e, data) => { + e.stopPropagation(); + removeThenAppendSearchParamsToUrl(history, { modal: 'dialogAddNetwork', ...data }, ['modal']); + }; + const deleteCustomNetwork = (e, data) => { + e.stopPropagation(); + removeThenAppendSearchParamsToUrl(history, { modal: 'dialogRemoveNetwork', ...data }, [ + 'modal', + ]); + }; + + return ( + + + {value.label} + + + {value.isCustom && ( + <> + + editCustomNetwork(e, { + name: value.name, + serviceUrl: value.serviceUrl, + }) + } + > + + + {currentNetworkName !== value.name && ( + + deleteCustomNetwork(e, { + name: value.name, + serviceUrl: value.serviceUrl, + }) + } + > + + + )} + + )} + {isSelected && } + + + ); +} + +export default NetworkMenuItem;