feat: improve add network fields checkers

app/components/Nav/App/index.js

@@ -122,6 +122,7 @@ import OriginSpamModal from '../../Views/OriginSpamModal/OriginSpamModal';
 ///: BEGIN:ONLY_INCLUDE_IF(preinstalled-snaps,external-snaps)
 import { SnapsExecutionWebView } from '../../../lib/snaps';
 ///: END:ONLY_INCLUDE_IF
+import isNetworkUiRedesignEnabled from '../../../util/networks/isNetworkUiRedesignEnabled';
 
 const clearStackNavigatorOptions = {
   headerShown: false,
@@ -924,6 +925,14 @@ const App = ({ userLoggedIn }) => {
               component={AddNetworkFlow}
               options={{ animationEnabled: true }}
             />
+            {isNetworkUiRedesignEnabled() ? (
+              <Stack.Screen
+                name={Routes.EDIT_NETWORK}
+                component={AddNetworkFlow}
+                options={{ animationEnabled: true }}
+              />
+            ) : null}
+
             <Stack.Screen
               name={Routes.LOCK_SCREEN}
               component={LockScreen}

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

@@ -5,12 +5,12 @@ import { TextInput, View } from 'react-native';
 // External dependencies.
 import { strings } from '../../../../../locales/i18n';
 import { mockTheme, useTheme } from '../../../../util/theme';
-import { isNetworkUiRedesignEnabled } from '../../../../util/networks';
 
 // Internal dependencies
 import Icon from 'react-native-vector-icons/Ionicons';
 import createStyles from './NetworkSearchTextInput.styles';
 import { NetworksViewSelectorsIDs } from '../../../../../e2e/selectors/Settings/NetworksView.selectors';
+import { isNetworkUiRedesignEnabled } from '../../../../util/networks/isNetworkUiRedesignEnabled';
 
 interface NetworkSearchTextInputProps {
   searchString: string;
@@ -28,32 +28,33 @@ function NetworkSearchTextInput({
   const { colors } = theme;
   const styles = createStyles(colors || mockTheme.colors);
   const [isSearchFieldFocused, setIsSearchFieldFocused] = useState(false);
-  const searchPlaceHolder = isNetworkUiRedesignEnabled
+  const searchPlaceHolder = isNetworkUiRedesignEnabled()
     ? 'search-short'
     : 'search';
 
-  const propsWhichAreFeatureFlagged = isNetworkUiRedesignEnabled
+  const propsWhichAreFeatureFlagged = isNetworkUiRedesignEnabled()
     ? {
         onFocus: () => {
-          isNetworkUiRedesignEnabled && setIsSearchFieldFocused(true);
+          isNetworkUiRedesignEnabled() && setIsSearchFieldFocused(true);
         },
         onBlur: () => {
-          isNetworkUiRedesignEnabled && setIsSearchFieldFocused(false);
+          isNetworkUiRedesignEnabled() && setIsSearchFieldFocused(false);
         },
       }
     : {};
 
-  const inputStylesWhichAreFeatureFlagged = !isNetworkUiRedesignEnabled
+  const inputStylesWhichAreFeatureFlagged = !isNetworkUiRedesignEnabled()
     ? styles.input
     : isSearchFieldFocused
     ? styles.input
     : styles.unfocusedInput;
 
-  const containerInputStylesWhichAreFeatureFlagged = !isNetworkUiRedesignEnabled
-    ? styles.inputWrapper
-    : isSearchFieldFocused
-    ? styles.focusedInputWrapper
-    : styles.inputWrapper;
+  const containerInputStylesWhichAreFeatureFlagged =
+    !isNetworkUiRedesignEnabled()
+      ? styles.inputWrapper
+      : isSearchFieldFocused
+      ? styles.focusedInputWrapper
+      : styles.inputWrapper;
 
   return (
     <View style={containerInputStylesWhichAreFeatureFlagged}>

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

@@ -2,8 +2,8 @@
 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';
+import { isNetworkUiRedesignEnabled } from '../../../util/networks/isNetworkUiRedesignEnabled';
 
 /**
  * Style sheet function for NetworkSelector screen.
@@ -15,7 +15,7 @@ const createStyles = (colors: Colors) =>
       marginHorizontal: 16,
       marginBottom: Device.isAndroid()
         ? 16
-        : isNetworkUiRedesignEnabled
+        : isNetworkUiRedesignEnabled()
         ? 12
         : 0,
     },
@@ -83,7 +83,7 @@ const createStyles = (colors: Colors) =>
       marginTop: 1,
     },
     networkListContainer: {
-      height: isNetworkUiRedesignEnabled ? '100%' : undefined,
+      height: isNetworkUiRedesignEnabled() ? '100%' : undefined,
     },
     networkIcon: {
       width: 20,

app/components/Views/NetworkSelector/NetworkSelector.tsx

@@ -32,7 +32,6 @@ import Networks, {
   getDecimalChainId,
   isTestNet,
   getNetworkImageSource,
-  isNetworkUiRedesignEnabled,
 } from '../../../util/networks';
 import {
   LINEA_MAINNET,
@@ -78,6 +77,7 @@ import { ButtonsAlignment } from '../../../component-library/components/BottomSh
 import { ButtonProps } from '../../../component-library/components/Buttons/Button/Button.types';
 import BottomSheetFooter from '../../../component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter';
 import { ExtendedNetwork } from '../Settings/NetworksSettings/NetworkSettings/CustomNetworkView/CustomNetwork.types';
+import { isNetworkUiRedesignEnabled } from '../../../util/networks/isNetworkUiRedesignEnabled';
 
 const NetworkSelector = () => {
   const [showPopularNetworkModal, setShowPopularNetworkModal] = useState(false);
@@ -95,14 +95,14 @@ const NetworkSelector = () => {
   const providerConfig: ProviderConfig = useSelector(selectProviderConfig);
   const networkConfigurations = useSelector(selectNetworkConfigurations);
 
-  const avatarSize = isNetworkUiRedesignEnabled ? AvatarSize.Sm : undefined;
-  const modalTitle = isNetworkUiRedesignEnabled
+  const avatarSize = isNetworkUiRedesignEnabled() ? AvatarSize.Sm : undefined;
+  const modalTitle = isNetworkUiRedesignEnabled()
     ? 'networks.additional_network_information_title'
     : 'networks.network_warning_title';
-  const modalDescription = isNetworkUiRedesignEnabled
+  const modalDescription = isNetworkUiRedesignEnabled()
     ? 'networks.additonial_network_information_desc'
     : 'networks.network_warning_desc';
-  const buttonLabelAddNetwork = isNetworkUiRedesignEnabled
+  const buttonLabelAddNetwork = isNetworkUiRedesignEnabled()
     ? 'app_settings.network_add_custom_network'
     : 'app_settings.network_add_network';
   const [showConfirmDeleteModal, setShowConfirmDeleteModal] = useState({
@@ -269,9 +269,9 @@ const NetworkSelector = () => {
   const renderMainnet = () => {
     const { name: mainnetName, chainId } = Networks.mainnet;
 
-    if (isNetworkUiRedesignEnabled && isNoSearchResults(MAINNET)) return null;
+    if (isNetworkUiRedesignEnabled() && isNoSearchResults(MAINNET)) return null;
 
-    if (isNetworkUiRedesignEnabled) {
+    if (isNetworkUiRedesignEnabled()) {
       return (
         <Cell
           key={chainId}
@@ -318,10 +318,10 @@ const NetworkSelector = () => {
   const renderLineaMainnet = () => {
     const { name: lineaMainnetName, chainId } = Networks['linea-mainnet'];
 
-    if (isNetworkUiRedesignEnabled && isNoSearchResults('linea-mainnet'))
+    if (isNetworkUiRedesignEnabled() && isNoSearchResults('linea-mainnet'))
       return null;
 
-    if (isNetworkUiRedesignEnabled) {
+    if (isNetworkUiRedesignEnabled()) {
       return (
         <Cell
           key={chainId}
@@ -366,12 +366,13 @@ const NetworkSelector = () => {
         if (!chainId) return null;
         const { name } = { name: nickname || rpcUrl };
 
-        if (isNetworkUiRedesignEnabled && isNoSearchResults(name)) return null;
+        if (isNetworkUiRedesignEnabled() && isNoSearchResults(name))
+          return null;
 
         //@ts-expect-error - The utils/network file is still JS and this function expects a networkType, and should be optional
         const image = getNetworkImageSource({ chainId: chainId?.toString() });
 
-        if (isNetworkUiRedesignEnabled) {
+        if (isNetworkUiRedesignEnabled()) {
           return (
             <Cell
               key={chainId}
@@ -423,9 +424,9 @@ const NetworkSelector = () => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const { name, imageSource, chainId } = (Networks as any)[networkType];
 
-      if (isNetworkUiRedesignEnabled && isNoSearchResults(name)) return null;
+      if (isNetworkUiRedesignEnabled() && isNoSearchResults(name)) return null;
 
-      if (isNetworkUiRedesignEnabled) {
+      if (isNetworkUiRedesignEnabled()) {
         return (
           <Cell
             key={chainId}
@@ -502,7 +503,7 @@ const NetworkSelector = () => {
   const renderAdditonalNetworks = () => {
     let filteredNetworks;
 
-    if (isNetworkUiRedesignEnabled && searchString.length > 0)
+    if (isNetworkUiRedesignEnabled() && searchString.length > 0)
       filteredNetworks = PopularList.filter(({ nickname }) =>
         nickname.toLowerCase().includes(searchString.toLowerCase()),
       );
@@ -615,7 +616,7 @@ const NetworkSelector = () => {
     <>
       <SheetHeader title={strings('networks.select_network')} />
       <ScrollView testID={NetworkListModalSelectorsIDs.SCROLL}>
-        {isNetworkUiRedesignEnabled && (
+        {isNetworkUiRedesignEnabled() && (
           <View style={styles.searchContainer}>
             <NetworkSearchTextInput
               searchString={searchString}
@@ -628,16 +629,16 @@ const NetworkSelector = () => {
             />
           </View>
         )}
-        {isNetworkUiRedesignEnabled &&
+        {isNetworkUiRedesignEnabled() &&
           searchString.length === 0 &&
           renderEnabledNetworksTitle()}
         {renderMainnet()}
         {renderLineaMainnet()}
         {renderRpcNetworks()}
-        {isNetworkUiRedesignEnabled &&
+        {isNetworkUiRedesignEnabled() &&
           searchString.length === 0 &&
           renderPopularNetworksTitle()}
-        {isNetworkUiRedesignEnabled && renderAdditonalNetworks()}
+        {isNetworkUiRedesignEnabled() && renderAdditonalNetworks()}
         {searchString.length === 0 && renderTestNetworksSwitch()}
         {showTestNetworks && renderOtherNetworks()}
       </ScrollView>
@@ -656,7 +657,7 @@ const NetworkSelector = () => {
 
   return (
     <BottomSheet ref={sheetRef}>
-      {isNetworkUiRedesignEnabled ? (
+      {isNetworkUiRedesignEnabled() ? (
         <View style={styles.networkListContainer}>
           {renderBottomSheetContent()}
         </View>

app/components/Views/Settings/NetworksSettings/NetworkSettings/CustomNetworkView/CustomNetwork.tsx

@@ -17,7 +17,7 @@ import {
 } from '../../../../../../selectors/networkController';
 import AvatarNetwork from '../../../../../../component-library/components/Avatars/Avatar/variants/AvatarNetwork';
 import { AvatarSize } from '../../../../../../component-library/components/Avatars/Avatar';
-import { isNetworkUiRedesignEnabled } from '../../../../../../util/networks';
+import { isNetworkUiRedesignEnabled } from '../../../../../../util/networks/isNetworkUiRedesignEnabled';
 
 const CustomNetwork = ({
   isNetworkModalVisible,
@@ -98,7 +98,7 @@ const CustomNetwork = ({
                 }
               />
             </View>
-            <CustomText bold={!isNetworkUiRedesignEnabled}>
+            <CustomText bold={!isNetworkUiRedesignEnabled()}>
               {networkConfiguration.nickname}
             </CustomText>
           </View>

app/components/Views/Settings/NetworksSettings/NetworkSettings/__snapshots__/index.test.tsx.snap

@@ -27,6 +27,68 @@ exports[`NetworkSettings should render correctly 1`] = `
     }
   }
 >
-  <Component />
+  <NetworkSettings />
+</ContextProvider>
+`;
+
+exports[`NetworkSettings should render the component correctly when isNetworkUiRedesignEnabled is false 1`] = `
+<ContextProvider
+  value={
+    {
+      "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
+      "store": {
+        "clearActions": [Function],
+        "dispatch": [Function],
+        "getActions": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": {
+        "addNestedSub": [Function],
+        "getListeners": [Function],
+        "handleChangeWrapper": [Function],
+        "isSubscribed": [Function],
+        "notifyNestedSubs": [Function],
+        "trySubscribe": [Function],
+        "tryUnsubscribe": [Function],
+      },
+    }
+  }
+>
+  <NetworkSettings />
+</ContextProvider>
+`;
+
+exports[`NetworkSettings should render the component correctly when isNetworkUiRedesignEnabled is true 1`] = `
+<ContextProvider
+  value={
+    {
+      "getServerState": undefined,
+      "noopCheck": "once",
+      "stabilityCheck": "once",
+      "store": {
+        "clearActions": [Function],
+        "dispatch": [Function],
+        "getActions": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": {
+        "addNestedSub": [Function],
+        "getListeners": [Function],
+        "handleChangeWrapper": [Function],
+        "isSubscribed": [Function],
+        "notifyNestedSubs": [Function],
+        "trySubscribe": [Function],
+        "tryUnsubscribe": [Function],
+      },
+    }
+  }
+>
+  <NetworkSettings />
 </ContextProvider>
 `;