feat: adjusting the 'add network screen' in network bottom sheet, for…

… network UI redesign (#10005)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
This PR shows the 'Add custom network' form directly after clicking the
button, where the user can add and connect to a custom network. A demo
can be viewed here:
https://www.loom.com/share/bd380aca1065428ea584b0421ce69fb9

Here is a link to the figma:
https://www.figma.com/design/76R5BvAVubUhWaN2Ld7MAv/Default-Networks?node-id=1303-34400&m=dev
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Related issues**

Ensures that the form is displayed directly after clicking since the
list of popular networks are now integrated in the list.

## **Manual testing steps**

1. From the home page, click the network selector at the top of the
screen, a bottom sheet comes up with a list of networks
2. At the bottom of the bottom sheet, click Add custom network button, a
form should show up allowing to add a network
3. Fill the form with relevant information and add the network

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

app/components/Views/NetworkSelector/NetworkSearchTextInput/NetworkSearchTextInput.styles.ts

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import { fontStyles } from '../../../../styles/common';
+import { Colors } from '../../../../util/theme/models';
+
+const createStyles = (colors: Colors) =>
+  StyleSheet.create({
+    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,
+    },
+  });
+
+export default createStyles;

app/components/Views/NetworkSelector/NetworkSearchTextInput/NetworkSearchTextInput.tsx

@@ -0,0 +1,54 @@
+// Third party dependencies.
+import React from 'react';
+import { TextInput, View } from 'react-native';
+
+// External dependencies.
+import { strings } from '../../../../../locales/i18n';
+import { mockTheme, useTheme } from '../../../../util/theme';
+
+// Internal dependencies
+import Icon from 'react-native-vector-icons/Ionicons';
+import createStyles from './NetworkSearchTextInput.styles';
+import { NetworksViewSelectorsIDs } from '../../../../../e2e/selectors/Settings/NetworksView.selectors';
+
+interface NetworkSearchTextInputProps {
+  searchString: string;
+  handleSearchTextChange: (text: string) => void;
+  clearSearchInput: () => void;
+  testIdSearchInput: string;
+  testIdCloseIcon: string;
+}
+function NetworkSearchTextInput({
+  searchString,
+  handleSearchTextChange,
+  clearSearchInput,
+}: NetworkSearchTextInputProps) {
+  const theme = useTheme();
+  const { colors } = theme;
+  const styles = createStyles(colors || mockTheme.colors);
+
+  return (
+    <View style={styles.inputWrapper}>
+      <Icon name="ios-search" size={20} color={colors.icon.default} />
+      <TextInput
+        style={styles.input}
+        placeholder={strings('networks.search')}
+        placeholderTextColor={colors.text.default}
+        value={searchString}
+        onChangeText={handleSearchTextChange}
+        testID={NetworksViewSelectorsIDs.SEARCH_NETWORK_INPUT_BOX_ID}
+      />
+      {searchString.length > 0 && (
+        <Icon
+          name="ios-close"
+          size={20}
+          color={colors.icon.default}
+          onPress={clearSearchInput}
+          testID={NetworksViewSelectorsIDs.CLOSE_ICON}
+        />
+      )}
+    </View>
+  );
+}
+
+export default NetworkSearchTextInput;

app/components/Views/NetworkSelector/NetworkSearchTextInput/index.tsx

@@ -0,0 +1 @@
+export { default } from './NetworkSearchTextInput';

app/components/Views/NetworkSelector/NetworkSelector.styles.ts

@@ -3,13 +3,13 @@ import Device from '../../../util/device';
 import { StyleSheet } from 'react-native';
 import { fontStyles } from '../../../styles/common';
 import { isNetworkUiRedesignEnabled } from '../../../util/networks';
+import { Colors } from '../../../util/theme/models';
+
 /**
  * Style sheet function for NetworkSelector screen.
  * @returns StyleSheet object.
  */
-// TODO: Replace "any" with type
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const createStyles = (colors: any) =>
+const createStyles = (colors: Colors) =>
   StyleSheet.create({
     addNetworkButton: {
       marginHorizontal: 16,
@@ -97,6 +97,11 @@ const createStyles = (colors: any) =>
       fontSize: 10,
       marginTop: 4,
     },
+    searchContainer: {
+      marginLeft: 16,
+      marginRight: 16,
+      marginBottom: 8,
+    },
   });
 
 export default createStyles;

app/components/Views/NetworkSelector/NetworkSelector.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // Third party dependencies.
 import React, { useRef, useState } from 'react';
