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

Update multichain Icon imports (#18536)

Browse Source 
* Update multichain Icon imports

* replace ButtonIcon with updated version

* Buttons with Icon TODO added

* update header to use TS version Icon
This commit is contained in:
Garrett Bear 2023-04-13 15:24:47 -07:00 committed by GitHub
parent 8becb57d9e
commit e09028b4e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 42 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/components/multichain/account-list-item-menu/account-list-item-menu.js
View File

@ -12,8 +12,7 @@ import {
} from '../../../selectors'; } from '../../../selectors';
import { NETWORKS_ROUTE } from '../../../helpers/constants/routes'; import { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
import { Menu, MenuItem } from '../../ui/menu'; import { Menu, MenuItem } from '../../ui/menu';
import { Text } from '../../component-library'; import { Text, IconName } from '../../component-library';
import { ICON_NAMES } from '../../component-library/icon/deprecated';
import { import {
MetaMetricsEventCategory, MetaMetricsEventCategory,
MetaMetricsEventLinkType, MetaMetricsEventLinkType,
@ -74,7 +73,7 @@ export const AccountListItemMenu = ({
: openBlockExplorer : openBlockExplorer
} }
subtitle={blockExplorerUrlSubTitle || null} subtitle={blockExplorerUrlSubTitle || null}
iconName={ICON_NAMES.EXPORT} iconName={IconName.Export}
data-testid="account-list-menu-open-explorer" data-testid="account-list-menu-open-explorer"
> >
<Text variant={TextVariant.bodySm}>{t('viewOnExplorer')}</Text> <Text variant={TextVariant.bodySm}>{t('viewOnExplorer')}</Text>
@ -92,7 +91,7 @@ export const AccountListItemMenu = ({
onClose(); onClose();
closeMenu?.(); closeMenu?.();
}} }}
iconName={ICON_NAMES.SCAN_BARCODE} iconName={IconName.ScanBarcode}
> >
<Text variant={TextVariant.bodySm}>{t('accountDetails')}</Text> <Text variant={TextVariant.bodySm}>{t('accountDetails')}</Text>
</MenuItem> </MenuItem>
@ -108,7 +107,7 @@ export const AccountListItemMenu = ({
); );
onClose(); onClose();
}} }}
iconName={ICON_NAMES.TRASH} iconName={IconName.Trash}
> >
<Text variant={TextVariant.bodySm}>{t('removeAccount')}</Text> <Text variant={TextVariant.bodySm}>{t('removeAccount')}</Text>
</MenuItem> </MenuItem>

12
ui/components/multichain/account-list-item/account-list-item.js
View File

