From 3db08153e0f0973f94402e657966ec5c3bb73180 Mon Sep 17 00:00:00 2001 From: Vince Howard Date: Wed, 23 Oct 2024 08:39:13 -0600 Subject: [PATCH] feat: extend PickerNetwork component functionality (#11856) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **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](https://github.com/MetaMask/metamask-mobile/pull/11763) ## **Manual testing steps** 1. View any instance of `PickerNetwork` being used. For example the `PickerNetwork` in header in the home screen ## **Screenshots/Recordings** before After `hideNetwork=false` the default after (no prop) After `hideNetwork=true` after (prop) ### **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. --- .../PickerNetwork/PickerNetwork.stories.tsx | 10 ++-- .../PickerNetwork/PickerNetwork.styles.ts | 3 ++ .../PickerNetwork/PickerNetwork.test.tsx | 34 ++++++++++++- .../Pickers/PickerNetwork/PickerNetwork.tsx | 35 +++++++------ .../PickerNetwork/PickerNetwork.types.ts | 4 ++ .../Pickers/PickerNetwork/README.md | 40 ++++++++++----- .../__snapshots__/PickerNetwork.test.tsx.snap | 46 +++++++++-------- .../__snapshots__/ManageNetworks.test.js.snap | 48 ++++++++++-------- .../__snapshots__/index.test.tsx.snap | 48 ++++++++++-------- .../NetworkVerificationInfo.test.tsx.snap | 50 ++++++++++--------- .../NetworkSwitcher.test.tsx.snap | 48 ++++++++++-------- .../AccountPermissions.test.tsx.snap | 50 ++++++++++--------- .../__snapshots__/index.test.tsx.snap | 48 ++++++++++-------- .../Wallet/__snapshots__/index.test.tsx.snap | 50 ++++++++++--------- 14 files changed, 304 insertions(+), 210 deletions(-) diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx index 2ff8a42fd2f..a3ade2544ae 100644 --- 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) => ( { expect(queryByTestId(PICKERNETWORK_ARROW_TESTID)).toBeNull(); }); + + it('hides network name and shows icon when hideNetworkName is true', () => { + const { queryByTestId } = render( + , + ); + + expect( + queryByTestId(WalletViewSelectorsIDs.NAVBAR_NETWORK_TEXT), + ).toBeNull(); + }); + + it('calls onPress when pressed', () => { + const onPress = jest.fn(); + const { getByTestId } = render( + , + ); + + 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 index 9c4dd1f150a..1b4642ba967 100644 --- 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 ( - - - {label} - + + + + {hideNetworkName ? null : ( + + {label} + + )} {onPress && ( void; + /** + * Whether to hide the network name. + */ + hideNetworkName?: boolean; } export type PickerNetworkStyleSheetVars = Pick; diff --git a/app/component-library/components/Pickers/PickerNetwork/README.md b/app/component-library/components/Pickers/PickerNetwork/README.md index f7e1dccc1f6..63cafd3a338 100644 --- 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. -| TYPE | REQUIRED | -| :-------------------------------------------------------------------- | :------------------------------------------------------ | -| [ImageSourcePropType](https://reactnative.dev/docs/image#imagesource) | Yes | +| TYPE | REQUIRED | +| :-------------------------------------------------- | :------------------------------------------------------ | +| 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. +| TYPE | REQUIRED | +| :-------------------------------------------------- | :------------------------------------------------------ | +| ImageSourcePropType | No | + +### `hideNetworkName` + +Whether to hide the network name text. | TYPE | REQUIRED | | :-------------------------------------------------- | :------------------------------------------------------ | -| function | Yes | +| boolean | No | + +## Usage ```javascript -// Replace import with relative path. import PickerNetwork from 'app/component-library/components/Pickers/PickerNetwork'; 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`. \ No newline at end of file diff --git a/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap b/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap index c9c4f7fe797..f59fab74933 100644 --- a/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap +++ b/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap @@ -16,34 +16,38 @@ exports[`PickerNetwork renders correctly 1`] = ` } > - + > + + - - E - + + E + + - - T - + + T + + - + > + + - - C - + + C + + - + > + + - - E - + + E + + - + > + +