Component/4779 audit

app/component-library/components/Avatars/AvatarAccount/AvatarAccount.constants.ts

@@ -0,0 +1,4 @@
+/* eslint-disable import/prefer-default-export */
+
+export const DUMMY_WALLET_ADDRESS =
+  '0x10e08af911f2e489480fb2855b24771745d0198b50f5c55891369844a8c57092';

app/component-library/components/Avatars/AvatarAccount/AvatarAccount.stories.tsx

@@ -0,0 +1,32 @@
+// Third party dependencies.
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { text, select } from '@storybook/addon-knobs';
+
+// External dependencies.
+import { AvatarBaseSize } from '../AvatarBase';
+
+// Internal dependencies.
+import AvatarAccount from './AvatarAccount';
+import { AvatarAccountType } from './AvatarAccount.types';
+import { DUMMY_WALLET_ADDRESS } from './AvatarAccount.constants';
+
+storiesOf(' Component Library / AvatarAccount', module)
+  .addDecorator((getStory) => getStory())
+  .add('Default', () => {
+    const accountAddress = text('accountAddress', DUMMY_WALLET_ADDRESS);
+    const sizeSelector = select('size', AvatarBaseSize, AvatarBaseSize.Md);
+    const typeSelector = select(
+      'type',
+      AvatarAccountType,
+      AvatarAccountType.JazzIcon,
+    );
+
+    return (
+      <AvatarAccount
+        size={sizeSelector}
+        type={typeSelector}
+        accountAddress={accountAddress}
+      />
+    );
+  });

app/component-library/components/AccountAvatar/AccountAvatar.styles.ts → app/component-library/components/Avatars/AvatarAccount/AvatarAccount.styles.ts

@@ -1,3 +1,4 @@
+// Third party dependencies.
 import { StyleSheet } from 'react-native';
 
 const styleSheet = StyleSheet.create({ imageStyle: { flex: 1 } });

app/component-library/components/Avatars/AvatarAccount/AvatarAccount.test.tsx

@@ -0,0 +1,24 @@
+// Third party dependencies.
+import React from 'react';
+import { shallow } from 'enzyme';
+
+// External dependencies.
+import { AvatarBaseSize } from '../AvatarBase';
+
+// Internal dependencies.
+import AvatarAccount from './AvatarAccount';
+import { AvatarAccountType } from './AvatarAccount.types';
+import { DUMMY_WALLET_ADDRESS } from './AvatarAccount.constants';
+
+describe('AvatarAccount', () => {
+  it('should render correctly', () => {
+    const wrapper = shallow(
+      <AvatarAccount
+        size={AvatarBaseSize.Xl}
+        type={AvatarAccountType.JazzIcon}
+        accountAddress={DUMMY_WALLET_ADDRESS}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});

app/component-library/components/Avatars/AvatarAccount/AvatarAccount.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable react/prop-types */
+
+// Third party dependencies.
+import React from 'react';
+import { Image } from 'react-native';
+import JazzIcon from 'react-native-jazzicon';
+
+// External dependencies.
+import Avatar, { AvatarBaseSize } from '../AvatarBase';
+import { toDataUrl } from '../../../../util/blockies';
+
+// Internal dependencies.
+import { AvatarAccountProps, AvatarAccountType } from './AvatarAccount.types';
+import stylesheet from './AvatarAccount.styles';
+
+const AvatarAccount = ({
+  type = AvatarAccountType.JazzIcon,
+  accountAddress,
+  size = AvatarBaseSize.Md,
+  style,
+}: AvatarAccountProps) => (
+  <Avatar size={size} style={style}>
+    {
+      {
+        [AvatarAccountType.JazzIcon]: (
+          <JazzIcon size={Number(size)} address={accountAddress} />
+        ),
+        [AvatarAccountType.Blockies]: (
+          <Image
+            source={{ uri: toDataUrl(accountAddress) }}
+            style={stylesheet.imageStyle}
+          />
+        ),
+      }[type]
+    }
+  </Avatar>
+);
+
+export default AvatarAccount;
+
+export { AvatarAccount };

app/component-library/components/Avatars/AvatarAccount/AvatarAccount.types.ts

@@ -0,0 +1,25 @@
+// External dependencies.
+import { AvatarBaseProps } from '../AvatarBase';
+
+/**
+ * AvatarAccount variants.
+ */
+export enum AvatarAccountType {
+  JazzIcon = 'JazzIcon',
+  Blockies = 'Blockies',
+}
+
+/**
+ * AvatarAccount component props.
+ */
+export interface AvatarAccountProps extends AvatarBaseProps {
+  /**
+   * Optional enum to select the avatar type between `JazzIcon` and `Blockies`.
+   * @default JazzIcon
+   */
+  type?: AvatarAccountType;
+  /**
+   * An Ethereum wallet address.
+   */
+  accountAddress: string;
+}