1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/app/token-list/token-list.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

54 lines
1.5 KiB
JavaScript

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