feat: network Controller Migration + UI

app/components/Views/Wallet/index.tsx

@@ -52,6 +52,7 @@ import {
   isMainNet,
 } from '../../../util/networks';
 import {
+  selectNetworkConfigurations,
   selectProviderConfig,
   selectTicker,
 } from '../../../selectors/networkController';
@@ -80,8 +81,14 @@ import { RootState } from '../../../reducers';
 import usePrevious from '../../hooks/usePrevious';
 import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
 import { selectAccountBalanceByChainId } from '../../../selectors/accountTrackerController';
-import { selectUseNftDetection } from '../../../selectors/preferencesController';
-import { setNftAutoDetectionModalOpen } from '../../../actions/security';
+import {
+  selectShowMultiRpcModal,
+  selectUseNftDetection,
+} from '../../../selectors/preferencesController';
+import {
+  setNftAutoDetectionModalOpen,
+  setMultiRpcMigrationModalOpen,
+} from '../../../actions/security';
 import {
   hideNftFetchingLoadingIndicator as hideNftFetchingLoadingIndicatorAction,
   showNftFetchingLoadingIndicator as showNftFetchingLoadingIndicatorAction,
@@ -96,6 +103,7 @@ import {
 } from '../../../selectors/notifications';
 import { ButtonVariants } from '../../../component-library/components/Buttons/Button';
 import { useListNotifications } from '../../../util/notifications/hooks/useNotifications';
+import { isObject } from 'lodash';
 const createStyles = ({ colors, typography }: Theme) =>
   StyleSheet.create({
     base: {
@@ -167,6 +175,8 @@ const Wallet = ({
   const styles = createStyles(theme);
   const { colors } = theme;
   const dispatch = useDispatch();
+  const networkConfigurations = useSelector(selectNetworkConfigurations);
+
   /**
    * Object containing the balance of the current selected account
    */
@@ -300,6 +310,7 @@ const Wallet = ({
 
   const networkImageSource = useSelector(selectNetworkImageSource);
   const useNftDetection = useSelector(selectUseNftDetection);
+  const showMultiRpcModal = useSelector(selectShowMultiRpcModal);
   const isNFTAutoDetectionModalViewed = useSelector(
     (state: RootState) => state.security.isNFTAutoDetectionModalViewed,
   );
@@ -316,6 +327,13 @@ const Wallet = ({
     });
   }, [navigate, providerConfig.chainId, trackEvent]);
 
+  const isNetworkDuplicated = Object.values(networkConfigurations).some(
+    (networkConfiguration) =>
+      isObject(networkConfiguration) &&
+      Array.isArray(networkConfiguration.rpcEndpoints) &&
+      networkConfiguration.rpcEndpoints.length > 1,
+  );
+
   const checkNftAutoDetectionModal = useCallback(() => {
     const isOnMainnet = isMainNet(providerConfig.chainId);
     if (!useNftDetection && isOnMainnet && !isNFTAutoDetectionModalViewed) {
@@ -332,12 +350,22 @@ const Wallet = ({
     useNftDetection,
   ]);
 
+  const checkMultiRpcModal = useCallback(() => {
+    if (showMultiRpcModal && isNetworkDuplicated) {
+      navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+        screen: Routes.MODAL.MULTI_RPC_MIGRATION_MODAL,
+      });
+      dispatch(setMultiRpcMigrationModalOpen(true));
+    }
+  }, [dispatch, showMultiRpcModal, navigation, isNetworkDuplicated]);
+
   useEffect(() => {
     if (
       currentRouteName === 'Wallet' ||
       currentRouteName === 'SecuritySettings'
     ) {
       checkNftAutoDetectionModal();
+      checkMultiRpcModal();
     }
 
     async function checkIfNotificationsAreEnabled() {