Skip to content

Commit

Permalink
fix: replicate network change actions in rpc modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@bergarces
bergarces committed Jan 28, 2025
1 parent 9782ff4 commit 7f66605
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 76 deletions.
93 changes: 49 additions & 44 deletions ui/components/multichain/network-list-menu/network-list-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,17 +252,59 @@ export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => {
...searchedTestNetworks,
].some((network) => network.rpcEndpoints.length > 1);

const handleNetworkChange = (network: NetworkConfiguration) => {
const allOpts = Object.keys(allNetworks).reduce((acc, chainId) => {
acc[chainId] = true;
return acc;
}, {} as Record<string, boolean>);

const { networkClientId } =
network.rpcEndpoints[network.defaultRpcEndpointIndex];
dispatch(setActiveNetwork(networkClientId));
dispatch(toggleNetworkMenu());
dispatch(updateCustomNonce(''));
dispatch(setNextNonce(''));
dispatch(detectNfts());

// as a user, I don't want my network selection to force update my filter when I have "All Networks" toggled on
// however, if I am already filtered on "Current Network", we'll want to filter by the selected network when the network changes
if (Object.keys(tokenNetworkFilter || {}).length <= 1) {
dispatch(setTokenNetworkFilter({ [network.chainId]: true }));
} else if (process.env.PORTFOLIO_VIEW) {
dispatch(setTokenNetworkFilter(allOpts));
}

if (permittedAccountAddresses.length > 0) {
dispatch(addPermittedChain(selectedTabOrigin, network.chainId));
if (!permittedChainIds.includes(network.chainId)) {
dispatch(showPermittedNetworkToast());
}
}
// If presently on a dapp, communicate a change to
// the dapp via silent switchEthereumChain that the
// network has changed due to user action
if (selectedTabOrigin && domains[selectedTabOrigin]) {
setNetworkClientIdForDomain(selectedTabOrigin, networkClientId);
}

trackEvent({
event: MetaMetricsEventName.NavNetworkSwitched,
category: MetaMetricsEventCategory.Network,
properties: {
location: 'Network Menu',
chain_id: currentChainId,
from_network: currentChainId,
to_network: network.chainId,
},
});
};

