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.
53 lines
1.5 KiB
53 lines
1.5 KiB
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { isEqual } from 'lodash';
|
|
|
|
import { useSelector } from 'react-redux';
|
|
import TokenCell from '../token-cell';
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
import { useTokenTracker } from '../../../hooks/useTokenTracker';
|
|
import { getShouldHideZeroBalanceTokens } from '../../../selectors';
|
|
import { getTokens } from '../../../ducks/metamask/metamask';
|
|
|
|
export default function TokenList({ onTokenClick }) {
|
|
const t = useI18nContext();
|
|
const shouldHideZeroBalanceTokens = useSelector(
|
|
getShouldHideZeroBalanceTokens,
|
|
);
|
|
// use `isEqual` comparison function because the token array is serialized
|
|
// from the background so it has a new reference with each background update,
|
|
// even if the tokens haven't changed
|
|
const tokens = useSelector(getTokens, isEqual);
|
|
const { loading, tokensWithBalances } = useTokenTracker(
|
|
tokens,
|
|
true,
|
|
shouldHideZeroBalanceTokens,
|
|
);
|
|
if (loading) {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
height: '250px',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: '30px',
|
|
}}
|
|
>
|
|
{t('loadingTokens')}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{tokensWithBalances.map((tokenData, index) => {
|
|
return <TokenCell key={index} {...tokenData} onClick={onTokenClick} />;
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
TokenList.propTypes = {
|
|
onTokenClick: PropTypes.func.isRequired,
|
|
};
|
|
|