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

UX: Update block explorer icon (#17562)

Browse Source 
* UX: Update block explorer icon

* Removing unneeded CSS and some HTML bloat

* Removing unneeded className

* Removing unneeded CSS and reducing HTML bloat for ContractTokenValues

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
David Walsh 2023-02-09 10:21:51 -06:00 committed by GitHub
parent 58cd3deed5
commit 10be6fcfeb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 124 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,6 @@ import { getAccountLink } from '@metamask/etherscan-link';
import { useSelector } from 'react-redux';
import classnames from 'classnames';
import Box from '../../../ui/box';
import IconBlockExplorer from '../../../ui/icon/icon-block-explorer';
import Button from '../../../ui/button/button.component';
import Tooltip from '../../../ui/tooltip/tooltip';
import { useI18nContext } from '../../../../hooks/useI18nContext';
@ -16,12 +15,12 @@ import {
FONT_WEIGHT,
TypographyVariant,
DISPLAY,
JustifyContent,
Size,
BorderStyle,
BorderColor,
TextColor,
Color,
AlignItems,
} from '../../../../helpers/constants/design-system';
import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
import UrlIcon from '../../../ui/url-icon/url-icon';
@ -135,56 +134,56 @@ export default function ContractDetailsModal({
)}
</Box>
<Box
justifyContent={JustifyContent.flexEnd}
className="contract-details-modal__content__contract__buttons"
alignItems={AlignItems.center}
marginLeft="auto"
marginRight={4}
gap={2}
>
<Box marginTop={4} marginRight={5}>
<Tooltip
position="top"
title={
<Tooltip
position="top"
title={
copiedTokenAddress
? t('copiedExclamation')
: t('copyToClipboard')
}
>
<ButtonIcon
display={DISPLAY.FLEX}
iconName={
copiedTokenAddress
? ICON_NAMES.COPY_SUCCESS
: ICON_NAMES.COPY
}
onClick={() => handleCopyTokenAddress(tokenAddress)}
color={Color.iconMuted}
ariaLabel={
copiedTokenAddress
? t('copiedExclamation')
: t('copyToClipboard')
}
>
<ButtonIcon
iconName={
copiedTokenAddress
? ICON_NAMES.COPY_SUCCESS
: ICON_NAMES.COPY
}
onClick={() => handleCopyTokenAddress(tokenAddress)}
color={Color.iconMuted}
/>
</Tooltip>
</Box>
<Box marginTop={5} marginRight={5}>
<Tooltip position="top" title={t('openInBlockExplorer')}>
<Button
className="contract-details-modal__content__contract__buttons__block-explorer"
type="link"
onClick={() => {
const blockExplorerTokenLink = getAccountLink(
tokenAddress,
chainId,
{
blockExplorerUrl:
rpcPrefs?.blockExplorerUrl ?? null,
},
null,
);
global.platform.openTab({
url: blockExplorerTokenLink,
});
}}
>
<IconBlockExplorer
size={16}
color="var(--color-icon-muted)"
/>
</Button>
</Tooltip>
</Box>
/>
</Tooltip>
<Tooltip position="top" title={t('openInBlockExplorer')}>
<ButtonIcon
display={DISPLAY.FLEX}
iconName={ICON_NAMES.EXPORT}
color={Color.iconMuted}
onClick={() => {
const blockExplorerTokenLink = getAccountLink(
tokenAddress,
chainId,
{
blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
},
null,
);
global.platform.openTab({
url: blockExplorerTokenLink,
});
}}
ariaLabel={t('openInBlockExplorer')}
/>
</Tooltip>
</Box>
</Box>
</>
@ -253,53 +252,52 @@ export default function ContractDetailsModal({
)}
</Box>
<Box
justifyContent={JustifyContent.flexEnd}
className="contract-details-modal__content__contract__buttons"
alignItems={AlignItems.center}
marginLeft="auto"
marginRight={4}
gap={2}
>
<Box marginTop={4} marginRight={5}>
<Tooltip
position="top"
title={
copiedToAddress
<Tooltip
position="top"
title={
copiedToAddress ? t('copiedExclamation') : t('copyToClipboard')
}
>
<ButtonIcon
display={DISPLAY.FLEX}
iconName={
copiedToAddress ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
}
onClick={() => handleCopyToAddress(toAddress)}
color={Color.iconMuted}
ariaLabel={
copiedTokenAddress
? t('copiedExclamation')
: t('copyToClipboard')
}
>
<ButtonIcon
iconName={
copiedToAddress ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
}
onClick={() => handleCopyToAddress(toAddress)}
color={Color.iconMuted}
/>
</Tooltip>
</Box>
<Box marginTop={5} marginRight={5}>
<Tooltip position="top" title={t('openInBlockExplorer')}>
<Button
className="contract-details-modal__content__contract__buttons__block-explorer"
type="link"
onClick={() => {
const blockExplorerTokenLink = getAccountLink(
toAddress,
chainId,
{
blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
},
null,
);
global.platform.openTab({
url: blockExplorerTokenLink,
});
}}
>
<IconBlockExplorer
size={16}
color="var(--color-icon-muted)"
/>
</Button>
</Tooltip>
</Box>
/>
</Tooltip>
<Tooltip position="top" title={t('openInBlockExplorer')}>
<ButtonIcon
display={DISPLAY.FLEX}
iconName={ICON_NAMES.EXPORT}
color={Color.iconMuted}
onClick={() => {
const blockExplorerTokenLink = getAccountLink(
toAddress,
chainId,
{
blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
},
null,
);
global.platform.openTab({
url: blockExplorerTokenLink,
});
}}
ariaLabel={t('openInBlockExplorer')}
/>
</Tooltip>
</Box>
</Box>
</Box>

12
ui/components/app/modals/contract-details-modal/index.scss
View File

@ -15,18 +15,6 @@
&__identicon-for-unknown-contact {
margin: 16px;
}
&__buttons {
flex-grow: 1;
&__copy.btn-link {
padding: 0;
}
&__block-explorer.btn-link {
padding: 0;
}
}
}
}
}

