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'; import { Box } from '../../component-library'; import { AlignItems, Display, JustifyContent, } from '../../../helpers/constants/design-system'; 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 ( {t('loadingTokens')} ); } return (
{tokensWithBalances.map((tokenData, index) => { return ; })}
); } TokenList.propTypes = { onTokenClick: PropTypes.func.isRequired, };