Merge branch 'develop' into encrypt-decrypt-e2e

.circleci/config.yml

@@ -386,7 +386,7 @@ jobs:
             - builds-test
 
   prep-build-storybook:
-    executor: node-browsers
+    executor: node-browsers-medium-plus
     steps:
       - checkout
       - attach_workspace:
@@ -644,7 +644,7 @@ jobs:
           root: .
           paths:
             - test-artifacts
-    
+
   user-actions-benchmark:
     executor: node-browsers-medium-plus
     steps:

patches/ethereumjs-util+7.1.5.patch

@@ -0,0 +1,48 @@
+diff --git a/node_modules/ethereumjs-util/dist.browser/internal.js b/node_modules/ethereumjs-util/dist.browser/internal.js
+index 9f3888b..3803958 100644
+--- a/node_modules/ethereumjs-util/dist.browser/internal.js
++++ b/node_modules/ethereumjs-util/dist.browser/internal.js
+@@ -43,8 +43,9 @@ exports.isHexPrefixed = isHexPrefixed;
+  * @returns the string without 0x prefix
+  */
+ var stripHexPrefix = function (str) {
+-    if (typeof str !== 'string')
+-        throw new Error("[stripHexPrefix] input must be type 'string', received ".concat(typeof str));
++    if (typeof str !== 'string'){
++        return str;
++    }
+     return isHexPrefixed(str) ? str.slice(2) : str;
+ };
+ exports.stripHexPrefix = stripHexPrefix;
+diff --git a/node_modules/ethereumjs-util/dist/internal.js b/node_modules/ethereumjs-util/dist/internal.js
+index 01a90a0..9f1d8cd 100644
+--- a/node_modules/ethereumjs-util/dist/internal.js
++++ b/node_modules/ethereumjs-util/dist/internal.js
+@@ -43,8 +43,9 @@ exports.isHexPrefixed = isHexPrefixed;
+  * @returns the string without 0x prefix
+  */
+ const stripHexPrefix = (str) => {
+-    if (typeof str !== 'string')
+-        throw new Error(`[stripHexPrefix] input must be type 'string', received ${typeof str}`);
++    if (typeof str !== 'string'){
++        return str;
++    }
+     return isHexPrefixed(str) ? str.slice(2) : str;
+ };
+ exports.stripHexPrefix = stripHexPrefix;
+diff --git a/node_modules/ethereumjs-util/src/internal.ts b/node_modules/ethereumjs-util/src/internal.ts
+index 52032f5..8f6f5f8 100644
+--- a/node_modules/ethereumjs-util/src/internal.ts
++++ b/node_modules/ethereumjs-util/src/internal.ts
+@@ -42,8 +42,9 @@ export function isHexPrefixed(str: string): boolean {
+  * @returns the string without 0x prefix
+  */
+ export const stripHexPrefix = (str: string): string => {
+-  if (typeof str !== 'string')
+-    throw new Error(`[stripHexPrefix] input must be type 'string', received ${typeof str}`)
++  if (typeof str !== 'string') {
++    return str;
++  }
+
+   return isHexPrefixed(str) ? str.slice(2) : str
+ }

ui/components/component-library/avatar-account/README.mdx

@@ -0,0 +1,43 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { AvatarAccount } from './avatar-account';
+
+# AvatarAccount
+
+The `AvatarAccount` is a type of avatar reserved for representing accounts.
+
+<Canvas>
+  <Story id="ui-components-component-library-avatar-account-avatar-account-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `AvatarAccount` accepts all props below 
+
+<ArgsTable of={AvatarAccount} />
+
+### Size
+
+Use the `size` prop to set the size of the `AvatarAccount`.
+
+Possible sizes include:
+
+- `xs` 16px
+- `sm` 24px
+- `md` 32px
+- `lg` 40px
+- `xl` 48px
+
+Defaults to `md`
+
+<Canvas>
+  <Story id="ui-components-component-library-avatar-account-avatar-account-stories-js--size" />
+</Canvas>
+
+### type
+
+Use the `type` prop for the avatar to be rendered, it can either be a Jazzicon or a Blockie
+
+<Canvas>
+  <Story id="ui-components-component-library-avatar-account-avatar-account-stories-js--type" />
+</Canvas>

ui/components/component-library/avatar-account/avatar-account.constants.js

@@ -0,0 +1,12 @@
+export const DIAMETERS = {
+  xs: '16',
+  sm: '24',
+  md: '32',
+  lg: '40',
+  xl: '48',
+};
+
+export const TYPES = {
+  JAZZICON: 'Jazzicon',
+  BLOCKIES: 'Blockie',
+};

ui/components/component-library/avatar-account/avatar-account.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import Jazzicon from '../../ui/jazzicon/jazzicon.component';
+import BlockieIdenticon from '../../ui/identicon/blockieIdenticon/blockieIdenticon.component';
+import { BaseAvatar } from '../base-avatar';
+
+import { SIZES } from '../../../helpers/constants/design-system';
+import { DIAMETERS, TYPES } from './avatar-account.constants';
+
+export const AvatarAccount = ({ size, address, className, type, ...props }) => {
+  return (
+    <BaseAvatar
+      size={size}
+      className={classnames('avatar-account', className)}
+      {...props}
+    >
+      {type === 'Jazzicon' ? (
+        <Jazzicon
+          className={classnames('avatar-account__jazzicon')}
+          address={address}
+          diameter={DIAMETERS[size]}
+        />
+      ) : (
+        <BlockieIdenticon
+          address={address}
+          diameter={DIAMETERS[size]}
+          borderRadius="50%"
+        />
+      )}
+    </BaseAvatar>
+  );
+};
+
+AvatarAccount.propTypes = {
+  /**
+   * The size of the AvatarAccount.
+   * Possible values could be 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL'
+   * Defaults to SIZES.MD
+   */
+  size: PropTypes.oneOf(Object.values(SIZES)),
+  /**
+   * The type of the avatar to be rendered, it can render either a Jazzicon or a Blockie
+   */
+  type: PropTypes.oneOf(Object.values(TYPES)),
+  /**
+   * Address used for generating random image
+   */
+  address: PropTypes.string,
+  /**
+   * Add custom css class
+   */
+  className: PropTypes.string,
+};

ui/components/component-library/avatar-account/avatar-account.scss

@@ -0,0 +1,5 @@
+.avatar-account {
+  &__jazzicon {
+    display: flex;
+  }
+}

ui/components/component-library/avatar-account/avatar-account.stories.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import Box from '../../ui/box/box';
+import {
+  ALIGN_ITEMS,
+  DISPLAY,
+  SIZES,
+} from '../../../helpers/constants/design-system';
+import { AvatarAccount } from './avatar-account';
+import { TYPES } from './avatar-account.constants';
+
+import README from './README.mdx';
+
+export default {
+  title: 'Components/ComponentLibrary/AvatarAccount',
+  id: __filename,
+  component: AvatarAccount,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: Object.values(SIZES),
+    },
+    address: { control: 'text' },
+    type: {
+      control: 'select',
+      options: Object.values(TYPES),
+    },
+  },
+  args: {
+    address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
+    size: SIZES.MD,
+    type: TYPES.JAZZICON,
+  },
+};
+
+export const DefaultStory = (args) => <AvatarAccount {...args} />;
+
+DefaultStory.storyName = 'Default';
+
+export const Size = (args) => (
+  <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
+    <AvatarAccount {...args} size={SIZES.XS} />
+    <AvatarAccount {...args} size={SIZES.SM} />
+    <AvatarAccount {...args} size={SIZES.MD} />
+    <AvatarAccount {...args} size={SIZES.LG} />
+    <AvatarAccount {...args} size={SIZES.XL} />
+  </Box>
+);
+
+export const Type = (args) => (
+  <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
+    <AvatarAccount {...args} type={TYPES.JAZZICON} />
+    <AvatarAccount {...args} type={TYPES.BLOCKIES} />
+  </Box>
+);

