Merge main

MetaMask · Feb 18, 2023 · 9c1c91b · 9c1c91b
2 parents 0d0152b + 0275732
commit 9c1c91b
Show file tree

Hide file tree

Showing 287 changed files with 4,595 additions and 1,248 deletions.
diff --git a/app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.tsx b/app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.tsx
@@ -9,7 +9,7 @@ import Avatar, {
 } from '../../../components/Avatars/Avatar';
 import Text, { TextVariant } from '../../../components/Texts/Text';
 import { formatAddress } from '../../../../util/address';
-import Icon, { IconName, IconSize } from '../../../components/Icon';
+import Icon, { IconName, IconSize } from '../../../components/Icons/Icon';
 import { useStyles } from '../../../hooks';
 import Button, { ButtonVariants } from '../../../components/Buttons/Button';
 
@@ -71,13 +71,13 @@ const ContractBoxBase = ({
       <View style={styles.iconContainer}>
         <IconView
           onPress={onCopyAddress}
-          name={IconName.CopyFilled}
+          name={IconName.Copy}
           size={IconSize.Lg}
           testID={COPY_ICON_TEST_ID}
         />
         <IconView
           onPress={onExportAddress}
-          name={IconName.ExportOutline}
+          name={IconName.Export}
           size={IconSize.Md}
           testID={EXPORT_ICON_TEST_ID}
         />

diff --git a/app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.types.ts b/app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.types.ts
@@ -1,5 +1,5 @@
 import { ImageSourcePropType } from 'react-native';
-import { IconName, IconSize } from '../../../components/Icon';
+import { IconName, IconSize } from '../../../components/Icons/Icon';
 
 export interface ContractBoxBaseProps {
   contractAddress: string;

diff --git a/...ary/components-temp/Contracts/ContractBoxBase/__snapshots__/ContractBoxBase.test.tsx.snap b/...ary/components-temp/Contracts/ContractBoxBase/__snapshots__/ContractBoxBase.test.tsx.snap
@@ -57,12 +57,12 @@ exports[`Component ContractBoxBase should render correctly 1`] = `
     }
   >
     <IconView
-      name="CopyFilled"
+      name="Copy"
       size="24"
       testID="copy-icon"
     />
     <IconView
-      name="ExportOutline"
+      name="Export"
       size="20"
       testID="export-icon"
     />

diff --git a/app/component-library/components-temp/CustomSpendCap/CustomSpendCap.tsx b/app/component-library/components-temp/CustomSpendCap/CustomSpendCap.tsx
@@ -17,7 +17,7 @@ import InfoModal from '../../../components/UI/Swaps/components/InfoModal';
 import { CUSTOM_SPEND_CAP_TEST_ID } from './CustomSpendCap.constants';
 import { CustomSpendCapProps } from './CustomSpendCap.types';
 import customSpendCapStyles from './CustomSpendCap.styles';
-import Icon, { IconName, IconSize } from '../../components/Icon';
+import Icon, { IconName, IconSize } from '../../components/Icons/Icon';
 
 const CustomSpendCap = ({
   ticker,
@@ -124,7 +124,7 @@ const CustomSpendCap = ({
     <>
       <Icon
         size={IconSize.Sm}
-        name={IconName.DangerFilled}
+        name={IconName.Danger}
         color={colors.error.default}
       />
       <Text variant={TextVariant.BodyMDBold} style={styles.modalTitleDanger}>
@@ -166,11 +166,7 @@ const CustomSpendCap = ({
           <Pressable onPress={toggleModal}>
             <Icon
               size={IconSize.Sm}
-              name={
-                defaultValueSelected
-                  ? IconName.DangerFilled
-                  : IconName.QuestionFilled
-              }
+              name={defaultValueSelected ? IconName.Danger : IconName.Question}
               color={
                 defaultValueSelected ? colors.error.default : colors.icon.muted
               }

diff --git a/...brary/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.test.tsx b/...brary/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 // External dependencies.
-import { IconName } from '../../../../Icon';
+import { IconName } from '../../../../Icons/Icon';
 
 // Internal dependencies.
 import AccordionHeader from './AccordionHeader';
@@ -55,7 +55,7 @@ describe('AccordionHeader', () => {
     const iconElement = wrapper.findWhere(
       (node) => node.prop('testID') === ACCORDION_HEADER_ARROW_ICON_TEST_ID,
     );
-    expect(iconElement.props().name).toBe(IconName.ArrowUpOutline);
+    expect(iconElement.props().name).toBe(IconName.ArrowUp);
   });
   //TODO: Add Test for Pressed state and animation
 });
diff --git a/...nt-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx b/...nt-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx
@@ -12,7 +12,7 @@ import Animated, {
 
 // External dependencies.
 import { useStyles } from '../../../../../hooks';
-import Icon, { IconSize, IconName } from '../../../../Icon';
+import Icon, { IconSize, IconName } from '../../../../Icons/Icon';
 import Text, { TextVariant } from '../../../../Texts/Text';
 import { ACCORDION_EXPAND_TRANSITION_DURATION } from '../../Accordion.constants';
 
@@ -72,7 +72,7 @@ const AccordionHeader = ({
         testID={ACCORDION_HEADER_ARROW_ICON_ANIMATION_TEST_ID}
       >
         <Icon
-          name={IconName.ArrowUpOutline}
+          name={IconName.ArrowUp}
           size={IconSize.Sm}
           color={styles.title.color}
           testID={ACCORDION_HEADER_ARROW_ICON_TEST_ID}

diff --git a/...cordions/Accordion/foundation/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap b/...cordions/Accordion/foundation/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`AccordionHeader - Snapshot should render a rotated down Arrow if isExpa
   >
     <Icon
       color="#0376C9"
-      name="ArrowUpOutline"
+      name="ArrowUp"
       size="16"
       testID="accordion-header-arrow-icon"
     />
@@ -98,7 +98,7 @@ exports[`AccordionHeader - Snapshot should render default settings correctly 1`]
   >
     <Icon
       color="#0376C9"
-      name="ArrowUpOutline"
+      name="ArrowUp"
       size="16"
       testID="accordion-header-arrow-icon"
     />

diff --git a/...onent-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.constants.ts b/...onent-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.constants.ts
@@ -4,7 +4,7 @@
 import { ImageSourcePropType } from 'react-native';
 
 // External dependencies.
-import { IconSize } from '../../../../Icon';
+import { IconSize } from '../../../../Icons/Icon';
 import { AvatarSize } from '../../Avatar.types';
 
 // Internal dependencies.

diff --git a/app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.tsx b/app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.tsx
@@ -8,7 +8,7 @@ import { Image, ImageErrorEventData, NativeSyntheticEvent } from 'react-native';
 import AvatarBase from '../../foundation/AvatarBase';
 import { AvatarSize } from '../../Avatar.types';
 import { useStyles } from '../../../../../hooks';
-import Icon, { IconName } from '../../../../Icon';
+import Icon, { IconName } from '../../../../Icons/Icon';
 
 // Internal dependencies.
 import { AvatarFaviconProps } from './AvatarFavicon.types';
@@ -33,7 +33,7 @@ const AvatarFavicon = ({
   );
 
   const renderError = () => (
-    <Icon size={ICON_SIZE_BY_AVATAR_SIZE[size]} name={IconName.GlobalFilled} />
+    <Icon size={ICON_SIZE_BY_AVATAR_SIZE[size]} name={IconName.Global} />
   );
 
   const renderImage = () => (

diff --git a/...component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.types.ts b/...component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.types.ts
@@ -2,7 +2,7 @@
 import { ImageSourcePropType } from 'react-native';
 
 // External dependencies.
-import { IconSize } from '../../../../Icon';
+import { IconSize } from '../../../../Icons/Icon';
 import { AvatarBaseProps } from '../../foundation/AvatarBase';
 import { AvatarVariants, AvatarSize } from '../../Avatar.types';
 

diff --git a/app/component-library/components/Avatars/Avatar/variants/AvatarIcon/AvatarIcon.constants.ts b/app/component-library/components/Avatars/Avatar/variants/AvatarIcon/AvatarIcon.constants.ts
@@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
 
 // Third party dependencies.
-import { IconSize } from '../../../../Icon';
+import { IconSize } from '../../../../Icons/Icon';
 
 // External dependencies.
 import { AvatarSize } from '../../Avatar.types';

diff --git a/app/component-library/components/Avatars/Avatar/variants/AvatarIcon/AvatarIcon.stories.tsx b/app/component-library/components/Avatars/Avatar/variants/AvatarIcon/AvatarIcon.stories.tsx
@@ -5,7 +5,7 @@ import { select } from '@storybook/addon-knobs';
 // External dependencies.
 import { storybookPropsGroupID } from '../../../../../constants/storybook.constants';
 import { AvatarSize } from '../../Avatar.types';
-import { IconName } from '../../../../Icon';
+import { IconName } from '../../../../Icons/Icon';
 
 // Internal dependencies.
 import AvatarIcon from './AvatarIcon';
@@ -21,7 +21,7 @@ export const getAvatarIconStoryProps = (): AvatarIconProps => {
   const iconNameSelector = select(
     'name',
     IconName,
-    IconName.LockFilled,
+    IconName.Lock,
     storybookPropsGroupID,
   );
 

diff --git a/app/component-library/components/Avatars/Avatar/variants/AvatarIcon/AvatarIcon.test.tsx b/app/component-library/components/Avatars/Avatar/variants/AvatarIcon/AvatarIcon.test.tsx
@@ -7,12 +7,12 @@ import AvatarIcon from './AvatarIcon';
 
 // Internal dependencies.
 import { AvatarSize } from '../../Avatar.types';
-import { IconName } from '../../../../Icon';
+import { IconName } from '../../../../Icons/Icon';
 
 describe('AvatarIcon', () => {
   it('should render correctly', () => {
     const wrapper = shallow(
-      <AvatarIcon size={AvatarSize.Lg} name={IconName.AddSquareFilled} />,
+      <AvatarIcon size={AvatarSize.Lg} name={IconName.AddSquare} />,
     );
     expect(wrapper).toMatchSnapshot();
   });

diff --git a/app/component-library/components/Avatars/Avatar/variants/AvatarIcon/AvatarIcon.tsx b/app/component-library/components/Avatars/Avatar/variants/AvatarIcon/AvatarIcon.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 // External dependencies.
 import AvatarBase from '../../foundation/AvatarBase';
 import { AvatarSize } from '../../Avatar.types';
-import Icon from '../../../../Icon';
+import Icon from '../../../../Icons/Icon';
 import { useStyles } from '../../../../../hooks';
 
 // Internal dependencies.

diff --git a/app/component-library/components/Avatars/Avatar/variants/AvatarIcon/AvatarIcon.types.ts b/app/component-library/components/Avatars/Avatar/variants/AvatarIcon/AvatarIcon.types.ts
@@ -1,7 +1,7 @@
 // External dependencies.
 import { AvatarBaseProps } from '../../foundation/AvatarBase';
 import { AvatarVariants, AvatarSize } from '../../Avatar.types';
-import { IconProps, IconSize } from '../../../../Icon/Icon.types';
+import { IconProps, IconSize } from '../../../../Icons/Icon';
 
 /**
  * AvatarIcon component props.

diff --git a/app/component-library/components/Avatars/Avatar/variants/AvatarIcon/README.md b/app/component-library/components/Avatars/Avatar/variants/AvatarIcon/README.md
@@ -12,7 +12,7 @@ Name of icon to use.
 
 | <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
 | :-------------------------------------------------- | :------------------------------------------------------ |
-| [IconName](../Icon/Icon.types.ts#L53)               | Yes                                                     |
+| [IconName](../Icons/Icon.types.ts)               | Yes                                                     |
 
 ## Usage
 
@@ -22,7 +22,7 @@ import AvatarIcon, {
   AvatarIcon,
 } from 'app/component-library/components/Avatars/Avatar/variants/AvatarAccount';
 import { AvatarSize } from 'app/component-library/components/Avatars/Avatar/Avatar';
-import { IconName } from 'app/component-library/components/Icon';
+import { IconName } from 'app/component-library/components/Icons/Icon';
 
-<AvatarIcon size={AvatarSize.Md} name={IconName.BankFilled} />;
+<AvatarIcon size={AvatarSize.Md} name={IconName.Bank} />;
 ```
diff --git a/...rary/components/Avatars/Avatar/variants/AvatarIcon/__snapshots__/AvatarIcon.test.tsx.snap b/...rary/components/Avatars/Avatar/variants/AvatarIcon/__snapshots__/AvatarIcon.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`AvatarIcon should render correctly 1`] = `
 >
   <Icon
     color="#0376C9"
-    name="AddSquareFilled"
+    name="AddSquare"
     size="24"
   />
 </AvatarBase>

diff --git a/app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.test.tsx b/app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 // External dependencies.
-import { IconName } from '../../../../Icon';
+import { IconName } from '../../../../Icons/Icon';
 
 // Internal dependencies.
 import ButtonBase from './ButtonBase';
@@ -13,7 +13,7 @@ describe('ButtonBase', () => {
   it('should render correctly', () => {
     const wrapper = shallow(
       <ButtonBase
-        iconName={IconName.BankFilled}
+        iconName={IconName.Bank}
         size={ButtonSize.Md}
         label={'Click me!'}
         onPress={() => null}

diff --git a/app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.tsx b/app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.tsx
@@ -6,7 +6,7 @@ import { TouchableOpacity } from 'react-native';
 
 // External dependencies.
 import Text, { TextVariant } from '../../../../Texts/Text';
-import Icon, { IconSize } from '../../../../Icon';
+import Icon, { IconSize } from '../../../../Icons/Icon';
 import { useStyles } from '../../../../../hooks';
 import {
   DEFAULT_BUTTON_SIZE,

diff --git a/app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.types.ts b/app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.types.ts
@@ -2,7 +2,7 @@
 import { ColorValue, TouchableOpacityProps } from 'react-native';
 
 // External dependencies.
-import { IconProps } from '../../../../Icon';
+import { IconProps } from '../../../../Icons/Icon';
 import {
   ButtonSize,
   ButtonVariants,

diff --git a/app/component-library/components/Buttons/Button/foundation/ButtonBase/README.md b/app/component-library/components/Buttons/Button/foundation/ButtonBase/README.md
@@ -38,13 +38,13 @@ Function to trigger when pressing the button.
 | :-------------------------------------------------- | :------------------------------------------------------ |
 | Function                                            | Yes                                                     |
 
-### `iconName`
+### `IconName`
 
 Icon name of the icon that will be displayed.
 
 | <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
 | :-------------------------------------------------- | :------------------------------------------------------ |
-| [IconName](../Icon/Icon.types.ts#53)                | False                                                   |
+| [IconName](../Icons/Icon.types.ts)                | False                                                   |
 
 ### `isDanger`
 
@@ -69,12 +69,12 @@ Optional param to control the width of the button.
 import ButtonBase, {
   ButtonSize,
 } from 'app/component-library/components/Avatars/Avatar/foundation/AvatarBase';
-import { IconName } from 'app/component-library/components/Icon';
+import { IconName } from 'app/component-library/components/Icons/Icon';
 
 <ButtonBase
   label={LABEL}
   labelColor={LABEL_COLOR}
-  iconName={IconName.BankFilled}
+  iconName={IconName.Bank}
   size={ButtonSize.Md}
   onPress={ONPRESS_HANDLER}
   isDanger

diff --git a/...ry/components/Buttons/Button/foundation/ButtonBase/__snapshots__/ButtonBase.test.tsx.snap b/...ry/components/Buttons/Button/foundation/ButtonBase/__snapshots__/ButtonBase.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`ButtonBase should render correctly 1`] = `
   }
 >
   <Icon
-    name="BankFilled"
+    name="Bank"
     size="16"
     style={
       Object {

diff --git a/...ponent-library/components/Buttons/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx b/...ponent-library/components/Buttons/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx
@@ -6,7 +6,7 @@ import { select, text, boolean } from '@storybook/addon-knobs';
 
 // External dependencies.
 import { storybookPropsGroupID } from '../../../../../constants/storybook.constants';
-import { IconName } from '../../../../Icon';
+import { IconName } from '../../../../Icons/Icon';
 import { ButtonSize, ButtonWidthTypes } from '../../Button.types';
 
 // Internal dependencies.
@@ -39,9 +39,9 @@ export const getButtonPrimaryStoryProps = (): ButtonPrimaryProps => {
   };
   if (includesIcon) {
     const iconNameSelector = select(
-      'iconName',
+      'IconName',
       IconName,
-      IconName.AddSquareFilled,
+      IconName.AddSquare,
       storybookPropsGroupID,
     );
     buttonPrimaryStoryProps.iconName = iconNameSelector;

diff --git a/...component-library/components/Buttons/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx b/...component-library/components/Buttons/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx
@@ -4,7 +4,7 @@ import { shallow } from 'enzyme';
 
 // External dependencies.
 import { ButtonSize } from '../../Button.types';
-import { IconName } from '../../../../Icon';
+import { IconName } from '../../../../Icons/Icon';
 
 // Internal dependencies.
 import ButtonPrimary from './ButtonPrimary';
@@ -13,7 +13,7 @@ describe('ButtonPrimary', () => {
   it('should render correctly', () => {
     const wrapper = shallow(
       <ButtonPrimary
-        iconName={IconName.BankFilled}
+        iconName={IconName.Bank}
         size={ButtonSize.Md}
         label={'Click me!'}
         onPress={() => null}

diff --git a/app/component-library/components/Buttons/Button/variants/ButtonPrimary/README.md b/app/component-library/components/Buttons/Button/variants/ButtonPrimary/README.md
@@ -11,7 +11,7 @@ This component extends [ButtonBaseProps](../ButtonBase/ButtonBase.types.ts#L14)
 ```javascript
 <ButtonPrimary
   label={SAMPLE_LABEL}
-  iconName={IconName.BankFilled}
+  iconName={IconName.Bank}
   size={ButtonSize.Md}
   onPress={ONPRESS_HANDLER}
   isDanger

diff --git a/...omponents/Buttons/Button/variants/ButtonPrimary/__snapshots__/ButtonPrimary.test.tsx.snap b/...omponents/Buttons/Button/variants/ButtonPrimary/__snapshots__/ButtonPrimary.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ButtonPrimary should render correctly 1`] = `
 <ButtonBase
-  iconName="BankFilled"
+  iconName="Bank"
   label="Click me!"
   labelColor="#FCFCFC"
   onPress={[Function]}