1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/token-cell/token-cell.js

69 lines
1.7 KiB
JavaScript
Raw Normal View History

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';
2020-11-03 00:41:28 +01:00
export default function TokenCell({
address,
decimals,
balanceError,
symbol,
string,
onClick,
isERC721,
}) {
const userAddress = useSelector(getSelectedAddress);
const t = useI18nContext();
const formattedFiat = useTokenFiatAmount(address, string, symbol);
const warning = balanceError ? (
2020-11-03 00:41:28 +01:00
<span>
{t('troubleTokenBalances')}
<a
href={`https://ethplorer.io/address/${userAddress}`}
rel="noopener noreferrer"
target="_blank"
onClick={(event) => event.stopPropagation()}
style={{ color: 'var(--color-warning-default)' }}
2020-11-03 00:41:28 +01:00
>
{t('here')}
</a>
</span>
) : null;
return (
<AssetListItem
2020-11-03 00:41:28 +01:00
className={classnames('token-cell', {
'token-cell--outdated': Boolean(balanceError),
2020-11-03 00:41:28 +01:00
})}
iconClassName="token-cell__icon"
onClick={onClick.bind(null, address)}
tokenAddress={address}
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,
onClick: PropTypes.func.isRequired,
isERC721: PropTypes.bool,
};
TokenCell.defaultProps = {
balanceError: null,
};