From 34c1e5a2a1e4c7d32f4d0e7b0e64236897f81536 Mon Sep 17 00:00:00 2001 From: Garrett Bear Date: Wed, 19 Apr 2023 14:16:49 -0700 Subject: [PATCH] Fix/18492/update icon ts app folder (#18645) --- .../account-menu/account-menu.component.js | 30 ++++++------------- ui/components/app/add-network/add-network.js | 11 ++----- .../approve-content-card.stories.js | 4 +-- .../app/asset-list-item/asset-list-item.js | 10 ++----- ui/components/app/beta-header/index.js | 10 ++----- ...confirm-page-container-header.component.js | 4 +-- .../confirmation-warning-modal.js | 11 ++----- ...nnected-accounts-list-options.component.js | 5 ++-- .../connected-accounts-list.component.js | 4 +-- .../custom-spending-cap.test.js.snap | 2 +- .../custom-spending-cap-tooltip.js | 14 ++++----- .../custom-spending-cap.js | 5 ++-- .../app/dropdowns/network-dropdown.js | 16 ++++------ .../edit-gas-fee-button.js | 10 ++----- ui/components/app/flask/copyable/copyable.js | 14 ++++----- .../flask/snap-authorship/snap-authorship.js | 11 ++----- .../app/flask/snap-avatar/snap-avatar.js | 12 ++++---- .../snap-content-footer.js | 4 +-- .../flask/snap-delineator/snap-delineator.js | 15 +++++----- .../snap-install-warning.js | 5 ++-- .../app/menu-bar/account-options-menu.js | 12 ++++---- ui/components/app/menu-bar/menu-bar.js | 5 ++-- .../contract-details-modal.js | 13 ++++---- .../customize-nonce.component.js | 12 ++++---- .../edit-approval-permission.component.js | 12 ++++---- .../hold-to-reveal-modal.js | 12 +++++--- .../new-account-modal.component.js | 5 ++-- .../transaction-confirmed.component.js | 10 ++----- .../app/network-display/network-display.js | 10 ++----- ui/components/app/nft-details/nft-details.js | 5 ++-- ui/components/app/nft-options/nft-options.js | 9 +++--- ui/components/app/nfts-items/nfts-items.js | 6 ++-- .../app/permission-cell/permission-cell.js | 27 +++++++++-------- .../selected-account.component.js | 12 ++------ .../set-approval-for-all-warning.js | 4 +-- .../signature-request-original-warning.js | 4 +-- .../signature-request-siwe-icon/index.js | 4 +-- ui/components/app/tab-bar/tab-bar.js | 10 ++----- ui/components/app/tab-bar/tab-bar.stories.js | 8 ++--- ...transaction-activity-log-icon.component.js | 24 +++++++-------- .../copy-raw-data/copy-raw-data.component.js | 7 ++--- .../app/wallet-overview/eth-overview.js | 21 +++++++------ .../app/wallet-overview/token-overview.js | 15 ++++------ .../avatar-base/avatar-base.js | 6 +++- .../avatar-icon/avatar-icon.js | 5 +++- 45 files changed, 186 insertions(+), 269 deletions(-) diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js index e11980489..7c0b98bc3 100644 --- a/ui/components/app/account-menu/account-menu.component.js +++ b/ui/components/app/account-menu/account-menu.component.js @@ -37,11 +37,7 @@ import Button from '../../ui/button'; import SearchIcon from '../../ui/icon/search-icon'; import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils'; import { IconColor } from '../../../helpers/constants/design-system'; -import { - Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../component-library/icon/deprecated'; +import { Icon, IconName, IconSize } from '../../component-library'; import KeyRingLabel from './keyring-label'; export function AccountMenuItem(props) { @@ -229,8 +225,8 @@ export default class AccountMenu extends Component { {isSelected ? ( ) : null} @@ -374,9 +370,7 @@ export default class AccountMenu extends Component { }); history.push(NEW_ACCOUNT_ROUTE); }} - icon={ - - } + icon={} text={t('createAccount')} /> + } text={t('importAccount')} /> @@ -415,10 +409,7 @@ export default class AccountMenu extends Component { } }} icon={ - + } text={t('connectHardwareWallet')} /> @@ -433,7 +424,7 @@ export default class AccountMenu extends Component { }} icon={
- + {unreadNotificationsCount > 0 && (
{unreadNotificationsCount} @@ -466,10 +457,7 @@ export default class AccountMenu extends Component { global.platform.openTab({ url: supportLink }); }} icon={ - + } text={supportText} /> @@ -488,7 +476,7 @@ export default class AccountMenu extends Component { }} icon={ diff --git a/ui/components/app/add-network/add-network.js b/ui/components/app/add-network/add-network.js index 83ec791b9..d8eae27ee 100644 --- a/ui/components/app/add-network/add-network.js +++ b/ui/components/app/add-network/add-network.js @@ -36,12 +36,7 @@ import { FEATURED_RPCS } from '../../../../shared/constants/network'; import { ADD_NETWORK_ROUTE } from '../../../helpers/constants/routes'; import { getEnvironmentType } from '../../../../app/scripts/lib/util'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; -import { Text } from '../../component-library'; -import { - Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../component-library/icon/deprecated'; +import { Text, Icon, IconName, IconSize } from '../../component-library'; import { MetaMetricsNetworkEventSource } from '../../../../shared/constants/metametrics'; const AddNetwork = () => { @@ -249,9 +244,9 @@ const AddNetwork = () => { > ) diff --git a/ui/components/app/approve-content-card/approve-content-card.stories.js b/ui/components/app/approve-content-card/approve-content-card.stories.js index 6ae43c22c..17216ba18 100644 --- a/ui/components/app/approve-content-card/approve-content-card.stories.js +++ b/ui/components/app/approve-content-card/approve-content-card.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; +import { Icon, IconName } from '../../component-library'; import ApproveContentCard from './approve-content-card'; export default { @@ -72,7 +72,7 @@ export default { }, args: { showHeader: true, - symbol: , + symbol: , title: 'Transaction fee', showEdit: true, showAdvanceGasFeeOptions: true, diff --git a/ui/components/app/asset-list-item/asset-list-item.js b/ui/components/app/asset-list-item/asset-list-item.js index 2be1b78b6..d5b2b3f63 100644 --- a/ui/components/app/asset-list-item/asset-list-item.js +++ b/ui/components/app/asset-list-item/asset-list-item.js @@ -16,11 +16,7 @@ import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys'; import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics'; import { AssetType } from '../../../../shared/constants/transaction'; import { MetaMetricsContext } from '../../../contexts/metametrics'; -import { - Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../component-library/icon/deprecated'; +import { Icon, IconName, IconSize } from '../../component-library'; import Box from '../../ui/box/box'; const AssetListItem = ({ @@ -143,9 +139,9 @@ const AssetListItem = ({ !isERC721 && ( {sendTokenButton} diff --git a/ui/components/app/beta-header/index.js b/ui/components/app/beta-header/index.js index f030d53f6..1eb7bfbe0 100644 --- a/ui/components/app/beta-header/index.js +++ b/ui/components/app/beta-header/index.js @@ -14,11 +14,7 @@ import { import { BETA_BUGS_URL } from '../../../helpers/constants/beta'; import { hideBetaHeader } from '../../../store/actions'; -import { ButtonIcon } from '../../component-library/button-icon/deprecated'; -import { - ICON_NAMES, - ICON_SIZES, -} from '../../component-library/icon/deprecated'; +import { ButtonIcon, ButtonIconSize, IconName } from '../../component-library'; const BetaHeader = () => { const t = useI18nContext(); @@ -51,8 +47,8 @@ const BetaHeader = () => { ])} - + { const t = useI18nContext(); @@ -60,10 +55,10 @@ const ConfirmationWarningModal = ({ onSubmit, onCancel }) => { className="confirmation-warning-modal__content__header" > - + {t('disconnectThisAccount')} diff --git a/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap b/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap index ba7f51b89..d72f4736d 100644 --- a/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap +++ b/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap @@ -42,7 +42,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = ` tabindex="0" >
diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js index b9113b2c1..49aebd8e4 100644 --- a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js +++ b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js @@ -8,11 +8,7 @@ import { DISPLAY, TypographyVariant, } from '../../../helpers/constants/design-system'; -import { - Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../component-library/icon/deprecated'; +import { Icon, IconName, IconSize } from '../../component-library'; export const CustomSpendingCapTooltip = ({ tooltipContentText, @@ -35,13 +31,15 @@ export const CustomSpendingCapTooltip = ({ > {tooltipIcon ? ( ) : ( - tooltipIcon !== '' && + tooltipIcon !== '' && ( + + ) )} diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.js b/ui/components/app/custom-spending-cap/custom-spending-cap.js index 23e8d16ee..0614b0f36 100644 --- a/ui/components/app/custom-spending-cap/custom-spending-cap.js +++ b/ui/components/app/custom-spending-cap/custom-spending-cap.js @@ -8,8 +8,7 @@ import { addHexPrefix } from 'ethereumjs-util'; import { I18nContext } from '../../../contexts/i18n'; import Box from '../../ui/box'; import FormField from '../../ui/form-field'; -import { Text, ButtonLink } from '../../component-library'; -import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; +import { Text, ButtonLink, Icon, IconName } from '../../component-library'; import { AlignItems, DISPLAY, @@ -196,7 +195,7 @@ export default function CustomSpendingCap({ as="h6" color={TextColor.errorDefault} > - {t('beCareful')} + {t('beCareful')} , ]) : t('inputLogicEmptyState'); diff --git a/ui/components/app/dropdowns/network-dropdown.js b/ui/components/app/dropdowns/network-dropdown.js index 131b700f6..8b44fed0e 100644 --- a/ui/components/app/dropdowns/network-dropdown.js +++ b/ui/components/app/dropdowns/network-dropdown.js @@ -33,11 +33,7 @@ import { ADVANCED_ROUTE, } from '../../../helpers/constants/routes'; import { ButtonIcon } from '../../component-library/button-icon/deprecated'; -import { - Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../component-library/icon/deprecated'; +import { Icon, IconName, IconSize } from '../../component-library'; import { Dropdown, DropdownMenuItem } from './dropdown'; @@ -191,7 +187,7 @@ class NetworkDropdown extends Component { }} > {isCurrentRpcTarget ? ( - + ) : (
✓
)} @@ -214,8 +210,8 @@ class NetworkDropdown extends Component { {isCurrentRpcTarget ? null : ( { e.stopPropagation(); @@ -265,7 +261,7 @@ class NetworkDropdown extends Component { style={DROP_DOWN_MENU_ITEM_STYLE} > {providerType === network ? ( - + ) : (
✓
)} @@ -334,7 +330,7 @@ class NetworkDropdown extends Component { style={DROP_DOWN_MENU_ITEM_STYLE} > {isCurrentRpcTarget ? ( - + ) : (
✓
)} diff --git a/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js b/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js index 378be5480..e3ee7fa00 100644 --- a/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js +++ b/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js @@ -14,11 +14,7 @@ import { useTransactionEventFragment } from '../../../hooks/useTransactionEventF import { useTransactionModalContext } from '../../../contexts/transaction-modal'; import InfoTooltip from '../../ui/info-tooltip/info-tooltip'; import Typography from '../../ui/typography/typography'; -import { - Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../component-library/icon/deprecated'; +import { Icon, IconName, IconSize } from '../../component-library'; export default function EditGasFeeButton({ userAcknowledgedGasMissing }) { const t = useI18nContext(); @@ -78,9 +74,9 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) { )} {t(title)} {estimateUsed === 'custom' && ( diff --git a/ui/components/app/flask/copyable/copyable.js b/ui/components/app/flask/copyable/copyable.js index 2741fd6c4..59cb51e6b 100644 --- a/ui/components/app/flask/copyable/copyable.js +++ b/ui/components/app/flask/copyable/copyable.js @@ -14,11 +14,7 @@ import { Color, } from '../../../../helpers/constants/design-system'; import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard'; -import { - Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../../component-library/icon/deprecated'; +import { Icon, IconName, IconSize } from '../../../component-library'; export const Copyable = ({ text }) => { const [copied, handleCopy] = useCopyToClipboard(); @@ -51,14 +47,14 @@ export const Copyable = ({ text }) => { > {copied ? ( ) : ( handleCopy(text)} /> diff --git a/ui/components/app/flask/snap-authorship/snap-authorship.js b/ui/components/app/flask/snap-authorship/snap-authorship.js index 4c44d20eb..66f3fa59b 100644 --- a/ui/components/app/flask/snap-authorship/snap-authorship.js +++ b/ui/components/app/flask/snap-authorship/snap-authorship.js @@ -20,12 +20,8 @@ import { getSnapName, removeSnapIdPrefix, } from '../../../../helpers/utils/util'; -import { ButtonIcon } from '../../../component-library/button-icon/deprecated'; -import { Text } from '../../../component-library'; -import { - ICON_NAMES, - ICON_SIZES, -} from '../../../component-library/icon/deprecated'; +import { ButtonIcon, IconName, Text } from '../../../component-library'; + import { getTargetSubjectMetadata } from '../../../../selectors'; import SnapAvatar from '../snap-avatar'; @@ -85,9 +81,8 @@ const SnapAuthorship = ({ snapId, className }) => { rel="noopener noreferrer" target="_blank" href={url} - iconName={ICON_NAMES.EXPORT} + iconName={IconName.Export} color={IconColor.infoDefault} - size={ICON_SIZES.MD} style={{ marginLeft: 'auto' }} /> diff --git a/ui/components/app/flask/snap-avatar/snap-avatar.js b/ui/components/app/flask/snap-avatar/snap-avatar.js index 81e101b81..4e16b8a2a 100644 --- a/ui/components/app/flask/snap-avatar/snap-avatar.js +++ b/ui/components/app/flask/snap-avatar/snap-avatar.js @@ -17,11 +17,9 @@ import { BadgeWrapperPosition, AvatarIcon, AvatarBase, + IconName, + IconSize, } from '../../../component-library'; -import { - ICON_NAMES, - ICON_SIZES, -} from '../../../component-library/icon/deprecated'; import { getTargetSubjectMetadata } from '../../../../selectors'; const SnapAvatar = ({ snapId, className }) => { @@ -40,11 +38,11 @@ const SnapAvatar = ({ snapId, className }) => { className={classnames('snap-avatar', className)} badge={ diff --git a/ui/components/app/flask/snap-content-footer/snap-content-footer.js b/ui/components/app/flask/snap-content-footer/snap-content-footer.js index aa5f385d1..f8b31826a 100644 --- a/ui/components/app/flask/snap-content-footer/snap-content-footer.js +++ b/ui/components/app/flask/snap-content-footer/snap-content-footer.js @@ -16,7 +16,7 @@ import { } from '../../../../helpers/constants/design-system'; import Button from '../../../ui/button'; import Box from '../../../ui/box/box'; -import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated'; +import { Icon, IconName } from '../../../component-library'; export default function SnapContentFooter({ snapName, snapId }) { const t = useI18nContext(); @@ -36,7 +36,7 @@ export default function SnapContentFooter({ snapName, snapId }) { className="snap-content-footer" > diff --git a/ui/components/app/flask/snap-install-warning/snap-install-warning.js b/ui/components/app/flask/snap-install-warning/snap-install-warning.js index 31365909f..94e8c091c 100644 --- a/ui/components/app/flask/snap-install-warning/snap-install-warning.js +++ b/ui/components/app/flask/snap-install-warning/snap-install-warning.js @@ -15,8 +15,7 @@ import { } from '../../../../helpers/constants/design-system'; import Popover from '../../../ui/popover'; import Button from '../../../ui/button'; -import { AvatarIcon, Text } from '../../../component-library'; -import { ICON_NAMES } from '../../../component-library/icon/deprecated'; +import { AvatarIcon, Text, IconName } from '../../../component-library'; import Box from '../../../ui/box/box'; /** @@ -79,7 +78,7 @@ export default function SnapInstallWarning({ onCancel, onSubmit, warnings }) { > ) : null } - iconName={ICON_NAMES.EXPORT} + iconName={IconName.Export} > {t( blockExplorerLinkText.firstPart, @@ -109,7 +109,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) { global.platform.openExtensionInBrowser(); onClose(); }} - iconName={ICON_NAMES.EXPAND} + iconName={IconName.Expand} > {t('expandView')} @@ -127,7 +127,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) { }); onClose(); }} - iconName={ICON_NAMES.SCAN_BARCODE} + iconName={IconName.ScanBarcode} > {t('accountDetails')} @@ -144,7 +144,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) { history.push(CONNECTED_ROUTE); onClose(); }} - iconName={ICON_NAMES.CONNECT} + iconName={IconName.Connect} > {t('connectedSites')} @@ -160,7 +160,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) { ); onClose(); }} - iconName={ICON_NAMES.TRASH} + iconName={IconName.Trash} > {t('removeAccount')} diff --git a/ui/components/app/menu-bar/menu-bar.js b/ui/components/app/menu-bar/menu-bar.js index 08da8208f..7732a3c58 100644 --- a/ui/components/app/menu-bar/menu-bar.js +++ b/ui/components/app/menu-bar/menu-bar.js @@ -14,8 +14,7 @@ import { CONNECTED_ACCOUNTS_ROUTE } from '../../../helpers/constants/routes'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { getOriginOfCurrentTab } from '../../../selectors'; import { MetaMetricsContext } from '../../../contexts/metametrics'; -import { ButtonIcon } from '../../component-library/button-icon/deprecated'; -import { ICON_NAMES } from '../../component-library/icon/deprecated'; +import { ButtonIcon, IconName } from '../../component-library'; import AccountOptionsMenu from './account-options-menu'; export default function MenuBar() { @@ -41,7 +40,7 @@ export default function MenuBar() { handleCopyTokenAddress(tokenAddress)} color={Color.iconMuted} @@ -163,7 +160,7 @@ export default function ContractDetailsModal({ { const blockExplorerTokenLink = getAccountLink( @@ -244,7 +241,7 @@ export default function ContractDetailsModal({ handleCopyToAddress(toAddress)} color={Color.iconMuted} @@ -258,7 +255,7 @@ export default function ContractDetailsModal({ { const blockExplorerTokenLink = getAccountLink( diff --git a/ui/components/app/modals/customize-nonce/customize-nonce.component.js b/ui/components/app/modals/customize-nonce/customize-nonce.component.js index e1e0a944b..58d3ab79a 100644 --- a/ui/components/app/modals/customize-nonce/customize-nonce.component.js +++ b/ui/components/app/modals/customize-nonce/customize-nonce.component.js @@ -15,11 +15,11 @@ import Box from '../../../ui/box'; import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'; import { useI18nContext } from '../../../../hooks/useI18nContext'; import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url'; -import { ButtonIcon } from '../../../component-library/button-icon/deprecated'; import { - ICON_NAMES, - ICON_SIZES, -} from '../../../component-library/icon/deprecated'; + ButtonIcon, + ButtonIconSize, + IconName, +} from '../../../component-library'; const CustomizeNonce = ({ hideModal, @@ -58,9 +58,9 @@ const CustomizeNonce = ({ {t('editNonceField')} diff --git a/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js b/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js index 3c3b85cf0..caccc2ad6 100644 --- a/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js +++ b/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js @@ -10,11 +10,11 @@ import { calcTokenAmount, toPrecisionWithoutTrailingZeros, } from '../../../../../shared/lib/transactions-controller-utils'; -import { ButtonIcon } from '../../../component-library/button-icon/deprecated'; import { - ICON_SIZES, - ICON_NAMES, -} from '../../../component-library/icon/deprecated'; + ButtonIcon, + ButtonIconSize, + IconName, +} from '../../../component-library'; const MAX_UNSIGNED_256_INT = new BigNumber(2).pow(256).minus(1).toString(10); @@ -63,8 +63,8 @@ export default class EditApprovalPermission extends PureComponent { {t('editPermission')}
diff --git a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js index de5a6a962..bf4b42ccf 100644 --- a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js +++ b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js @@ -2,9 +2,13 @@ import PropTypes from 'prop-types'; import React from 'react'; import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'; import Box from '../../../ui/box'; -import { Text, Button, BUTTON_TYPES } from '../../../component-library'; -import { ButtonIcon } from '../../../component-library/button-icon/deprecated'; -import { ICON_NAMES } from '../../../component-library/icon/deprecated'; +import { + Text, + Button, + BUTTON_TYPES, + ButtonIcon, + IconName, +} from '../../../component-library'; import { AlignItems, DISPLAY, @@ -47,7 +51,7 @@ const HoldToRevealModal = ({ onLongPressed, hideModal }) => { {t('holdToRevealTitle')}
diff --git a/ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js index 5899562d4..c5f112eef 100644 --- a/ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js +++ b/ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js @@ -1,11 +1,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import Modal from '../../modal'; -import { - Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../../component-library/icon/deprecated'; +import { Icon, IconName, IconSize } from '../../../component-library'; import { IconColor } from '../../../../helpers/constants/design-system'; export default class TransactionConfirmed extends PureComponent { @@ -35,9 +31,9 @@ export default class TransactionConfirmed extends PureComponent {
{`${t('confirmed')}!`} diff --git a/ui/components/app/network-display/network-display.js b/ui/components/app/network-display/network-display.js index 24519801b..57670908a 100644 --- a/ui/components/app/network-display/network-display.js +++ b/ui/components/app/network-display/network-display.js @@ -18,11 +18,7 @@ import { import Chip from '../../ui/chip/chip'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { isNetworkLoading } from '../../../selectors'; -import { - Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../component-library/icon/deprecated'; +import { Icon, IconName, IconSize } from '../../component-library'; export default function NetworkDisplay({ indicatorSize, @@ -70,9 +66,7 @@ export default function NetworkDisplay({ } rightIcon={ - onClick ? ( - - ) : null + onClick ? : null } label={ networkType === NETWORK_TYPES.RPC diff --git a/ui/components/app/nft-details/nft-details.js b/ui/components/app/nft-details/nft-details.js index 1888f32f1..336d5a96c 100644 --- a/ui/components/app/nft-details/nft-details.js +++ b/ui/components/app/nft-details/nft-details.js @@ -53,8 +53,7 @@ import { TokenStandard, } from '../../../../shared/constants/transaction'; import NftDefaultImage from '../nft-default-image'; -import { ButtonIcon } from '../../component-library/button-icon/deprecated'; -import { ICON_NAMES } from '../../component-library/icon/deprecated'; +import { ButtonIcon, IconName } from '../../component-library'; import Tooltip from '../../ui/tooltip'; import { decWEIToDecETH } from '../../../../shared/modules/conversion.utils'; @@ -427,7 +426,7 @@ export default function NftDetails({ nft }) { handleAddressCopy(address); }} iconName={ - addressCopied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY + addressCopied ? IconName.CopySuccess : IconName.Copy } /> diff --git a/ui/components/app/nft-options/nft-options.js b/ui/components/app/nft-options/nft-options.js index e67525f7c..1ff1c55f1 100644 --- a/ui/components/app/nft-options/nft-options.js +++ b/ui/components/app/nft-options/nft-options.js @@ -3,8 +3,7 @@ import PropTypes from 'prop-types'; import { I18nContext } from '../../../contexts/i18n'; import { Menu, MenuItem } from '../../ui/menu'; -import { ButtonIcon } from '../../component-library/button-icon/deprecated'; -import { ICON_NAMES } from '../../component-library/icon/deprecated'; +import { ButtonIcon, IconName } from '../../component-library'; import { Color } from '../../../helpers/constants/design-system'; const NftOptions = ({ onRemove, onViewOnOpensea }) => { @@ -15,7 +14,7 @@ const NftOptions = ({ onRemove, onViewOnOpensea }) => { return (
setNftOptionsOpen(true)} @@ -31,7 +30,7 @@ const NftOptions = ({ onRemove, onViewOnOpensea }) => { > {onViewOnOpensea ? ( { setNftOptionsOpen(false); @@ -42,7 +41,7 @@ const NftOptions = ({ onRemove, onViewOnOpensea }) => { ) : null} { setNftOptionsOpen(false); diff --git a/ui/components/app/nfts-items/nfts-items.js b/ui/components/app/nfts-items/nfts-items.js index 0e865b1b8..03d4d8f7d 100644 --- a/ui/components/app/nfts-items/nfts-items.js +++ b/ui/components/app/nfts-items/nfts-items.js @@ -30,7 +30,7 @@ import { updateNftDropDownState } from '../../../store/actions'; import { usePrevious } from '../../../hooks/usePrevious'; import { getNftsDropdownState } from '../../../ducks/metamask/metamask'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; +import { Icon, IconName } from '../../component-library'; import NftDefaultImage from '../nft-default-image'; const width = @@ -158,9 +158,7 @@ export default function NftsItems({ diff --git a/ui/components/app/permission-cell/permission-cell.js b/ui/components/app/permission-cell/permission-cell.js index fbbafea43..cb9a10d8d 100644 --- a/ui/components/app/permission-cell/permission-cell.js +++ b/ui/components/app/permission-cell/permission-cell.js @@ -11,12 +11,13 @@ import { TextColor, TextVariant, } from '../../../helpers/constants/design-system'; -import { AvatarIcon, Text } from '../../component-library'; import { + AvatarIcon, + Text, Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../component-library/icon/deprecated'; + IconName, + IconSize, +} from '../../component-library'; import { formatDate } from '../../../helpers/utils/util'; import { useI18nContext } from '../../../hooks/useI18nContext'; import Tooltip from '../../ui/tooltip'; @@ -32,24 +33,24 @@ const PermissionCell = ({ const t = useI18nContext(); let infoIconColor = IconColor.iconMuted; - let infoIcon = ICON_NAMES.INFO; - let iconColor = Color.primaryDefault; + let infoIcon = IconName.Info; + let iconColor = IconColor.primaryDefault; let iconBackgroundColor = Color.primaryMuted; if (!revoked && weight === 1) { - iconColor = Color.warningDefault; + iconColor = IconColor.warningDefault; iconBackgroundColor = Color.warningMuted; infoIconColor = IconColor.warningDefault; - infoIcon = ICON_NAMES.DANGER; + infoIcon = IconName.Danger; } if (dateApproved) { - iconColor = Color.iconMuted; + iconColor = IconColor.iconMuted; iconBackgroundColor = Color.backgroundAlternative; } if (revoked) { - iconColor = Color.iconMuted; + iconColor = IconColor.iconMuted; iconBackgroundColor = Color.backgroundAlternative; } @@ -72,9 +73,9 @@ const PermissionCell = ({ {typeof permissionIcon === 'string' ? ( {description}
} position="bottom"> - + diff --git a/ui/components/app/selected-account/selected-account.component.js b/ui/components/app/selected-account/selected-account.component.js index 08746392e..3dab4e12a 100644 --- a/ui/components/app/selected-account/selected-account.component.js +++ b/ui/components/app/selected-account/selected-account.component.js @@ -6,11 +6,7 @@ import { shortenAddress } from '../../../helpers/utils/util'; import Tooltip from '../../ui/tooltip'; import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils'; import { SECOND } from '../../../../shared/constants/time'; -import { - Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../component-library/icon/deprecated'; +import { Icon, IconName, IconSize } from '../../component-library'; import { IconColor } from '../../../helpers/constants/design-system'; class SelectedAccount extends Component { @@ -71,11 +67,9 @@ class SelectedAccount extends Component {
diff --git a/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js b/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js index f6f0794f6..f5dfe26ee 100644 --- a/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js +++ b/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js @@ -16,7 +16,7 @@ import { } from '../../../helpers/constants/design-system'; import Identicon from '../../ui/identicon'; import { shortenAddress } from '../../../helpers/utils/util'; -import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; +import { Icon, IconName } from '../../component-library'; const SetApproveForAllWarning = ({ collectionName, @@ -62,7 +62,7 @@ const SetApproveForAllWarning = ({ className="set-approval-for-all-warning__content__header" > diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js b/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js index 7ef015ab5..ef85b2e6b 100644 --- a/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js +++ b/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js @@ -6,7 +6,7 @@ import { JustifyContent, } from '../../../../helpers/constants/design-system'; import Box from '../../../ui/box'; -import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated'; +import { Icon, IconName } from '../../../component-library'; const SignatureRequestSIWEIcon = () => { return ( @@ -17,7 +17,7 @@ const SignatureRequestSIWEIcon = () => { backgroundColor={Color.errorDefault} justifyContent={JustifyContent.center} > - + ); }; diff --git a/ui/components/app/tab-bar/tab-bar.js b/ui/components/app/tab-bar/tab-bar.js index bcb97b80b..9c3c42a90 100644 --- a/ui/components/app/tab-bar/tab-bar.js +++ b/ui/components/app/tab-bar/tab-bar.js @@ -2,11 +2,7 @@ import React 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 TabBar = (props) => { const { tabs = [], onSelect, isActive } = props; @@ -26,8 +22,8 @@ const TabBar = (props) => {
{content}
diff --git a/ui/components/app/tab-bar/tab-bar.stories.js b/ui/components/app/tab-bar/tab-bar.stories.js index d7e08ed7c..a9677eb19 100644 --- a/ui/components/app/tab-bar/tab-bar.stories.js +++ b/ui/components/app/tab-bar/tab-bar.stories.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; +import { Icon, IconName } from '../../component-library'; import TabBar from '.'; export default { @@ -19,12 +19,12 @@ export default { args: { tabs: [ { - icon: , + icon: , content: 'General', key: 'general', }, { - icon: , + icon: , content: 'Contacts', key: 'contacts', }, @@ -39,7 +39,7 @@ export default { key: 'securityAndPrivacy', }, { - icon: , + icon: , content: 'Alerts', key: 'alerts', }, diff --git a/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js index 3e253e621..7e119ebe6 100644 --- a/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js +++ b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js @@ -12,22 +12,18 @@ import { TRANSACTION_CANCEL_ATTEMPTED_EVENT, TRANSACTION_CANCEL_SUCCESS_EVENT, } from '../transaction-activity-log.constants'; -import { - Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../../component-library/icon/deprecated'; +import { Icon, IconName, IconSize } from '../../../component-library'; import { Color } from '../../../../helpers/constants/design-system'; export const ACTIVITY_ICONS = { - [TRANSACTION_CREATED_EVENT]: ICON_NAMES.ADD, - [TRANSACTION_SUBMITTED_EVENT]: ICON_NAMES.ARROW_UP, - [TRANSACTION_RESUBMITTED_EVENT]: ICON_NAMES.PROGRAMMING_ARROWS, - [TRANSACTION_CONFIRMED_EVENT]: ICON_NAMES.CHECK, - [TRANSACTION_DROPPED_EVENT]: ICON_NAMES.CLOSE, - [TRANSACTION_ERRORED_EVENT]: ICON_NAMES.DANGER, - [TRANSACTION_CANCEL_ATTEMPTED_EVENT]: ICON_NAMES.CLOSE, - [TRANSACTION_CANCEL_SUCCESS_EVENT]: ICON_NAMES.CLOSE, + [TRANSACTION_CREATED_EVENT]: IconName.Add, + [TRANSACTION_SUBMITTED_EVENT]: IconName.ArrowUp, + [TRANSACTION_RESUBMITTED_EVENT]: IconName.ProgrammingArrows, + [TRANSACTION_CONFIRMED_EVENT]: IconName.Check, + [TRANSACTION_DROPPED_EVENT]: IconName.Close, + [TRANSACTION_ERRORED_EVENT]: IconName.Danger, + [TRANSACTION_CANCEL_ATTEMPTED_EVENT]: IconName.Close, + [TRANSACTION_CANCEL_SUCCESS_EVENT]: IconName.Close, }; export default class TransactionActivityLogIcon extends PureComponent { @@ -47,7 +43,7 @@ export default class TransactionActivityLogIcon extends PureComponent { return (
{icon ? ( - + ) : null}
); diff --git a/ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js b/ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js index 8e1f62d93..57e43e669 100644 --- a/ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js +++ b/ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js @@ -4,10 +4,7 @@ import Tooltip from '../../../../../ui/tooltip/tooltip'; import { I18nContext } from '../../../../../../contexts/i18n'; import { useCopyToClipboard } from '../../../../../../hooks/useCopyToClipboard'; -import { - Icon, - ICON_NAMES, -} from '../../../../../component-library/icon/deprecated'; +import { Icon, IconName } from '../../../../../component-library'; import { IconColor } from '../../../../../../helpers/constants/design-system'; const CopyRawData = ({ data }) => { @@ -25,7 +22,7 @@ const CopyRawData = ({ data }) => { >
diff --git a/ui/components/app/wallet-overview/eth-overview.js b/ui/components/app/wallet-overview/eth-overview.js index 315ce61af..6d0dbdeaf 100644 --- a/ui/components/app/wallet-overview/eth-overview.js +++ b/ui/components/app/wallet-overview/eth-overview.js @@ -39,9 +39,10 @@ import { startNewDraftTransaction } from '../../../ducks/send'; import { AssetType } from '../../../../shared/constants/transaction'; import { ButtonIcon, - BUTTON_ICON_SIZES, -} from '../../component-library/button-icon/deprecated'; -import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; + ButtonIconSize, + Icon, + IconName, +} from '../../component-library'; import { IconColor } from '../../../helpers/constants/design-system'; import useRamps from '../../../hooks/experiences/useRamps'; import WalletOverview from './wallet-overview'; @@ -101,9 +102,9 @@ const EthOverview = ({ className }) => { className="eth-overview__portfolio-button" data-testid="home__portfolio-site" color={IconColor.primaryDefault} - iconName={ICON_NAMES.DIAGRAM} + iconName={IconName.Diagram} ariaLabel={t('portfolio')} - size={BUTTON_ICON_SIZES.LG} + size={ButtonIconSize.Lg} onClick={() => { const portfolioUrl = process.env.PORTFOLIO_URL; global.platform.openTab({ @@ -147,9 +148,7 @@ const EthOverview = ({ className }) => { <> - } + Icon={} disabled={!isBuyableChain} data-testid="eth-overview-buy" label={t('buy')} @@ -170,7 +169,7 @@ const EthOverview = ({ className }) => { data-testid="eth-overview-send" Icon={ } @@ -197,7 +196,7 @@ const EthOverview = ({ className }) => { disabled={!isSwapsChain} Icon={ } @@ -239,7 +238,7 @@ const EthOverview = ({ className }) => { disabled={!isBridgeChain} data-testid="eth-overview-bridge" Icon={ - + } label={t('bridge')} onClick={() => { diff --git a/ui/components/app/wallet-overview/token-overview.js b/ui/components/app/wallet-overview/token-overview.js index a2d7728b1..7f9ade4b6 100644 --- a/ui/components/app/wallet-overview/token-overview.js +++ b/ui/components/app/wallet-overview/token-overview.js @@ -35,7 +35,7 @@ import { import { AssetType } from '../../../../shared/constants/transaction'; import useRamps from '../../../hooks/experiences/useRamps'; -import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; +import { Icon, IconName } from '../../component-library'; import { IconColor } from '../../../helpers/constants/design-system'; import WalletOverview from './wallet-overview'; @@ -93,9 +93,7 @@ const TokenOverview = ({ className, token }) => { <> - } + Icon={} label={t('buy')} data-testid="token-overview-buy" onClick={() => { @@ -139,7 +137,7 @@ const TokenOverview = ({ className, token }) => { }} Icon={ } @@ -152,7 +150,7 @@ const TokenOverview = ({ className, token }) => { disabled={!isSwapsChain} Icon={ } @@ -201,10 +199,7 @@ const TokenOverview = ({ className, token }) => { + } label={t('portfolio')} data-testid="home__portfolio-site" diff --git a/ui/components/component-library/avatar-base/avatar-base.js b/ui/components/component-library/avatar-base/avatar-base.js index 22a1e9553..7b981e04a 100644 --- a/ui/components/component-library/avatar-base/avatar-base.js +++ b/ui/components/component-library/avatar-base/avatar-base.js @@ -6,6 +6,7 @@ import { BackgroundColor, BorderColor, TextColor, + IconColor, DISPLAY, JustifyContent, AlignItems, @@ -81,7 +82,10 @@ AvatarBase.propTypes = { * The color of the text inside the AvatarBase * Defaults to TextColor.textDefault */ - color: PropTypes.oneOf(Object.values(TextColor)), + color: PropTypes.oneOf([ + ...Object.values(TextColor), + ...Object.values(IconColor), + ]), /** * Additional classNames to be added to the AvatarToken */ diff --git a/ui/components/component-library/avatar-icon/avatar-icon.js b/ui/components/component-library/avatar-icon/avatar-icon.js index a8f36e063..53271ef5b 100644 --- a/ui/components/component-library/avatar-icon/avatar-icon.js +++ b/ui/components/component-library/avatar-icon/avatar-icon.js @@ -73,7 +73,10 @@ AvatarIcon.propTypes = { * The color of the text inside the AvatarIcon * Defaults to TextColor.primaryDefault */ - color: PropTypes.oneOf(Object.values(TextColor)), + color: PropTypes.oneOf([ + ...Object.values(TextColor), + ...Object.values(IconColor), + ]), /** * Additional classNames to be added to the AvatarIcon */