fix: add migration ui for network controller v21

MetaMask · Oct 8, 2024 · 4b26e2c · 4b26e2c
1 parent 2cc2003
commit 4b26e2c
Show file tree

Hide file tree

Showing 24 changed files with 1,856 additions and 127 deletions.
diff --git a/app/actions/security/index.ts b/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,

diff --git a/app/component-library/components-temp/CellSelectWithMenu/CellSelectWithMenu.tsx b/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}

diff --git a/...library/components-temp/CellSelectWithMenu/__snapshots__/CellSelectWithMenu.test.tsx.snap b/...library/components-temp/CellSelectWithMenu/__snapshots__/CellSelectWithMenu.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`CellSelectWithMenu should render with default settings correctly 1`] =
         "opacity": 1,
         "padding": 16,
         "position": "relative",
-        "width": "95%",
+        "width": "90%",
         "zIndex": 1,
       }
     }
@@ -287,7 +287,13 @@ exports[`CellSelectWithMenu should render with default settings correctly 1`] =
       </View>
     </View>
   </TouchableOpacity>
-  <View>
+  <View
+    style={
+      {
+        "paddingHorizontal": 20,
+      }
+    }
+  >
     <TouchableOpacity
       accessibilityRole="button"
       accessible={true}

diff --git a/...ent-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.styles.ts b/...ent-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,
+    },
   });
 };
 

diff --git a/...component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.tsx b/...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>
   );
 };

diff --git a/...nent-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.types.ts b/...nent-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;
 }
 
 /**

diff --git a/...ents-temp/ListItemMultiSelectButton/__snapshots__/ListItemMultiSelectButton.test.tsx.snap b/...ents-temp/ListItemMultiSelectButton/__snapshots__/ListItemMultiSelectButton.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`ListItemMultiSelectButton should render correctly with default props 1`
         "opacity": 1,
         "padding": 16,
         "position": "relative",
-        "width": "95%",
+        "width": "90%",
         "zIndex": 1,
       }
     }
@@ -52,7 +52,13 @@ exports[`ListItemMultiSelectButton should render correctly with default props 1`
       </View>
     </View>
   </TouchableOpacity>
-  <View>
+  <View
+    style={
+      {
+        "paddingHorizontal": 20,
+      }
+    }
+  >
     <TouchableOpacity
       accessibilityRole="button"
       accessible={true}

diff --git a/app/components/Nav/App/index.js b/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,17 @@ const App = (props) => {
         name={Routes.MODAL.NFT_AUTO_DETECTION_MODAL}
         component={NFTAutoDetectionModal}
       />
+      {isNetworkUiRedesignEnabled() ? (
+        <Stack.Screen
+          name={Routes.MODAL.MULTI_RPC_MIGRATION_MODAL}
+          component={MultiRpcModal}
+        />
+      ) : null}
+
       <Stack.Screen
         name={Routes.SHEET.SHOW_TOKEN_ID}
         component={ShowTokenIdSheet}
       />
-
       <Stack.Screen
         name={Routes.SHEET.ORIGIN_SPAM_MODAL}
         component={OriginSpamModal}

diff --git a/app/components/UI/AssetIcon/index.test.tsx b/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,

diff --git a/app/components/Views/MultiRpcModal/MultiRpcModal.constants.ts b/app/components/Views/MultiRpcModal/MultiRpcModal.constants.ts
@@ -0,0 +1,30 @@
+export const SAMPLE_NETWORK_CONFIGURATIONS = {
+  '0x1': {
+    blockExplorerUrls: [],
+    chainId: '0x1',
+    defaultRpcEndpointIndex: 0,
+    name: 'Mainnet',
+    nativeCurrency: 'ETH',
+    rpcEndpoints: [
+      {
+        networkClientId: 'mainnet',
+        type: 'infura',
+        url: 'https://mainnet.infura.io/v3/{infuraProjectId}',
+      },
+    ],
+  },
+  '0x5': {
+    blockExplorerUrls: [],
+    chainId: '0x5',
+    defaultRpcEndpointIndex: 0,
+    name: 'Goerli',
+    nativeCurrency: 'GoerliETH',
+    rpcEndpoints: [
+      {
+        networkClientId: 'goerli',
+        type: 'infura',
+        url: 'https://goerli.infura.io/v3/{infuraProjectId}',
+      },
+    ],
+  },
+};
diff --git a/app/components/Views/MultiRpcModal/MultiRpcModal.styles.ts b/app/components/Views/MultiRpcModal/MultiRpcModal.styles.ts
@@ -0,0 +1,40 @@
+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: {
+      marginLeft: 16,
+      marginRight: 16,
+      paddingVertical: 16,
+    },
+    buttonsContainer: {
+      marginLeft: 16,
+      marginRight: 16,
+      paddingVertical: 16,
+    },
+    spacer: { height: 8 },
+  });
+
+export default styleSheet;