From 10be6fcfebd612f033fda4030b6d33d3c06a1f2a Mon Sep 17 00:00:00 2001 From: David Walsh Date: Thu, 9 Feb 2023 10:21:51 -0600 Subject: [PATCH] UX: Update block explorer icon (#17562) * 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 --- .../contract-details-modal.js | 178 +++++++++--------- .../modals/contract-details-modal/index.scss | 12 -- .../contract-token-values.js | 77 ++++---- .../ui/contract-token-values/index.scss | 17 -- ui/components/ui/icon/README.mdx | 10 - ui/components/ui/icon/icon-block-explorer.js | 48 ----- ui/components/ui/icon/icon.stories.js | 8 - ui/components/ui/ui-components.scss | 1 - 8 files changed, 124 insertions(+), 227 deletions(-) delete mode 100644 ui/components/ui/contract-token-values/index.scss delete mode 100644 ui/components/ui/icon/icon-block-explorer.js diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js index bc50d1054..71fd19e16 100644 --- a/ui/components/app/modals/contract-details-modal/contract-details-modal.js +++ b/ui/components/app/modals/contract-details-modal/contract-details-modal.js @@ -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({ )} - - + handleCopyTokenAddress(tokenAddress)} + color={Color.iconMuted} + ariaLabel={ copiedTokenAddress ? t('copiedExclamation') : t('copyToClipboard') } - > - handleCopyTokenAddress(tokenAddress)} - color={Color.iconMuted} - /> - - - - - - - + /> + + + { + const blockExplorerTokenLink = getAccountLink( + tokenAddress, + chainId, + { + blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null, + }, + null, + ); + global.platform.openTab({ + url: blockExplorerTokenLink, + }); + }} + ariaLabel={t('openInBlockExplorer')} + /> + @@ -253,53 +252,52 @@ export default function ContractDetailsModal({ )} - - + handleCopyToAddress(toAddress)} + color={Color.iconMuted} + ariaLabel={ + copiedTokenAddress ? t('copiedExclamation') : t('copyToClipboard') } - > - handleCopyToAddress(toAddress)} - color={Color.iconMuted} - /> - - - - - - - + /> + + + { + const blockExplorerTokenLink = getAccountLink( + toAddress, + chainId, + { + blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null, + }, + null, + ); + global.platform.openTab({ + url: blockExplorerTokenLink, + }); + }} + ariaLabel={t('openInBlockExplorer')} + /> + diff --git a/ui/components/app/modals/contract-details-modal/index.scss b/ui/components/app/modals/contract-details-modal/index.scss index 1180406c3..9b0a0670a 100644 --- a/ui/components/app/modals/contract-details-modal/index.scss +++ b/ui/components/app/modals/contract-details-modal/index.scss @@ -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; - } - } } } } diff --git a/ui/components/ui/contract-token-values/contract-token-values.js b/ui/components/ui/contract-token-values/contract-token-values.js index ebe16e52f..4fee27fd2 100644 --- a/ui/components/ui/contract-token-values/contract-token-values.js +++ b/ui/components/ui/contract-token-values/contract-token-values.js @@ -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 ( - - - + {tokenName} - - - handleCopy(address)} - /> - - - - - - - + + handleCopy(address)} + ariaLabel={copied ? t('copiedExclamation') : t('copyToClipboard')} + /> + + + { + const blockExplorerTokenLink = getAccountLink( + address, + chainId, + { + blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null, + }, + null, + ); + global.platform.openTab({ + url: blockExplorerTokenLink, + }); + }} + ariaLabel={t('openInBlockExplorer')} + /> + ); } diff --git a/ui/components/ui/contract-token-values/index.scss b/ui/components/ui/contract-token-values/index.scss deleted file mode 100644 index 85c1a6200..000000000 --- a/ui/components/ui/contract-token-values/index.scss +++ /dev/null @@ -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; - } - } -} diff --git a/ui/components/ui/icon/README.mdx b/ui/components/ui/icon/README.mdx index c2a05ed21..7b8ab0711 100644 --- a/ui/components/ui/icon/README.mdx +++ b/ui/components/ui/icon/README.mdx @@ -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 - -## IconBlockExplorer - - - - - - \ No newline at end of file diff --git a/ui/components/ui/icon/icon-block-explorer.js b/ui/components/ui/icon/icon-block-explorer.js deleted file mode 100644 index 827bb647f..000000000 --- a/ui/components/ui/icon/icon-block-explorer.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const IconBlockExplorer = ({ - size = 24, - color = 'currentColor', - ariaLabel, - className, - onClick, -}) => ( - - - -); - -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; diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js index 04b51d1f7..79ff63b2e 100644 --- a/ui/components/ui/icon/icon.stories.js +++ b/ui/components/ui/icon/icon.stories.js @@ -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) => ( } /> } /> } /> - } /> ; -IconBlockExplorerStory.args = { - size: 40, -}; -IconBlockExplorerStory.storyName = 'IconBlockExplorer'; diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss index f0786f813..7ca7624fe 100644 --- a/ui/components/ui/ui-components.scss +++ b/ui/components/ui/ui-components.scss @@ -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';