Skip to content

Commit

Permalink
Merge branch 'main' into deps-eth-json-middleware-stream
Browse files Browse the repository at this point in the history
  • Loading branch information
legobeat authored Oct 23, 2024
2 parents 899cb4e + 3db0815 commit 6a284b4
Show file tree
Hide file tree
Showing 14 changed files with 304 additions and 210 deletions.
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@ const styleSheet = (params: {
marginHorizontal: 8,
flexShrink: 1,
},
networkIconContainer: {
marginRight: 8,
},
});
};

Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'>;
40 changes: 28 additions & 12 deletions app/component-library/components/Pickers/PickerNetwork/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand All @@ -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`.
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
48 changes: 26 additions & 22 deletions app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading

0 comments on commit 6a284b4

Please sign in to comment.