Merge branch 'develop' into 17191/onboarding-unit-tests

MetaMask · Feb 4, 2023 · 2c50a7b · 2c50a7b
2 parents 212f686 + 678ad63
commit 2c50a7b
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 203 deletions.
diff --git a/development/ts-migration-dashboard/files-to-convert.json b/development/ts-migration-dashboard/files-to-convert.json
@@ -896,7 +896,6 @@
   "ui/components/ui/icon/icon-eye.js",
   "ui/components/ui/icon/icon-import.js",
   "ui/components/ui/icon/icon-plus.js",
-  "ui/components/ui/icon/icon-speech-bubbles.js",
   "ui/components/ui/icon/icon-token-search.js",
   "ui/components/ui/icon/icon.stories.js",
   "ui/components/ui/icon/info-icon-inverted.component.js",

diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js
@@ -32,7 +32,6 @@ import {
 } from '../../../helpers/constants/routes';
 import TextField from '../../ui/text-field';
 import IconCheck from '../../ui/icon/icon-check';
-import IconSpeechBubbles from '../../ui/icon/icon-speech-bubbles';
 import IconConnect from '../../ui/icon/icon-connect';
 import IconCog from '../../ui/icon/icon-cog';
 import IconPlus from '../../ui/icon/icon-plus';
@@ -41,6 +40,8 @@ import IconImport from '../../ui/icon/icon-import';
 import Button from '../../ui/button';
 import SearchIcon from '../../ui/icon/search-icon';
 import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
+import { Icon, ICON_NAMES } from '../../component-library';
+import { Color } from '../../../helpers/constants/design-system';
 import KeyRingLabel from './keyring-label';
 
 export function AccountMenuItem(props) {
@@ -460,10 +461,7 @@ export default class AccountMenu extends Component {
             global.platform.openTab({ url: supportLink });
           }}
           icon={
-            <IconSpeechBubbles
-              color="var(--color-icon-alternative)"
-              ariaLabel={supportText}
-            />
+            <Icon name={ICON_NAMES.MESSAGES} color={Color.iconAlternative} />
           }
           text={supportText}
         />

