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

MetaMask · Jan 31, 2023 · 69d3776 · 69d3776
2 parents f0f9ba8 + 145cf1e
commit 69d3776
Show file tree

Hide file tree

Showing 15 changed files with 81 additions and 148 deletions.
diff --git a/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap b/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap
@@ -32,20 +32,10 @@ exports[`SelectedAccount Component should match snapshot 1`] = `
             <div
               class="selected-account__copy"
             >
-              <svg
-                fill="none"
-                height="11"
-                viewBox="0 0 11 11"
-                width="11"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M0 0H1H9V1H1V9H0V0ZM2 2H11V11H2V2ZM3 3H10V10H3V3Z"
-                  fill="var(--color-icon-alternative)"
-                  fill-rule="evenodd"
-                />
-              </svg>
+              <div
+                class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-alternative"
+                style="mask-image: url('./images/icons/copy.svg');"
+              />
             </div>
           </div>
         </button>

diff --git a/ui/components/app/selected-account/selected-account.component.js b/ui/components/app/selected-account/selected-account.component.js
@@ -4,9 +4,10 @@ import copyToClipboard from 'copy-to-clipboard';
 import { shortenAddress } from '../../../helpers/utils/util';
 
 import Tooltip from '../../ui/tooltip';
-import CopyIcon from '../../ui/icon/copy-icon.component';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import { SECOND } from '../../../../shared/constants/time';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import { COLORS } from '../../../helpers/constants/design-system';
 
 class SelectedAccount extends Component {
   state = {
@@ -64,7 +65,15 @@ class SelectedAccount extends Component {
             <div className="selected-account__address">
               {shortenAddress(checksummedAddress)}
               <div className="selected-account__copy">
-                <CopyIcon size={11} color="var(--color-icon-alternative)" />
+                <Icon
+                  name={
+                    this.state.copied
+                      ? ICON_NAMES.COPY_SUCCESS
+                      : ICON_NAMES.COPY
+                  }
+                  size={ICON_SIZES.SM}
+                  color={COLORS.ICON_ALTERNATIVE}
+                />
               </div>
             </div>
           </button>

diff --git a/...omponents/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js b/...omponents/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js
@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../../../../../ui/tooltip/tooltip';
-import CopyIcon from '../../../../../ui/icon/copy-icon.component';
 import { I18nContext } from '../../../../../../contexts/i18n';
 
 import { useCopyToClipboard } from '../../../../../../hooks/useCopyToClipboard';
+import { Icon, ICON_NAMES } from '../../../../../component-library';
+import { COLORS } from '../../../../../../helpers/constants/design-system';
 
 const CopyRawData = ({ data }) => {
   const t = useContext(I18nContext);
@@ -20,7 +21,10 @@ const CopyRawData = ({ data }) => {
           className="copy-raw-data__button"
         >
           <div className="copy-raw-data__icon">
-            <CopyIcon size={12} color="var(--color-icon-default)" />
+            <Icon
+              name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
+              color={COLORS.ICON_DEFAULT}
+            />
           </div>
           <div className="copy-raw-data__label">
             {t('copyRawTransactionData')}

diff --git a/ui/components/ui/export-text-container/export-text-container.component.js b/ui/components/ui/export-text-container/export-text-container.component.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Copy from '../icon/copy-icon.component';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { exportAsFile } from '../../../helpers/utils/export-utils';
+import { Icon, ICON_NAMES } from '../../component-library';
 
 function ExportTextContainer({
   text = '',
@@ -28,7 +28,7 @@ function ExportTextContainer({
             handleCopy(text);
           }}
         >
-          <Copy size={17} color="var(--color-primary-default)" />
+          <Icon name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY} />
           <div className="export-text-container__button-text">
             {copied ? t('copiedExclamation') : t('copyToClipboard')}
           </div>

diff --git a/ui/components/ui/icon/README.mdx b/ui/components/ui/icon/README.mdx
@@ -2,7 +2,6 @@ import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import IconCaretLeft from './icon-caret-left.js';
 import Approve from './approve-icon.component';
-import CopyIcon from './copy-icon.component';
 import InfoIcon from './info-icon.component';
 import InfoIconInverted from './info-icon-inverted.component';
 import Interaction from './interaction-icon.component';
@@ -175,14 +174,6 @@ Use the `className` prop to add an additional class to the icon. This additional
 
 <ArgsTable of={SwapIconComponent} />
 
-## CopyIcon
-
-<Canvas>
-  <Story id="components-ui-icon--copy-icon-story" />
-</Canvas>
-
-<ArgsTable of={CopyIcon} />
-
 ## Preloader
 
 <Canvas>

diff --git a/ui/components/ui/icon/copy-icon.component.js b/ui/components/ui/icon/copy-icon.component.js
diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js
@@ -12,7 +12,6 @@ import Box from '../box';
 import README from './README.mdx';
 
 import Approve from './approve-icon.component';
-import CopyIcon from './copy-icon.component';
 import InfoIcon from './info-icon.component';
 import InfoIconInverted from './info-icon-inverted.component';
 import Interaction from './interaction-icon.component';
@@ -159,7 +158,6 @@ export const DefaultStory = (args) => (
         <IconItem Component={<InfoIconInverted {...args} />} />
         <IconItem Component={<SunCheck {...args} />} />
         <IconItem Component={<SunCheck {...args} reverseColors />} />
-        <IconItem Component={<CopyIcon {...args} />} />
         <IconItem Component={<Preloader {...args} />} />
         <IconItem Component={<IconEye {...args} />} />
         <IconItem Component={<IconEyeSlash {...args} />} />
@@ -281,13 +279,6 @@ SunCheckStory.argTypes = {
 };
 SunCheckStory.storyName = 'SunCheck';
 
-export const CopyIconStory = (args) => <CopyIcon {...args} />;
-CopyIconStory.args = {
-  size: 40,
-  color: 'var(--color-icon-default)',
-};
-CopyIconStory.storyName = 'CopyIcon';
-
 export const PreloaderStory = (args) => <Preloader {...args} />;
 PreloaderStory.args = {
   size: 40,

diff --git a/ui/components/ui/nickname-popover/nickname-popover.component.js b/ui/components/ui/nickname-popover/nickname-popover.component.js
@@ -8,10 +8,10 @@ import Popover from '../popover';
 import Button from '../button';
 import Identicon from '../identicon';
 import { shortenAddress } from '../../../helpers/utils/util';
-import CopyIcon from '../icon/copy-icon.component';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { getTokenList, getBlockExplorerLinkText } from '../../../selectors';
 import { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
+import { ButtonIcon, ICON_NAMES, ICON_SIZES } from '../../component-library';
 
 const NicknamePopover = ({
   address,
@@ -62,15 +62,11 @@ const NicknamePopover = ({
             position="bottom"
             title={copied ? t('copiedExclamation') : t('copyToClipboard')}
           >
-            <button
-              type="link"
-              onClick={() => {
-                handleCopy(address);
-              }}
-              title=""
-            >
-              <CopyIcon size={11} color="var(--color-icon-default)" />
-            </button>
+            <ButtonIcon
+              iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
+              size={ICON_SIZES.SM}
+              onClick={() => handleCopy(address)}
+            />
           </Tooltip>
         </div>
 

diff --git a/ui/components/ui/qr-code/index.scss b/ui/components/ui/qr-code/index.scss
@@ -28,18 +28,12 @@
   &__address-container {
     display: flex;
     justify-content: center;
+    cursor: pointer;
+    align-items: center;
 
     &__tooltip-wrapper {
       width: 100%;
     }
-
-    &:hover {
-      cursor: pointer;
-
-      .qr-code__copy-icon__svg {
-        fill: var(--color-primary-default);
-      }
-    }
   }
 
   &__address {
@@ -51,15 +45,4 @@
     word-break: break-all;
     text-align: center;
   }
-
-  &__copy-icon {
-    height: 13px;
-    padding: 17px 0;
-    position: absolute;
-    right: 24px;
-
-    &__svg {
-      fill: var(--color-icon-default);
-    }
-  }
 }
diff --git a/ui/components/ui/qr-code/qr-code.js b/ui/components/ui/qr-code/qr-code.js
@@ -6,8 +6,8 @@ import { isHexPrefixed } from 'ethereumjs-util';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import Tooltip from '../tooltip';
-import CopyIcon from '../icon/copy-icon.component';
 import { useI18nContext } from '../../../hooks/useI18nContext';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
 
 export default connect(mapStateToProps)(QrCodeView);
 
@@ -68,9 +68,11 @@ function QrCodeView(props) {
           }}
         >
           <div className="qr-code__address">{toChecksumHexAddress(data)}</div>
-          <div className="qr-code__copy-icon">
-            <CopyIcon size={11} className="qr-code__copy-icon__svg" color="" />
-          </div>
+          <Icon
+            name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
+            size={ICON_SIZES.SM}
+            marginInlineStart={3}
+          />
         </div>
       </Tooltip>
     </div>

diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@@ -11,7 +11,6 @@ import Box from '../../../components/ui/box';
 import Button from '../../../components/ui/button';
 import EditGasFeeButton from '../../../components/app/edit-gas-fee-button';
 import MultiLayerFeeMessage from '../../../components/app/multilayer-fee-message';
-import CopyIcon from '../../../components/ui/icon/copy-icon.component';
 import {
   TYPOGRAPHY,
   FONT_WEIGHT,
@@ -20,13 +19,13 @@ import {
   COLORS,
   DISPLAY,
 } from '../../../helpers/constants/design-system';
-import { SECOND } from '../../../../shared/constants/time';
 import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
 import GasDetailsItem from '../../../components/app/gas-details-item';
 import LedgerInstructionField from '../../../components/app/ledger-instruction-field';
 import { TokenStandard } from '../../../../shared/constants/transaction';
 import { CHAIN_IDS, TEST_CHAINS } from '../../../../shared/constants/network';
 import ContractDetailsModal from '../../../components/app/modals/contract-details-modal/contract-details-modal';
+import { ICON_NAMES, ButtonIcon } from '../../../components/component-library';
 
 export default class ConfirmApproveContent extends Component {
   static contextTypes = {
@@ -210,25 +209,19 @@ export default class ConfirmApproveContent extends Component {
             {displayedAddress}
           </div>
           <div className="confirm-approve-content__medium-text">
-            <Button
-              type="link"
-              className="confirm-approve-content__copy-address"
-              onClick={() => {
-                this.setState({ copied: true });
-                this.copyTimeout = setTimeout(
-                  () => this.setState({ copied: false }),
-                  SECOND * 3,
-                );
-                copyToClipboard(toAddress);
-              }}
+            <ButtonIcon
+              ariaLabel="copy"
+              onClick={() => copyToClipboard(toAddress)}
+              color={COLORS.ICON_DEFAULT}
+              iconName={
+                this.state.copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
+              }
               title={
                 this.state.copied
                   ? t('copiedExclamation')
                   : t('copyToClipboard')
               }
-            >
-              <CopyIcon size={14} color="var(--color-icon-default)" />
-            </Button>
+            />
           </div>
         </div>
       </div>

diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
@@ -6,13 +6,14 @@ import classnames from 'classnames';
 import AccountListItem from '../../components/app/account-list-item';
 import Identicon from '../../components/ui/identicon';
 import Tooltip from '../../components/ui/tooltip';
-import Copy from '../../components/ui/icon/copy-icon.component';
 import { PageContainerFooter } from '../../components/ui/page-container';
 
 import { EVENT } from '../../../shared/constants/metametrics';
 import { SECOND } from '../../../shared/constants/time';
 import { Numeric } from '../../../shared/modules/Numeric';
 import { EtherDenomination } from '../../../shared/constants/common';
+import { Icon, ICON_NAMES } from '../../components/component-library';
+import { COLORS } from '../../helpers/constants/design-system';
 
 export default class ConfirmDecryptMessage extends Component {
   static contextTypes = {
@@ -238,7 +239,10 @@ export default class ConfirmDecryptMessage extends Component {
               <div className="request-decrypt-message__message-copy-text">
                 {t('decryptCopy')}
               </div>
-              <Copy size={17} color="var(--color-primary-default)" />
+              <Icon
+                name={hasCopied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
+                color={COLORS.PRIMARY_DEFAULT}
+              />
             </Tooltip>
           </div>
         ) : (