feat: extend PickerNetwork component functionality (#11856)

## **Description** This PR changes the `PickerNetwork` to allow the network name to be hidden. These changes are necessary to accommodate the [Header Update](https://www.figma.com/design/aMYisczaJyEsYl1TYdcPUL/Portfolio-View?m=auto&node-id=5019-59596&t=PAdxL1bg2Mk08dSk-1) design requirements coming up. However the aim is to introduce very little change (other than padding) to what is pre-existing but by passing in the prop of `hideNetwork` it changes into the future design ## **Related issues** Related: [#11763](#11763) ## **Manual testing steps** 1. View any instance of `PickerNetwork` being used. For example the `PickerNetwork` in header in the home screen ## **Screenshots/Recordings** <img width="460" alt="before" src="https://github.com/user-attachments/assets/d782c625-a215-4a21-a058-e121f2b3eb36"> After `hideNetwork=false` the default <img width="455" alt="after (no prop)" src="https://github.com/user-attachments/assets/219d5711-26ba-4d9e-a381-c8c999db582c"> After `hideNetwork=true` <img width="457" alt="after (prop)" src="https://github.com/user-attachments/assets/f0d5e89c-44e7-4bf4-b5c2-c92a8f6b0e89"> ### **Before** NA ### **After** NA ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
MetaMask · Oct 23, 2024 · 3db0815 · 3db0815
1 parent cce5d5c
commit 3db0815
Show file tree

Hide file tree

Showing 14 changed files with 304 additions and 210 deletions.
diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx b/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}

diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts
@@ -40,6 +40,9 @@ const styleSheet = (params: {
       marginHorizontal: 8,
       flexShrink: 1,
     },
+    networkIconContainer: {
+      marginRight: 8,
+    },
   });
 };
 

diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx b/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();
+  });
 });
diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.tsx b/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}

diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.types.ts b/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'>;
diff --git a/app/component-library/components/Pickers/PickerNetwork/README.md b/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`.
diff --git a/...ponent-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap b/...ponent-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap
@@ -16,34 +16,38 @@ exports[`PickerNetwork renders correctly 1`] = `
   }
 >
   <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"

diff --git a/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap b/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap
@@ -84,34 +84,38 @@ exports[`ManageNetworks should render correctly 1`] = `
     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"

diff --git a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
@@ -230,34 +230,38 @@ exports[`NetworkDetails renders correctly 1`] = `
                   }
                 >
                   <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,
                         }
                       }
                     >
-                      T
-                    </Text>
+                      <Text
+                        accessibilityRole="text"
+                        style={
+                          {
+                            "color": "#141618",
+                            "fontFamily": "EuclidCircularB-Regular",
+                            "fontSize": 10,
+                            "fontWeight": "400",
+                            "letterSpacing": 0,
+                            "lineHeight": undefined,
+                          }
+                        }
+                      >
+                        T
+                      </Text>
+                    </View>
                   </View>
                   <Text
                     accessibilityRole="text"