diff --git a/ui/components/app/flask/copyable/copyable.js b/ui/components/app/flask/copyable/copyable.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Box from '../../../ui/box';
-import IconCopied from '../../../ui/icon/icon-copied';
-import IconCopy from '../../../ui/icon/icon-copy';
 import Typography from '../../../ui/typography';
 import {
   AlignItems,
@@ -13,8 +11,10 @@ import {
   TypographyVariant,
   BackgroundColor,
   TextColor,
+  Color,
 } from '../../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library';
 
 export const Copyable = ({ text }) => {
   const [copied, handleCopy] = useCopyToClipboard();
@@ -46,17 +46,17 @@ export const Copyable = ({ text }) => {
         marginBottom={1}
       >
         {copied ? (
-          <IconCopied
-            color="var(--color-icon-alternative)"
-            className="copyable__icon"
-            size={18}
+          <Icon
+            name={ICON_NAMES.COPY_SUCCESS}
+            size={ICON_SIZES.LG}
+            color={Color.iconAlternative}
           />
         ) : (
-          <IconCopy
-            className="copyable__icon"
-            color="var(--color-icon-alternative)"
+          <Icon
+            name={ICON_NAMES.COPY}
+            size={ICON_SIZES.LG}
+            color={Color.iconAlternative}
             onClick={() => handleCopy(text)}
-            size={18}
           />
         )}
       </Box>

diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js
@@ -4,7 +4,6 @@ import { getAccountLink } from '@metamask/etherscan-link';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
 import Box from '../../../ui/box';
-import IconCopy from '../../../ui/icon/icon-copy';
 import IconBlockExplorer from '../../../ui/icon/icon-block-explorer';
 import Button from '../../../ui/button/button.component';
 import Tooltip from '../../../ui/tooltip/tooltip';
@@ -22,12 +21,14 @@ import {
   BorderStyle,
   BorderColor,
   TextColor,
+  Color,
 } from '../../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 import UrlIcon from '../../../ui/url-icon/url-icon';
 import { getAddressBookEntry } from '../../../../selectors';
 import { TokenStandard } from '../../../../../shared/constants/transaction';
 import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image';
+import { ButtonIcon, ICON_NAMES } from '../../../component-library';
 
 export default function ContractDetailsModal({
   onClose,
@@ -146,15 +147,15 @@ export default function ContractDetailsModal({
                         : t('copyToClipboard')
                     }
                   >
-                    <Button
-                      className="contract-details-modal__content__contract__buttons__copy"
-                      type="link"
-                      onClick={() => {
-                        handleCopyTokenAddress(tokenAddress);
-                      }}
-                    >
-                      <IconCopy color="var(--color-icon-muted)" />
-                    </Button>
+                    <ButtonIcon
+                      iconName={
+                        copiedTokenAddress
+                          ? ICON_NAMES.COPY_SUCCESS
+                          : ICON_NAMES.COPY
+                      }
+                      onClick={() => handleCopyTokenAddress(tokenAddress)}
+                      color={Color.iconMuted}
+                    />
                   </Tooltip>
                 </Box>
                 <Box marginTop={5} marginRight={5}>
@@ -264,15 +265,13 @@ export default function ContractDetailsModal({
                     : t('copyToClipboard')
                 }
               >
-                <Button
-                  className="contract-details-modal__content__contract__buttons__copy"
-                  type="link"
-                  onClick={() => {
-                    handleCopyToAddress(toAddress);
-                  }}
-                >
-                  <IconCopy color="var(--color-icon-muted)" />
-                </Button>
+                <ButtonIcon
+                  iconName={
+                    copiedToAddress ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
+                  }
+                  onClick={() => handleCopyToAddress(toAddress)}
+                  color={Color.iconMuted}
+                />
               </Tooltip>
             </Box>
             <Box marginTop={5} marginRight={5}>

diff --git a/ui/components/ui/contract-token-values/contract-token-values.js b/ui/components/ui/contract-token-values/contract-token-values.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getAccountLink } from '@metamask/etherscan-link';
-import IconCopy from '../icon/icon-copy';
 import IconBlockExplorer from '../icon/icon-block-explorer';
 import Box from '../box/box';
 import Tooltip from '../tooltip/tooltip';
@@ -18,6 +17,7 @@ import {
 } from '../../../helpers/constants/design-system';
 import Button from '../button';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
+import { ButtonIcon, ICON_NAMES } from '../../component-library';
 
 export default function ContractTokenValues({
   address,
@@ -52,15 +52,11 @@ export default function ContractTokenValues({
           position="top"
           title={copied ? t('copiedExclamation') : t('copyToClipboard')}
         >
-          <Button
-            type="link"
+          <ButtonIcon
+            iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
             className="contract-token-values__copy-address__button"
-            onClick={() => {
-              handleCopy(address);
-            }}
-          >
-            <IconCopy size={24} color="var(--color-icon-muted)" />
-          </Button>
+            onClick={() => handleCopy(address)}
+          />
         </Tooltip>
       </Box>
       <Box className="contract-token-values__block-explorer">

diff --git a/ui/components/ui/icon/README.mdx b/ui/components/ui/icon/README.mdx
@@ -11,7 +11,6 @@ import SendIcon from './send-icon.component';
 import Sign from './sign-icon.component';
 import SunCheck from './sun-check-icon.component';
 import Swap from './swap-icon-for-list.component';
-import IconCopy from './icon-copy'
 import IconBlockExplorer from './icon-block-explorer';
 
 
@@ -182,14 +181,6 @@ Use the `className` prop to add an additional class to the icon. This additional
 
 <ArgsTable of={Preloader} />
 
-## IconCopy
-
-<Canvas>
-  <Story id="components-ui-icon--icon-copy-story" />
-</Canvas>
-
-<ArgsTable of={IconCopy} />
-
 ## IconBlockExplorer
 
 <Canvas>

diff --git a/ui/components/ui/icon/icon-copied.js b/ui/components/ui/icon/icon-copied.js
diff --git a/ui/components/ui/icon/icon-copy.js b/ui/components/ui/icon/icon-copy.js
diff --git a/ui/components/ui/icon/icon-speech-bubbles.js b/ui/components/ui/icon/icon-speech-bubbles.js
diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js
@@ -30,15 +30,12 @@ import IconCheck from './icon-check';
 import IconCog from './icon-cog';
 import IconConnect from './icon-connect';
 import IconImport from './icon-import';
-import IconSpeechBubbles from './icon-speech-bubbles';
 import IconPlus from './icon-plus';
 import IconEye from './icon-eye';
 import IconEyeSlash from './icon-eye-slash';
 import IconTokenSearch from './icon-token-search';
 import SearchIcon from './search-icon';
-import IconCopy from './icon-copy';
 import IconBlockExplorer from './icon-block-explorer';
-import IconCopied from './icon-copied';
 
 const validColors = [
   'var(--color-icon-default)',
@@ -128,13 +125,10 @@ export const DefaultStory = (args) => (
         <IconItem Component={<IconPlus {...args} />} />
         <IconItem Component={<IconImport {...args} />} />
         <IconItem Component={<IconConnect {...args} />} />
-        <IconItem Component={<IconSpeechBubbles {...args} />} />
         <IconItem Component={<IconCog {...args} />} />
         <IconItem Component={<IconTokenSearch {...args} />} />
         <IconItem Component={<SearchIcon {...args} />} />
-        <IconItem Component={<IconCopy {...args} />} />
         <IconItem Component={<IconBlockExplorer {...args} />} />
-        <IconItem Component={<IconCopied {...args} />} />
       </div>
     </Box>
     <Typography
@@ -289,12 +283,6 @@ PreloaderStory.args = {
 };
 PreloaderStory.storyName = 'Preloader';
 
-export const IconCopyStory = (args) => <IconCopy {...args} />;
-IconCopyStory.args = {
-  size: 40,
-};
-IconCopyStory.storyName = 'IconCopy';
-
 export const IconBlockExplorerStory = (args) => <IconBlockExplorer {...args} />;
 IconBlockExplorerStory.args = {
   size: 40,