fix: add migration scrippt for network controller v21

Author: salimtb

android/.project

@@ -14,4 +14,15 @@
 	<natures>
 		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
 	</natures>
+	<filteredResources>
+		<filter>
+			<id>1727966429894</id>
+			<name></name>
+			<type>30</type>
+			<matcher>
+				<id>org.eclipse.core.resources.regexFilterMatcher</id>
+				<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
 </projectDescription>

android/.settings/org.eclipse.buildship.core.prefs

@@ -1,2 +1,13 @@
+arguments=--init-script /var/folders/j9/20w1vr5s10v1y55vbf73rbx40000gn/T/db3b08fc4a9ef609cb16b96b200fa13e563f396e9bb1ed0905fdab7bc3bc513b.gradle --init-script /var/folders/j9/20w1vr5s10v1y55vbf73rbx40000gn/T/52cde0cfcf3e28b8b7510e992210d9614505e0911af0c190bd590d7158574963.gradle
+auto.sync=false
+build.scans.enabled=false
+connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
 connection.project.dir=
 eclipse.preferences.version=1
+gradle.user.home=
+java.home=/Users/salim/Library/Java/JavaVirtualMachines/azul-16.0.2/Contents/Home
+jvm.arguments=
+offline.mode=false
+override.workspace.settings=true
+show.console.view=true
+show.executions.view=true

app/actions/security/index.ts

@@ -8,6 +8,7 @@ export enum ActionType {
   SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN = 'SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN',
   SET_DATA_COLLECTION_FOR_MARKETING = 'SET_DATA_COLLECTION_FOR_MARKETING',
   SET_NFT_AUTO_DETECTION_MODAL_OPEN = 'SET_NFT_AUTO_DETECTION_MODAL_OPEN',
+  SET_MULTI_RPC_MIGRATION_MODAL_OPEN = 'SET_MULTI_RPC_MIGRATION_MODAL_OPEN',
 }
 
 export interface AllowLoginWithRememberMeUpdated
@@ -35,6 +36,11 @@ export interface SetNftAutoDetectionModalOpen
   open: boolean;
 }
 