ui/components/component-library/avatar-account/avatar-account.test.js

@@ -0,0 +1,23 @@
+/* eslint-disable jest/require-top-level-describe */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { AvatarAccount } from './avatar-account';
+import 'jest-canvas-mock';
+
+describe('AvatarAccount', () => {
+  const args = {
+    address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
+  };
+  it('should render Jazzicon correctly', () => {
+    const { getByTestId } = render(
+      <AvatarAccount data-testid="avatar-account" type="Jazzicon" {...args} />,
+    );
+    expect(getByTestId('avatar-account')).toBeDefined();
+  });
+  it('should render Blockie correctly', () => {
+    const { getByTestId } = render(
+      <AvatarAccount data-testid="avatar-account" type="Blockie" {...args} />,
+    );
+    expect(getByTestId('avatar-account')).toBeDefined();
+  });
+});

ui/components/component-library/avatar-account/index.js

@@ -0,0 +1 @@
+export { AvatarAccount } from './avatar-account';

ui/components/component-library/button-primary/button-primary.stories.js

@@ -104,11 +104,7 @@ export default {
   },
 };
 
-export const DefaultStory = (args) => (
-  <>
-    <ButtonPrimary {...args} />
-  </>
-);
+export const DefaultStory = (args) => <ButtonPrimary {...args} />;
 
 DefaultStory.storyName = 'Default';
 

