feat: extend PickerNetwork component functionality

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/display-name */
-import React from 'react';
+import React, { ComponentProps } from 'react';
 
 // Internal dependencies.
 import { default as PickerNetworkComponent } from './PickerNetwork';
@@ -13,14 +13,16 @@ const PickerNetworkMeta = {
       control: { type: 'text' },
       defaultValue: SAMPLE_PICKERNETWORK_PROPS.label,
     },
+    hideNetworkName: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
   },
 };
 export default PickerNetworkMeta;
 
 export const PickerNetwork = {
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  render: (args: any) => (
+  render: (args: ComponentProps<typeof PickerNetworkComponent>) => (
     <PickerNetworkComponent
       {...args}
       imageSource={SAMPLE_PICKERNETWORK_PROPS.imageSource}

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts

@@ -28,7 +28,7 @@ const styleSheet = (params: {
       {
         height: 32,
         borderRadius: 16,
-        paddingHorizontal: 8,
+        paddingHorizontal: 12,
         flexDirection: 'row',
         alignItems: 'center',
         backgroundColor: colors.background.alternative,
@@ -40,6 +40,9 @@ const styleSheet = (params: {
       marginHorizontal: 8,
       flexShrink: 1,
     },
+    networkIconContainer: {
+      marginRight: 8,
+    },
   });
 };
 

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx

@@ -1,9 +1,12 @@
 // Third party dependencies.
 import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+
+// External dependencies.
+import { WalletViewSelectorsIDs } from '../../../../../e2e/selectors/wallet/WalletView.selectors';
 
 // Internal dependencies.
 import PickerNetwork from './PickerNetwork';
-import { render } from '@testing-library/react-native';
 import {
   PICKERNETWORK_ARROW_TESTID,
   SAMPLE_PICKERNETWORK_PROPS,
@@ -27,4 +30,33 @@ describe('PickerNetwork', () => {
 
     expect(queryByTestId(PICKERNETWORK_ARROW_TESTID)).toBeNull();
   });
+
+  it('hides network name and shows icon when hideNetworkName is true', () => {
+    const { queryByTestId } = render(
+      <PickerNetwork
+        label={SAMPLE_PICKERNETWORK_PROPS.label}
+        imageSource={SAMPLE_PICKERNETWORK_PROPS.imageSource}
+        hideNetworkName
+      />,
+    );
+
+    expect(
+      queryByTestId(WalletViewSelectorsIDs.NAVBAR_NETWORK_TEXT),
+    ).toBeNull();
+  });
+
+  it('calls onPress when pressed', () => {
+    const onPress = jest.fn();
+    const { getByTestId } = render(
+      <PickerNetwork
+        label={SAMPLE_PICKERNETWORK_PROPS.label}
+        imageSource={SAMPLE_PICKERNETWORK_PROPS.imageSource}
+        onPress={onPress}
+      />,
+    );
+
+    fireEvent.press(getByTestId(PICKERNETWORK_ARROW_TESTID));
+
+    expect(onPress).toHaveBeenCalled();
+  });
 });

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.tsx

@@ -2,7 +2,7 @@
 
 // Third party dependencies.
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 
 // External dependencies.
 import Avatar, { AvatarSize, AvatarVariant } from '../../Avatars/Avatar';
@@ -21,26 +21,31 @@ const PickerNetwork = ({
   style,
   label,
   imageSource,
+  hideNetworkName,
   ...props
 }: PickerNetworkProps) => {
   const { styles } = useStyles(stylesheet, { style });
 
   return (
     <TouchableOpacity style={styles.base} onPress={onPress} {...props}>
-      <Avatar
-        variant={AvatarVariant.Network}
-        size={AvatarSize.Xs}
-        name={label}
-        imageSource={imageSource}
-      />
-      <Text
-        style={styles.label}
-        numberOfLines={1}
-        variant={TextVariant.BodyMD}
-        testID={WalletViewSelectorsIDs.NAVBAR_NETWORK_TEXT}
-      >
-        {label}
-      </Text>
+      <View style={hideNetworkName ? styles.networkIconContainer : null}>
+        <Avatar
+          variant={AvatarVariant.Network}
+          size={AvatarSize.Xs}
+          name={label}
+          imageSource={imageSource}
+        />
+      </View>
+      {hideNetworkName ? null : (
+        <Text
+          style={styles.label}
+          numberOfLines={1}
+          variant={TextVariant.BodyMD}
+          testID={WalletViewSelectorsIDs.NAVBAR_NETWORK_TEXT}
+        >
+          {label}
+        </Text>
+      )}
       {onPress && (
         <Icon
           size={IconSize.Xs}

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.types.ts

@@ -17,6 +17,10 @@ export interface PickerNetworkProps extends TouchableOpacityProps {
    * Callback to trigger when picker is pressed.
    */
   onPress?: () => void;
+  /**
+   * Whether to hide the network name.
+   */
+  hideNetworkName?: boolean;
 }
 
 export type PickerNetworkStyleSheetVars = Pick<PickerNetworkProps, 'style'>;

app/component-library/components/Pickers/PickerNetwork/README.md

@@ -6,13 +6,13 @@ PickerNetwork is a component that renders an avatar based on the user selected n
 
 This component extends `TouchableOpacityProps` from React Native's [TouchableOpacity](https://reactnative.dev/docs/touchableopacity) component.
 
-### `imageSource`
+### `onPress`
 
-Optional network image from either a local or remote source.
+Callback to trigger when pressed.
 
-| <span style="color:gray;font-size:14px">TYPE</span>                   | <span style="color:gray;font-size:14px">REQUIRED</span> |
-| :-------------------------------------------------------------------- | :------------------------------------------------------ |
-| [ImageSourcePropType](https://reactnative.dev/docs/image#imagesource) | Yes                                                     |
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| function                                            | No                                                      |
 
 ### `label`
 
@@ -22,21 +22,37 @@ Network label to display.
 | :-------------------------------------------------- | :------------------------------------------------------ |
 | string                                              | Yes                                                     |
 
-### `onPress`
+### `imageSource`
+
+The source for the network avatar image.
 
-Callback to trigger when picker is pressed.
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| ImageSourcePropType                                 | No                                                      |
+
+### `hideNetworkName`
+
+Whether to hide the network name text.
 
 | <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
 | :-------------------------------------------------- | :------------------------------------------------------ |
-| function                                            | Yes                                                     |
+| boolean                                             | No                                                      |
+
+## Usage
 
 ```javascript
-// Replace import with relative path.
 import PickerNetwork from 'app/component-library/components/Pickers/PickerNetwork';
 
 <PickerNetwork
-  onPress={ONPRESS_CALLBACK}
-  label={NETWORK_LABEL}
-  image={{ uri: NETWORK_IMAGE_URL }}
+  onPress={() => console.log('Network picker pressed')}
+  label="Ethereum"
+  imageSource={require('./ethereum-logo.png')}
 />;
 ```
+
+## Notes
+
+- The component uses an `Avatar` component to display the network icon.
+- If `onPress` is provided, a dropdown arrow icon will be displayed.
+- The network name can be hidden using the `hideNetworkName` prop.
+- The component uses custom styles defined in `PickerNetwork.styles.ts`.

app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap

@@ -11,39 +11,43 @@ exports[`PickerNetwork renders correctly 1`] = `
       "borderRadius": 16,
       "flexDirection": "row",
       "height": 32,
-      "paddingHorizontal": 8,
+      "paddingHorizontal": 12,
     }
   }
 >
   <View
-    style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#ffffff",
-        "borderRadius": 8,
-        "height": 16,
-        "justifyContent": "center",
-        "overflow": "hidden",
-        "width": 16,
-      }
-    }
+    style={null}
   >
-    <Image
-      onError={[Function]}
-      resizeMode="contain"
-      source={
-        {
-          "uri": "https://assets.coingecko.com/coins/images/279/small/ethereum.png?1595348880",
-        }
-      }
+    <View
       style={
         {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "height": 16,
+          "justifyContent": "center",
+          "overflow": "hidden",
           "width": 16,
         }
       }
-      testID="network-avatar-image"
-    />
+    >
+      <Image
+        onError={[Function]}
+        resizeMode="contain"
+        source={
+          {
+            "uri": "https://assets.coingecko.com/coins/images/279/small/ethereum.png?1595348880",
+          }
+        }
+        style={
+          {
+            "height": 16,
+            "width": 16,
+          }
+        }
+        testID="network-avatar-image"
+      />
+    </View>
   </View>
   <Text
     accessibilityRole="text"

app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap

@@ -78,40 +78,44 @@ exports[`ManageNetworks should render correctly 1`] = `
         "flexDirection": "row",
         "height": 32,
         "marginVertical": 16,
-        "paddingHorizontal": 8,
+        "paddingHorizontal": 12,
       }
     }
     testID="accounts-connected-network-picker"
   >
     <View
-      style={
-        {
-          "alignItems": "center",
-          "backgroundColor": "#f2f4f6",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "height": 16,
-          "justifyContent": "center",
-          "overflow": "hidden",
-          "width": 16,
-        }
-      }
+      style={null}
     >
-      <Text
-        accessibilityRole="text"
+      <View
         style={
           {
-            "color": "#141618",
-            "fontFamily": "EuclidCircularB-Regular",
-            "fontSize": 10,
-            "fontWeight": "400",
-            "letterSpacing": 0,
-            "lineHeight": undefined,
+            "alignItems": "center",
+            "backgroundColor": "#f2f4f6",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 16,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "width": 16,
           }
         }
       >
-        E
-      </Text>
+        <Text
+          accessibilityRole="text"
+          style={
+            {
+              "color": "#141618",
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontSize": 10,
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": undefined,
+            }
+          }
+        >
+          E
+        </Text>
+      </View>
     </View>
     <Text
       accessibilityRole="text"