+export interface SetMultiRpcMigrationModalOpen
+  extends ReduxAction<ActionType.SET_MULTI_RPC_MIGRATION_MODAL_OPEN> {
+  open: boolean;
+}
+
 export interface SetDataCollectionForMarketing
   extends ReduxAction<ActionType.SET_DATA_COLLECTION_FOR_MARKETING> {
   enabled: boolean;
@@ -46,7 +52,8 @@ export type Action =
   | UserSelectedAutomaticSecurityChecksOptions
   | SetAutomaticSecurityChecksModalOpen
   | SetDataCollectionForMarketing
-  | SetNftAutoDetectionModalOpen;
+  | SetNftAutoDetectionModalOpen
+  | SetMultiRpcMigrationModalOpen;
 
 export const setAllowLoginWithRememberMe = (
   enabled: boolean,
@@ -82,6 +89,13 @@ export const setNftAutoDetectionModalOpen = (
   open,
 });
 
+export const setMultiRpcMigrationModalOpen = (
+  open: boolean,
+): SetMultiRpcMigrationModalOpen => ({
+  type: ActionType.SET_MULTI_RPC_MIGRATION_MODAL_OPEN,
+  open,
+});
+
 export const setDataCollectionForMarketing = (enabled: boolean) => ({
   type: ActionType.SET_DATA_COLLECTION_FOR_MARKETING,
   enabled,

app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.tsx

@@ -33,6 +33,7 @@ const CellSelectWithMenu = ({
   tagLabel,
   isSelected = false,
   children,
+  withAvatar = true,
   ...props
 }: CellSelectWithMenuProps) => {
   const { styles } = useStyles(styleSheet, { style });
@@ -46,12 +47,15 @@ const CellSelectWithMenu = ({
     >
       <View style={styles.cellBase}>
         {/* DEV Note: Account Avatar should be replaced with Avatar with Badge whenever available */}
-        <Avatar
-          style={styles.avatar}
-          testID={CellModalSelectorsIDs.BASE_AVATAR}
-          size={DEFAULT_CELLBASE_AVATAR_SIZE}
-          {...avatarProps}
-        />
+        {withAvatar ? (
+          <Avatar
+            style={styles.avatar}
+            testID={CellModalSelectorsIDs.BASE_AVATAR}
+            size={DEFAULT_CELLBASE_AVATAR_SIZE}
+            {...avatarProps}
+          />
+        ) : null}
+
         <View style={styles.cellBaseInfo}>
           <Text
             numberOfLines={1}

app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.styles.ts

@@ -28,7 +28,7 @@ const styleSheet = (params: {
         position: 'relative',
         opacity: isDisabled ? 0.5 : 1,
         padding: 16,
-        width: '95%',
+        width: '90%',
         zIndex: 1,
       } as ViewStyle,
       style,
@@ -86,6 +86,9 @@ const styleSheet = (params: {
       paddingLeft: 8,
       paddingTop: 32,
     },
+    buttonIcon: {
+      paddingHorizontal: 20,
+    },
   });
 };
 

app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.tsx

@@ -20,14 +20,22 @@ import {
   IconColor,
   IconName,
 } from '../../../component-library/components/Icons/Icon';
+import Button, {
+  ButtonSize,
+  ButtonVariants,
+  ButtonWidthTypes,
+} from '../../../component-library/components/Buttons/Button';
+import { TextVariant } from '../../../component-library/components/Texts/Text';
 
 const ListItemMultiSelectButton: React.FC<ListItemMultiSelectButtonProps> = ({
   style,
   isSelected = false,
   isDisabled = false,
   children,
   gap = DEFAULT_LISTITEMMULTISELECT_GAP,
+  showButtonIcon = true,
   buttonIcon = IconName.MoreVertical,
+  textButton = null,
   ...props
 }) => {
   const { styles } = useStyles(styleSheet, {
@@ -55,15 +63,29 @@ const ListItemMultiSelectButton: React.FC<ListItemMultiSelectButtonProps> = ({
           </View>
         )}
       </TouchableOpacity>
-      <View>
-        <ButtonIcon
-          iconName={buttonIcon}
-          iconColor={IconColor.Default}
-          testID={BUTTON_TEST_ID}
-          onPress={props.onButtonClick}
-          accessibilityRole="button"
-        />
-      </View>
+      {showButtonIcon ? (
+        <View style={styles.buttonIcon}>
+          <ButtonIcon
+            iconName={buttonIcon}
+            iconColor={IconColor.Default}
+            testID={BUTTON_TEST_ID}
+            onPress={props.onButtonClick}
+            accessibilityRole="button"
+          />
+        </View>
+      ) : null}
+      {textButton ? (
+        <View>
+          <Button
+            variant={ButtonVariants.Link}
+            onPress={props.onButtonClick as () => void}
+            labelTextVariant={TextVariant.BodyMD}
+            size={ButtonSize.Lg}
+            width={ButtonWidthTypes.Auto}
+            label={textButton}
+          />
+        </View>
+      ) : null}
     </View>
   );
 };

app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.types.ts

@@ -35,6 +35,20 @@ export interface ListItemMultiSelectButtonProps
    * Optional button onClick rpc modal function
    */
   onTextClick?: (() => void) | undefined;
+
+  /**
+   * Optional property to add avatar
+   */
+  withAvatar?: boolean;
+
+  /**
+   * Optional property to show icon
+   */
+  showButtonIcon?: boolean;
+  /**
+   * Optional property to show text button
+   */
+  textButton?: string | null;
 }
 
 /**

app/components/Nav/App/index.js

@@ -127,6 +127,7 @@ import { SnapsExecutionWebView } from '../../../lib/snaps';
 import OptionsSheet from '../../UI/SelectOptionSheet/OptionsSheet';
 import FoxLoader from '../../../components/UI/FoxLoader';
 import { AppStateEventProcessor } from '../../../core/AppStateEventListener';
+import MultiRpcModal from '../../../components/Views/MultiRpcModal/MultiRpcModal';
 
 const clearStackNavigatorOptions = {
   headerShown: false,
@@ -396,7 +397,6 @@ const App = (props) => {
       });
   }, [handleDeeplink]);
 
-
   useEffect(() => {
     if (navigator) {
       // Initialize deep link manager
@@ -687,11 +687,14 @@ const App = (props) => {
         name={Routes.MODAL.NFT_AUTO_DETECTION_MODAL}
         component={NFTAutoDetectionModal}
       />
+      <Stack.Screen
+        name={Routes.MODAL.MULTI_RPC_MIGRATION_MODAL}
+        component={MultiRpcModal}
+      />
       <Stack.Screen
         name={Routes.SHEET.SHOW_TOKEN_ID}
         component={ShowTokenIdSheet}
       />
-
       <Stack.Screen
         name={Routes.SHEET.ORIGIN_SPAM_MODAL}
         component={OriginSpamModal}

app/components/UI/AssetIcon/index.test.tsx

@@ -15,6 +15,7 @@ const mockInitialState = {
         selectedAddress: '0x76cf1CdD1fcC252442b50D6e97207228aA4aefC3',
         useTokenDetection: true,
         useNftDetection: false,
+        showMultiRpcModal: false,
         displayNftMedia: true,
         useSafeChainsListValidation: false,
         isMultiAccountBalancesEnabled: true,

app/components/Views/MultiRpcModal/MultiRpcModal.styles.ts

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+
+/**
+ * Style sheet function for NFT auto detection modal component.
+ *
+ * @returns StyleSheet object.
+ */
+const styleSheet = () =>
+  StyleSheet.create({
+    container: {
+      alignItems: 'center',
+    },
+    image: {
+      width: 102.64,
+      height: 102.64,
+    },
+    description: {
+      marginLeft: 32,
+      marginRight: 32,
+    },
+    content: {
+      height: '80%',
+    },
+    textDescription: {
+      textAlign: 'center',
+    },
+    textContainer: {
+      // paddingTop: 24,
+      marginLeft: 16,
+      marginRight: 16,
+      paddingVertical: 16,
+    },
+    buttonsContainer: {
+      // paddingTop: 24,
+      marginLeft: 16,
+      marginRight: 16,
+      paddingVertical: 16,
+    },
+    spacer: { height: 8 },
+  });
+
+export default styleSheet;