77
ui/components/ui/contract-token-values/contract-token-values.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { getAccountLink } from '@metamask/etherscan-link';
import IconBlockExplorer from '../icon/icon-block-explorer';
import Box from '../box/box';
import Tooltip from '../tooltip/tooltip';
import { useI18nContext } from '../../../hooks/useI18nContext';
@ -14,8 +13,8 @@ import {
AlignItems,
JustifyContent,
TextColor,
Color,
} from '../../../helpers/constants/design-system';
import Button from '../button';
import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
import { ButtonIcon, ICON_NAMES } from '../../component-library';
@ -30,14 +29,13 @@ export default function ContractTokenValues({
return (
<Box
className="contract-token-values"
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className="contract-token-values"
gap={2}
>
<Box marginRight={2}>
<Identicon address={address} diameter={24} />
</Box>
<Identicon address={address} diameter={24} />
<Typography
variant={TypographyVariant.H2}
fontWeight={FONT_WEIGHT.BOLD}
@ -47,41 +45,38 @@ export default function ContractTokenValues({
>
{tokenName}
</Typography>
<Box className="contract-token-values__copy-address">
<Tooltip
position="top"
title={copied ? t('copiedExclamation') : t('copyToClipboard')}
>
<ButtonIcon
iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
className="contract-token-values__copy-address__button"
onClick={() => handleCopy(address)}
/>
</Tooltip>
</Box>
<Box className="contract-token-values__block-explorer">
<Tooltip position="top" title={t('openInBlockExplorer')}>
<Button
type="link"
className="contract-token-values__block-explorer__button"
onClick={() => {
const blockExplorerTokenLink = getAccountLink(
address,
chainId,
{
blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
},
null,
);
global.platform.openTab({
url: blockExplorerTokenLink,
});
}}
>
<IconBlockExplorer size={24} color="var(--color-icon-muted)" />
</Button>
</Tooltip>
</Box>
<Tooltip
position="top"
title={copied ? t('copiedExclamation') : t('copyToClipboard')}
>
<ButtonIcon
iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
color={Color.iconMuted}
onClick={() => handleCopy(address)}
ariaLabel={copied ? t('copiedExclamation') : t('copyToClipboard')}
/>
</Tooltip>
<Tooltip position="top" title={t('openInBlockExplorer')}>
<ButtonIcon
display={DISPLAY.FLEX}
iconName={ICON_NAMES.EXPORT}
color={Color.iconMuted}
onClick={() => {
const blockExplorerTokenLink = getAccountLink(
address,
chainId,
{
blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
},
null,
);
global.platform.openTab({
url: blockExplorerTokenLink,
});
}}
ariaLabel={t('openInBlockExplorer')}
/>
</Tooltip>
</Box>
);
}

17
ui/components/ui/contract-token-values/index.scss
View File

@ -1,17 +0,0 @@
.contract-token-values {
&__copy-address {
margin-inline-start: 8px;
&__button {
padding: 0;
}
}
&__block-explorer {
margin-inline-start: 8px;
&__button {
padding: 0;
}
}
}

10
ui/components/ui/icon/README.mdx
View File

@ -11,8 +11,6 @@ import SendIcon from './send-icon.component';
import Sign from './sign-icon.component';
import SunCheck from './sun-check-icon.component';
import Swap from './swap-icon-for-list.component';
import IconBlockExplorer from './icon-block-explorer';
# Icon
@ -180,11 +178,3 @@ Use the `className` prop to add an additional class to the icon. This additional
</Canvas>
<ArgsTable of={Preloader} />
## IconBlockExplorer
<Canvas>
<Story id="components-ui-icon--icon-block-explorer-story" />
</Canvas>
<ArgsTable of={IconBlockExplorer} />

48
ui/components/ui/icon/icon-block-explorer.js
View File

@ -1,48 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
const IconBlockExplorer = ({
size = 24,
color = 'currentColor',
ariaLabel,
className,
onClick,
}) => (
<svg
width={size}
height={size}
fill={color}
className={className}
aria-label={ariaLabel}
onClick={onClick}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="m316 444l-106 0c-96 0-141-43-141-140l0-107c0-96 45-140 141-140l35 0c5 0 9 2 12 5 3 3 4 7 4 11 0 4-1 8-4 11-3 3-7 5-12 5l-35 0c-80 0-109 28-109 108l0 107c0 80 29 108 109 108l106 0c80 0 109-28 109-108l0-36c0-4 1-8 4-11 3-3 8-5 12-5 4 0 8 2 11 5 3 3 5 7 5 11l0 36c0 97-44 140-141 140z m-35-195c-4 0-9-2-12-5-3-3-4-7-4-11 0-4 1-8 4-11l133-133-47 0c-4 0-8-2-11-5-3-3-5-7-5-11 0-4 2-8 5-11 3-3 7-5 11-5l86 0c2 0 4 0 6 1 2 1 4 2 5 3 2 2 3 4 4 6 0 2 1 4 1 6l0 85c0 4-2 9-5 12-3 3-7 4-11 4-4 0-9-1-12-4-3-3-4-8-4-12l0-47-133 133c-3 3-7 5-11 5z" />
</svg>
);
IconBlockExplorer.propTypes = {
/**
* The size of the icon in pixels. Should follow 8px grid 16, 24, 32, etc
*/
size: PropTypes.number,
/**
* The color of the icon accepts design token css variables
*/
color: PropTypes.string,
/**
* An additional className to assign the Icon
*/
className: PropTypes.string,
/**
* The onClick handler
*/
onClick: PropTypes.func,
/**
* The aria-label of the icon for accessibility purposes
*/
ariaLabel: PropTypes.string,
};
export default IconBlockExplorer;

8
ui/components/ui/icon/icon.stories.js
View File

@ -35,7 +35,6 @@ import IconEye from './icon-eye';
import IconEyeSlash from './icon-eye-slash';
import IconTokenSearch from './icon-token-search';
import SearchIcon from './search-icon';
import IconBlockExplorer from './icon-block-explorer';
const validColors = [
'var(--color-icon-default)',
@ -128,7 +127,6 @@ export const DefaultStory = (args) => (
<IconItem Component={<IconCog {...args} />} />
<IconItem Component={<IconTokenSearch {...args} />} />
<IconItem Component={<SearchIcon {...args} />} />
<IconItem Component={<IconBlockExplorer {...args} />} />
</div>
</Box>
<Typography
@ -282,9 +280,3 @@ PreloaderStory.args = {
size: 40,
};
PreloaderStory.storyName = 'Preloader';
export const IconBlockExplorerStory = (args) => <IconBlockExplorer {...args} />;
IconBlockExplorerStory.args = {
size: 40,
};
IconBlockExplorerStory.storyName = 'IconBlockExplorer';

1
ui/components/ui/ui-components.scss
View File

@ -61,7 +61,6 @@
@import 'update-nickname-popover/index';
@import 'disclosure/disclosure';
@import 'deprecated-test-networks/index.scss';
@import 'contract-token-values/index.scss';
@import 'nft-info/index.scss';
@import 'nft-collection-image/index';