diff --git a/app/components/Nav/Main/MainNavigator.js b/app/components/Nav/Main/MainNavigator.js index a43daffd15e3..042af317dd45 100644 --- a/app/components/Nav/Main/MainNavigator.js +++ b/app/components/Nav/Main/MainNavigator.js @@ -13,7 +13,6 @@ import AdvancedSettings from '../../Views/Settings/AdvancedSettings'; import BackupAndSyncSettings from '../../Views/Settings/Identity/BackupAndSyncSettings'; import SecuritySettings from '../../Views/Settings/SecuritySettings'; import ExperimentalSettings from '../../Views/Settings/ExperimentalSettings'; -import NetworksSettings from '../../Views/Settings/NetworksSettings'; import NotificationsSettings from '../../Views/Settings/NotificationsSettings'; import NotificationsView from '../../Views/Notifications'; import NotificationsDetails from '../../Views/Notifications/Details'; @@ -397,11 +396,6 @@ const SettingsFlow = () => ( component={ExperimentalSettings} options={ExperimentalSettings.navigationOptions} /> - - StyleSheet.create({ - wrapper: { - backgroundColor: colors.background.default, - flex: 1, - paddingVertical: 16, - }, - searchWrapper: { - marginHorizontal: 16, - }, - scrollWrapper: { - padding: 16, - }, - networkIcon: { - width: 20, - height: 20, - borderRadius: 10, - marginTop: 2, - marginRight: 16, - }, - network: { - flex: 1, - flexDirection: 'row', - paddingVertical: 12, - alignItems: 'center', - }, - networkDisabled: { - opacity: 0.5, - }, - networkWrapper: { - flex: 0, - flexDirection: 'row', - alignItems: 'center', - }, - networkLabel: { - fontSize: 16, - color: colors.text.default, - ...fontStyles.normal, - }, - syncConfirm: { - marginTop: 16, - marginHorizontal: 16, - }, - sectionLabel: { - fontSize: 14, - paddingVertical: 12, - color: colors.text.default, - ...fontStyles.bold, - }, - inputWrapper: { - flexDirection: 'row', - alignItems: 'center', - paddingHorizontal: 10, - paddingVertical: 10, - borderRadius: 5, - borderWidth: 1, - borderColor: colors.border.default, - color: colors.text.default, - }, - input: { - flex: 1, - fontSize: 14, - color: colors.text.default, - ...fontStyles.normal, - paddingLeft: 10, - }, - icon: { - marginLeft: 8, - }, - no_match_text: { - marginVertical: 10, - }, - text: { - textAlign: 'center', - color: colors.text.default, - fontSize: 10, - marginTop: 4, - }, - }); - -/** - * Main view for app configurations - */ -class NetworksSettings extends PureComponent { - static propTypes = { - /** - * Network configurations - */ - networkConfigurations: PropTypes.object, - /** - * Object that represents the navigator - */ - navigation: PropTypes.object, - /** - * Current network provider configuration - */ - providerConfig: PropTypes.object, - ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) - /** - * Non evm network configurations - */ - nonEvmNetworkConfigurations: PropTypes.object, - ///: END:ONLY_INCLUDE_IF - }; - - actionSheet = null; - networkToRemove = null; - - state = { - searchString: '', - filteredNetworks: [], - }; - - updateNavBar = () => { - const { navigation } = this.props; - const colors = this.context.colors || mockTheme.colors; - navigation.setOptions( - getNavigationOptionsTitle( - strings('app_settings.networks_title'), - navigation, - false, - colors, - ), - ); - }; - - componentDidMount = () => { - this.updateNavBar(); - }; - - componentDidUpdate = (prevProps) => { - if (this.props.networkConfigurations !== prevProps.networkConfigurations) { - this.handleSearchTextChange(this.state.searchString); - } - - this.updateNavBar(); - }; - - onNetworkPress = (networkTypeOrRpcUrl) => { - const { navigation } = this.props; - navigation.navigate(Routes.ADD_NETWORK, { - network: networkTypeOrRpcUrl, - shouldNetworkSwitchPopToWallet: false, - }); - }; - - onAddNetwork = () => { - const { navigation } = this.props; - navigation.navigate(Routes.ADD_NETWORK, { - shouldNetworkSwitchPopToWallet: false, - }); - }; - - showRemoveMenu = (networkTypeOrRpcUrl) => { - this.networkToRemove = networkTypeOrRpcUrl; - this.actionSheet.show(); - }; - - switchToMainnet = () => { - const { NetworkController } = Engine.context; - - NetworkController.setProviderType(MAINNET); - - setTimeout(async () => { - await updateIncomingTransactions(); - }, 1000); - }; - - removeNetwork = async () => { - // Check if it's the selected network and then switch to mainnet first - const { providerConfig } = this.props; - if ( - compareSanitizedUrl(providerConfig.rpcUrl, this.networkToRemove) && - providerConfig.type === RPC - ) { - this.switchToMainnet(); - } - const { NetworkController, MultichainNetworkController } = Engine.context; - - const { networkConfigurations } = this.props; - const entry = Object.entries(networkConfigurations).find( - ([, networkConfiguration]) => - networkConfiguration.rpcEndpoints.some( - (rpcEndpoint) => rpcEndpoint.networkClientId === this.networkToRemove, - ), - ); - - const selectedNetworkClientId = - NetworkController.state.selectedNetworkClientId; - - if (!entry) { - throw new Error( - `Unable to find network with RPC URL ${this.networkToRemove}`, - ); - } - - const [chainId] = entry; - - if (this.networkToRemove === selectedNetworkClientId) { - // if we delete selected network, switch to mainnet before removing the selected network - await MultichainNetworkController.setActiveNetwork('mainnet'); - } - - NetworkController.removeNetwork(chainId); - MetaMetrics.getInstance().addTraitsToUser( - removeItemFromChainIdList(chainId), - ); - this.setState({ filteredNetworks: [] }); - }; - - createActionSheetRef = (ref) => { - this.actionSheet = ref; - }; - - onActionSheetPress = (index) => (index === 0 ? this.removeNetwork() : null); - - networkElement(name, image, i, networkTypeOrRpcUrl, isCustomRPC, color) { - const colors = this.context.colors || mockTheme.colors; - const styles = createStyles(colors); - const { NetworkController } = Engine.context; - const selectedNetworkClientId = - NetworkController.state.selectedNetworkClientId; - const isSelectedNetwork = networkTypeOrRpcUrl === selectedNetworkClientId; - - return ( - - {isMainnetNetwork(networkTypeOrRpcUrl) ? ( - this.renderMainnetNetworks(networkTypeOrRpcUrl) - ) : ( - this.onNetworkPress(networkTypeOrRpcUrl)} - onLongPress={() => { - if (isCustomRPC && !isSelectedNetwork) { - this.showRemoveMenu(networkTypeOrRpcUrl); - } - }} - > - - {isCustomRPC ? ( - - ) : null} - {!isCustomRPC && - (image ? ( - - ) : ( - - {name[0]} - - ))} - {name} - {(!isCustomRPC || isSelectedNetwork) && ( - - )} - - - )} - - ); - } - - renderTestNetworks() { - return getTestNetworks().map((networkType, i) => { - const { name, imageSource, color } = Networks[networkType]; - return this.networkElement( - name, - imageSource, - i, - networkType, - false, - color, - ); - }); - } - - /** - * - * @param {string[]} excludedChainIds - */ - renderRpcNetworks = (excludedChainIds) => { - const { networkConfigurations } = this.props; - return Object.values(networkConfigurations).map( - ( - { rpcEndpoints, name: nickname, chainId, defaultRpcEndpointIndex }, - i, - ) => { - if ( - !chainId || - isTestNet(chainId) || - isMainNet(chainId) || - excludedChainIds.includes(chainId) || - isNonEvmChainId(chainId) - ) { - return null; - } - const rpcName = rpcEndpoints[defaultRpcEndpointIndex].name ?? ''; - const rpcUrl = rpcEndpoints[defaultRpcEndpointIndex].networkClientId; - const name = nickname || rpcName; - const image = getNetworkImageSource({ chainId }); - return this.networkElement(name, image, i, rpcUrl, true); - }, - ); - }; - - renderRpcNetworksView = () => { - const { networkConfigurations } = this.props; - // Define the chainIds to exclude (from our predefined networks list) - const excludedChainIds = getAllNetworks().map((n) => Networks[n].chainId); - - const filteredChain = Object.keys(networkConfigurations).reduce( - (filtered, key) => { - const network = networkConfigurations[key]; - // If the chainId is not in the excludedChainIds, add it to the result - if (!excludedChainIds.includes(network.chainId)) { - filtered[key] = network; - } - return filtered; - }, - {}, - ); - - const colors = this.context.colors || mockTheme.colors; - const styles = createStyles(colors); - - if (Object.keys(filteredChain).length > 0) { - return ( - - - {strings('app_settings.custom_network_name')} - - {this.renderRpcNetworks(excludedChainIds)} - - ); - } - }; - - /** - * @param {string | undefined} mainnetNetwork - used to render a specific mainnet network - */ - renderMainnetNetworks(mainnetNetwork) { - const networkKeys = mainnetNetwork - ? [mainnetNetwork] - : getMainnetNetworks(); - const mainnetNetworks = networkKeys - .map((n) => Networks[n]) - .filter((n) => Boolean(n)); - const colors = this.context.colors || mockTheme.colors; - const styles = createStyles(colors); - return ( - <> - {mainnetNetworks.map((network) => ( - - this.onNetworkPress(MAINNET)} - > - - - - {network.name} - - - - - - ))} - - ); - } - - ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) - renderSolanaMainnet() { - // TODO: [SOLANA] - Please revisit this since it's supported on a constant array in mobile and should come from multichain network controller - const { name: solanaMainnetName } = Object.values( - this.props.nonEvmNetworkConfigurations, - ).find((network) => network.chainId === SolScope.Mainnet); - const colors = this.context.colors || mockTheme.colors; - const styles = createStyles(colors); - - return ( - - null} - disabled - > - - - - {solanaMainnetName} - - - - - - ); - } - ///: END:ONLY_INCLUDE_IF - handleSearchTextChange = (text) => { - this.setState({ searchString: text }); - const defaultNetwork = getAllNetworks().map((networkType, i) => { - const { color, name, chainId } = Networks[networkType]; - return { - name, - color, - networkTypeOrRpcUrl: networkType, - isCustomRPC: false, - chainId, - }; - }); - const customRPC = Object.values(this.props.networkConfigurations).map( - (networkConfiguration, i) => { - const defaultRpcEndpoint = - networkConfiguration.rpcEndpoints[ - networkConfiguration.defaultRpcEndpointIndex - ]; - const { color, name, url, chainId } = { - name: networkConfiguration.name || defaultRpcEndpoint.url, - url: defaultRpcEndpoint.url, - color: null, - chainId: networkConfiguration.chainId, - }; - return { - name, - color, - i, - networkTypeOrRpcUrl: url, - isCustomRPC: true, - chainId, - }; - }, - ); - - const allActiveNetworks = defaultNetwork.concat(customRPC); - const searchResult = allActiveNetworks.filter(({ name }) => - name?.toLowerCase().includes(text.toLowerCase()), - ); - this.setState({ filteredNetworks: searchResult }); - }; - - clearSearchInput = () => - this.setState({ searchString: '', filteredNetworks: [] }); - - filteredResult = () => { - const colors = this.context.colors || mockTheme.colors; - const styles = createStyles(colors); - if (this.state.filteredNetworks.length > 0) { - return this.state.filteredNetworks.map((data, i) => { - const { networkTypeOrRpcUrl, chainId, name, color, isCustomRPC } = data; - const image = getNetworkImageSource({ chainId }); - return ( - // TODO: remove this check when linea mainnet is ready - networkTypeOrRpcUrl !== LINEA_MAINNET && - this.networkElement( - name, - image || color, - i, - networkTypeOrRpcUrl, - isCustomRPC, - ) - ); - }); - } - return ( - - {strings('networks.no_match')} - - ); - }; - - render() { - const colors = this.context.colors || mockTheme.colors; - const themeAppearance = this.context.themeAppearance; - const styles = createStyles(colors); - - return ( - - - - - - - {this.state.searchString.length > 0 ? ( - this.filteredResult() - ) : ( - <> - - {strings('app_settings.mainnet')} - - {this.renderMainnetNetworks()} - { - ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) - this.renderSolanaMainnet() - ///: END:ONLY_INCLUDE_IF - } - {this.renderRpcNetworksView()} - - {strings('app_settings.test_network_name')} - - {this.renderTestNetworks()} - - )} - - - {strings('app_settings.network_add_network')} - - - - ); - } -} - -NetworksSettings.contextType = ThemeContext; - -const mapStateToProps = (state) => ({ - providerConfig: selectProviderConfig(state), - networkConfigurations: selectEvmNetworkConfigurationsByChainId(state), - ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) - nonEvmNetworkConfigurations: - selectNonEvmNetworkConfigurationsByChainId(state), - ///: END:ONLY_INCLUDE_IF -}); - -export default connect(mapStateToProps)(NetworksSettings); diff --git a/app/components/Views/Settings/NetworksSettings/index.test.tsx b/app/components/Views/Settings/NetworksSettings/index.test.tsx deleted file mode 100644 index c2200fc4e278..000000000000 --- a/app/components/Views/Settings/NetworksSettings/index.test.tsx +++ /dev/null @@ -1,275 +0,0 @@ -import React from 'react'; -import { fireEvent } from '@testing-library/react-native'; -import { renderScreen } from '../../../../util/test/renderWithProvider'; -import NetworksSettings from './'; -import { backgroundState } from '../../../../util/test/initial-root-state'; -import Routes from '../../../../constants/navigation/Routes'; -import { ADD_NETWORK_BUTTON } from '../../../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids'; - -// Mock the new utility functions -jest.mock('../../../../util/metrics/MultichainAPI/networkMetricUtils', () => ({ - removeItemFromChainIdList: jest.fn().mockReturnValue({ - chain_id_list: ['eip155:1'], - }), -})); - -// Mock MetaMetrics -jest.mock('../../../../core/Analytics', () => ({ - MetaMetrics: { - getInstance: jest.fn().mockReturnValue({ - addTraitsToUser: jest.fn(), - }), - }, -})); - -// Mock Engine -jest.mock('../../../../core/Engine', () => ({ - context: { - NetworkController: { - setProviderType: jest.fn(), - removeNetwork: jest.fn(), - state: { - selectedNetworkClientId: 'mainnet', - }, - }, - MultichainNetworkController: { - setActiveNetwork: jest.fn(), - }, - }, -})); - -// Mock navigation -const mockNavigate = jest.fn(); -const mockSetOptions = jest.fn(); - -// TODO: Replace "any" with type -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const initialState: any = { - engine: { - backgroundState: { - ...backgroundState, - NetworkController: { - selectedNetworkClientId: 'mainnet', - networksMetadata: { - mainnet: { status: 'available', EIPS: { '1559': true } }, - }, - networkConfigurationsByChainId: { - '0x1': { - blockExplorerUrls: [], - chainId: '0x1', - defaultRpcEndpointIndex: 0, - name: 'Ethereum Mainnet', - nativeCurrency: 'ETH', - rpcEndpoints: [ - { - networkClientId: 'mainnet', - type: 'infura', - url: 'https://mainnet.infura.io/v3/{infuraProjectId}', - }, - ], - }, - '0x89': { - blockExplorerUrls: ['https://polygonscan.com'], - chainId: '0x89', - defaultRpcEndpointIndex: 0, - name: 'Polygon Mainnet', - nativeCurrency: 'MATIC', - rpcEndpoints: [ - { - networkClientId: 'polygon-mainnet', - type: 'custom', - url: 'https://polygon-rpc.com', - }, - ], - }, - }, - }, - }, - }, -}; - -describe('NetworksSettings', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); - - it('should render correctly', () => { - const { toJSON } = renderScreen( - NetworksSettings, - { name: 'Network Settings' }, - { - state: initialState, - }, - ); - expect(toJSON()).toMatchSnapshot(); - }); - - describe('onNetworkPress', () => { - it('navigates to ADD_NETWORK with correct parameters when network is pressed', () => { - // Given a rendered NetworksSettings component with mocked navigation - const mockNavigation = { - navigate: mockNavigate, - setOptions: mockSetOptions, - }; - - const { getByText } = renderScreen( - (props) => , - { name: 'Network Settings' }, - { - state: initialState, - }, - ); - - // When a network is pressed - const ethereumNetwork = getByText('Ethereum Main Network'); - fireEvent.press(ethereumNetwork); - - // Then it should navigate with shouldNetworkSwitchPopToWallet: false - expect(mockNavigate).toHaveBeenCalledWith(Routes.ADD_NETWORK, { - network: 'mainnet', - shouldNetworkSwitchPopToWallet: false, - }); - }); - - it('passes the correct network parameter for custom networks', () => { - // Given a rendered NetworksSettings component with custom networks - const mockNavigation = { - navigate: mockNavigate, - setOptions: mockSetOptions, - }; - - const { getByText } = renderScreen( - (props) => , - { name: 'Network Settings' }, - { - state: initialState, - }, - ); - - // When a custom network is pressed - const polygonNetwork = getByText('Polygon Mainnet'); - fireEvent.press(polygonNetwork); - - // Then it should navigate with the correct network parameter - expect(mockNavigate).toHaveBeenCalledWith(Routes.ADD_NETWORK, { - network: 'polygon-mainnet', - shouldNetworkSwitchPopToWallet: false, - }); - }); - }); - - describe('onAddNetwork', () => { - it('navigates to ADD_NETWORK with shouldNetworkSwitchPopToWallet: false when add network button is pressed', () => { - // Given a rendered NetworksSettings component - const mockNavigation = { - navigate: mockNavigate, - setOptions: mockSetOptions, - }; - - const { getByTestId } = renderScreen( - (props) => , - { name: 'Network Settings' }, - { - state: initialState, - }, - ); - - // When the add network button is pressed - const addNetworkButton = getByTestId(ADD_NETWORK_BUTTON); - fireEvent.press(addNetworkButton); - - // Then it should navigate with shouldNetworkSwitchPopToWallet: false - expect(mockNavigate).toHaveBeenCalledWith(Routes.ADD_NETWORK, { - shouldNetworkSwitchPopToWallet: false, - }); - }); - - it('does not pass network parameter when adding new network', () => { - // Given a rendered NetworksSettings component - const mockNavigation = { - navigate: mockNavigate, - setOptions: mockSetOptions, - }; - - const { getByTestId } = renderScreen( - (props) => , - { name: 'Network Settings' }, - { - state: initialState, - }, - ); - - // When the add network button is pressed - const addNetworkButton = getByTestId(ADD_NETWORK_BUTTON); - fireEvent.press(addNetworkButton); - - // Then it should navigate without a network parameter (for new network) - expect(mockNavigate).toHaveBeenCalledWith(Routes.ADD_NETWORK, { - shouldNetworkSwitchPopToWallet: false, - }); - - // Verify the network parameter is not included - const callArgs = mockNavigate.mock.calls[0][1]; - expect(callArgs).not.toHaveProperty('network'); - }); - }); - - describe('navigation parameter consistency', () => { - it('ensures both methods use the same shouldNetworkSwitchPopToWallet value', () => { - // Given a rendered NetworksSettings component - const mockNavigation = { - navigate: mockNavigate, - setOptions: mockSetOptions, - }; - - const { getByText, getByTestId } = renderScreen( - (props) => , - { name: 'Network Settings' }, - { - state: initialState, - }, - ); - - // When both an existing network and add network are pressed - const ethereumNetwork = getByText('Ethereum Main Network'); - fireEvent.press(ethereumNetwork); - - const addNetworkButton = getByTestId(ADD_NETWORK_BUTTON); - fireEvent.press(addNetworkButton); - - // Then both calls should have shouldNetworkSwitchPopToWallet: false - expect(mockNavigate).toHaveBeenNthCalledWith(1, Routes.ADD_NETWORK, { - network: 'mainnet', - shouldNetworkSwitchPopToWallet: false, - }); - - expect(mockNavigate).toHaveBeenNthCalledWith(2, Routes.ADD_NETWORK, { - shouldNetworkSwitchPopToWallet: false, - }); - }); - - it('verifies shouldNetworkSwitchPopToWallet is always false for networks settings', () => { - // Given a rendered NetworksSettings component - const mockNavigation = { - navigate: mockNavigate, - setOptions: mockSetOptions, - }; - - const { getByTestId } = renderScreen( - (props) => , - { name: 'Network Settings' }, - { - state: initialState, - }, - ); - - // When any navigation method is called - const addNetworkButton = getByTestId(ADD_NETWORK_BUTTON); - fireEvent.press(addNetworkButton); - - // Then shouldNetworkSwitchPopToWallet should always be false - const callArgs = mockNavigate.mock.calls[0][1]; - expect(callArgs.shouldNetworkSwitchPopToWallet).toBe(false); - }); - }); -}); diff --git a/app/components/Views/Settings/index.test.tsx b/app/components/Views/Settings/index.test.tsx index f0e48673c954..f905cb40065f 100644 --- a/app/components/Views/Settings/index.test.tsx +++ b/app/components/Views/Settings/index.test.tsx @@ -94,13 +94,6 @@ describe('Settings', () => { const contactsSettings = getByTestId(SettingsViewSelectorsIDs.CONTACTS); expect(contactsSettings).toBeDefined(); }); - it('should render network settings button', () => { - const { getByTestId } = renderWithProvider(, { - state: initialState, - }); - const networksSettings = getByTestId(SettingsViewSelectorsIDs.NETWORKS); - expect(networksSettings).toBeDefined(); - }); it('should render feature request button', () => { const { getByTestId } = renderWithProvider(, { state: initialState, diff --git a/app/components/Views/Settings/index.tsx b/app/components/Views/Settings/index.tsx index 8a352ab22bff..cb1c82dd0d1c 100644 --- a/app/components/Views/Settings/index.tsx +++ b/app/components/Views/Settings/index.tsx @@ -101,10 +101,6 @@ const Settings = () => { navigation.navigate('SecuritySettings'); }; - const onPressNetworks = () => { - navigation.navigate('NetworksSettings'); - }; - const onPressOnRamp = () => { trackEvent( createEventBuilder(MetaMetricsEvents.ONRAMP_SETTINGS_CLICKED).build(), @@ -277,12 +273,6 @@ const Settings = () => { testID={SettingsViewSelectorsIDs.CONTACTS} /> )} - { ///: BEGIN:ONLY_INCLUDE_IF(external-snaps) } diff --git a/e2e/pages/Settings/SettingsView.ts b/e2e/pages/Settings/SettingsView.ts index 1fa41722f02d..4b163d7a922e 100644 --- a/e2e/pages/Settings/SettingsView.ts +++ b/e2e/pages/Settings/SettingsView.ts @@ -27,10 +27,6 @@ class SettingsView { return Matchers.getElementByID(SettingsViewSelectorsIDs.SECURITY); } - get networksButton(): DetoxElement { - return Matchers.getElementByID(SettingsViewSelectorsIDs.NETWORKS); - } - get notificationsButton(): DetoxElement { return Matchers.getElementByID(SettingsViewSelectorsIDs.NOTIFICATIONS); } diff --git a/e2e/selectors/Settings/SettingsView.selectors.ts b/e2e/selectors/Settings/SettingsView.selectors.ts index 27ad2bd411f8..984e636038a9 100644 --- a/e2e/selectors/Settings/SettingsView.selectors.ts +++ b/e2e/selectors/Settings/SettingsView.selectors.ts @@ -12,7 +12,6 @@ export const SettingsViewSelectorsIDs = { SECURITY: 'security-settings', ADVANCED: 'advanced-settings', CONTACTS: 'contacts-settings', - NETWORKS: 'networks-settings', ON_RAMP: 'on-ramp-settings', EXPERIMENTAL: 'experimental-settings', ABOUT_METAMASK: 'about-metamask-settings',