Create network picker component (#4677)

* Create network picker component

* Update test

app/component-library/components/NetworkPicker/NetworkPicker.data.ts

@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+export const testImageUrl =
+  'https://assets.coingecko.com/coins/images/279/small/ethereum.png?1595348880';

app/component-library/components/NetworkPicker/NetworkPicker.stories.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { text } from '@storybook/addon-knobs';
+import NetworkPicker from './NetworkPicker';
+import { testImageUrl } from './NetworkPicker.data';
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  networkPicker: {
+    alignSelf: 'flex-start',
+  },
+});
+
+storiesOf('Component Library / Network Picker', module).add('Default', () => {
+  const groupId = 'Props';
+  const networkLabelSelector = text(
+    'networkLabel',
+    'Ethereum Mainnet',
+    groupId,
+  );
+
+  return (
+    <NetworkPicker
+      onPress={() => {
+        console.log('Picking network!');
+      }}
+      networkLabel={networkLabelSelector}
+      networkImageUrl={testImageUrl}
+      style={styles.networkPicker}
+    />
+  );
+});

app/component-library/components/NetworkPicker/NetworkPicker.styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+import { Theme } from 'app/util/theme/models';
+import { NetworkPickerStyleSheetVars } from './NetworkPicker.types';
+
+/**
+ * Style sheet function for NetworkPicker component.
+ *
+ * @param params Style sheet params.
+ * @param params.theme App theme from ThemeContext.
+ * @param params.vars NetworkPicker stylesheet vars.
+ * @returns StyleSheet object.
+ */
+const styleSheet = (params: {
+  theme: Theme;
+  vars: NetworkPickerStyleSheetVars;
+}) => {
+  const { vars, theme } = params;
+  const { colors } = theme;
+  const { style } = vars;
+
+  return StyleSheet.create({
+    base: Object.assign(
+      {
+        height: 32,
+        borderRadius: 16,
+        paddingHorizontal: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: colors.background.alternative,
+      } as ViewStyle,
+      style,
+    ) as ViewStyle,
+    label: {
+      marginHorizontal: 8,
+    },
+  });
+};
+
+export default styleSheet;

app/component-library/components/NetworkPicker/NetworkPicker.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import NetworkPicker from './NetworkPicker';
+import { testImageUrl } from './NetworkPicker.data';
+
+describe('NetworkPicker', () => {
+  it('should render correctly', () => {
+    const wrapper = shallow(
+      <NetworkPicker
+        onPress={jest.fn}
+        networkLabel={'Ethereum Mainnet'}
+        networkImageUrl={testImageUrl}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});

app/component-library/components/NetworkPicker/NetworkPicker.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { BaseAvatarSize } from '../BaseAvatar';
+import { NetworkPickerProps } from './NetworkPicker.types';
+import BaseText, { BaseTextVariant } from '../BaseText';
+import stylesheet from './NetworkPicker.styles';
+import { useStyles } from '../../../component-library/hooks';
+import Icon, { IconName, IconSize } from '../Icon';
+import NetworkAvatar from '../NetworkAvatar';
+
+const NetworkPicker = ({
+  onPress,
+  style,
+  networkLabel,
+  networkImageUrl,
+}: NetworkPickerProps) => {
+  const { styles } = useStyles(stylesheet, { style });
+
+  return (
+    <TouchableOpacity style={styles.base} onPress={onPress}>
+      <NetworkAvatar
+        size={BaseAvatarSize.Xs}
+        networkImageUrl={networkImageUrl}
+      />
+      <BaseText style={styles.label} variant={BaseTextVariant.sBodyMD}>
+        {networkLabel}
+      </BaseText>
+      <Icon size={IconSize.Xs} name={IconName.ArrowDownOutline} />
+    </TouchableOpacity>
+  );
+};
+
+export default NetworkPicker;

app/component-library/components/NetworkPicker/NetworkPicker.types.ts

@@ -0,0 +1,21 @@
+import { TouchableOpacityProps } from 'react-native';
+
+/**
+ * NetworkPicker component props.
+ */
+export interface NetworkPickerProps extends TouchableOpacityProps {
+  /**
+   * Network image url.
+   */
+  networkImageUrl: string;
+  /**
+   * Network label to display.
+   */
+  networkLabel: string;
+  /**
+   * Callback to trigger when picker is pressed.
+   */
+  onPress: () => void;
+}
+
+export type NetworkPickerStyleSheetVars = Pick<NetworkPickerProps, 'style'>;

app/component-library/components/NetworkPicker/README.md

@@ -0,0 +1,31 @@
+# NetworkPicker
+
+NetworkPicker is a component that renders an avatar based on the user selected network.
+
+## Props
+
+This component extends `TouchableOpacityProps` from React Native's [TouchableOpacity Component](https://reactnative.dev/docs/touchableOpacity).
+
+### `networkImageUrl`
+
+Network image url.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| string                                              | Yes                                                     |
+
+### `networkLabel`
+
+Network label to display.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| string                                              | Yes                                                     |
+
+### `onPress`
+
+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> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| function                                            | Yes                                                     |

app/component-library/components/NetworkPicker/__snapshots__/NetworkPicker.test.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NetworkPicker should render correctly 1`] = `
+<TouchableOpacity
+  onPress={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#F2F4F6",
+      "borderRadius": 16,
+      "flexDirection": "row",
+      "height": 32,
+      "paddingHorizontal": 8,
+    }
+  }
+>
+  <NetworkAvatar
+    networkImageUrl="https://assets.coingecko.com/coins/images/279/small/ethereum.png?1595348880"
+    size="16"
+  />
+  <BaseText
+    style={
+      Object {
+        "marginHorizontal": 8,
+      }
+    }
+    variant="sBodyMD"
+  >
+    Ethereum Mainnet
+  </BaseText>
+  <Icon
+    name="ArrowDownOutline"
+    size="12"
+  />
+</TouchableOpacity>
+`;

app/component-library/components/NetworkPicker/index.ts

@@ -0,0 +1 @@
+export { default } from './NetworkPicker';

storybook/storyLoader.js

@@ -26,6 +26,7 @@ function loadStories() {
   require('../app/component-library/components/Link/Link.stories');
   require('../app/component-library/components/MultiselectListItem/MultiselectListItem.stories');
   require('../app/component-library/components/NetworkAvatar/NetworkAvatar.stories');
+  require('../app/component-library/components/NetworkPicker/NetworkPicker.stories');
   require('../app/component-library/components/PickerAccount/PickerAccount.stories');
   require('../app/component-library/components/PickerItem/PickerItem.stories');
   require('../app/component-library/components/SelectableListItem/SelectableListItem.stories');
@@ -59,6 +60,7 @@ const stories = [
   '../app/component-library/components/Link/Link.stories',
   '../app/component-library/components/MultiselectListItem/MultiselectListItem.stories',
   '../app/component-library/components/NetworkAvatar/NetworkAvatar.stories',
+  '../app/component-library/components/NetworkPicker/NetworkPicker.stories',
   '../app/component-library/components/PickerAccount/PickerAccount.stories',
   '../app/component-library/components/PickerItem/PickerItem.stories',
   '../app/component-library/components/SelectableListItem/SelectableListItem.stories',