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

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

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

@ -15,18 +15,6 @@
&__identicon-for-unknown-contact { &__identicon-for-unknown-contact {
margin: 16px; 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 React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { getAccountLink } from '@metamask/etherscan-link'; import { getAccountLink } from '@metamask/etherscan-link';
import IconBlockExplorer from '../icon/icon-block-explorer';
import Box from '../box/box'; import Box from '../box/box';
import Tooltip from '../tooltip/tooltip'; import Tooltip from '../tooltip/tooltip';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
@ -14,8 +13,8 @@ import {
AlignItems, AlignItems,
JustifyContent, JustifyContent,
TextColor, TextColor,
Color,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Button from '../button';
import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
import { ButtonIcon, ICON_NAMES } from '../../component-library'; import { ButtonIcon, ICON_NAMES } from '../../component-library';
@ -30,14 +29,13 @@ export default function ContractTokenValues({
return ( return (
<Box <Box
className="contract-token-values"
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
className="contract-token-values" gap={2}
> >
<Box marginRight={2}> <Identicon address={address} diameter={24} />
<Identicon address={address} diameter={24} />
</Box>
<Typography <Typography
variant={TypographyVariant.H2} variant={TypographyVariant.H2}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FONT_WEIGHT.BOLD}
@ -47,41 +45,38 @@ export default function ContractTokenValues({
> >
{tokenName} {tokenName}
</Typography> </Typography>
<Box className="contract-token-values__copy-address"> <Tooltip
<Tooltip position="top"
position="top" title={copied ? t('copiedExclamation') : t('copyToClipboard')}
title={copied ? t('copiedExclamation') : t('copyToClipboard')} >
> <ButtonIcon
<ButtonIcon iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY} color={Color.iconMuted}
className="contract-token-values__copy-address__button" onClick={() => handleCopy(address)}
onClick={() => handleCopy(address)} ariaLabel={copied ? t('copiedExclamation') : t('copyToClipboard')}
/> />
</Tooltip> </Tooltip>
</Box> <Tooltip position="top" title={t('openInBlockExplorer')}>
<Box className="contract-token-values__block-explorer"> <ButtonIcon
<Tooltip position="top" title={t('openInBlockExplorer')}> display={DISPLAY.FLEX}
<Button iconName={ICON_NAMES.EXPORT}
type="link" color={Color.iconMuted}
className="contract-token-values__block-explorer__button" onClick={() => {
onClick={() => { const blockExplorerTokenLink = getAccountLink(
const blockExplorerTokenLink = getAccountLink( address,
address, chainId,
chainId, {
{ blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null, },
}, null,
null, );
); global.platform.openTab({
global.platform.openTab({ url: blockExplorerTokenLink,
url: blockExplorerTokenLink, });
}); }}
}} ariaLabel={t('openInBlockExplorer')}
> />
<IconBlockExplorer size={24} color="var(--color-icon-muted)" /> </Tooltip>
</Button>
</Tooltip>
</Box>
</Box> </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 Sign from './sign-icon.component';
import SunCheck from './sun-check-icon.component'; import SunCheck from './sun-check-icon.component';
import Swap from './swap-icon-for-list.component'; import Swap from './swap-icon-for-list.component';
import IconBlockExplorer from './icon-block-explorer';
# Icon # Icon
@ -180,11 +178,3 @@ Use the `className` prop to add an additional class to the icon. This additional
</Canvas> </Canvas>
<ArgsTable of={Preloader} /> <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 IconEyeSlash from './icon-eye-slash';
import IconTokenSearch from './icon-token-search'; import IconTokenSearch from './icon-token-search';
import SearchIcon from './search-icon'; import SearchIcon from './search-icon';
import IconBlockExplorer from './icon-block-explorer';
const validColors = [ const validColors = [
'var(--color-icon-default)', 'var(--color-icon-default)',
@ -128,7 +127,6 @@ export const DefaultStory = (args) => (
<IconItem Component={<IconCog {...args} />} /> <IconItem Component={<IconCog {...args} />} />
<IconItem Component={<IconTokenSearch {...args} />} /> <IconItem Component={<IconTokenSearch {...args} />} />
<IconItem Component={<SearchIcon {...args} />} /> <IconItem Component={<SearchIcon {...args} />} />
<IconItem Component={<IconBlockExplorer {...args} />} />
</div> </div>
</Box> </Box>
<Typography <Typography
@ -282,9 +280,3 @@ PreloaderStory.args = {
size: 40, size: 40,
}; };
PreloaderStory.storyName = 'Preloader'; 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 'update-nickname-popover/index';
@import 'disclosure/disclosure'; @import 'disclosure/disclosure';
@import 'deprecated-test-networks/index.scss'; @import 'deprecated-test-networks/index.scss';
@import 'contract-token-values/index.scss';
@import 'nft-info/index.scss'; @import 'nft-info/index.scss';
@import 'nft-collection-image/index'; @import 'nft-collection-image/index';