From 18a1beb3ddac36850474b5f1e100402b1fe0b288 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Tue, 31 Jan 2023 08:47:43 -0600 Subject: [PATCH] Update overview icons for buy, send, and swap (#17492) --- .../files-to-convert.json | 3 -- .../app/wallet-overview/eth-overview.js | 20 +++++++--- .../app/wallet-overview/token-overview.js | 22 ++++++---- ui/components/ui/icon-button/icon-button.js | 4 +- ui/components/ui/icon/README.mdx | 3 -- ui/components/ui/icon/icon.stories.js | 30 -------------- ui/components/ui/icon/swap-icon.component.js | 40 ------------------- 7 files changed, 30 insertions(+), 92 deletions(-) delete mode 100644 ui/components/ui/icon/swap-icon.component.js diff --git a/development/ts-migration-dashboard/files-to-convert.json b/development/ts-migration-dashboard/files-to-convert.json index d6e65d860dba..2d57c8a12f3d 100644 --- a/development/ts-migration-dashboard/files-to-convert.json +++ b/development/ts-migration-dashboard/files-to-convert.json @@ -902,8 +902,6 @@ "ui/components/ui/icon/info-icon-inverted.component.js", "ui/components/ui/icon/info-icon.component.js", "ui/components/ui/icon/interaction-icon.component.js", - "ui/components/ui/icon/overview-buy-icon.component.js", - "ui/components/ui/icon/overview-send-icon.component.js", "ui/components/ui/icon/preloader/index.js", "ui/components/ui/icon/preloader/preloader-icon.component.js", "ui/components/ui/icon/receive-icon.component.js", @@ -912,7 +910,6 @@ "ui/components/ui/icon/sign-icon.component.js", "ui/components/ui/icon/sun-check-icon.component.js", "ui/components/ui/icon/swap-icon-for-list.component.js", - "ui/components/ui/icon/swap-icon.component.js", "ui/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js", "ui/components/ui/identicon/blockieIdenticon/index.js", "ui/components/ui/identicon/identicon.component.js", diff --git a/ui/components/app/wallet-overview/eth-overview.js b/ui/components/app/wallet-overview/eth-overview.js index 06ecad8f8576..5a46409e1c7f 100644 --- a/ui/components/app/wallet-overview/eth-overview.js +++ b/ui/components/app/wallet-overview/eth-overview.js @@ -23,9 +23,6 @@ import { getNativeCurrencyImage, getSelectedAccountCachedBalance, } from '../../../selectors/selectors'; -import SwapIcon from '../../ui/icon/swap-icon.component'; -import BuyIcon from '../../ui/icon/overview-buy-icon.component'; -import SendIcon from '../../ui/icon/overview-send-icon.component'; import { setSwapsFromToken } from '../../../ducks/swaps/swaps'; import IconButton from '../../ui/icon-button'; import { isHardwareKeyring } from '../../../helpers/utils/hardware'; @@ -35,6 +32,8 @@ import Spinner from '../../ui/spinner'; import { startNewDraftTransaction } from '../../../ducks/send'; import { AssetType } from '../../../../shared/constants/transaction'; import DepositPopover from '../deposit-popover'; +import { Icon, ICON_NAMES } from '../../component-library'; +import { COLORS } from '../../../helpers/constants/design-system'; import WalletOverview from './wallet-overview'; const EthOverview = ({ className }) => { @@ -109,7 +108,9 @@ const EthOverview = ({ className }) => { <> + } disabled={!isBuyableChain} label={t('buy')} onClick={() => { @@ -127,7 +128,9 @@ const EthOverview = ({ className }) => { + } label={t('send')} onClick={() => { trackEvent({ @@ -149,7 +152,12 @@ const EthOverview = ({ className }) => { + } onClick={() => { if (isSwapsChain) { trackEvent({ diff --git a/ui/components/app/wallet-overview/token-overview.js b/ui/components/app/wallet-overview/token-overview.js index e057f038374c..ee4e2dbc96d6 100644 --- a/ui/components/app/wallet-overview/token-overview.js +++ b/ui/components/app/wallet-overview/token-overview.js @@ -25,10 +25,6 @@ import { getIsBuyableWyreToken, } from '../../../selectors/selectors'; -import BuyIcon from '../../ui/icon/overview-buy-icon.component'; -import SwapIcon from '../../ui/icon/swap-icon.component'; -import SendIcon from '../../ui/icon/overview-send-icon.component'; - import IconButton from '../../ui/icon-button'; import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys'; import { showModal } from '../../../store/actions'; @@ -36,6 +32,9 @@ import { MetaMetricsContext } from '../../../contexts/metametrics'; import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; import { AssetType } from '../../../../shared/constants/transaction'; import DepositPopover from '../deposit-popover'; + +import { Icon, ICON_NAMES } from '../../component-library'; +import { COLORS } from '../../../helpers/constants/design-system'; import WalletOverview from './wallet-overview'; const TokenOverview = ({ className, token }) => { @@ -115,7 +114,9 @@ const TokenOverview = ({ className, token }) => { {isBuyable && ( + } label={t('buy')} onClick={() => { trackEvent({ @@ -157,7 +158,9 @@ const TokenOverview = ({ className, token }) => { } } }} - Icon={SendIcon} + Icon={ + + } label={t('send')} data-testid="eth-overview-send" disabled={token.isERC721} @@ -165,7 +168,12 @@ const TokenOverview = ({ className, token }) => { + } onClick={() => { if (isSwapsChain) { trackEvent({ diff --git a/ui/components/ui/icon-button/icon-button.js b/ui/components/ui/icon-button/icon-button.js index dacd1ef25672..d29c6736ed3a 100644 --- a/ui/components/ui/icon-button/icon-button.js +++ b/ui/components/ui/icon-button/icon-button.js @@ -25,9 +25,7 @@ export default function IconButton({ > {renderWrapper( <> -
- -
+
{Icon}
{label} , )} diff --git a/ui/components/ui/icon/README.mdx b/ui/components/ui/icon/README.mdx index fd90bfeb16fd..d437c8223e00 100644 --- a/ui/components/ui/icon/README.mdx +++ b/ui/components/ui/icon/README.mdx @@ -2,7 +2,6 @@ import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import IconCaretLeft from './icon-caret-left.js'; import Approve from './approve-icon.component'; -import BuyIcon from './overview-buy-icon.component'; import CopyIcon from './copy-icon.component'; import InfoIcon from './info-icon.component'; import InfoIconInverted from './info-icon-inverted.component'; @@ -13,8 +12,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 SwapIcon from './overview-send-icon.component'; -import SwapIconComponent from './swap-icon.component'; import IconCopy from './icon-copy' import IconBlockExplorer from './icon-block-explorer'; diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js index 144e92cbcb25..e16175af212e 100644 --- a/ui/components/ui/icon/icon.stories.js +++ b/ui/components/ui/icon/icon.stories.js @@ -12,7 +12,6 @@ import Box from '../box'; import README from './README.mdx'; import Approve from './approve-icon.component'; -import BuyIcon from './overview-buy-icon.component'; import CopyIcon from './copy-icon.component'; import InfoIcon from './info-icon.component'; import InfoIconInverted from './info-icon-inverted.component'; @@ -23,8 +22,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 SwapIcon from './overview-send-icon.component'; -import SwapIconComponent from './swap-icon.component'; import IconCaretLeft from './icon-caret-left'; import IconCaretRight from './icon-caret-right'; import IconCaretDown from './icon-caret-down'; @@ -162,9 +159,6 @@ export const DefaultStory = (args) => ( } /> } /> } /> - } /> - } /> - } /> } /> } /> } /> @@ -287,30 +281,6 @@ SunCheckStory.argTypes = { }; SunCheckStory.storyName = 'SunCheck'; -export const BuyIconStory = (args) => ; -BuyIconStory.args = { - width: '17', - height: '21', - fill: 'var(--color-primary-default)', -}; -BuyIconStory.storyName = 'BuyIcon'; - -export const SwapIconStory = (args) => ; -SwapIconStory.args = { - width: '17', - height: '21', - fill: 'var(--color-primary-default)', -}; -SwapIconStory.storyName = 'SwapIcon'; - -export const SendSwapIconStory = (args) => ; -SendSwapIconStory.args = { - width: '17', - height: '17', - color: 'var(--color-icon-default)', -}; -SendSwapIconStory.storyName = 'Send/SwapIcon'; - export const CopyIconStory = (args) => ; CopyIconStory.args = { size: 40, diff --git a/ui/components/ui/icon/swap-icon.component.js b/ui/components/ui/icon/swap-icon.component.js deleted file mode 100644 index b55a68d38b3c..000000000000 --- a/ui/components/ui/icon/swap-icon.component.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -export default function SwapIcon({ - width = '17', - height = '17', - color = 'white', -}) { - return ( - - - - ); -} - -SwapIcon.propTypes = { - /** - * Width of the icon - */ - width: PropTypes.string, - /** - * Height of the icon - */ - height: PropTypes.string, - /** - * Color of the icon should be a valid design system color - */ - color: PropTypes.string, -};