feat: Send flow UI updates

app/components/UI/Identicon/index.js → app/components/UI/Identicon/index.tsx

@@ -1,23 +1,46 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Image, View, ViewPropTypes } from 'react-native';
+/* eslint-disable react/prop-types */
+import React, { memo } from 'react';
+import { Image, ImageStyle, View } from 'react-native';
 import { toDataUrl } from '../../../util/blockies';
 import FadeIn from 'react-native-fade-in-image';
 import Jazzicon from 'react-native-jazzicon';
 import { connect } from 'react-redux';
 import { useTheme } from '../../../util/theme';
 
-/**
- * UI component that renders an Identicon
- * for now it's just a blockie
- * but we could add more types in the future
- */
+interface IdenticonProps {
+  /**
+   * Diameter that represents the size of the identicon
+   */
+  diameter?: number;
+  /**
+   * Address used to render a specific identicon
+   */
+  address?: string;
+  /**
+   * Custom style to apply to image
+   */
+  customStyle?: ImageStyle;
+  /**
+   * True if render is happening without fade in
+   */
+  noFadeIn?: boolean;
+  /**
+   * Show a BlockieIcon instead of JazzIcon
+   */
+  useBlockieIcon?: boolean;
+}
 
-// eslint-disable-next-line react/display-name
-const Identicon = React.memo((props) => {
-  const { diameter, address, customStyle, noFadeIn, useBlockieIcon } = props;
+const Identicon: React.FC<IdenticonProps> = ({
+  diameter = 46,
+  address,
+  customStyle,
+  noFadeIn,
+  useBlockieIcon = true,
+}) => {
   const { colors } = useTheme();
+
   if (!address) return null;
+
   const uri = useBlockieIcon && toDataUrl(address);
 
   const image = useBlockieIcon ? (
@@ -41,45 +64,18 @@ const Identicon = React.memo((props) => {
   if (noFadeIn) {
     return image;
   }
+
   return (
     <FadeIn
       placeholderStyle={{ backgroundColor: colors.background.alternative }}
     >
       {image}
     </FadeIn>
   );
-});
-
-Identicon.propTypes = {
-  /**
-   * Diameter that represents the size of the identicon
-   */
-  diameter: PropTypes.number,
-  /**
-   * Address used to render a specific identicon
-   */
-  address: PropTypes.string,
-  /**
-   * Custom style to apply to image
-   */
-  customStyle: ViewPropTypes.style,
-  /**
-   * True if render is happening without fade in
-   */
-  noFadeIn: PropTypes.bool,
-  /**
-   * Show a BlockieIcon instead of JazzIcon
-   */
-  useBlockieIcon: PropTypes.bool,
-};
-
-Identicon.defaultProps = {
-  diameter: 46,
-  useBlockieIcon: true,
 };
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state: any) => ({
   useBlockieIcon: state.settings.useBlockieIcon,
 });
 
-export default connect(mapStateToProps)(Identicon);
+export default connect(mapStateToProps)(memo(Identicon));

app/components/Views/SendFlow/AddressElement/AddressElement.styles.ts

@@ -0,0 +1,26 @@
+import { Colors } from '../../../../util/theme/models';
+import { StyleSheet } from 'react-native';
+
+const styleSheet = (colors: Colors) =>
+  StyleSheet.create({
+    addressElementWrapper: {
+      padding: 16,
+      flexDirection: 'row',
+    },
+    addressElementInformation: {
+      flex: 1,
+      flexDirection: 'column',
+    },
+    addressIdenticon: {
+      paddingRight: 16,
+    },
+    addressTextNickname: {
+      flex: 1,
+      color: colors.text.default,
+    },
+    addressTextAddress: {
+      color: colors.text.alternative,
+    },
+  });
+
+export default styleSheet;

app/components/Views/SendFlow/AddressElement/AddressElement.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import renderWithProvider from '../../../../util/test/renderWithProvider';
+
+import AddressElement from './';
+import Engine from '../../../../core/Engine';
+import { renderShortAddress } from '../../../../util/address';
+
+const mockEngine = Engine;
+
+jest.unmock('react-redux');
+
+jest.mock('../../../../core/Engine', () => ({
+  init: () => mockEngine.init({}),
+  context: {
+    NetworkController: {
+      provider: {
+        sendAsync: () => null,
+      },
+    },
+  },
+}));
+
+const initialState = {
+  engine: {
+    backgroundState: {
+      NetworkController: {
+        network: '1',
+      },
+    },
+  },
+};
+
+const renderComponent = (state: any) =>
+  renderWithProvider(
+    <AddressElement
+      address={'0x1234567890abcdef'}
+      onAccountPress={() => null}
+      onAccountLongPress={() => null}
+      testID="address-element"
+    />,
+    { state },
+  );
+
+describe('AddressElement', () => {
+  it('should render correctly', () => {
+    const { toJSON } = renderComponent(initialState);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should render the address', () => {
+    const address = '0x1234567890abcdef';
+    const { getByText } = renderComponent(initialState);
+    const addressText = getByText(renderShortAddress(address));
+    expect(addressText).toBeDefined();
+  });
+});

app/components/Views/SendFlow/AddressElement/AddressElement.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable react/prop-types */
+
+// Third-Party dependencies
+import React, { useEffect, useState, useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+
+// Exgernal dependencies
+import { renderShortAddress } from '../../../../util/address';
+import Identicon from '../../../UI/Identicon';
+import { useSelector } from 'react-redux';
+import { useTheme } from '../../../../util/theme';
+import Text from '../../../../component-library/components/Texts/Text/Text';
+import { TextVariant } from '../../../../component-library/components/Texts/Text';
+import { selectNetwork } from '../../../../selectors/networkController';
+import { doENSReverseLookup } from '../../../../util/ENSUtils';
+
+// Internal dependecies
+import styleSheet from './AddressElement.styles';
+import { AddressElementProps } from './AddressElement.types';
+
+const AddressElement: React.FC<AddressElementProps> = ({
+  name,
+  address,
+  onAccountPress,
+  onAccountLongPress,
+  ...props
+}) => {
+  const [displayName, setDisplayName] = useState(name);
+  const { colors } = useTheme();
+  const styles = styleSheet(colors);
+
+  const network = useSelector(selectNetwork);
+
+  const fetchENSName = useCallback(async () => {
+    if (!displayName) {
+      const ensName = await doENSReverseLookup(address, network);
+      setDisplayName(ensName);
+    }
+  }, [displayName, address, network]);
+
+  useEffect(() => {
+    fetchENSName();
+  }, [fetchENSName]);
+
+  const primaryLabel =
+    displayName && !displayName.startsWith(' ')
+      ? displayName
+      : renderShortAddress(address);
+  const secondaryLabel =
+    displayName && !displayName.startsWith(' ') && renderShortAddress(address);
+
+  return (
+    <TouchableOpacity
+      onPress={() => onAccountPress(address)}
+      onLongPress={() => onAccountLongPress(address)}
+      key={address}
+      style={styles.addressElementWrapper}
+      {...props}
+    >
+      <View style={styles.addressIdenticon}>
+        <Identicon address={address} diameter={28} />
+      </View>
+      <View style={styles.addressElementInformation}>
+        <Text
+          variant={TextVariant.BodyMD}
+          style={styles.addressTextNickname}
+          numberOfLines={1}
+        >
+          {primaryLabel}
+        </Text>
+        {!!secondaryLabel && (
+          <Text
+            variant={TextVariant.BodyMD}
+            style={styles.addressTextAddress}
+            numberOfLines={1}
+          >
+            {secondaryLabel}
+          </Text>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default AddressElement;

app/components/Views/SendFlow/AddressElement/AddressElement.types.ts

@@ -0,0 +1,20 @@
+import { TouchableOpacityProps } from 'react-native';
+
+export interface AddressElementProps extends TouchableOpacityProps {
+  /**
+   * Name to display
+   */
+  name?: string;
+  /**
+   * Ethereum address
+   */
+  address: string;
+  /**
+   * Callback on account press
+   */
+  onAccountPress: (address: string) => void;
+  /**
+   * Callback on account long press
+   */
+  onAccountLongPress: (address: string) => void;
+}