ui/components/component-library/button-secondary/README.mdx

@@ -0,0 +1,57 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { ButtonSecondary } from './button-secondary';
+
+# ButtonSecondary
+
+The `ButtonSecondary` is an extension of `ButtonBase` to support secondary styles.
+
+<Canvas>
+  <Story id="ui-components-component-library-button-secondary-button-secondary-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `ButtonSecondary` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) and [ButtonBase](/docs/ui-components-component-library-button-base-button-base-stories-js--default-story#props) component props
+
+<ArgsTable of={ButtonSecondary} />
+
+### Size
+
+Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonSecondary`. Defaults to `SIZES.MD`
+
+Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `SIZES`.
+
+Possible sizes include:
+
+- `SIZES.SM` 32px
+- `SIZES.MD` 40px
+- `SIZES.LG` 48px
+
+<Canvas>
+  <Story id="ui-components-component-library-button-secondary-button-secondary-stories-js--size" />
+</Canvas>
+
+```jsx
+import { SIZES } from '../../../helpers/constants/design-system';
+import { ButtonSecondary } from '../ui/component-library/button/button-secondary/button-secondary';
+
+<ButtonSecondary size={SIZES.SM} />
+<ButtonSecondary size={SIZES.MD} />
+<ButtonSecondary size={SIZES.LG} />
+```
+
+### Type
+
+Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/design-system.js` to change the context of `ButtonSecondary`.
+
+<Canvas>
+  <Story id="ui-components-component-library-button-secondary-button-secondary-stories-js--type" />
+</Canvas>
+
+```jsx
+import { ButtonSecondary } from '../ui/component-library/button/button-secondary/button-secondary';
+
+<ButtonSecondary>Normal</ButtonSecondary>
+<ButtonSecondary danger>Danger</ButtonSecondary>
+```

ui/components/component-library/button-secondary/button-secondary.constants.js

@@ -0,0 +1,7 @@
+import { SIZES } from '../../../helpers/constants/design-system';
+
+export const BUTTON_SECONDARY_SIZES = {
+  SM: SIZES.SM,
+  MD: SIZES.MD,
+  LG: SIZES.LG,
+};

ui/components/component-library/button-secondary/button-secondary.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import { ButtonBase } from '../button-base';
+import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
+
+export const ButtonSecondary = ({
+  className,
+  danger,
+  size = BUTTON_SECONDARY_SIZES.MD,
+  ...props
+}) => {
+  return (
+    <ButtonBase
+      className={classnames(className, 'mm-button-secondary', {
+        'mm-button-secondary--type-danger': danger,
+      })}
+      size={size}
+      {...props}
+    />
+  );
+};
+
+ButtonSecondary.propTypes = {
+  /**
+   * An additional className to apply to the ButtonSecondary.
+   */
+  className: PropTypes.string,
+  /**
+   * Boolean to change button type to Danger when true
+   */
+  danger: PropTypes.bool,
+  /**
+   * The possible size values for ButtonSecondary: 'SIZES.SM', 'SIZES.MD', 'SIZES.LG',
+   * Default value is 'SIZES.MD'.
+   */
+  size: PropTypes.oneOf(Object.values(BUTTON_SECONDARY_SIZES)),
+  /**
+   * ButtonSecondary accepts all the props from ButtonBase
+   */
+  ...ButtonBase.propTypes,
+};
+
+export default ButtonSecondary;