1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/components/app/asset-list/asset-list.js

124 lines
3.6 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import ImportTokenLink from '../import-token-link';
import TokenList from '../token-list';
import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes';
import AssetListItem from '../asset-list-item';
import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
import { useMetricEvent } from '../../../hooks/useMetricEvent';
import { useUserPreferencedCurrency } from '../../../hooks/useUserPreferencedCurrency';
import {
getCurrentAccountWithSendEtherInfo,
getShouldShowFiat,
getNativeCurrencyImage,
} from '../../../selectors';
import { getNativeCurrency } from '../../../ducks/metamask/metamask';
import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
import Typography from '../../ui/typography/typography';
import Box from '../../ui/box/box';
import {
COLORS,
TYPOGRAPHY,
FONT_WEIGHT,
JUSTIFY_CONTENT,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
const AssetList = ({ onClickAsset }) => {
const t = useI18nContext();
const history = useHistory();
const selectedAccountBalance = useSelector(
(state) => getCurrentAccountWithSendEtherInfo(state).balance,
);
const nativeCurrency = useSelector(getNativeCurrency);
const showFiat = useSelector(getShouldShowFiat);
const selectTokenEvent = useMetricEvent({
eventOpts: {
category: 'Navigation',
action: 'Token Menu',
name: 'Clicked Token',
},
});
const addTokenEvent = useMetricEvent({
eventOpts: {
category: 'Navigation',
action: 'Token Menu',
name: 'Clicked "Add Token"',
},
});
const {
currency: primaryCurrency,
numberOfDecimals: primaryNumberOfDecimals,
} = useUserPreferencedCurrency(PRIMARY, { ethNumberOfDecimals: 4 });
const {
currency: secondaryCurrency,
numberOfDecimals: secondaryNumberOfDecimals,
} = useUserPreferencedCurrency(SECONDARY, { ethNumberOfDecimals: 4 });
const [, primaryCurrencyProperties] = useCurrencyDisplay(
selectedAccountBalance,
{
numberOfDecimals: primaryNumberOfDecimals,
currency: primaryCurrency,
},
);
const [
secondaryCurrencyDisplay,
secondaryCurrencyProperties,
] = useCurrencyDisplay(selectedAccountBalance, {
numberOfDecimals: secondaryNumberOfDecimals,
currency: secondaryCurrency,
});
const primaryTokenImage = useSelector(getNativeCurrencyImage);
return (
<>
<AssetListItem
onClick={() => onClickAsset(nativeCurrency)}
data-testid="wallet-balance"
primary={
primaryCurrencyProperties.value ?? secondaryCurrencyProperties.value
}
tokenSymbol={primaryCurrencyProperties.suffix}
secondary={showFiat ? secondaryCurrencyDisplay : undefined}
tokenImage={primaryTokenImage}
identiconBorder
/>
<TokenList
onTokenClick={(tokenAddress) => {
onClickAsset(tokenAddress);
selectTokenEvent();
}}
/>
<Box marginTop={4}>
<Box justifyContent={JUSTIFY_CONTENT.CENTER}>
<Typography
color={COLORS.UI4}
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.NORMAL}
>
{t('missingToken')}
</Typography>
</Box>
<ImportTokenLink
onClick={() => {
history.push(IMPORT_TOKEN_ROUTE);
addTokenEvent();
}}
/>
</Box>
</>
);
};
AssetList.propTypes = {
onClickAsset: PropTypes.func.isRequired,
};
export default AssetList;