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..b2206f063dc 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 @@ -11,39 +11,43 @@ exports[`PickerNetwork renders correctly 1`] = ` "borderRadius": 16, "flexDirection": "row", "height": 32, - "paddingHorizontal": 8, + "paddingHorizontal": 12, } } > - + > + + - - E - + + E + + - - T - + + T + + - + > + + - - C - + + C + + - + > + + - - E - + + E + + - + > + +