Temp/notification integration sdk fixes

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

@@ -2,6 +2,7 @@
 import Device from '../../../util/device';
 import { StyleSheet } from 'react-native';
 import { fontStyles } from '../../../styles/common';
+import { isNetworkUiRedesignEnabled } from '../../../util/networks';
 /**
  * Style sheet function for NetworkSelector screen.
  * @returns StyleSheet object.
@@ -12,7 +13,11 @@ const createStyles = (colors: any) =>
   StyleSheet.create({
     addNetworkButton: {
       marginHorizontal: 16,
-      marginBottom: Device.isAndroid() ? 16 : 0,
+      marginBottom: Device.isAndroid()
+        ? 16
+        : isNetworkUiRedesignEnabled
+        ? 12
+        : 0,
     },
     switchContainer: {
       flexDirection: 'row',
@@ -39,6 +44,59 @@ const createStyles = (colors: any) =>
       color: colors.primary.default,
       marginTop: 1,
     },
+    networkListContainer: {
+      height: isNetworkUiRedesignEnabled ? '100%' : undefined,
+    },
+    networkIcon: {
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      marginTop: 2,
+      marginRight: 16,
+    },
+    network: {
+      flex: 1,
+      flexDirection: 'row',
+      paddingVertical: 12,
+      alignItems: 'center',
+    },
+    networkLabel: {
+      fontSize: 16,
+      color: colors.text.default,
+      ...fontStyles.normal,
+    },
+    inputWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 10,
+      paddingVertical: 10,
+      borderRadius: 5,
+      borderWidth: 1,
+      borderColor: colors.border.default,
+      color: colors.text.default,
+      marginLeft: 16,
+      marginRight: 16,
+      marginBottom: 8,
+    },
+    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,
+    },
   });
 
 export default createStyles;

app/components/Views/NetworkSelector/NetworkSelector.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // Third party dependencies.
 import React, { useRef, useState } from 'react';
-import { Linking, Switch, View } from 'react-native';
+import { Linking, Switch, TextInput, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import images from 'images/image-icons';
 import { useNavigation } from '@react-navigation/native';
@@ -64,11 +65,15 @@ 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 { PopularList } from '../../../util/networks/customNetworks';
+import Icon from 'react-native-vector-icons/Ionicons';
 
 const NetworkSelector = () => {
   const [showPopularNetworkModal, setShowPopularNetworkModal] = useState(false);
   const [popularNetwork, setPopularNetwork] = useState(undefined);
   const [showWarningModal, setShowWarningModal] = useState(false);
+  const [searchString, setSearchString] = useState('');
   const { navigate } = useNavigation();
   const theme = useTheme();
   const { trackEvent } = useMetrics();
@@ -167,8 +172,34 @@ const NetworkSelector = () => {
     Linking.openURL(strings('networks.learn_more_url'));
   };
 
+  const filterNetworksByName = (networks: any[], networkName: string) => {
+    const searchResult: any = networks.filter(({ name }) =>
+      name.toLowerCase().includes(networkName.toLowerCase()),
+    );
+
+    return searchResult;
+  };
+
+  const isNoSearchResults = (networkIdenfier: string) => {
+    if (!searchString || !networkIdenfier) {
+      return false;
+    }
+
+    if (networkIdenfier === MAINNET || networkIdenfier === LINEA_MAINNET) {
+      return (
+        filterNetworksByName([Networks[networkIdenfier]], searchString)
+          .length === 0
+      );
+    }
+
+    return !networkIdenfier.includes(searchString);
+  };
+
   const renderMainnet = () => {
     const { name: mainnetName, chainId } = Networks.mainnet;
+
+    if (isNetworkUiRedesignEnabled && isNoSearchResults(MAINNET)) return null;
+
     return (
       <Cell
         variant={CellVariant.Select}
@@ -190,6 +221,10 @@ const NetworkSelector = () => {
 
   const renderLineaMainnet = () => {
     const { name: lineaMainnetName, chainId } = Networks['linea-mainnet'];
+
+    if (isNetworkUiRedesignEnabled && isNoSearchResults('linea-mainnet'))
+      return null;
+
     return (
       <Cell
         variant={CellVariant.Select}
@@ -211,6 +246,9 @@ const NetworkSelector = () => {
       ({ nickname, rpcUrl, chainId }) => {
         if (!chainId) return null;
         const { name } = { name: nickname || rpcUrl };
+
+        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() });
 
@@ -243,6 +281,8 @@ 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;
+
       return (
         <Cell
           key={chainId}
@@ -293,18 +333,32 @@ const NetworkSelector = () => {
     </View>
   );
 
-  const renderAdditonalNetworks = () => (
-    <View style={styles.addtionalNetworksContainer}>
-      <CustomNetwork
-        isNetworkModalVisible={showPopularNetworkModal}
-        closeNetworkModal={onCancel}
-        selectedNetwork={popularNetwork}
-        toggleWarningModal={toggleWarningModal}
-        showNetworkModal={showNetworkModal}
-        shouldNetworkSwitchPopToWallet={false}
-      />
-    </View>
-  );
+  const renderAdditonalNetworks = () => {
+    let filteredNetworks;
+
+    if (isNetworkUiRedesignEnabled && searchString.length > 0)
+      filteredNetworks = PopularList.filter(({ nickname }) =>
+        nickname.toLowerCase().includes(searchString.toLowerCase()),
+      );
+
+    return (
+      <View style={styles.addtionalNetworksContainer}>
+        <CustomNetwork
+          isNetworkModalVisible={showPopularNetworkModal}
+          closeNetworkModal={onCancel}
+          selectedNetwork={popularNetwork}
+          toggleWarningModal={toggleWarningModal}
+          showNetworkModal={showNetworkModal}
+          switchTab={undefined}
+          shouldNetworkSwitchPopToWallet={false}
+          customNetworksList={
+            searchString.length > 0 ? filteredNetworks : undefined
+          }
+          showCompletionMessage={false}
+        />
+      </View>
+    );
+  };
 
   const renderTitle = (title: string) => (
     <View style={styles.switchContainer}>
@@ -314,18 +368,51 @@ const NetworkSelector = () => {
     </View>
   );
 
-  return (
-    <BottomSheet ref={sheetRef}>
+  const handleSearchTextChange = (text: any) => {
+    setSearchString(text);
+  };
+
+  const clearSearchInput = () => {
+    setSearchString('');
+  };
+
+  const renderBottomSheetContent = () => (
+    <>
       <SheetHeader title={strings('networks.select_network')} />
       <ScrollView testID={NetworkListModalSelectorsIDs.SCROLL}>
-        {isNetworkUiRedesignEnabled && renderTitle('networks.enabled_networks')}
+        {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}
+            />
+            {searchString.length > 0 && (
+              <Icon
+                name="ios-close"
+                size={20}
+                color={colors.icon.default}
+                onPress={clearSearchInput}
+                testID={NetworksViewSelectorsIDs.CLOSE_ICON}
+              />
+            )}
+          </View>
+        )}
+        {isNetworkUiRedesignEnabled &&
+          searchString.length === 0 &&
+          renderTitle('networks.enabled_networks')}
         {renderMainnet()}
         {renderLineaMainnet()}
         {renderRpcNetworks()}
         {isNetworkUiRedesignEnabled &&
+          searchString.length === 0 &&
           renderTitle('networks.additional_networks')}
         {isNetworkUiRedesignEnabled && renderAdditonalNetworks()}
-        {renderTestNetworksSwitch()}
+        {searchString.length === 0 && renderTestNetworksSwitch()}
         {showTestNetworks && renderOtherNetworks()}
       </ScrollView>
 
@@ -338,6 +425,19 @@ const NetworkSelector = () => {
         style={styles.addNetworkButton}
         testID={NetworkListModalSelectorsIDs.ADD_BUTTON}
       />
+    </>
+  );
+
+  return (
+    <BottomSheet ref={sheetRef}>
+      {isNetworkUiRedesignEnabled ? (
+        <View style={styles.networkListContainer}>
+          {renderBottomSheetContent()}
+        </View>
+      ) : (
+        renderBottomSheetContent()
+      )}
+
       {showWarningModal ? (
         <InfoModal
           isVisible={showWarningModal}

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

@@ -27,6 +27,7 @@ const CustomNetwork = ({
   onNetworkSwitch,
   showAddedNetworks,
   customNetworksList,
+  showCompletionMessage = true,
 }: CustomNetworkProps) => {
   const networkConfigurations = useSelector(selectNetworkConfigurations);
 
@@ -52,7 +53,7 @@ const CustomNetwork = ({
     ? supportedNetworkList
     : supportedNetworkList.filter((n) => !n.isAdded);
 
-  if (filteredPopularList.length === 0) {
+  if (filteredPopularList.length === 0 && showCompletionMessage) {
     return (
       <EmptyPopularList goToCustomNetwork={() => switchTab?.goToPage?.(1)} />
     );

app/components/Views/Settings/NetworksSettings/NetworkSettings/CustomNetworkView/CustomNetwork.types.ts

@@ -59,4 +59,10 @@ export interface CustomNetworkProps {
    * List of custom networks
    */
   customNetworksList?: Network[];
