You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.8 KiB
71 lines
1.8 KiB
import classnames from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import AssetListItem from '../asset-list-item';
|
|
import { getSelectedAddress } from '../../../selectors';
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount';
|
|
|
|
export default function TokenCell({
|
|
address,
|
|
decimals,
|
|
balanceError,
|
|
symbol,
|
|
string,
|
|
image,
|
|
onClick,
|
|
isERC721,
|
|
}) {
|
|
const userAddress = useSelector(getSelectedAddress);
|
|
const t = useI18nContext();
|
|
|
|
const formattedFiat = useTokenFiatAmount(address, string, symbol);
|
|
const warning = balanceError ? (
|
|
<span>
|
|
{t('troubleTokenBalances')}
|
|
<a
|
|
href={`https://ethplorer.io/address/${userAddress}`}
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
onClick={(event) => event.stopPropagation()}
|
|
style={{ color: '#F7861C' }}
|
|
>
|
|
{t('here')}
|
|
</a>
|
|
</span>
|
|
) : null;
|
|
|
|
return (
|
|
<AssetListItem
|
|
className={classnames('token-cell', {
|
|
'token-cell--outdated': Boolean(balanceError),
|
|
})}
|
|
iconClassName="token-cell__icon"
|
|
onClick={onClick.bind(null, address)}
|
|
tokenAddress={address}
|
|
tokenImage={image}
|
|
tokenSymbol={symbol}
|
|
tokenDecimals={decimals}
|
|
warning={warning}
|
|
primary={`${string || 0}`}
|
|
secondary={formattedFiat}
|
|
isERC721={isERC721}
|
|
/>
|
|
);
|
|
}
|
|
|
|
TokenCell.propTypes = {
|
|
address: PropTypes.string,
|
|
balanceError: PropTypes.object,
|
|
symbol: PropTypes.string,
|
|
decimals: PropTypes.number,
|
|
string: PropTypes.string,
|
|
image: PropTypes.string,
|
|
onClick: PropTypes.func.isRequired,
|
|
isERC721: PropTypes.bool,
|
|
};
|
|
|
|
TokenCell.defaultProps = {
|
|
balanceError: null,
|
|
};
|
|
|