1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/asset-list-item/asset-list-item.js
Mark Stacey ba54a3d83b
Update ESLint config to v8 (#12886)
The ESLint config has been updated to v8. The breaking changes are:

* The Prettier rule `quoteProps` has been changed from `consistent` to
`as-needed`, meaning that if one key requires quoting, only that key is
quoted rather than all keys.
* The ESLint rule `no-shadow` has been made more strict. It now
prevents globals from being shadowed as well.

Most of these changes were applied with `yarn lint:fix`. Only the
shadowing changes required manual fixing (shadowing variable names were
either replaced with destructuring or renamed).

The dependency `globalThis` was added to the list of dynamic
dependencies in the build system, where it should have been already.
This was causing `depcheck` to fail because the new lint rules required
removing the one place where `globalThis` had been erroneously imported
previously.

A rule requiring a newline between multiline blocks and expressions has
been disabled temporarily to make this PR smaller and to avoid
introducing conflicts with other PRs.
2021-12-09 15:36:24 -03:30

166 lines
4.2 KiB
JavaScript

import React, { useMemo } from 'react';
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';
import { useMetricEvent } from '../../../hooks/useMetricEvent';
import { ASSET_TYPES, updateSendAsset } from '../../../ducks/send';
import { SEND_ROUTE } from '../../../helpers/constants/routes';
import { SEVERITIES } from '../../../helpers/constants/design-system';
const AssetListItem = ({
className,
'data-testid': dataTestId,
iconClassName,
onClick,
tokenAddress,
tokenSymbol,
tokenDecimals,
tokenImage,
warning,
primary,
secondary,
identiconBorder,
isERC721,
}) => {
const t = useI18nContext();
const dispatch = useDispatch();
const history = useHistory();
const sendTokenEvent = useMetricEvent({
eventOpts: {
category: 'Navigation',
action: 'Home',
name: 'Clicked Send: Token',
},
});
const titleIcon = warning ? (
<Tooltip
wrapperClassName="asset-list-item__warning-tooltip"
interactive
position="bottom"
html={warning}
>
<InfoIcon severity={SEVERITIES.WARNING} />
</Tooltip>
) : null;
const midContent = warning ? (
<>
<InfoIcon severity={SEVERITIES.WARNING} />
<div className="asset-list-item__warning">{warning}</div>
</>
) : null;
const sendTokenButton = useMemo(() => {
if (tokenAddress === null || tokenAddress === undefined) {
return null;
}
return (
<Button
type="link"
className="asset-list-item__send-token-button"
onClick={(e) => {
e.stopPropagation();
sendTokenEvent();
dispatch(
updateSendAsset({
type: ASSET_TYPES.TOKEN,
details: {
address: tokenAddress,
decimals: tokenDecimals,
symbol: tokenSymbol,
},
}),
).then(() => {
history.push(SEND_ROUTE);
});
}}
>
{t('sendSpecifiedTokens', [tokenSymbol])}
</Button>
);
}, [
tokenSymbol,
sendTokenEvent,
tokenAddress,
tokenDecimals,
history,
t,
dispatch,
]);
return (
<ListItem
className={classnames('asset-list-item', className)}
data-testid={dataTestId}
title={
<button
className="asset-list-item__token-button"
onClick={onClick}
title={`${primary} ${tokenSymbol}`}
>
<h2>
<span className="asset-list-item__token-value">{primary}</span>
<span className="asset-list-item__token-symbol">{tokenSymbol}</span>
</h2>
</button>
}
titleIcon={titleIcon}
subtitle={secondary ? <h3 title={secondary}>{secondary}</h3> : null}
onClick={onClick}
icon={
<Identicon
className={iconClassName}
diameter={32}
address={tokenAddress}
image={tokenImage}
alt={`${primary} ${tokenSymbol}`}
imageBorder={identiconBorder}
/>
}
midContent={midContent}
rightContent={
!isERC721 && (
<>
<i className="fas fa-chevron-right asset-list-item__chevron-right" />
{sendTokenButton}
</>
)
}
/>
);
};
AssetListItem.propTypes = {
className: PropTypes.string,
'data-testid': PropTypes.string,
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,
};
AssetListItem.defaultProps = {
className: undefined,
'data-testid': undefined,
iconClassName: undefined,
tokenAddress: undefined,
tokenImage: undefined,
warning: undefined,
};
export default AssetListItem;