m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

Update overview icons for buy, send, and swap (#17492)

Browse Source
This commit is contained in:
David Walsh 2023-01-31 08:47:43 -06:00 committed by GitHub
parent d057410762
commit 18a1beb3dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 30 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
development/ts-migration-dashboard/files-to-convert.json
View File

@ -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",

20
ui/components/app/wallet-overview/eth-overview.js
View File

@ -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 }) => {
<>
<IconButton
className="eth-overview__button"
Icon={BuyIcon}
Icon={
<Icon name={ICON_NAMES.CARD} color={COLORS.PRIMARY_INVERSE} />
}
disabled={!isBuyableChain}
label={t('buy')}
onClick={() => {
@ -127,7 +128,9 @@ const EthOverview = ({ className }) => {
<IconButton
className="eth-overview__button"
data-testid="eth-overview-send"
Icon={SendIcon}
Icon={
<Icon name={ICON_NAMES.SEND_1} color={COLORS.PRIMARY_INVERSE} />
}
label={t('send')}
onClick={() => {
trackEvent({
@ -149,7 +152,12 @@ const EthOverview = ({ className }) => {
<IconButton
className="eth-overview__button"
disabled={!isSwapsChain}
Icon={SwapIcon}
Icon={
<Icon
name={ICON_NAMES.SWAP_HORIZONTAL}
color={COLORS.PRIMARY_INVERSE}
/>
}
onClick={() => {
if (isSwapsChain) {
trackEvent({

22
ui/components/app/wallet-overview/token-overview.js
View File

@ -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 && (
<IconButton
className="token-overview__button"
Icon={BuyIcon}
Icon={
<Icon name={ICON_NAMES.CARD} color={COLORS.PRIMARY_INVERSE} />
}
label={t('buy')}
onClick={() => {
trackEvent({
@ -157,7 +158,9 @@ const TokenOverview = ({ className, token }) => {
}
}
}}
Icon={SendIcon}
Icon={
<Icon name={ICON_NAMES.SEND_1} color={COLORS.PRIMARY_INVERSE} />
}
label={t('send')}
data-testid="eth-overview-send"
disabled={token.isERC721}
@ -165,7 +168,12 @@ const TokenOverview = ({ className, token }) => {
<IconButton
className="token-overview__button"
disabled={!isSwapsChain}
Icon={SwapIcon}
Icon={
<Icon
name={ICON_NAMES.SWAP_HORIZONTAL}
color={COLORS.PRIMARY_INVERSE}
/>
}
onClick={() => {
if (isSwapsChain) {
trackEvent({

4
ui/components/ui/icon-button/icon-button.js
View File

@ -25,9 +25,7 @@ export default function IconButton({
>
{renderWrapper(
<>
<div className="icon-button__circle">
<Icon />
</div>
<div className="icon-button__circle">{Icon}</div>
<span>{label}</span>
</>,
)}

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

@ -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';

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

@ -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) => (
<IconItem Component={<InfoIconInverted {...args} />} />
<IconItem Component={<SunCheck {...args} />} />
<IconItem Component={<SunCheck {...args} reverseColors />} />
<IconItem Component={<BuyIcon {...args} />} />
<IconItem Component={<SwapIcon {...args} />} />
<IconItem Component={<SwapIconComponent {...args} />} />
<IconItem Component={<CopyIcon {...args} />} />
<IconItem Component={<Preloader {...args} />} />
<IconItem Component={<IconEye {...args} />} />
@ -287,30 +281,6 @@ SunCheckStory.argTypes = {
};
SunCheckStory.storyName = 'SunCheck';
export const BuyIconStory = (args) => <BuyIcon {...args} />;
BuyIconStory.args = {
width: '17',
height: '21',
fill: 'var(--color-primary-default)',
};
BuyIconStory.storyName = 'BuyIcon';
export const SwapIconStory = (args) => <SwapIcon {...args} />;
SwapIconStory.args = {
width: '17',
height: '21',
fill: 'var(--color-primary-default)',
};
SwapIconStory.storyName = 'SwapIcon';
export const SendSwapIconStory = (args) => <SwapIconComponent {...args} />;
SendSwapIconStory.args = {
width: '17',
height: '17',
color: 'var(--color-icon-default)',
};
SendSwapIconStory.storyName = 'Send/SwapIcon';
export const CopyIconStory = (args) => <CopyIcon {...args} />;
CopyIconStory.args = {
size: 40,

40
ui/components/ui/icon/swap-icon.component.js
View File

@ -1,40 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
export default function SwapIcon({
width = '17',
height = '17',
color = 'white',
}) {
return (
<svg
width={width}
height={height}
viewBox={`0 0 ${width} ${height}`}
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.1714 9.66035V12.3786H4.68253C4.51685 12.3786 4.38253 12.2443 4.38253 12.0786V10.5478C4.38253 10.1888 3.94605 10.0116 3.69574 10.269L0.978328 13.0641C0.827392 13.2193 0.827392 13.4665 0.978328 13.6217L3.69573 16.4168C3.94604 16.6742 4.38253 16.497 4.38253 16.1379V14.6072C4.38253 14.4415 4.51685 14.3072 4.68253 14.3072H14.9992H15.0492V14.2572V9.66035C15.0492 9.14182 14.6288 8.72146 14.1103 8.72146C13.5918 8.72146 13.1714 9.14182 13.1714 9.66035ZM2.55476 2.55003H2.50476V2.60003V7.19686C2.50476 7.71539 2.92511 8.13575 3.44364 8.13575C3.96218 8.13575 4.38253 7.71539 4.38253 7.19686V4.70619C4.38253 4.5805 4.48443 4.47861 4.61012 4.47861H12.8714C13.0371 4.47861 13.1714 4.61292 13.1714 4.77861V6.30937C13.1714 6.66845 13.6079 6.84566 13.8582 6.5882L16.5756 3.79315C16.7266 3.6379 16.7266 3.39074 16.5756 3.23549L13.8582 0.440443C13.6079 0.182981 13.1714 0.360188 13.1714 0.719273V2.25004C13.1714 2.41572 13.0371 2.55003 12.8714 2.55003H2.55476Z"
fill={color}
stroke={color}
strokeWidth="0.1"
/>
</svg>
);
}
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,
};