-import { Linking, Switch, TextInput, View } from 'react-native';
+import { Linking, Switch, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import images from 'images/image-icons';
 import { useNavigation } from '@react-navigation/native';
@@ -65,9 +65,9 @@ import { TESTNET_TICKER_SYMBOLS } from '@metamask/controller-utils';
 import InfoModal from '../../../../app/components/UI/Swaps/components/InfoModal';
 import hideKeyFromUrl from '../../../util/hideKeyFromUrl';
 import CustomNetwork from '../Settings/NetworksSettings/NetworkSettings/CustomNetworkView/CustomNetwork';
-import { NetworksViewSelectorsIDs } from '../../../../e2e/selectors/Settings/NetworksView.selectors';
+import { NetworksSelectorSelectorsIDs } from '../../../../e2e/selectors/Settings/NetworksView.selectors';
 import { PopularList } from '../../../util/networks/customNetworks';
-import Icon from 'react-native-vector-icons/Ionicons';
+import NetworkSearchTextInput from './NetworkSearchTextInput';
 
 const NetworkSelector = () => {
   const [showPopularNetworkModal, setShowPopularNetworkModal] = useState(false);
@@ -86,6 +86,9 @@ const NetworkSelector = () => {
   const networkConfigurations = useSelector(selectNetworkConfigurations);
 
   const avatarSize = isNetworkUiRedesignEnabled ? AvatarSize.Sm : undefined;
+  const buttonLabelAddNetwork = isNetworkUiRedesignEnabled
+    ? 'app_settings.network_add_custom_network'
+    : 'app_settings.network_add_network';
 
   // The only possible value types are mainnet, linea-mainnet, sepolia and linea-sepolia
   const onNetworkChange = (type: string) => {
@@ -147,7 +150,6 @@ const NetworkSelector = () => {
     }
   };
 
-  // TODO: type the any below to import { Network } from './CustomNetwork.types';
   // TODO: Replace "any" with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const showNetworkModal = (networkConfiguration: any) => {
@@ -306,6 +308,7 @@ const NetworkSelector = () => {
     sheetRef.current?.onCloseBottomSheet(() => {
       navigate(Routes.ADD_NETWORK, {
         shouldNetworkSwitchPopToWallet: false,
+        shouldShowPopularNetworks: false,
       });
     });
   };
@@ -381,25 +384,16 @@ const NetworkSelector = () => {
       <SheetHeader title={strings('networks.select_network')} />
       <ScrollView testID={NetworkListModalSelectorsIDs.SCROLL}>
         {isNetworkUiRedesignEnabled && (
-          <View style={styles.inputWrapper}>
-            <Icon name="ios-search" size={20} color={colors.icon.default} />
-            <TextInput
-              style={styles.input}
-              placeholder={strings('networks.search')}
-              placeholderTextColor={colors.text.default}
-              value={searchString}
-              onChangeText={handleSearchTextChange}
-              testID={NetworksViewSelectorsIDs.SEARCH_NETWORK_INPUT_BOX_ID}
+          <View style={styles.searchContainer}>
+            <NetworkSearchTextInput
+              searchString={searchString}
+              handleSearchTextChange={handleSearchTextChange}
+              clearSearchInput={clearSearchInput}
+              testIdSearchInput={
+                NetworksSelectorSelectorsIDs.SEARCH_NETWORK_INPUT_BOX_ID
+              }
+              testIdCloseIcon={NetworksSelectorSelectorsIDs.CLOSE_ICON}
             />
-            {searchString.length > 0 && (
-              <Icon
-                name="ios-close"
-                size={20}
-                color={colors.icon.default}
-                onPress={clearSearchInput}
-                testID={NetworksViewSelectorsIDs.CLOSE_ICON}
-              />
-            )}
           </View>
         )}
         {isNetworkUiRedesignEnabled &&
@@ -418,7 +412,7 @@ const NetworkSelector = () => {
 
       <Button
         variant={ButtonVariants.Secondary}
-        label={strings('app_settings.network_add_network')}
+        label={strings(buttonLabelAddNetwork)}
         onPress={goToNetworkSettings}
         width={ButtonWidthTypes.Full}
         size={ButtonSize.Lg}

app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js

@@ -20,6 +20,7 @@ import Networks, {
   isprivateConnection,
   getAllNetworks,
   getIsNetworkOnboarded,
+  isNetworkUiRedesignEnabled,
 } from '../../../../../util/networks';
 import { getEtherscanBaseUrl } from '../../../../../util/etherscan';
 import Engine from '../../../../../core/Engine';
@@ -1390,6 +1391,8 @@ class NetworkSettings extends PureComponent {
     const networkTypeOrRpcUrl = route.params?.network;
     const shouldNetworkSwitchPopToWallet =
       route.params?.shouldNetworkSwitchPopToWallet ?? true;
+    const shouldShowPopularNetworks =
+      route.params?.shouldShowPopularNetworks ?? true;
     const colors = this.context.colors || mockTheme.colors;
     const styles = createStyles(colors);
 
@@ -1399,7 +1402,8 @@ class NetworkSettings extends PureComponent {
         testID={NetworksViewSelectorsIDs.CONTAINER}
       >
         <View style={styles.informationWrapper}>
-          {networkTypeOrRpcUrl ? (
+          {(isNetworkUiRedesignEnabled && !shouldShowPopularNetworks) ||
+          networkTypeOrRpcUrl ? (
             this.customNetwork(networkTypeOrRpcUrl)
           ) : (
             <ScrollableTabView

app/components/Views/Settings/NetworksSettings/index.js

@@ -4,12 +4,10 @@ import {
   ScrollView,
   StyleSheet,
   Text,
-  TextInput,
   TouchableOpacity,
   View,
 } from 'react-native';
 import { connect } from 'react-redux';
-import Icon from 'react-native-vector-icons/Ionicons';
 import ActionSheet from '@metamask/react-native-actionsheet';
 import { fontStyles } from '../../../../styles/common';
 import CustomText from '../../../../components/Base/Text';
@@ -42,6 +40,7 @@ import Routes from '../../../../constants/navigation/Routes';
 import { NetworksViewSelectorsIDs } from '../../../../../e2e/selectors/Settings/NetworksView.selectors';
 import { updateIncomingTransactions } from '../../../../util/transaction-controller';
 import { NetworksTicker } from '@metamask/controller-utils';
+import NetworkSearchTextInput from '../../NetworkSelector/NetworkSearchTextInput';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -462,26 +461,17 @@ class NetworksSettings extends PureComponent {
         style={styles.wrapper}
         testID={NetworksViewSelectorsIDs.NETWORK_CONTAINER}
       >
-        <View style={styles.inputWrapper}>
-          <Icon name="ios-search" size={20} color={colors.icon.default} />
-          <TextInput
-            style={styles.input}
-            placeholder={strings('networks.search')}
-            placeholderTextColor={colors.text.default}
-            value={this.state.searchString}
-            onChangeText={this.handleSearchTextChange}
-            testID={NetworksViewSelectorsIDs.SEARCH_NETWORK_INPUT_BOX_ID}
+        {
+          <NetworkSearchTextInput
+            searchString={this.state.searchString}
+            handleSearchTextChange={this.handleSearchTextChange}
+            clearSearchInput={this.clearSearchInput}
+            testIdSearchInput={
+              NetworksViewSelectorsIDs.SEARCH_NETWORK_INPUT_BOX_ID
+            }
+            testIdCloseIcon={NetworksViewSelectorsIDs.CLOSE_ICON}
           />
-          {this.state.searchString.length > 0 && (
-            <Icon
-              name="ios-close"
-              size={20}
-              color={colors.icon.default}
-              onPress={this.clearSearchInput}
-              testID={NetworksViewSelectorsIDs.CLOSE_ICON}
-            />
-          )}
-        </View>
+        }
         <ScrollView style={styles.networksWrapper}>
           {this.state.searchString.length > 0 ? (
             this.filteredResult()

e2e/selectors/Settings/NetworksView.selectors.js

@@ -20,6 +20,11 @@ export const NetworksViewSelectorsIDs = {
   SEARCH_NETWORK_INPUT_BOX_ID: 'network-search-input',
 };
 
+export const NetworksSelectorSelectorsIDs = {
+  CLOSE_ICON: 'network-selector-close-network-icon',
+  SEARCH_NETWORK_INPUT_BOX_ID: 'network-selector-network-search-input',
+};
+
 export const NetworkViewSelectorsText = {
   BLOCK_EXPLORER: enContent.app_settings.network_block_explorer_label,
   CHAIN_ID_LABEL: enContent.app_settings.network_chain_id_label,

locales/languages/en.json

@@ -820,6 +820,7 @@
     "network_other_networks": "Other Networks",
     "network_rpc_networks": "RPC Networks",
     "network_add_network": "Add Network",
+    "network_add_custom_network": "Add a custom network",
     "network_add": "Add",
     "network_save": "Save",
     "remove_network_title": "Do you want to remove this network?",