@ -15,12 +15,10 @@ import {
AvatarFavicon, AvatarFavicon,
Tag, Tag,
ButtonLink, ButtonLink,
ButtonIcon,
IconName,
IconSize,
} from '../../component-library'; } from '../../component-library';
import { ButtonIcon } from '../../component-library/button-icon/deprecated';
import {
ICON_NAMES,
ICON_SIZES,
} from '../../component-library/icon/deprecated';
import { import {
Color, Color,
TEXT_ALIGN, TEXT_ALIGN,
@ -197,8 +195,8 @@ export const AccountListItem = ({
<div ref={ref}> <div ref={ref}>
<ButtonIcon <ButtonIcon
ariaLabel={`${identity.name} ${t('options')}`} ariaLabel={`${identity.name} ${t('options')}`}
iconName={ICON_NAMES.MORE_VERTICAL} iconName={IconName.MoreVertical}
size={ICON_SIZES.SM} size={IconSize.Sm}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setAccountOptionsMenuOpen(true); setAccountOptionsMenuOpen(true);

1
ui/components/multichain/account-list-menu/account-list-menu.js
View File

@ -5,6 +5,7 @@ import Fuse from 'fuse.js';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { ButtonLink, TextFieldSearch, Text } from '../../component-library'; 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 { ICON_NAMES } from '../../component-library/icon/deprecated';
import { AccountListItem } from '..'; import { AccountListItem } from '..';
import { import {

5
ui/components/multichain/account-picker/account-picker.js
View File

@ -5,9 +5,10 @@ import {
Button, Button,
AvatarAccount, AvatarAccount,
AvatarAccountVariant, AvatarAccountVariant,
Icon,
IconName,
Text, Text,
} from '../../component-library'; } from '../../component-library';
import { ICON_NAMES, Icon } from '../../component-library/icon/deprecated';
import { import {
AlignItems, AlignItems,
BackgroundColor, BackgroundColor,
@ -47,7 +48,7 @@ export const AccountPicker = ({ address, name, onClick }) => {
{name} {name}
</Text> </Text>
<Icon <Icon
name={ICON_NAMES.ARROW_DOWN} name={IconName.ArrowDown}
color={IconColor.iconDefault} color={IconColor.iconDefault}
size={Size.SM} size={Size.SM}
/> />

1
ui/components/multichain/address-copy-button/address-copy-button.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { ButtonBase } from '../../component-library'; 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 { ICON_NAMES } from '../../component-library/icon/deprecated';
import { import {
BackgroundColor, BackgroundColor,

13
ui/components/multichain/app-header/app-header.js
View File

@ -21,9 +21,14 @@ import {
JustifyContent, JustifyContent,
Size, Size,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { AvatarNetwork, Button, PickerNetwork } from '../../component-library'; import {
import { ButtonIcon } from '../../component-library/button-icon/deprecated'; AvatarNetwork,
import { ICON_NAMES } from '../../component-library/icon/deprecated'; Button,
ButtonIcon,
IconName,
PickerNetwork,
} from '../../component-library';
import { import {
getCurrentNetwork, getCurrentNetwork,
getOriginOfCurrentTab, getOriginOfCurrentTab,
@ -149,7 +154,7 @@ export const AppHeader = ({ onClick }) => {
width={BLOCK_SIZES.FULL} width={BLOCK_SIZES.FULL}
> >
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.MORE_VERTICAL} iconName={IconName.MoreVertical}
data-testid="account-options-menu-button" data-testid="account-options-menu-button"
ariaLabel="NEEDS NEW TRANSLATED LABEL" // TODO: Update the label ariaLabel="NEEDS NEW TRANSLATED LABEL" // TODO: Update the label
onClick={() => { onClick={() => {

14
ui/components/multichain/global-menu/global-menu.js
View File

@ -9,7 +9,7 @@ import {
} from '../../../helpers/constants/routes'; } from '../../../helpers/constants/routes';
import { lockMetamask } from '../../../store/actions'; import { lockMetamask } from '../../../store/actions';
import { useI18nContext } from '../../../hooks/useI18nContext'; 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 { Menu, MenuItem } from '../../ui/menu';
import { getEnvironmentType } from '../../../../app/scripts/lib/util'; import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app'; import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
@ -31,7 +31,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => {
return ( return (
<Menu anchorElement={anchorElement} onHide={closeMenu}> <Menu anchorElement={anchorElement} onHide={closeMenu}>
<MenuItem <MenuItem
iconName={ICON_NAMES.CONNECT} iconName={IconName.Connect}
onClick={() => { onClick={() => {
history.push(CONNECTED_ROUTE); history.push(CONNECTED_ROUTE);
trackEvent({ trackEvent({
@ -47,7 +47,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => {
{t('connectedSites')} {t('connectedSites')}
</MenuItem> </MenuItem>
<MenuItem <MenuItem
iconName={ICON_NAMES.DIAGRAM} iconName={IconName.Diagram}
onClick={() => { onClick={() => {
const portfolioUrl = process.env.PORTFOLIO_URL; const portfolioUrl = process.env.PORTFOLIO_URL;
global.platform.openTab({ global.platform.openTab({
@ -75,7 +75,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => {
</MenuItem> </MenuItem>
{getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN ? null : ( {getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN ? null : (
<MenuItem <MenuItem
iconName={ICON_NAMES.EXPAND} iconName={IconName.Expand}
onClick={() => { onClick={() => {
global.platform.openExtensionInBrowser(); global.platform.openExtensionInBrowser();
trackEvent({ trackEvent({
@ -93,7 +93,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => {
</MenuItem> </MenuItem>
)} )}
<MenuItem <MenuItem
iconName={ICON_NAMES.MESSAGE_QUESTION} iconName={IconName.MessageQuestion}
onClick={() => { onClick={() => {
global.platform.openTab({ url: SUPPORT_LINK }); global.platform.openTab({ url: SUPPORT_LINK });
trackEvent( trackEvent(
@ -117,7 +117,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => {
{t('support')} {t('support')}
</MenuItem> </MenuItem>
<MenuItem <MenuItem
iconName={ICON_NAMES.SETTING} iconName={IconName.Setting}
onClick={() => { onClick={() => {
history.push(SETTINGS_ROUTE); history.push(SETTINGS_ROUTE);
trackEvent({ trackEvent({
@ -133,7 +133,7 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => {
{t('settings')} {t('settings')}
</MenuItem> </MenuItem>
<MenuItem <MenuItem
iconName={ICON_NAMES.LOCK} iconName={IconName.Lock}
onClick={() => { onClick={() => {
dispatch(lockMetamask()); dispatch(lockMetamask());
history.push(DEFAULT_ROUTE); history.push(DEFAULT_ROUTE);

5
ui/components/multichain/multichain-connected-site-menu/multichain-connected-site-menu.js
View File

@ -13,8 +13,7 @@ import {
IconColor, IconColor,
Size, Size,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { BadgeWrapper } from '../../component-library'; import { BadgeWrapper, Icon, IconName } from '../../component-library';
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
import Box from '../../ui/box'; import Box from '../../ui/box';
import { getSelectedIdentity } from '../../../selectors'; import { getSelectedIdentity } from '../../../selectors';
import Tooltip from '../../ui/tooltip'; import Tooltip from '../../ui/tooltip';
@ -69,7 +68,7 @@ export const MultichainConnectedSiteMenu = ({
} }
> >
<Icon <Icon
name={ICON_NAMES.GLOBAL} name={IconName.Global}
size={Size.LG} size={Size.LG}
color={IconColor.iconDefault} color={IconColor.iconDefault}
/> />

1
ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js
View File

@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { ButtonLink } from '../../component-library'; 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 { ICON_NAMES } from '../../component-library/icon/deprecated';
import { import {
AlignItems, AlignItems,

11
ui/components/multichain/network-list-item/network-list-item.js
View File

@ -12,9 +12,12 @@ import {
TextColor, TextColor,
BLOCK_SIZES, BLOCK_SIZES,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { AvatarNetwork, ButtonLink } from '../../component-library'; import {
import { ButtonIcon } from '../../component-library/button-icon/deprecated'; AvatarNetwork,
import { ICON_NAMES } from '../../component-library/icon/deprecated'; ButtonIcon,
ButtonLink,
IconName,
} from '../../component-library';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
import Tooltip from '../../ui/tooltip/tooltip'; import Tooltip from '../../ui/tooltip/tooltip';
@ -68,7 +71,7 @@ export const NetworkListItem = ({
<ButtonIcon <ButtonIcon
className="multichain-network-list-item__delete" className="multichain-network-list-item__delete"
color={IconColor.errorDefault} color={IconColor.errorDefault}
iconName={ICON_NAMES.TRASH} iconName={IconName.Trash}
ariaLabel={t('deleteNetwork')} ariaLabel={t('deleteNetwork')}
size={Size.SM} size={Size.SM}
onClick={(e) => { onClick={(e) => {

5
ui/components/ui/menu/menu-item.js
View File

@ -2,8 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Text } from '../../component-library'; import { Text, Icon, IconSize } from '../../component-library';
import { Icon, ICON_SIZES } from '../../component-library/icon/deprecated';
import { TextVariant } from '../../../helpers/constants/design-system'; import { TextVariant } from '../../../helpers/constants/design-system';
const MenuItem = ({ const MenuItem = ({
@ -20,7 +19,7 @@ const MenuItem = ({
onClick={onClick} onClick={onClick}
> >
{iconName ? ( {iconName ? (
<Icon name={iconName} size={ICON_SIZES.SM} marginRight={2} /> <Icon name={iconName} size={IconSize.Sm} marginRight={2} />
) : null} ) : null}
<div> <div>
<div>{children}</div> <div>{children}</div>