// Renders a network in the network list
const generateNetworkListItem = (network: NetworkConfiguration) => {
const isCurrentNetwork = network.chainId === currentChainId;
const canDeleteNetwork =
isUnlocked && !isCurrentNetwork && network.chainId !== CHAIN_IDS.MAINNET;

const allOpts: Record<string, boolean> = {};
Object.keys(allNetworks).forEach((chainId) => {
allOpts[chainId] = true;
});

return (
<NetworkListItem
name={network.name}
Expand All @@ -282,45 +324,7 @@ export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => {
selected={isCurrentNetwork && !focusSearch}
focus={isCurrentNetwork && !focusSearch}
onClick={() => {
const { networkClientId } =
network.rpcEndpoints[network.defaultRpcEndpointIndex];
dispatch(setActiveNetwork(networkClientId));
dispatch(toggleNetworkMenu());
dispatch(updateCustomNonce(''));
dispatch(setNextNonce(''));
dispatch(detectNfts());

// as a user, I don't want my network selection to force update my filter when I have "All Networks" toggled on
// however, if I am already filtered on "Current Network", we'll want to filter by the selected network when the network changes
if (Object.keys(tokenNetworkFilter || {}).length <= 1) {
dispatch(setTokenNetworkFilter({ [network.chainId]: true }));
} else if (process.env.PORTFOLIO_VIEW) {
dispatch(setTokenNetworkFilter(allOpts));
}

if (permittedAccountAddresses.length > 0) {
dispatch(addPermittedChain(selectedTabOrigin, network.chainId));
if (!permittedChainIds.includes(network.chainId)) {
dispatch(showPermittedNetworkToast());
}
}
// If presently on a dapp, communicate a change to
// the dapp via silent switchEthereumChain that the
// network has changed due to user action
if (selectedTabOrigin && domains[selectedTabOrigin]) {
setNetworkClientIdForDomain(selectedTabOrigin, networkClientId);
}

trackEvent({
event: MetaMetricsEventName.NavNetworkSwitched,
category: MetaMetricsEventCategory.Network,
properties: {
location: 'Network Menu',
chain_id: currentChainId,
from_network: currentChainId,
to_network: network.chainId,
},
});
handleNetworkChange(network);
}}
onDeleteClick={
canDeleteNetwork
Expand Down Expand Up @@ -559,6 +563,7 @@ export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => {
return (
<SelectRpcUrlModal
networkConfiguration={networkConfigurations[editedNetwork.chainId]}
onNetworkChange={handleNetworkChange}
/>
);
}
Expand Down
56 changes: 38 additions & 18 deletions ...omponents/multichain/network-list-menu/select-rpc-url-modal/select-rpc-url-modal.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ jest.mock('react-redux', () => ({
useDispatch: () => mockDispatch,
}));

const mockOnNetworkChange = jest.fn();

jest.mock('../../../../store/actions', () => ({
updateNetwork: jest.fn(),
setActiveNetwork: jest.fn(),
Expand Down Expand Up @@ -51,15 +53,21 @@ describe('SelectRpcUrlModal Component', () => {

it('renders select rpc url', () => {
const { container } = renderWithProvider(
<SelectRpcUrlModal networkConfiguration={networkConfiguration} />,
<SelectRpcUrlModal
networkConfiguration={networkConfiguration}
onNetworkChange={mockOnNetworkChange}
/>,
store,
);
expect(container).toMatchSnapshot();
});

it('should render the component correctly with network image and name', () => {
const { getByRole, getByText } = renderWithProvider(
<SelectRpcUrlModal networkConfiguration={networkConfiguration} />,
<SelectRpcUrlModal
networkConfiguration={networkConfiguration}
onNetworkChange={mockOnNetworkChange}
/>,
store,
);

Expand All @@ -77,7 +85,10 @@ describe('SelectRpcUrlModal Component', () => {

it('should render all RPC endpoints and highlight the selected one', () => {
const { getByText } = renderWithProvider(
<SelectRpcUrlModal networkConfiguration={networkConfiguration} />,
<SelectRpcUrlModal
networkConfiguration={networkConfiguration}
onNetworkChange={mockOnNetworkChange}
/>,
store,
);

Expand All @@ -94,7 +105,10 @@ describe('SelectRpcUrlModal Component', () => {

it('should dispatch the correct actions when an RPC endpoint is clicked', () => {
const { getByText } = renderWithProvider(
<SelectRpcUrlModal networkConfiguration={networkConfiguration} />,
<SelectRpcUrlModal
networkConfiguration={networkConfiguration}
onNetworkChange={mockOnNetworkChange}
/>,
store,
);

Expand All @@ -116,7 +130,10 @@ describe('SelectRpcUrlModal Component', () => {

it('should render the selected indicator correctly for the default RPC', () => {
const { container } = renderWithProvider(
<SelectRpcUrlModal networkConfiguration={networkConfiguration} />,
<SelectRpcUrlModal
networkConfiguration={networkConfiguration}
onNetworkChange={mockOnNetworkChange}
/>,
store,
);

Expand All @@ -128,7 +145,10 @@ describe('SelectRpcUrlModal Component', () => {

it('should render the modal with a network image', () => {
renderWithProvider(
<SelectRpcUrlModal networkConfiguration={networkConfiguration} />,
<SelectRpcUrlModal
networkConfiguration={networkConfiguration}
onNetworkChange={mockOnNetworkChange}
/>,
store,
);

Expand All @@ -142,26 +162,26 @@ describe('SelectRpcUrlModal Component', () => {
);
});

it('should handle click on RPC URL and update the network', () => {
it('should handle click on RPC URL and call onNetworkChange', () => {
const updatedNetwork = {
...networkConfiguration,
defaultRpcEndpointIndex: 1,
};

renderWithProvider(
<SelectRpcUrlModal networkConfiguration={networkConfiguration} />,
<SelectRpcUrlModal
networkConfiguration={networkConfiguration}
onNetworkChange={mockOnNetworkChange}
/>,
store,
);

fireEvent.click(
screen.getByText(stripProtocol(networkConfiguration.rpcEndpoints[1].url)),
);

expect(mockDispatch).toHaveBeenCalledWith(
updateNetwork({
...networkConfiguration,
defaultRpcEndpointIndex: 1,
}),
);
expect(mockDispatch).toHaveBeenCalledWith(
setActiveNetwork(networkConfiguration.rpcEndpoints[1].networkClientId),
);
expect(mockDispatch).toHaveBeenCalledWith(updateNetwork(updatedNetwork));
expect(mockDispatch).toHaveBeenCalledWith(setEditedNetwork());
expect(mockDispatch).toHaveBeenCalledWith(toggleNetworkMenu());
expect(mockOnNetworkChange).toHaveBeenCalledWith(updatedNetwork);
});
});
23 changes: 9 additions & 14 deletions ui/components/multichain/network-list-menu/select-rpc-url-modal/select-rpc-url-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,15 @@ import {
TextVariant,
} from '../../../../helpers/constants/design-system';
import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../shared/constants/network';
import {
setActiveNetwork,
setEditedNetwork,
toggleNetworkMenu,
updateNetwork,
} from '../../../../store/actions';
import { setEditedNetwork, updateNetwork } from '../../../../store/actions';
import RpcListItem from '../rpc-list-item';

export const SelectRpcUrlModal = ({
networkConfiguration,
onNetworkChange,
}: {
networkConfiguration: NetworkConfiguration;
onNetworkChange: (network: NetworkConfiguration) => void;
}) => {
const dispatch = useDispatch();

Expand Down Expand Up @@ -69,15 +66,13 @@ export const SelectRpcUrlModal = ({
display={Display.Flex}
key={rpcEndpoint.url}
onClick={() => {
dispatch(
updateNetwork({
...networkConfiguration,
defaultRpcEndpointIndex: index,
}),
);
dispatch(setActiveNetwork(rpcEndpoint.networkClientId));
const network = {
...networkConfiguration,
defaultRpcEndpointIndex: index,
};
dispatch(updateNetwork(network));
dispatch(setEditedNetwork());
dispatch(toggleNetworkMenu());
onNetworkChange(network);
}}
className={classnames('select-rpc-url__item', {
'select-rpc-url__item--selected':
Expand Down

0 comments on commit 7f66605

Please sign in to comment.