From 13f429528700716d2ea0f5785901d13565796fe9 Mon Sep 17 00:00:00 2001
From: Garrett Bear <gwhisten@gmail.com>
Date: Tue, 18 Apr 2023 09:48:34 -0700
Subject: [PATCH] update Icon to TS version in UI Folder (#18551)

* update Icon to TS version and using proper Enums

* Update ui/components/ui/menu/menu.stories.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* Update ui/components/ui/nickname-popover/nickname-popover.component.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

---------

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
---
 ui/components/ui/callout/callout.js           | 10 +++-------
 .../contract-token-values.js                  |  7 +++----
 ui/components/ui/disclosure/disclosure.js     |  7 +++----
 ui/components/ui/dropdown/dropdown.js         | 10 +++-------
 .../ui/editable-label/editable-label.js       |  7 +++----
 .../error-message/error-message.component.js  |  8 ++++----
 .../ui/form-field/form-field.stories.js       |  6 +++---
 ui/components/ui/menu/menu.stories.js         | 13 +++++--------
 .../ui/new-network-info/new-network-info.js   |  4 ++--
 .../nickname-popover.component.js             | 10 +++-------
 ui/components/ui/popover/popover.component.js | 19 ++++++++++---------
 ui/components/ui/qr-code/qr-code.js           | 10 +++-------
 .../review-spending-cap.js                    | 15 +++++----------
 .../sender-to-recipient.component.js          |  4 ++--
 14 files changed, 52 insertions(+), 78 deletions(-)

diff --git a/ui/components/ui/callout/callout.js b/ui/components/ui/callout/callout.js
index 8538d69cd..6c28dc117 100644
--- a/ui/components/ui/callout/callout.js
+++ b/ui/components/ui/callout/callout.js
@@ -5,11 +5,7 @@ import InfoIconInverted from '../icon/info-icon-inverted.component';
 import { SEVERITIES, Color } from '../../../helpers/constants/design-system';
 import { MILLISECOND } from '../../../../shared/constants/time';
 import Typography from '../typography';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
-import {
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
+import { ButtonIcon, IconName, IconSize } from '../../component-library';
 
 export default function Callout({
   severity,
@@ -47,8 +43,8 @@ export default function Callout({
       </Typography>
       {dismiss && (
         <ButtonIcon
-          iconName={ICON_NAMES.CLOSE}
-          size={ICON_SIZES.SM}
+          iconName={IconName.Close}
+          size={IconSize.Sm}
           className="callout__close-button"
           onClick={() => {
             setRemoved(true);
diff --git a/ui/components/ui/contract-token-values/contract-token-values.js b/ui/components/ui/contract-token-values/contract-token-values.js
index b34b34b6a..616828598 100644
--- a/ui/components/ui/contract-token-values/contract-token-values.js
+++ b/ui/components/ui/contract-token-values/contract-token-values.js
@@ -16,8 +16,7 @@ import {
   Color,
 } from '../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
-import { ICON_NAMES } from '../../component-library/icon/deprecated';
+import { ButtonIcon, IconName } from '../../component-library';
 
 export default function ContractTokenValues({
   address,
@@ -51,7 +50,7 @@ export default function ContractTokenValues({
         title={copied ? t('copiedExclamation') : t('copyToClipboard')}
       >
         <ButtonIcon
-          iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
+          iconName={copied ? IconName.CopySuccess : IconName.Copy}
           color={Color.iconMuted}
           onClick={() => handleCopy(address)}
           ariaLabel={copied ? t('copiedExclamation') : t('copyToClipboard')}
@@ -60,7 +59,7 @@ export default function ContractTokenValues({
       <Tooltip position="top" title={t('openInBlockExplorer')}>
         <ButtonIcon
           display={DISPLAY.FLEX}
-          iconName={ICON_NAMES.EXPORT}
+          iconName={IconName.Export}
           color={Color.iconMuted}
           onClick={() => {
             const blockExplorerTokenLink = getAccountLink(
diff --git a/ui/components/ui/disclosure/disclosure.js b/ui/components/ui/disclosure/disclosure.js
index c45b60153..e20746308 100644
--- a/ui/components/ui/disclosure/disclosure.js
+++ b/ui/components/ui/disclosure/disclosure.js
@@ -1,8 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
-import { Size } from '../../../helpers/constants/design-system';
+import { Icon, IconName, IconSize } from '../../component-library';
 
 const Disclosure = ({ children, title, size }) => {
   const disclosureFooterEl = useRef(null);
@@ -27,8 +26,8 @@ const Disclosure = ({ children, title, size }) => {
           <summary className="disclosure__summary">
             <Icon
               className="disclosure__summary--icon"
-              name={ICON_NAMES.ADD}
-              size={Size.SM}
+              name={IconName.Add}
+              size={IconSize.Sm}
               marginInlineEnd={2}
             />
             {title}
diff --git a/ui/components/ui/dropdown/dropdown.js b/ui/components/ui/dropdown/dropdown.js
index a6f556f3c..802fd0a0b 100644
--- a/ui/components/ui/dropdown/dropdown.js
+++ b/ui/components/ui/dropdown/dropdown.js
@@ -1,11 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import {
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
+import { Icon, IconName, IconSize } from '../../component-library';
 
 const Dropdown = ({
   className,
@@ -46,8 +42,8 @@ const Dropdown = ({
         })}
       </select>
       <Icon
-        name={ICON_NAMES.ARROW_DOWN}
-        size={ICON_SIZES.SM}
+        name={IconName.ArrowDown}
+        size={IconSize.Sm}
         className="dropdown__icon-caret-down"
       />
     </div>
diff --git a/ui/components/ui/editable-label/editable-label.js b/ui/components/ui/editable-label/editable-label.js
index 98385776d..7a0558cd8 100644
--- a/ui/components/ui/editable-label/editable-label.js
+++ b/ui/components/ui/editable-label/editable-label.js
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Color } from '../../../helpers/constants/design-system';
 import { getAccountNameErrorMessage } from '../../../helpers/utils/accounts';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
-import { ICON_NAMES } from '../../component-library/icon/deprecated';
+import { ButtonIcon, IconName } from '../../component-library';
 
 export default class EditableLabel extends Component {
   static propTypes = {
@@ -60,7 +59,7 @@ export default class EditableLabel extends Component {
           autoFocus
         />
         <ButtonIcon
-          iconName={ICON_NAMES.CHECK}
+          iconName={IconName.Check}
           className="editable-label__icon-button"
           onClick={() => this.handleSubmit(isValidAccountName)}
         />
@@ -76,7 +75,7 @@ export default class EditableLabel extends Component {
       <div className={classnames('editable-label', this.props.className)}>
         <div className="editable-label__value">{this.state.value}</div>
         <ButtonIcon
-          iconName={ICON_NAMES.EDIT}
+          iconName={IconName.Edit}
           ariaLabel={this.context.t('edit')}
           data-testid="editable-label-button"
           onClick={() => this.setState({ isEditing: true })}
diff --git a/ui/components/ui/error-message/error-message.component.js b/ui/components/ui/error-message/error-message.component.js
index ec7a5e3fc..53f50f90f 100644
--- a/ui/components/ui/error-message/error-message.component.js
+++ b/ui/components/ui/error-message/error-message.component.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
-import { IconColor, Size } from '../../../helpers/constants/design-system';
+import { Icon, IconName, IconSize } from '../../component-library';
+import { IconColor } from '../../../helpers/constants/design-system';
 
 /**
  * @deprecated - Please use ActionableMessage type danger
@@ -19,8 +19,8 @@ const ErrorMessage = (props, context) => {
     <div className="error-message">
       <Icon
         className="error-message__icon"
-        name={ICON_NAMES.WARNING}
-        size={Size.SM}
+        name={IconName.Warning}
+        size={IconSize.Sm}
         color={IconColor.errorDefault}
         marginRight={2}
       />
diff --git a/ui/components/ui/form-field/form-field.stories.js b/ui/components/ui/form-field/form-field.stories.js
index 101e092ab..8a620b9e5 100644
--- a/ui/components/ui/form-field/form-field.stories.js
+++ b/ui/components/ui/form-field/form-field.stories.js
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import Typography from '../typography';
 import Tooltip from '../tooltip';
 
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
+import { Icon, IconName } from '../../component-library';
 import { AlignItems } from '../../../helpers/constants/design-system';
 import README from './README.mdx';
 import FormField from '.';
@@ -70,7 +70,7 @@ export const FormFieldWithTitleDetail = (args) => {
         Click Me
       </button>
     ),
-    checkmark: <Icon name={ICON_NAMES.CHECK} />,
+    checkmark: <Icon name={IconName.Check} />,
   };
 
   return <FormField {...args} titleDetail={detailOptions[args.titleDetail]} />;
@@ -108,7 +108,7 @@ export const CustomComponents = (args) => {
             position="top"
             html={<Typography>Custom tooltip</Typography>}
           >
-            <Icon name={ICON_NAMES.QUESTION} marginLeft={2} />
+            <Icon name={IconName.Question} marginLeft={2} />
           </Tooltip>
         }
         titleDetail={<Typography>TitleDetail</Typography>}
diff --git a/ui/components/ui/menu/menu.stories.js b/ui/components/ui/menu/menu.stories.js
index 9ff6c660f..1eed57ddb 100644
--- a/ui/components/ui/menu/menu.stories.js
+++ b/ui/components/ui/menu/menu.stories.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { ICON_NAMES } from '../../component-library/icon/deprecated';
+import { IconName } from '../../component-library';
 import { Menu, MenuItem } from '.';
 
 export default {
@@ -10,11 +10,11 @@ export default {
 export const DefaultStory = () => {
   return (
     <Menu onHide={action('Hide')}>
-      <MenuItem iconName={ICON_NAMES.EYE} onClick={action('Menu Item 1')}>
+      <MenuItem iconName={IconName.Eye} onClick={action('Menu Item 1')}>
         Menu Item 1
       </MenuItem>
       <MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem>
-      <MenuItem iconName={ICON_NAMES.EYE_SLASH} onClick={action('Menu Item 3')}>
+      <MenuItem iconName={IconName.EyeSlash} onClick={action('Menu Item 3')}>
         Menu Item 3
       </MenuItem>
     </Menu>
@@ -29,14 +29,11 @@ export const Anchored = () => {
     <>
       <button ref={setAnchorElement}>Menu</button>
       <Menu anchorElement={anchorElement} onHide={action('Hide')}>
-        <MenuItem iconName={ICON_NAMES.EXPORT} onClick={action('Menu Item 1')}>
+        <MenuItem iconName={IconName.Export} onClick={action('Menu Item 1')}>
           Menu Item 1
         </MenuItem>
         <MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem>
-        <MenuItem
-          iconName={ICON_NAMES.EYE_SLSH}
-          onClick={action('Menu Item 3')}
-        >
+        <MenuItem iconName={IconName.EyeSlash} onClick={action('Menu Item 3')}>
           Menu Item 3
         </MenuItem>
       </Menu>
diff --git a/ui/components/ui/new-network-info/new-network-info.js b/ui/components/ui/new-network-info/new-network-info.js
index 7c1278ec4..e8637b285 100644
--- a/ui/components/ui/new-network-info/new-network-info.js
+++ b/ui/components/ui/new-network-info/new-network-info.js
@@ -26,7 +26,7 @@ import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes';
 import Chip from '../chip/chip';
 import { setFirstTimeUsedNetwork } from '../../../store/actions';
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
+import { Icon, IconName } from '../../component-library';
 
 const NewNetworkInfo = () => {
   const t = useContext(I18nContext);
@@ -106,7 +106,7 @@ const NewNetworkInfo = () => {
           ) : (
             <Icon
               className="question"
-              name={ICON_NAMES.QUESTION}
+              name={IconName.Question}
               color={Color.iconDefault}
             />
           )
diff --git a/ui/components/ui/nickname-popover/nickname-popover.component.js b/ui/components/ui/nickname-popover/nickname-popover.component.js
index 60785b18a..51a135fab 100644
--- a/ui/components/ui/nickname-popover/nickname-popover.component.js
+++ b/ui/components/ui/nickname-popover/nickname-popover.component.js
@@ -11,11 +11,7 @@ import { shortenAddress } from '../../../helpers/utils/util';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { getTokenList, getBlockExplorerLinkText } from '../../../selectors';
 import { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
-import {
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
+import { ButtonIcon, IconName, IconSize } from '../../component-library';
 
 const NicknamePopover = ({
   address,
@@ -67,8 +63,8 @@ const NicknamePopover = ({
             title={copied ? t('copiedExclamation') : t('copyToClipboard')}
           >
             <ButtonIcon
-              iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
-              size={ICON_SIZES.SM}
+              iconName={copied ? IconName.CopySuccess : IconName.Copy}
+              size={IconSize.Sm}
               onClick={() => handleCopy(address)}
             />
           </Tooltip>
diff --git a/ui/components/ui/popover/popover.component.js b/ui/components/ui/popover/popover.component.js
index 2653d64c9..c5b073d86 100644
--- a/ui/components/ui/popover/popover.component.js
+++ b/ui/components/ui/popover/popover.component.js
@@ -18,13 +18,14 @@ import {
   TEXT_ALIGN,
   BLOCK_SIZES,
 } from '../../../helpers/constants/design-system';
+
 import {
+  ButtonIcon,
   Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
-import { Text } from '../../component-library';
+  IconName,
+  IconSize,
+  Text,
+} from '../../component-library';
 
 const defaultHeaderProps = {
   padding: [6, 4, 4],
@@ -86,7 +87,7 @@ const Popover = ({
       >
         {onBack ? (
           <ButtonIcon
-            iconName={ICON_NAMES.ARROW_LEFT}
+            iconName={IconName.ArrowLeft}
             ariaLabel={t('back')}
             onClick={onBack}
             color={Color.iconDefault}
@@ -104,7 +105,7 @@ const Popover = ({
         </Text>
         {onClose ? (
           <ButtonIcon
-            iconName={ICON_NAMES.CLOSE}
+            iconName={IconName.Close}
             ariaLabel={t('close')}
             data-testid="popover-close"
             onClick={onClose}
@@ -151,9 +152,9 @@ const Popover = ({
             data-testid="popover-scroll-button"
           >
             <Icon
-              name={ICON_NAMES.ARROW_DOWN}
+              name={IconName.ArrowDown}
               color={IconColor.primaryDefault}
-              size={ICON_SIZES.MD}
+              size={IconSize.Md}
               aria-label={t('scrollDown')}
             />
           </Box>
diff --git a/ui/components/ui/qr-code/qr-code.js b/ui/components/ui/qr-code/qr-code.js
index 4907cee50..d06d4c9f2 100644
--- a/ui/components/ui/qr-code/qr-code.js
+++ b/ui/components/ui/qr-code/qr-code.js
@@ -9,11 +9,7 @@ import Tooltip from '../tooltip';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { AddressCopyButton } from '../../multichain/address-copy-button';
 import Box from '../box/box';
-import {
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
+import { Icon, IconName, IconSize } from '../../component-library';
 
 export default connect(mapStateToProps)(QrCodeView);
 
@@ -80,8 +76,8 @@ function QrCodeView(props) {
           >
             <div className="qr-code__address">{toChecksumHexAddress(data)}</div>
             <Icon
-              name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
-              size={ICON_SIZES.SM}
+              name={copied ? IconName.CopySuccess : IconName.Copy}
+              size={IconSize.Sm}
               marginInlineStart={3}
             />
           </div>
diff --git a/ui/components/ui/review-spending-cap/review-spending-cap.js b/ui/components/ui/review-spending-cap/review-spending-cap.js
index 9cbdd728b..1fe08023e 100644
--- a/ui/components/ui/review-spending-cap/review-spending-cap.js
+++ b/ui/components/ui/review-spending-cap/review-spending-cap.js
@@ -4,12 +4,7 @@ import { I18nContext } from '../../../contexts/i18n';
 import Box from '../box';
 import Tooltip from '../tooltip';
 import Typography from '../typography';
-import { ButtonLink } from '../../component-library';
-import {
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
+import { ButtonLink, Icon, IconName, IconSize } from '../../component-library';
 import {
   AlignItems,
   DISPLAY,
@@ -86,7 +81,7 @@ export default function ReviewSpendingCap({
                         color={TextColor.errorDefault}
                       >
                         <Icon
-                          name={ICON_NAMES.WARNING}
+                          name={IconName.Warning}
                           style={{ verticalAlign: 'middle' }}
                         />
                         {t('beCareful')}
@@ -100,16 +95,16 @@ export default function ReviewSpendingCap({
               {valueIsGreaterThanBalance && (
                 <Icon
                   className="review-spending-cap__heading-title__tooltip__warning-icon"
-                  name={ICON_NAMES.DANGER}
+                  name={IconName.Danger}
                   color={IconColor.errorDefault}
-                  size={ICON_SIZES.SM}
+                  size={IconSize.Sm}
                   style={{ 'vertical-align': 'middle' }}
                 />
               )}
               {Number(tokenValue) === 0 && (
                 <Icon
                   className="review-spending-cap__heading-title__tooltip__question-icon"
-                  name={ICON_NAMES.QUESTION}
+                  name={IconName.Question}
                   color={IconColor.iconDefault}
                 />
               )}
diff --git a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
index af6abb630..49cdcc8e0 100644
--- a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
@@ -9,7 +9,7 @@ import AccountMismatchWarning from '../account-mismatch-warning/account-mismatch
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import NicknamePopovers from '../../app/modals/nickname-popovers';
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
+import { Icon, IconName } from '../../component-library';
 import {
   DEFAULT_VARIANT,
   CARDS_VARIANT,
@@ -199,7 +199,7 @@ function Arrow({ variant }) {
     </div>
   ) : (
     <div className="sender-to-recipient__arrow-container">
-      <Icon name={ICON_NAMES.ARROW_RIGHT} />
+      <Icon name={IconName.ArrowRight} />
     </div>
   );
 }