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/token-cell/token-cell.js
Alex Donesky 490d3b8d40
Integrate TokensController (#11552)
* Integrate controllers/tokensController

* address rebase issues

* small cleanup

* addressing feedback

* more feedback
2021-09-10 12:37:19 -05:00

72 lines
1.8 KiB
JavaScript

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,
};