+  /**
+   * If this list of networks is used in a filtered way for example when the user is using a search box to filter networks,
+   * we should take that into consideration before displaying an empty state telling the user he has already added all networks.
+   * This is the main use case for this prop.
+   */
+  showCompletionMessage?: boolean;
 }

app/core/Engine.ts

@@ -1003,6 +1003,34 @@ class Engine {
       ],
     });
 
+    const snapController = new SnapController({
+      environmentEndowmentPermissions: Object.values(EndowmentPermissions),
+      featureFlags: {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        requireAllowlist,
+      },
+      state: initialState.SnapController || undefined,
+      // TODO: Replace "any" with type
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      messenger: snapControllerMessenger as any,
+      detectSnapLocation: (
+        location: string | URL,
+        options?: DetectSnapLocationOptions,
+      ) =>
+        detectSnapLocation(location, {
+          ...options,
+          allowLocal: allowLocalSnaps,
+          fetch: fetchFunction,
+        }),
+      //@ts-expect-error types need to be aligned with snaps-controllers
+      preinstalledSnaps: PREINSTALLED_SNAPS,
+      //@ts-expect-error types need to be aligned between new encryptor and snaps-controllers
+      encryptor,
+      getMnemonic: getPrimaryKeyringMnemonic.bind(this),
+    });
+    ///: END:ONLY_INCLUDE_IF
+
     const authenticationController = new AuthenticationController.Controller({
       state: initialState.AuthenticationController,
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -1056,36 +1084,16 @@ class Engine {
           allowedEvents: ['KeyringController:stateChange'],
         }),
         state: initialState.NotificationServicesController,
+        env: {
+          isPushIntegrated: false, // temporary until we integrate push notifications
+          featureAnnouncements: {
+            platform: 'mobile',
+            accessToken: 'TODO from env',
+            spaceId: 'TODO from env',
+          },
+        },
       });
 
-    const snapController = new SnapController({
-      environmentEndowmentPermissions: Object.values(EndowmentPermissions),
-      featureFlags: {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        requireAllowlist,
-      },
-      state: initialState.SnapController || undefined,
-      // TODO: Replace "any" with type
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      messenger: snapControllerMessenger as any,
-      detectSnapLocation: (
-        location: string | URL,
-        options?: DetectSnapLocationOptions,
-      ) =>
-        detectSnapLocation(location, {
-          ...options,
-          allowLocal: allowLocalSnaps,
-          fetch: fetchFunction,
-        }),
-      //@ts-expect-error types need to be aligned with snaps-controllers
-      preinstalledSnaps: PREINSTALLED_SNAPS,
-      //@ts-expect-error types need to be aligned between new encryptor and snaps-controllers
-      encryptor,
-      getMnemonic: getPrimaryKeyringMnemonic.bind(this),
-    });
-    ///: END:ONLY_INCLUDE_IF
-
     this.transactionController = new TransactionController({
       // @ts-expect-error at this point in time the provider will be defined by the `networkController.initializeProvider`
       blockTracker: networkController.getProviderAndBlockTracker().blockTracker,