diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js index 33832a0a9f88..41beac5744bc 100644 --- a/ui/components/multichain/network-list-menu/network-list-menu.js +++ b/ui/components/multichain/network-list-menu/network-list-menu.js @@ -28,6 +28,7 @@ import { getShowNetworkBanner, getOriginOfCurrentTab, getUseRequestQueue, + getAllDomains, } from '../../../selectors'; import ToggleButton from '../../ui/toggle-button'; import { @@ -76,6 +77,7 @@ export const NetworkListMenu = ({ onClose }) => { const selectedTabOrigin = useSelector(getOriginOfCurrentTab); const useRequestQueue = useSelector(getUseRequestQueue); + const domains = useSelector(getAllDomains); const dispatch = useDispatch(); const history = useHistory(); @@ -193,10 +195,14 @@ export const NetworkListMenu = ({ onClose }) => { dispatch(setActiveNetwork(network.id)); } - // If presently on a dapp, communicate a change to - // the dapp via silent switchEthereumChain that the - // network has changed due to user action - if (useRequestQueue && selectedTabOrigin) { + // If presently on and connected to a dapp, communicate a change to + // the dapp via silent switchEthereumChain that the network has + // changed due to user action + if ( + useRequestQueue && + selectedTabOrigin && + domains[selectedTabOrigin] + ) { setNetworkClientIdForDomain(selectedTabOrigin, network.id); } diff --git a/ui/components/multichain/network-list-menu/network-list-menu.test.js b/ui/components/multichain/network-list-menu/network-list-menu.test.js index 83ebf8d03250..fa313c373752 100644 --- a/ui/components/multichain/network-list-menu/network-list-menu.test.js +++ b/ui/components/multichain/network-list-menu/network-list-menu.test.js @@ -7,25 +7,32 @@ import { CHAIN_IDS, MAINNET_DISPLAY_NAME, SEPOLIA_DISPLAY_NAME, + NETWORK_TYPES, } from '../../../../shared/constants/network'; import { NetworkListMenu } from '.'; const mockSetShowTestNetworks = jest.fn(); const mockSetProviderType = jest.fn(); const mockToggleNetworkMenu = jest.fn(); +const mockSetNetworkClientIdForDomain = jest.fn(); jest.mock('../../../store/actions.ts', () => ({ setShowTestNetworks: () => mockSetShowTestNetworks, setProviderType: () => mockSetProviderType, toggleNetworkMenu: () => mockToggleNetworkMenu, + setNetworkClientIdForDomain: (network, id) => + mockSetNetworkClientIdForDomain(network, id), })); +const MOCK_ORIGIN = 'https://portfolio.metamask.io'; + const render = ({ showTestNetworks = false, currentChainId = '0x5', providerConfigId = 'chain5', isUnlocked = true, - origin = 'https://portfolio.metamask.io', + origin = MOCK_ORIGIN, + selectedTabOriginInDomainsState = true, } = {}) => { const state = { metamask: { @@ -40,6 +47,11 @@ const render = ({ showTestNetworks, }, useRequestQueue: true, + domains: { + ...(selectedTabOriginInDomainsState + ? { [origin]: providerConfigId } + : {}), + }, }, activeTab: { origin, @@ -51,6 +63,10 @@ const render = ({ }; describe('NetworkListMenu', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + it('displays important controls', () => { const { getByText, getByPlaceholderText } = render(); @@ -140,4 +156,32 @@ describe('NetworkListMenu', () => { document.querySelectorAll('multichain-network-list-item__delete'), ).toHaveLength(0); }); + + describe('selectedTabOrigin is connected to wallet', () => { + it('fires setNetworkClientIdForDomain when network item is clicked', () => { + const { getByText } = render(); + fireEvent.click(getByText(MAINNET_DISPLAY_NAME)); + expect(mockSetNetworkClientIdForDomain).toHaveBeenCalledWith( + MOCK_ORIGIN, + NETWORK_TYPES.MAINNET, + ); + }); + + it('fires setNetworkClientIdForDomain when test network item is clicked', () => { + const { getByText } = render({ showTestNetworks: true }); + fireEvent.click(getByText(SEPOLIA_DISPLAY_NAME)); + expect(mockSetNetworkClientIdForDomain).toHaveBeenCalledWith( + MOCK_ORIGIN, + NETWORK_TYPES.SEPOLIA, + ); + }); + }); + + describe('selectedTabOrigin is not connected to wallet', () => { + it('does not fire setNetworkClientIdForDomain when network item is clicked', () => { + const { getByText } = render({ selectedTabOriginInDomainsState: false }); + fireEvent.click(getByText(MAINNET_DISPLAY_NAME)); + expect(mockSetNetworkClientIdForDomain).not.toHaveBeenCalled(); + }); + }); });