fix: fix multi rpc modal design

Author: salimtb

app/component-library/components-temp/CellSelectWithMenu/__snapshots__/CellSelectWithMenu.test.tsx.snap

@@ -7,19 +7,17 @@ exports[`CellSelectWithMenu should render with default settings correctly 1`] =
       "alignItems": "center",
       "backgroundColor": "#ffffff",
       "flexDirection": "row",
-      "paddingRight": 20,
-      "width": "100%",
     }
   }
 >
   <TouchableOpacity
     disabled={false}
     style={
       {
+        "flex": 1,
         "opacity": 1,
         "padding": 16,
         "position": "relative",
-        "width": "90%",
         "zIndex": 1,
       }
     }

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

@@ -25,10 +25,10 @@ const styleSheet = (params: {
   return StyleSheet.create({
     base: Object.assign(
       {
+        flex: 1,
         position: 'relative',
         opacity: isDisabled ? 0.5 : 1,
         padding: 16,
-        width: '90%',
         zIndex: 1,
       } as ViewStyle,
       style,
@@ -71,10 +71,8 @@ const styleSheet = (params: {
       backgroundColor: isSelected
         ? colors.primary.muted
         : colors.background.default,
-      paddingRight: 20,
       flexDirection: 'row',
       alignItems: 'center',
-      width: '100%',
     },
     itemColumn: {
       display: 'flex',

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

@@ -42,7 +42,8 @@ describe('ListItemMultiSelectButton', () => {
       <ListItemMultiSelectButton
         onPress={mockOnPress}
         buttonProps={{
-          onButtonClick: mockOnPress,
+          label: '',
+          onPress: mockOnPress,
         }}
       >
         <View />
@@ -67,7 +68,8 @@ describe('ListItemMultiSelectButton', () => {
       <ListItemMultiSelectButton
         buttonIcon={IconName.Check}
         buttonProps={{
-          onButtonClick: mockOnButtonClick,
+          label: '',
+          onPress: mockOnButtonClick,
         }}
       >
         <View />

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

@@ -69,20 +69,20 @@ const ListItemMultiSelectButton: React.FC<ListItemMultiSelectButtonProps> = ({
             iconName={buttonIcon}
             iconColor={IconColor.Default}
             testID={BUTTON_TEST_ID}
-            onPress={buttonProps?.onButtonClick}
+            onPress={buttonProps?.onPress}
             accessibilityRole="button"
           />
         </View>
       ) : null}
-      {buttonProps?.textButton ? (
+      {buttonProps?.label ? (
         <View>
           <Button
             variant={ButtonVariants.Link}
-            onPress={buttonProps?.onButtonClick as () => void}
+            onPress={buttonProps?.onPress as () => void}
             labelTextVariant={TextVariant.BodyMD}
             size={ButtonSize.Lg}
             width={ButtonWidthTypes.Auto}
-            label={buttonProps?.textButton}
+            label={buttonProps?.label}
           />
         </View>
       ) : null}

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

@@ -4,7 +4,7 @@ import { TouchableOpacityProps } from 'react-native';
 // External dependencies.
 import { IconName } from '../../../component-library/components/Icons/Icon';
 import { ListItemProps } from '../../../component-library/components/List/ListItem/ListItem.types';
-import { GestureResponderEvent } from 'react-native-modal';
+import { ButtonBaseProps } from '../../../component-library/components/Buttons/Button/foundation/ButtonBase';
 
 /**
  * ListItemMultiSelect component props.
@@ -41,16 +41,10 @@ export interface ListItemMultiSelectButtonProps
    */
   showButtonIcon?: boolean;
 
-  buttonProps?: {
-    /**
-     * Optional button onClick function
-     */
-    onButtonClick?: ((event: GestureResponderEvent) => void) | undefined;
-    /**
-     * Optional property to show text button
-     */
-    textButton?: string | null;
-  };
+  /**
+   * Optional button props
+   */
+  buttonProps?: ButtonBaseProps;
 }
 
 /**

app/component-library/components-temp/ListItemMultiSelectButton/__snapshots__/ListItemMultiSelectButton.test.tsx.snap

@@ -7,19 +7,17 @@ exports[`ListItemMultiSelectButton should render correctly with default props 1`
       "alignItems": "center",
       "backgroundColor": "#ffffff",
       "flexDirection": "row",
-      "paddingRight": 20,
-      "width": "100%",
     }
   }
 >
   <TouchableOpacity
     disabled={false}
     style={
       {
+        "flex": 1,
         "opacity": 1,
         "padding": 16,
         "position": "relative",
-        "width": "90%",
         "zIndex": 1,
       }
     }

app/components/Views/MultiRpcModal/MultiRpcModal.tsx

@@ -105,8 +105,8 @@ const MultiRpcModal = () => {
                   buttonIcon={IconName.MoreVertical}
                   showButtonIcon={false}
                   buttonProps={{
-                    textButton: strings('transaction.edit'),
-                    onButtonClick: () => {
+                    label: strings('transaction.edit'),
+                    onPress: () => {
                       sheetRef.current?.onCloseBottomSheet(() => {
                         navigate(Routes.ADD_NETWORK, {
                           shouldNetworkSwitchPopToWallet: false,

app/components/Views/NetworkSelector/NetworkSelector.tsx

@@ -387,7 +387,8 @@ const NetworkSelector = () => {
           style={styles.networkCell}
           buttonIcon={IconName.MoreVertical}
           buttonProps={{
-            onButtonClick: () => {
+            label: '',
+            onPress: () => {
               openModal(chainId, false, MAINNET, true);
             },
           }}
@@ -444,7 +445,8 @@ const NetworkSelector = () => {
           buttonIcon={IconName.MoreVertical}
           secondaryText={hideKeyFromUrl(LINEA_DEFAULT_RPC_URL)}
           buttonProps={{
-            onButtonClick: () => {
+            label: '',
+            onPress: () => {
               openModal(chainId, false, LINEA_MAINNET, true);
             },
           }}
@@ -508,7 +510,8 @@ const NetworkSelector = () => {
               buttonIcon={IconName.MoreVertical}
               secondaryText={hideProtocolFromUrl(hideKeyFromUrl(rpcUrl))}
               buttonProps={{
-                onButtonClick: () => {
+                label: '',
+                onPress: () => {
                   openModal(chainId, true, rpcUrl, false);
                 },
               }}
@@ -580,7 +583,8 @@ const NetworkSelector = () => {
             style={styles.networkCell}
             buttonIcon={IconName.MoreVertical}
             buttonProps={{
-              onButtonClick: () => {
+              label: '',
+              onPress: () => {
                 openModal(chainId, false, networkType, true);
               },
             }}