Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Jan 31, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a95afc
Update overview icons for buy, send, and swap
darkwing Jan 27, 2023
12233b7
Progress
darkwing Jan 30, 2023
8d3a52f
Fix lint
darkwing Jan 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions development/ts-migration-dashboard/files-to-convert.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
20 changes: 14 additions & 6 deletions ui/components/app/wallet-overview/eth-overview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 }) => {
Expand Down Expand Up @@ -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={() => {
Expand All @@ -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({
Expand All @@ -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({
Expand Down
22 changes: 15 additions & 7 deletions ui/components/app/wallet-overview/token-overview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,16 @@ 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';
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 }) => {
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -157,15 +158,22 @@ 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}
/>
<IconButton
className="token-overview__button"
disabled={!isSwapsChain}
Icon={SwapIcon}
Icon={
<Icon
name={ICON_NAMES.SWAP_HORIZONTAL}
color={COLORS.PRIMARY_INVERSE}
/>
}
onClick={() => {
if (isSwapsChain) {
trackEvent({
Expand Down
4 changes: 1 addition & 3 deletions ui/components/ui/icon-button/icon-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>,
)}
Expand Down
3 changes: 0 additions & 3 deletions ui/components/ui/icon/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';

Expand Down
30 changes: 0 additions & 30 deletions ui/components/ui/icon/icon.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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} />} />
Expand Down Expand Up @@ -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,
Expand Down
40 changes: 0 additions & 40 deletions ui/components/ui/icon/swap-icon.component.js
View file
Open in desktop

This file was deleted.