m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Fix/18492/update icon ts app folder (#18645)

Browse Source
This commit is contained in:
Garrett Bear 2023-04-19 14:16:49 -07:00 committed by GitHub
parent 7ca9383785
commit 34c1e5a2a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
45 changed files with 186 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/components/app/account-menu/account-menu.component.js
View File

@ -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 ? (
<Icon
color={IconColor.successDefault}
name={ICON_NAMES.CHECK}
size={ICON_SIZES.LG}
name={IconName.Check}
size={IconSize.Lg}
/>
) : null}
</div>
@ -374,9 +370,7 @@ export default class AccountMenu extends Component {
});
history.push(NEW_ACCOUNT_ROUTE);
}}
icon={
<Icon name={ICON_NAMES.ADD} color={IconColor.iconAlternative} />
}
icon={<Icon name={IconName.Add} color={IconColor.iconAlternative} />}
text={t('createAccount')}
/>
<AccountMenuItem
@ -393,7 +387,7 @@ export default class AccountMenu extends Component {
history.push(IMPORT_ACCOUNT_ROUTE);
}}
icon={
<Icon name={ICON_NAMES.IMPORT} color={IconColor.iconAlternative} />
<Icon name={IconName.Import} color={IconColor.iconAlternative} />
}
text={t('importAccount')}
/>
@ -415,10 +409,7 @@ export default class AccountMenu extends Component {
}
}}
icon={
<Icon
name={ICON_NAMES.HARDWARE}
color={IconColor.iconAlternative}
/>
<Icon name={IconName.Hardware} color={IconColor.iconAlternative} />
}
text={t('connectHardwareWallet')}
/>
@ -433,7 +424,7 @@ export default class AccountMenu extends Component {
}}
icon={
<div className="account-menu__notifications">
<Icon name={ICON_NAMES.NOTIFICATION} size={ICON_SIZES.LG} />
<Icon name={IconName.Notification} size={IconSize.Lg} />
{unreadNotificationsCount > 0 && (
<div className="account-menu__notifications__count">
{unreadNotificationsCount}
@ -466,10 +457,7 @@ export default class AccountMenu extends Component {
global.platform.openTab({ url: supportLink });
}}
icon={
<Icon
name={ICON_NAMES.MESSAGES}
color={IconColor.iconAlternative}
/>
<Icon name={IconName.Messages} color={IconColor.iconAlternative} />
}
text={supportText}
/>
@ -488,7 +476,7 @@ export default class AccountMenu extends Component {
}}
icon={
<Icon
name={ICON_NAMES.SETTING}
name={IconName.Setting}
color={IconColor.iconAlternative}
ariaLabel={t('settings')}
/>

11
ui/components/app/add-network/add-network.js
View File

@ -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 = () => {
>
<Icon
className="add-network__warning-icon"
name={ICON_NAMES.DANGER}
name={IconName.Danger}
color={IconColor.iconMuted}
size={ICON_SIZES.SM}
size={IconSize.Sm}
/>
</Tooltip>
)

4
ui/components/app/approve-content-card/approve-content-card.stories.js
View File

@ -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: <Icon name={ICON_NAMES.TAG} />,
symbol: <Icon name={IconName.Tag} />,
title: 'Transaction fee',
showEdit: true,
showAdvanceGasFeeOptions: true,

10
ui/components/app/asset-list-item/asset-list-item.js
View File

@ -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 && (
<Box>
<Icon
name={ICON_NAMES.ARROW_RIGHT}
name={IconName.ArrowRight}
color={Color.iconDefault}
size={ICON_SIZES.SM}
size={IconSize.Sm}
style={{ verticalAlign: 'middle' }}
/>
{sendTokenButton}

10
ui/components/app/beta-header/index.js
View File

@ -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 = () => {
])}
</Typography>
<ButtonIcon
iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
iconName={IconName.Close}
size={ButtonIconSize.Sm}
color={IconColor.warningInverse}
className="beta-header__button"
data-testid="beta-header-close"

4
ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
View File

@ -10,7 +10,7 @@ import Identicon from '../../../ui/identicon';
import { shortenAddress } from '../../../../helpers/utils/util';
import AccountMismatchWarning from '../../../ui/account-mismatch-warning/account-mismatch-warning.component';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated';
import { Icon, IconName } from '../../../component-library';
export default function ConfirmPageContainerHeader({
onEdit,
@ -54,7 +54,7 @@ export default function ConfirmPageContainerHeader({
visibility: showEdit ? 'initial' : 'hidden',
}}
>
<Icon name={ICON_NAMES.ARROW_LEFT} />
<Icon name={IconName.ArrowLeft} />
<span
data-testid="confirm-page-back-edit-button"
className="confirm-page-container-header__back-button"

11
ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js
View File

@ -14,12 +14,7 @@ import {
AlignItems,
IconColor,
} from '../../../helpers/constants/design-system';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../component-library/icon/deprecated';
import { Text } from '../../component-library';
import { Icon, IconName, IconSize, Text } from '../../component-library';
const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
const t = useI18nContext();
@ -60,10 +55,10 @@ const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
className="confirmation-warning-modal__content__header"
>
<Icon
name={ICON_NAMES.DANGER}
name={IconName.Danger}
color={IconColor.errorDefault}
className="confirmation-warning-modal__content__header__warning-icon"
size={ICON_SIZES.XL}
size={IconSize.Xl}
/>
<Text
variant={TextVariant.headingSm}

5
ui/components/app/connected-accounts-list/connected-accounts-list-options/connected-accounts-list-options.component.js
View File

@ -1,8 +1,7 @@
import PropTypes from 'prop-types';
import React, { useRef } from 'react';
import { Menu } from '../../../ui/menu';
import { ICON_NAMES } from '../../../component-library/icon/deprecated';
import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
import { IconName, ButtonIcon } from '../../../component-library';
import { useI18nContext } from '../../../../hooks/useI18nContext';
const ConnectedAccountsListOptions = ({
@ -17,7 +16,7 @@ const ConnectedAccountsListOptions = ({
return (
<div ref={ref}>
<ButtonIcon
iconName={ICON_NAMES.MORE_VERTICAL}
iconName={IconName.MoreVertical}
className="connected-accounts-options__button"
onClick={onShowOptions}
ariaLabel={t('options')}

4
ui/components/app/connected-accounts-list/connected-accounts-list.component.js
View File

@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import { ICON_NAMES } from '../../component-library/icon/deprecated';
import { IconName } from '../../component-library';
import { MenuItem } from '../../ui/menu';
import ConnectedAccountsListItem from './connected-accounts-list-item';
import ConnectedAccountsListOptions from './connected-accounts-list-options';
@ -105,7 +105,7 @@ export default class ConnectedAccountsList extends PureComponent {
onShowOptions={this.showAccountOptions.bind(null, address)}
show={accountWithOptionsShown === address}
>
<MenuItem iconName={ICON_NAMES.LOGOUT} onClick={this.disconnectAccount}>
<MenuItem iconName={IconName.Logout} onClick={this.disconnectAccount}>
{t('disconnectThisAccount')}
</MenuItem>
</ConnectedAccountsListOptions>

2
ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap
View File

@ -42,7 +42,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
tabindex="0"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
class="box mm-icon mm-icon--size-inherit box--display-inline-block box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/question.svg');"
/>
</div>

14
ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
View File

@ -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 ? (
<Icon
name={ICON_NAMES.DANGER}
name={IconName.Danger}
className="form-field__heading-title__tooltip__warning-icon"
size={ICON_SIZES.AUTO}
size={IconSize.Auto}
style={{ 'vertical-align': 'bottom' }}
/>
) : (
tooltipIcon !== '' && <Icon name={ICON_NAMES.QUESTION} />
tooltipIcon !== '' && (
<Icon name={IconName.Question} size={IconSize.Inherit} />
)
)}
</Tooltip>
</Box>

5
ui/components/app/custom-spending-cap/custom-spending-cap.js
View File

@ -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}
>
<Icon name={ICON_NAMES.WARNING} /> {t('beCareful')}
<Icon name={IconName.Warning} /> {t('beCareful')}
</Text>,
])
: t('inputLogicEmptyState');

16
ui/components/app/dropdowns/network-dropdown.js
View File

@ -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 ? (
<Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} />
<Icon name={IconName.Check} color={IconColor.successDefault} />
) : (
<div className="network-check__transparent">✓</div>
)}
@ -214,8 +210,8 @@ class NetworkDropdown extends Component {
{isCurrentRpcTarget ? null : (
<ButtonIcon
className="delete"
iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
iconName={IconName.Close}
size={IconSize.Sm}
ariaLabel={this.context.t('delete')}
onClick={(e) => {
e.stopPropagation();
@ -265,7 +261,7 @@ class NetworkDropdown extends Component {
style={DROP_DOWN_MENU_ITEM_STYLE}
>
{providerType === network ? (
<Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} />
<Icon name={IconName.Check} color={IconColor.successDefault} />
) : (
<div className="network-check__transparent">✓</div>
)}
@ -334,7 +330,7 @@ class NetworkDropdown extends Component {
style={DROP_DOWN_MENU_ITEM_STYLE}
>
{isCurrentRpcTarget ? (
<Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} />
<Icon name={IconName.Check} color={IconColor.successDefault} />
) : (
<div className="network-check__transparent">✓</div>
)}

10
ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js
View File

@ -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 }) {
)}
<span className="edit-gas-fee-button__label">{t(title)}</span>
<Icon
name={ICON_NAMES.ARROW_RIGHT}
name={IconName.ArrowRight}
color={Color.primaryDefault}
size={ICON_SIZES.XS}
size={IconSize.Xs}
/>
</button>
{estimateUsed === 'custom' && (

14
ui/components/app/flask/copyable/copyable.js
View File

@ -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 ? (
<Icon
name={ICON_NAMES.COPY_SUCCESS}
size={ICON_SIZES.LG}
name={IconName.CopySuccess}
size={IconSize.Lg}
color={Color.iconAlternative}
/>
) : (
<Icon
name={ICON_NAMES.COPY}
size={ICON_SIZES.LG}
name={IconName.Copy}
size={IconSize.Lg}
color={Color.iconAlternative}
onClick={() => handleCopy(text)}
/>

11
ui/components/app/flask/snap-authorship/snap-authorship.js
View File

@ -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' }}
/>
</Box>

12
ui/components/app/flask/snap-avatar/snap-avatar.js
View File

@ -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={
<AvatarIcon
iconName={ICON_NAMES.SNAPS}
size={ICON_SIZES.XS}
iconName={IconName.Snaps}
size={IconSize.Xs}
backgroundColor={IconColor.infoDefault}
iconProps={{
size: ICON_SIZES.XS,
size: IconSize.Xs,
color: IconColor.infoInverse,
}}
/>

4
ui/components/app/flask/snap-content-footer/snap-content-footer.js
View File

@ -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"
>
<Icon
name={ICON_NAMES.WARNING}
name={IconName.Warning}
size={Size.SM}
color={IconColor.iconMuted}
paddingRight={1}

15
ui/components/app/flask/snap-delineator/snap-delineator.js
View File

@ -12,11 +12,12 @@ import {
TextColor,
} from '../../../../helpers/constants/design-system';
import Box from '../../../ui/box';
import { AvatarIcon, Text } from '../../../component-library';
import {
ICON_NAMES,
ICON_SIZES,
} from '../../../component-library/icon/deprecated';
AvatarIcon,
Text,
IconName,
IconSize,
} from '../../../component-library';
import {
DelineatorType,
getDelineatorTitle,
@ -45,14 +46,14 @@ export const SnapDelineator = ({
padding={1}
>
<AvatarIcon
iconName={ICON_NAMES.SNAPS}
size={ICON_SIZES.XS}
iconName={IconName.Snaps}
size={IconSize.Xs}
backgroundColor={
isError ? IconColor.errorDefault : IconColor.infoDefault
}
margin={1}
iconProps={{
size: ICON_SIZES.XS,
size: IconSize.Xs,
color: IconColor.infoInverse,
}}
/>

5
ui/components/app/flask/snap-install-warning/snap-install-warning.js
View File

@ -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 }) {
>
<Box justifyContent={JustifyContent.center} marginBottom={6}>
<AvatarIcon
iconName={ICON_NAMES.DANGER}
iconName={IconName.Danger}
backgroundColor={BackgroundColor.warningMuted}
color={IconColor.warningDefault}
size={Size.LG}

12
ui/components/app/menu-bar/account-options-menu.js
View File

@ -28,7 +28,7 @@ import {
MetaMetricsEventName,
} from '../../../../shared/constants/metametrics';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { ICON_NAMES } from '../../component-library/icon/deprecated';
import { IconName } from '../../component-library';
export default function AccountOptionsMenu({ anchorElement, onClose }) {
const t = useI18nContext();
@ -87,7 +87,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
</span>
) : 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')}
</MenuItem>
@ -127,7 +127,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
});
onClose();
}}
iconName={ICON_NAMES.SCAN_BARCODE}
iconName={IconName.ScanBarcode}
>
{t('accountDetails')}
</MenuItem>
@ -144,7 +144,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
history.push(CONNECTED_ROUTE);
onClose();
}}
iconName={ICON_NAMES.CONNECT}
iconName={IconName.Connect}
>
{t('connectedSites')}
</MenuItem>
@ -160,7 +160,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
);
onClose();
}}
iconName={ICON_NAMES.TRASH}
iconName={IconName.Trash}
>
{t('removeAccount')}
</MenuItem>

5
ui/components/app/menu-bar/menu-bar.js
View File

@ -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() {
<SelectedAccount />
<span style={{ display: 'inherit' }} ref={ref}>
<ButtonIcon
iconName={ICON_NAMES.MORE_VERTICAL}
iconName={IconName.MoreVertical}
className="menu-bar__account-options"
data-testid="account-options-menu-button"
ariaLabel={t('accountOptions')}

13
ui/components/app/modals/contract-details-modal/contract-details-modal.js
View File

@ -25,8 +25,7 @@ import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
import { getAddressBookEntry } from '../../../../selectors';
import { TokenStandard } from '../../../../../shared/constants/transaction';
import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image';
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 ContractDetailsModal({
onClose,
@ -147,9 +146,7 @@ export default function ContractDetailsModal({
<ButtonIcon
display={DISPLAY.FLEX}
iconName={
copiedTokenAddress
? ICON_NAMES.COPY_SUCCESS
: ICON_NAMES.COPY
copiedTokenAddress ? IconName.CopySuccess : IconName.Copy
}
onClick={() => handleCopyTokenAddress(tokenAddress)}
color={Color.iconMuted}
@ -163,7 +160,7 @@ export default function ContractDetailsModal({
<Tooltip position="top" title={t('openInBlockExplorer')}>
<ButtonIcon
display={DISPLAY.FLEX}
iconName={ICON_NAMES.EXPORT}
iconName={IconName.Export}
color={Color.iconMuted}
onClick={() => {
const blockExplorerTokenLink = getAccountLink(
@ -244,7 +241,7 @@ export default function ContractDetailsModal({
<ButtonIcon
display={DISPLAY.FLEX}
iconName={
copiedToAddress ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
copiedToAddress ? IconName.CopySuccess : IconName.Copy
}
onClick={() => handleCopyToAddress(toAddress)}
color={Color.iconMuted}
@ -258,7 +255,7 @@ export default function ContractDetailsModal({
<Tooltip position="top" title={t('openInBlockExplorer')}>
<ButtonIcon
display={DISPLAY.FLEX}
iconName={ICON_NAMES.EXPORT}
iconName={IconName.Export}
color={Color.iconMuted}
onClick={() => {
const blockExplorerTokenLink = getAccountLink(

12
ui/components/app/modals/customize-nonce/customize-nonce.component.js
View File

@ -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')}
</Typography>
<ButtonIcon
iconName={ICON_NAMES.CLOSE}
iconName={IconName.Close}
className="customize-nonce-modal__close"
size={ICON_SIZES.SM}
size={ButtonIconSize.Sm}
ariaLabel={t('close')}
onClick={hideModal}
/>

12
ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js
View File

@ -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')}
</div>
<ButtonIcon
iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.LG}
iconName={IconName.Close}
size={ButtonIconSize.Lg}
className="edit-approval-permission__header__close"
onClick={hideModal}
/>

12
ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js
View File

@ -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 }) => {
<Text variant={TextVariant.headingSm}>{t('holdToRevealTitle')}</Text>
<ButtonIcon
className="hold-to-reveal-modal__close"
iconName={ICON_NAMES.CLOSE}
iconName={IconName.Close}
size={Size.SM}
onClick={handleCancel}
ariaLabel={t('close')}

5
ui/components/app/modals/new-account-modal/new-account-modal.component.js
View File

@ -1,8 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Button from '../../../ui/button/button.component';
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 NewAccountModal extends Component {
static contextTypes = {
@ -49,7 +48,7 @@ export default class NewAccountModal extends Component {
className="new-account-modal__content__header-close"
ariaLabel={t('close')}
onClick={this.props.hideModal}
iconName={ICON_NAMES.CLOSE}
iconName={IconName.Close}
/>
</div>
<div className="new-account-modal__input-label">

10
ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js
View File

@ -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 {
<Modal onSubmit={this.handleSubmit} submitText={t('ok')}>
<div className="transaction-confirmed__content">
<Icon
name={ICON_NAMES.CHECK}
name={IconName.Check}
color={IconColor.successDefault}
size={ICON_SIZES.XL}
size={IconSize.Xl}
/>
<div className="transaction-confirmed__title">
{`${t('confirmed')}!`}

10
ui/components/app/network-display/network-display.js
View File

@ -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({
</LoadingIndicator>
}
rightIcon={
onClick ? (
<Icon name={ICON_NAMES.ARROW_DOWN} size={ICON_SIZES.XS} />
) : null
onClick ? <Icon name={IconName.ArrowDown} size={IconSize.Xs} /> : null
}
label={
networkType === NETWORK_TYPES.RPC

5
ui/components/app/nft-details/nft-details.js
View File

@ -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
}
/>
</Tooltip>

9
ui/components/app/nft-options/nft-options.js
View File

@ -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 (
<div ref={ref}>
<ButtonIcon
iconName={ICON_NAMES.MORE_VERTICAL}
iconName={IconName.MoreVertical}
className="nft-options__button"
data-testid="nft-options__button"
onClick={() => setNftOptionsOpen(true)}
@ -31,7 +30,7 @@ const NftOptions = ({ onRemove, onViewOnOpensea }) => {
>
{onViewOnOpensea ? (
<MenuItem
iconName={ICON_NAMES.EXPORT}
iconName={IconName.Export}
data-testid="nft-options__view-on-opensea"
onClick={() => {
setNftOptionsOpen(false);
@ -42,7 +41,7 @@ const NftOptions = ({ onRemove, onViewOnOpensea }) => {
</MenuItem>
) : null}
<MenuItem
iconName={ICON_NAMES.TRASH}
iconName={IconName.Trash}
data-testid="nft-item-remove"
onClick={() => {
setNftOptionsOpen(false);

6
ui/components/app/nfts-items/nfts-items.js
View File

@ -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({
</Box>
<Box alignItems={AlignItems.flexEnd}>
<Icon
name={
isExpanded ? ICON_NAMES.ARROW_DOWN : ICON_NAMES.ARROW_RIGHT
}
name={isExpanded ? IconName.ArrowDown : IconName.ArrowRight}
color={Color.iconDefault}
/>
</Box>

27
ui/components/app/permission-cell/permission-cell.js
View File

@ -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' ? (
<AvatarIcon
iconName={permissionIcon}
size={ICON_SIZES.MD}
size={IconSize.Md}
iconProps={{
size: ICON_SIZES.SM,
size: IconSize.Sm,
}}
color={iconColor}
backgroundColor={iconBackgroundColor}
@ -108,7 +109,7 @@ const PermissionCell = ({
</Box>
<Box>
<Tooltip html={<div>{description}</div>} position="bottom">
<Icon color={infoIconColor} name={infoIcon} size={ICON_SIZES.SM} />
<Icon color={infoIconColor} name={infoIcon} size={IconSize.Sm} />
</Tooltip>
</Box>
</Box>

12
ui/components/app/selected-account/selected-account.component.js
View File

@ -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 {
<div className="selected-account__copy">
<Icon
name={
this.state.copied
? ICON_NAMES.COPY_SUCCESS
: ICON_NAMES.COPY
this.state.copied ? IconName.CopySuccess : IconName.Copy
}
size={ICON_SIZES.SM}
size={IconSize.Sm}
color={IconColor.iconAlternative}
/>
</div>

4
ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js
View File

@ -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"
>
<Icon
name={ICON_NAMES.DANGER}
name={IconName.Danger}
className="set-approval-for-all-warning__content__header__warning-icon"
/>
<Typography

4
ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js
View File

@ -17,7 +17,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 SignatureRequestOriginalWarning = ({
senderAddress,
@ -36,7 +36,7 @@ const SignatureRequestOriginalWarning = ({
className="signature-request-warning__content__header"
>
<Icon
name={ICON_NAMES.DANGER}
name={IconName.Danger}
color={IconColor.errorDefault}
className="signature-request-warning__content__header__warning-icon"
/>

4
ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js
View File

@ -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}
>
<Icon name={ICON_NAMES.DANGER} color={Color.errorInverse} />
<Icon name={IconName.Danger} color={Color.errorInverse} />
</Box>
);
};

10
ui/components/app/tab-bar/tab-bar.js
View File

@ -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) => {
<div className="tab-bar__tab__content__title">{content}</div>
</div>
<Icon
name={ICON_NAMES.ARROW_RIGHT}
size={ICON_SIZES.SM}
name={IconName.ArrowRight}
size={IconSize.Sm}
className="tab-bar__tab__caret"
/>
</button>

8
ui/components/app/tab-bar/tab-bar.stories.js
View File

@ -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 name={ICON_NAMES.SETTING} />,
icon: <Icon name={IconName.Setting} />,
content: 'General',
key: 'general',
},
{
icon: <Icon name={ICON_NAMES.BOOK} />,
icon: <Icon name={IconName.Book} />,
content: 'Contacts',
key: 'contacts',
},
@ -39,7 +39,7 @@ export default {
key: 'securityAndPrivacy',
},
{
icon: <Icon name={ICON_NAMES.NOTIFICATION} />,
icon: <Icon name={IconName.Notification} />,
content: 'Alerts',
key: 'alerts',
},

24
ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
View File

@ -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 (
<div className={classnames('transaction-activity-log-icon', className)}>
{icon ? (
<Icon name={icon} color={Color.iconDefault} size={ICON_SIZES.SM} />
<Icon name={icon} color={Color.iconDefault} size={IconSize.Sm} />
) : null}
</div>
);

7
ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js
View File

@ -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 }) => {
>
<div className="copy-raw-data__icon">
<Icon
name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
name={copied ? IconName.CopySuccess : IconName.Copy}
color={IconColor.iconDefault}
/>
</div>

21
ui/components/app/wallet-overview/eth-overview.js
View File

@ -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 }) => {
<>
<IconButton
className="eth-overview__button"
Icon={
<Icon name={ICON_NAMES.ADD} color={IconColor.primaryInverse} />
}
Icon={<Icon name={IconName.Add} color={IconColor.primaryInverse} />}
disabled={!isBuyableChain}
data-testid="eth-overview-buy"
label={t('buy')}
@ -170,7 +169,7 @@ const EthOverview = ({ className }) => {
data-testid="eth-overview-send"
Icon={
<Icon
name={ICON_NAMES.ARROW_2_UP_RIGHT}
name={IconName.Arrow2UpRight}
color={IconColor.primaryInverse}
/>
}
@ -197,7 +196,7 @@ const EthOverview = ({ className }) => {
disabled={!isSwapsChain}
Icon={
<Icon
name={ICON_NAMES.SWAP_HORIZONTAL}
name={IconName.SwapHorizontal}
color={IconColor.primaryInverse}
/>
}
@ -239,7 +238,7 @@ const EthOverview = ({ className }) => {
disabled={!isBridgeChain}
data-testid="eth-overview-bridge"
Icon={
<Icon name={ICON_NAMES.BRIDGE} color={IconColor.primaryInverse} />
<Icon name={IconName.Bridge} color={IconColor.primaryInverse} />
}
label={t('bridge')}
onClick={() => {

15
ui/components/app/wallet-overview/token-overview.js
View File

@ -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 }) => {
<>
<IconButton
className="token-overview__button"
Icon={
<Icon name={ICON_NAMES.ADD} color={IconColor.primaryInverse} />
}
Icon={<Icon name={IconName.Add} color={IconColor.primaryInverse} />}
label={t('buy')}
data-testid="token-overview-buy"
onClick={() => {
@ -139,7 +137,7 @@ const TokenOverview = ({ className, token }) => {
}}
Icon={
<Icon
name={ICON_NAMES.ARROW_2_UP_RIGHT}
name={IconName.Arrow2UpRight}
color={IconColor.primaryInverse}
/>
}
@ -152,7 +150,7 @@ const TokenOverview = ({ className, token }) => {
disabled={!isSwapsChain}
Icon={
<Icon
name={ICON_NAMES.SWAP_HORIZONTAL}
name={IconName.SwapHorizontal}
color={IconColor.primaryInverse}
/>
}
@ -201,10 +199,7 @@ const TokenOverview = ({ className, token }) => {
<IconButton
className="eth-overview__button"
Icon={
<Icon
name={ICON_NAMES.DIAGRAM}
color={IconColor.primaryInverse}
/>
<Icon name={IconName.Diagram} color={IconColor.primaryInverse} />
}
label={t('portfolio')}
data-testid="home__portfolio-site"

6
ui/components/component-library/avatar-base/avatar-base.js
View File

@ -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
*/

5
ui/components/component-library/avatar-icon/avatar-icon.js
View File

@ -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
*/