2022-03-14 19:12:38 +01:00
|
|
|
import React, { useMemo, useContext } from 'react';
|
2021-02-04 19:15:23 +01:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import classnames from 'classnames';
|
|
|
|
import { useDispatch } from 'react-redux';
|
|
|
|
import { useHistory } from 'react-router-dom';
|
|
|
|
import Identicon from '../../ui/identicon';
|
|
|
|
import ListItem from '../../ui/list-item';
|
|
|
|
import Tooltip from '../../ui/tooltip';
|
|
|
|
import InfoIcon from '../../ui/icon/info-icon.component';
|
|
|
|
import Button from '../../ui/button';
|
|
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
2022-07-01 15:58:35 +02:00
|
|
|
import { startNewDraftTransaction } from '../../../ducks/send';
|
2021-02-04 19:15:23 +01:00
|
|
|
import { SEND_ROUTE } from '../../../helpers/constants/routes';
|
2023-02-16 14:26:14 +01:00
|
|
|
import { Color, SEVERITIES } from '../../../helpers/constants/design-system';
|
2022-01-19 19:42:41 +01:00
|
|
|
import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
|
2023-04-03 17:31:04 +02:00
|
|
|
import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
|
2023-01-18 15:47:29 +01:00
|
|
|
import { AssetType } from '../../../../shared/constants/transaction';
|
2022-04-01 21:11:12 +02:00
|
|
|
import { MetaMetricsContext } from '../../../contexts/metametrics';
|
2023-04-04 18:48:04 +02:00
|
|
|
import {
|
|
|
|
Icon,
|
|
|
|
ICON_NAMES,
|
|
|
|
ICON_SIZES,
|
|
|
|
} from '../../component-library/icon/deprecated';
|
2023-02-21 16:49:16 +01:00
|
|
|
import Box from '../../ui/box/box';
|
2020-06-05 20:36:40 +02:00
|
|
|
|
2020-05-13 22:41:15 +02:00
|
|
|
const AssetListItem = ({
|
|
|
|
className,
|
|
|
|
'data-testid': dataTestId,
|
|
|
|
iconClassName,
|
|
|
|
onClick,
|
|
|
|
tokenAddress,
|
2020-06-16 20:04:51 +02:00
|
|
|
tokenSymbol,
|
|
|
|
tokenDecimals,
|
2020-05-13 22:41:15 +02:00
|
|
|
tokenImage,
|
|
|
|
warning,
|
2020-06-03 19:50:12 +02:00
|
|
|
primary,
|
|
|
|
secondary,
|
2021-04-02 00:57:00 +02:00
|
|
|
identiconBorder,
|
2021-06-22 19:39:44 +02:00
|
|
|
isERC721,
|
2020-05-13 22:41:15 +02:00
|
|
|
}) => {
|
2021-02-04 19:15:23 +01:00
|
|
|
const t = useI18nContext();
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const history = useHistory();
|
2022-03-14 19:12:38 +01:00
|
|
|
const trackEvent = useContext(MetaMetricsContext);
|
2020-11-03 00:41:28 +01:00
|
|
|
const titleIcon = warning ? (
|
|
|
|
<Tooltip
|
|
|
|
wrapperClassName="asset-list-item__warning-tooltip"
|
|
|
|
interactive
|
|
|
|
position="bottom"
|
|
|
|
html={warning}
|
|
|
|
>
|
2021-02-01 19:10:19 +01:00
|
|
|
<InfoIcon severity={SEVERITIES.WARNING} />
|
2020-11-03 00:41:28 +01:00
|
|
|
</Tooltip>
|
2021-02-04 19:15:23 +01:00
|
|
|
) : null;
|
2020-06-05 20:36:40 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
const midContent = warning ? (
|
|
|
|
<>
|
2021-02-01 19:10:19 +01:00
|
|
|
<InfoIcon severity={SEVERITIES.WARNING} />
|
2020-11-03 00:41:28 +01:00
|
|
|
<div className="asset-list-item__warning">{warning}</div>
|
|
|
|
</>
|
2021-02-04 19:15:23 +01:00
|
|
|
) : null;
|
2020-06-05 20:36:40 +02:00
|
|
|
|
2020-06-16 20:04:51 +02:00
|
|
|
const sendTokenButton = useMemo(() => {
|
2020-08-13 01:02:44 +02:00
|
|
|
if (tokenAddress === null || tokenAddress === undefined) {
|
2021-02-04 19:15:23 +01:00
|
|
|
return null;
|
2020-06-16 20:04:51 +02:00
|
|
|
}
|
|
|
|
return (
|
|
|
|
<Button
|
|
|
|
type="link"
|
|
|
|
className="asset-list-item__send-token-button"
|
2022-01-19 19:42:41 +01:00
|
|
|
onClick={async (e) => {
|
2021-02-04 19:15:23 +01:00
|
|
|
e.stopPropagation();
|
2022-03-14 19:12:38 +01:00
|
|
|
trackEvent({
|
|
|
|
event: 'Clicked Send: Token',
|
2023-04-03 17:31:04 +02:00
|
|
|
category: MetaMetricsEventCategory.Navigation,
|
2022-03-14 19:12:38 +01:00
|
|
|
properties: {
|
|
|
|
action: 'Home',
|
|
|
|
legacy_event: true,
|
|
|
|
},
|
|
|
|
});
|
2022-01-19 19:42:41 +01:00
|
|
|
try {
|
|
|
|
await dispatch(
|
2022-07-01 15:58:35 +02:00
|
|
|
startNewDraftTransaction({
|
2023-01-18 15:47:29 +01:00
|
|
|
type: AssetType.token,
|
2022-01-19 19:42:41 +01:00
|
|
|
details: {
|
|
|
|
address: tokenAddress,
|
|
|
|
decimals: tokenDecimals,
|
|
|
|
symbol: tokenSymbol,
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
);
|
2021-06-23 23:35:25 +02:00
|
|
|
history.push(SEND_ROUTE);
|
2022-01-19 19:42:41 +01:00
|
|
|
} catch (err) {
|
|
|
|
if (!err.message.includes(INVALID_ASSET_TYPE)) {
|
|
|
|
throw err;
|
|
|
|
}
|
|
|
|
}
|
2020-06-16 20:04:51 +02:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
{t('sendSpecifiedTokens', [tokenSymbol])}
|
|
|
|
</Button>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-06-16 20:04:51 +02:00
|
|
|
}, [
|
|
|
|
tokenSymbol,
|
2022-03-14 19:12:38 +01:00
|
|
|
trackEvent,
|
2020-06-16 20:04:51 +02:00
|
|
|
tokenAddress,
|
|
|
|
tokenDecimals,
|
|
|
|
history,
|
|
|
|
t,
|
|
|
|
dispatch,
|
2021-02-04 19:15:23 +01:00
|
|
|
]);
|
2020-06-16 20:04:51 +02:00
|
|
|
|
2020-05-13 22:41:15 +02:00
|
|
|
return (
|
2020-06-03 19:50:12 +02:00
|
|
|
<ListItem
|
|
|
|
className={classnames('asset-list-item', className)}
|
2020-05-13 22:41:15 +02:00
|
|
|
data-testid={dataTestId}
|
2020-11-03 00:41:28 +01:00
|
|
|
title={
|
2020-11-05 19:05:41 +01:00
|
|
|
<button
|
|
|
|
className="asset-list-item__token-button"
|
2022-10-11 19:54:50 +02:00
|
|
|
data-testid="token-button"
|
2020-11-05 19:05:41 +01:00
|
|
|
onClick={onClick}
|
2020-11-05 23:16:24 +01:00
|
|
|
title={`${primary} ${tokenSymbol}`}
|
2020-11-05 19:05:41 +01:00
|
|
|
>
|
|
|
|
<h2>
|
|
|
|
<span className="asset-list-item__token-value">{primary}</span>
|
|
|
|
<span className="asset-list-item__token-symbol">{tokenSymbol}</span>
|
|
|
|
</h2>
|
|
|
|
</button>
|
2020-11-03 00:41:28 +01:00
|
|
|
}
|
2020-06-05 20:36:40 +02:00
|
|
|
titleIcon={titleIcon}
|
2021-06-24 01:28:49 +02:00
|
|
|
subtitle={secondary ? <h3 title={secondary}>{secondary}</h3> : null}
|
2020-05-13 22:41:15 +02:00
|
|
|
onClick={onClick}
|
2020-11-03 00:41:28 +01:00
|
|
|
icon={
|
2020-06-03 19:50:12 +02:00
|
|
|
<Identicon
|
|
|
|
className={iconClassName}
|
|
|
|
diameter={32}
|
|
|
|
address={tokenAddress}
|
|
|
|
image={tokenImage}
|
2020-11-20 17:57:45 +01:00
|
|
|
alt={`${primary} ${tokenSymbol}`}
|
2021-04-02 00:57:00 +02:00
|
|
|
imageBorder={identiconBorder}
|
2020-06-03 19:50:12 +02:00
|
|
|
/>
|
2020-11-03 00:41:28 +01:00
|
|
|
}
|
2020-06-05 20:36:40 +02:00
|
|
|
midContent={midContent}
|
2020-11-03 00:41:28 +01:00
|
|
|
rightContent={
|
2021-06-22 19:39:44 +02:00
|
|
|
!isERC721 && (
|
2023-02-21 16:49:16 +01:00
|
|
|
<Box>
|
2023-02-16 14:26:14 +01:00
|
|
|
<Icon
|
|
|
|
name={ICON_NAMES.ARROW_RIGHT}
|
|
|
|
color={Color.iconDefault}
|
2023-02-21 16:49:16 +01:00
|
|
|
size={ICON_SIZES.SM}
|
2023-03-06 18:48:28 +01:00
|
|
|
style={{ verticalAlign: 'middle' }}
|
2023-02-16 14:26:14 +01:00
|
|
|
/>
|
2021-06-22 19:39:44 +02:00
|
|
|
{sendTokenButton}
|
2023-02-21 16:49:16 +01:00
|
|
|
</Box>
|
2021-06-22 19:39:44 +02:00
|
|
|
)
|
2020-11-03 00:41:28 +01:00
|
|
|
}
|
2020-06-03 19:50:12 +02:00
|
|
|
/>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
|
|
|
};
|
2020-05-13 22:41:15 +02:00
|
|
|
|
|
|
|
AssetListItem.propTypes = {
|
2021-12-09 20:06:24 +01:00
|
|
|
className: PropTypes.string,
|
2020-05-13 22:41:15 +02:00
|
|
|
'data-testid': PropTypes.string,
|
2021-12-09 20:06:24 +01:00
|
|
|
iconClassName: PropTypes.string,
|
|
|
|
onClick: PropTypes.func.isRequired,
|
|
|
|
tokenAddress: PropTypes.string,
|
|
|
|
tokenSymbol: PropTypes.string,
|
|
|
|
tokenDecimals: PropTypes.number,
|
|
|
|
tokenImage: PropTypes.string,
|
|
|
|
warning: PropTypes.node,
|
|
|
|
primary: PropTypes.string,
|
|
|
|
secondary: PropTypes.string,
|
|
|
|
identiconBorder: PropTypes.bool,
|
|
|
|
isERC721: PropTypes.bool,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2020-05-13 22:41:15 +02:00
|
|
|
|
|
|
|
AssetListItem.defaultProps = {
|
2021-12-09 20:06:24 +01:00
|
|
|
className: undefined,
|
2020-05-13 22:41:15 +02:00
|
|
|
'data-testid': undefined,
|
2021-12-09 20:06:24 +01:00
|
|
|
iconClassName: undefined,
|
|
|
|
tokenAddress: undefined,
|
|
|
|
tokenImage: undefined,
|
|
|
|
warning: undefined,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2020-05-13 22:41:15 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
export default AssetListItem;
|