From e09028b4e575a6ea95f2099f0998681bd2392b94 Mon Sep 17 00:00:00 2001 From: Garrett Bear Date: Thu, 13 Apr 2023 15:24:47 -0700 Subject: [PATCH] Update multichain Icon imports (#18536) * Update multichain Icon imports * replace ButtonIcon with updated version * Buttons with Icon TODO added * update header to use TS version Icon --- .../account-list-item-menu.js | 9 ++++----- .../account-list-item/account-list-item.js | 12 +++++------- .../account-list-menu/account-list-menu.js | 1 + .../multichain/account-picker/account-picker.js | 5 +++-- .../address-copy-button/address-copy-button.js | 1 + ui/components/multichain/app-header/app-header.js | 13 +++++++++---- .../multichain/global-menu/global-menu.js | 14 +++++++------- .../multichain-connected-site-menu.js | 5 ++--- .../multichain-import-token-link.js | 1 + .../network-list-item/network-list-item.js | 11 +++++++---- ui/components/ui/menu/menu-item.js | 5 ++--- 11 files changed, 42 insertions(+), 35 deletions(-) diff --git a/ui/components/multichain/account-list-item-menu/account-list-item-menu.js b/ui/components/multichain/account-list-item-menu/account-list-item-menu.js index ac65bcd5b..df3cece9a 100644 --- a/ui/components/multichain/account-list-item-menu/account-list-item-menu.js +++ b/ui/components/multichain/account-list-item-menu/account-list-item-menu.js @@ -12,8 +12,7 @@ import { } from '../../../selectors'; import { NETWORKS_ROUTE } from '../../../helpers/constants/routes'; import { Menu, MenuItem } from '../../ui/menu'; -import { Text } from '../../component-library'; -import { ICON_NAMES } from '../../component-library/icon/deprecated'; +import { Text, IconName } from '../../component-library'; import { MetaMetricsEventCategory, MetaMetricsEventLinkType, @@ -74,7 +73,7 @@ export const AccountListItemMenu = ({ : openBlockExplorer } subtitle={blockExplorerUrlSubTitle || null} - iconName={ICON_NAMES.EXPORT} + iconName={IconName.Export} data-testid="account-list-menu-open-explorer" > {t('viewOnExplorer')} @@ -92,7 +91,7 @@ export const AccountListItemMenu = ({ onClose(); closeMenu?.(); }} - iconName={ICON_NAMES.SCAN_BARCODE} + iconName={IconName.ScanBarcode} > {t('accountDetails')} @@ -108,7 +107,7 @@ export const AccountListItemMenu = ({ ); onClose(); }} - iconName={ICON_NAMES.TRASH} + iconName={IconName.Trash} > {t('removeAccount')} diff --git a/ui/components/multichain/account-list-item/account-list-item.js b/ui/components/multichain/account-list-item/account-list-item.js index deeddff19..05a33ea0a 100644 --- a/ui/components/multichain/account-list-item/account-list-item.js +++ b/ui/components/multichain/account-list-item/account-list-item.js @@ -15,12 +15,10 @@ import { AvatarFavicon, Tag, ButtonLink, + ButtonIcon, + IconName, + IconSize, } from '../../component-library'; -import { ButtonIcon } from '../../component-library/button-icon/deprecated'; -import { - ICON_NAMES, - ICON_SIZES, -} from '../../component-library/icon/deprecated'; import { Color, TEXT_ALIGN, @@ -197,8 +195,8 @@ export const AccountListItem = ({
{ e.stopPropagation(); setAccountOptionsMenuOpen(true); diff --git a/ui/components/multichain/account-list-menu/account-list-menu.js b/ui/components/multichain/account-list-menu/account-list-menu.js index 7ffbcf5fa..aea2e81c6 100644 --- a/ui/components/multichain/account-list-menu/account-list-menu.js +++ b/ui/components/multichain/account-list-menu/account-list-menu.js @@ -5,6 +5,7 @@ import Fuse from 'fuse.js'; import { useDispatch, useSelector } from 'react-redux'; import Box from '../../ui/box/box'; import { ButtonLink, TextFieldSearch, Text } from '../../component-library'; +// TODO: Replace ICON_NAMES with IconName when ButtonBase/Buttons have been updated import { ICON_NAMES } from '../../component-library/icon/deprecated'; import { AccountListItem } from '..'; import { diff --git a/ui/components/multichain/account-picker/account-picker.js b/ui/components/multichain/account-picker/account-picker.js index 72b522893..5701249a1 100644 --- a/ui/components/multichain/account-picker/account-picker.js +++ b/ui/components/multichain/account-picker/account-picker.js @@ -5,9 +5,10 @@ import { Button, AvatarAccount, AvatarAccountVariant, + Icon, + IconName, Text, } from '../../component-library'; -import { ICON_NAMES, Icon } from '../../component-library/icon/deprecated'; import { AlignItems, BackgroundColor, @@ -47,7 +48,7 @@ export const AccountPicker = ({ address, name, onClick }) => { {name} diff --git a/ui/components/multichain/address-copy-button/address-copy-button.js b/ui/components/multichain/address-copy-button/address-copy-button.js index ec15b3497..c71f8ba3d 100644 --- a/ui/components/multichain/address-copy-button/address-copy-button.js +++ b/ui/components/multichain/address-copy-button/address-copy-button.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { ButtonBase } from '../../component-library'; +// TODO: Replace ICON_NAMES with IconName when ButtonBase/Buttons have been updated import { ICON_NAMES } from '../../component-library/icon/deprecated'; import { BackgroundColor, diff --git a/ui/components/multichain/app-header/app-header.js b/ui/components/multichain/app-header/app-header.js index d7f278530..61662c503 100644 --- a/ui/components/multichain/app-header/app-header.js +++ b/ui/components/multichain/app-header/app-header.js @@ -21,9 +21,14 @@ import { JustifyContent, Size, } from '../../../helpers/constants/design-system'; -import { AvatarNetwork, Button, PickerNetwork } from '../../component-library'; -import { ButtonIcon } from '../../component-library/button-icon/deprecated'; -import { ICON_NAMES } from '../../component-library/icon/deprecated'; +import { + AvatarNetwork, + Button, + ButtonIcon, + IconName, + PickerNetwork, +} from '../../component-library'; + import { getCurrentNetwork, getOriginOfCurrentTab, @@ -149,7 +154,7 @@ export const AppHeader = ({ onClick }) => { width={BLOCK_SIZES.FULL} > { diff --git a/ui/components/multichain/global-menu/global-menu.js b/ui/components/multichain/global-menu/global-menu.js index 7500c3046..2d89cf688 100644 --- a/ui/components/multichain/global-menu/global-menu.js +++ b/ui/components/multichain/global-menu/global-menu.js @@ -9,7 +9,7 @@ import { } from '../../../helpers/constants/routes'; import { lockMetamask } from '../../../store/actions'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { ICON_NAMES } from '../../component-library/icon/deprecated'; +import { IconName } from '../../component-library'; import { Menu, MenuItem } from '../../ui/menu'; import { getEnvironmentType } from '../../../../app/scripts/lib/util'; import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app'; @@ -31,7 +31,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => { return ( { history.push(CONNECTED_ROUTE); trackEvent({ @@ -47,7 +47,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => { {t('connectedSites')} { const portfolioUrl = process.env.PORTFOLIO_URL; global.platform.openTab({ @@ -75,7 +75,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => { {getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN ? null : ( { global.platform.openExtensionInBrowser(); trackEvent({ @@ -93,7 +93,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => { )} { global.platform.openTab({ url: SUPPORT_LINK }); trackEvent( @@ -117,7 +117,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => { {t('support')} { history.push(SETTINGS_ROUTE); trackEvent({ @@ -133,7 +133,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => { {t('settings')} { dispatch(lockMetamask()); history.push(DEFAULT_ROUTE); diff --git a/ui/components/multichain/multichain-connected-site-menu/multichain-connected-site-menu.js b/ui/components/multichain/multichain-connected-site-menu/multichain-connected-site-menu.js index e0303dd0b..abc22247e 100644 --- a/ui/components/multichain/multichain-connected-site-menu/multichain-connected-site-menu.js +++ b/ui/components/multichain/multichain-connected-site-menu/multichain-connected-site-menu.js @@ -13,8 +13,7 @@ import { IconColor, Size, } from '../../../helpers/constants/design-system'; -import { BadgeWrapper } from '../../component-library'; -import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; +import { BadgeWrapper, Icon, IconName } from '../../component-library'; import Box from '../../ui/box'; import { getSelectedIdentity } from '../../../selectors'; import Tooltip from '../../ui/tooltip'; @@ -69,7 +68,7 @@ export const MultichainConnectedSiteMenu = ({ } > diff --git a/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js index d2ced700b..34ad99dba 100644 --- a/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js +++ b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js @@ -5,6 +5,7 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import Box from '../../ui/box/box'; import { ButtonLink } from '../../component-library'; +// TODO: Replace ICON_NAMES with IconName when ButtonBase/Buttons have been updated import { ICON_NAMES } from '../../component-library/icon/deprecated'; import { AlignItems, diff --git a/ui/components/multichain/network-list-item/network-list-item.js b/ui/components/multichain/network-list-item/network-list-item.js index 3dedbfdd3..d21832732 100644 --- a/ui/components/multichain/network-list-item/network-list-item.js +++ b/ui/components/multichain/network-list-item/network-list-item.js @@ -12,9 +12,12 @@ import { TextColor, BLOCK_SIZES, } from '../../../helpers/constants/design-system'; -import { AvatarNetwork, ButtonLink } from '../../component-library'; -import { ButtonIcon } from '../../component-library/button-icon/deprecated'; -import { ICON_NAMES } from '../../component-library/icon/deprecated'; +import { + AvatarNetwork, + ButtonIcon, + ButtonLink, + IconName, +} from '../../component-library'; import { useI18nContext } from '../../../hooks/useI18nContext'; import Tooltip from '../../ui/tooltip/tooltip'; @@ -68,7 +71,7 @@ export const NetworkListItem = ({ { diff --git a/ui/components/ui/menu/menu-item.js b/ui/components/ui/menu/menu-item.js index 3c8040f9c..6e005e1ea 100644 --- a/ui/components/ui/menu/menu-item.js +++ b/ui/components/ui/menu/menu-item.js @@ -2,8 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Text } from '../../component-library'; -import { Icon, ICON_SIZES } from '../../component-library/icon/deprecated'; +import { Text, Icon, IconSize } from '../../component-library'; import { TextVariant } from '../../../helpers/constants/design-system'; const MenuItem = ({ @@ -20,7 +19,7 @@ const MenuItem = ({ onClick={onClick} > {iconName ? ( - + ) : null}
{children}