1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/app/token-list-display/token-list-display.js

62 lines
1.8 KiB
JavaScript
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { isEqual } from 'lodash';
import { getShouldHideZeroBalanceTokens } from '../../../selectors';
import { useTokenTracker } from '../../../hooks/useTokenTracker';
import Identicon from '../../ui/identicon';
import TokenBalance from '../../ui/token-balance';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { getTokens } from '../../../ducks/metamask/metamask';
export default function TokenListDisplay({ clickHandler }) {
const t = useI18nContext();
const shouldHideZeroBalanceTokens = useSelector(
getShouldHideZeroBalanceTokens,
);
const tokens = useSelector(getTokens, isEqual);
const { loading, tokensWithBalances } = useTokenTracker(
tokens,
true,
shouldHideZeroBalanceTokens,
);
if (loading) {
return <div className="loading-span">{t('loadingTokens')}</div>;
}
const sendableTokens = tokensWithBalances.filter((token) => !token.isERC721);
return (
<>
{sendableTokens.map((tokenData) => {
const { address, symbol, image } = tokenData;
return (
<div
key={address}
className="token-list-item"
onClick={() => clickHandler(tokenData)}
>
<Identicon address={address} diameter={36} image={image} />
<div className="token-list-item__data">
<div className="token-list-item__symbol">{symbol}</div>
<div className="token-list-item__balance">
<span className="token-list-item__balance__label">
{`${t('balance')}:`}
</span>
<TokenBalance token={tokenData} />
</div>
</div>
</div>
);
})}
</>
);
}
TokenListDisplay.propTypes = {
clickHandler: PropTypes.func,
};