1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/components/app/asset-list/asset-list.js

127 lines
4.4 KiB
JavaScript
Raw Normal View History

2022-05-09 19:47:06 +02:00
import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import ImportTokenLink from '../import-token-link';
import TokenList from '../token-list';
import AssetListItem from '../asset-list-item';
import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
import { useUserPreferencedCurrency } from '../../../hooks/useUserPreferencedCurrency';
2020-11-03 00:41:28 +01:00
import {
getSelectedAccountCachedBalance,
2020-11-03 00:41:28 +01:00
getShouldShowFiat,
getNativeCurrencyImage,
2022-05-09 19:47:06 +02:00
getDetectedTokensInCurrentNetwork,
getIstokenDetectionInactiveOnNonMainnetSupportedNetwork,
} 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';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
2022-05-09 19:47:06 +02:00
import DetectedToken from '../detected-token/detected-token';
import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link';
const AssetList = ({ onClickAsset }) => {
const t = useI18nContext();
2022-05-09 19:47:06 +02:00
const [showDetectedTokens, setShowDetectedTokens] = useState(false);
const selectedAccountBalance = useSelector(getSelectedAccountCachedBalance);
const nativeCurrency = useSelector(getNativeCurrency);
const showFiat = useSelector(getShouldShowFiat);
const trackEvent = useContext(MetaMetricsContext);
const balance = useSelector(getSelectedAccountCachedBalance);
const balanceIsLoading = !balance;
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,
},
);
2022-07-31 20:26:40 +02:00
const [secondaryCurrencyDisplay, secondaryCurrencyProperties] =
useCurrencyDisplay(selectedAccountBalance, {
numberOfDecimals: secondaryNumberOfDecimals,
currency: secondaryCurrency,
});
const primaryTokenImage = useSelector(getNativeCurrencyImage);
2022-05-09 19:47:06 +02:00
const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork) || [];
const istokenDetectionInactiveOnNonMainnetSupportedNetwork = useSelector(
getIstokenDetectionInactiveOnNonMainnetSupportedNetwork,
);
return (
<>
<AssetListItem
onClick={() => onClickAsset(nativeCurrency)}
data-testid="wallet-balance"
primary={
primaryCurrencyProperties.value ?? secondaryCurrencyProperties.value
}
tokenSymbol={primaryCurrencyProperties.suffix}
2020-06-06 00:06:15 +02:00
secondary={showFiat ? secondaryCurrencyDisplay : undefined}
tokenImage={balanceIsLoading ? null : primaryTokenImage}
identiconBorder
/>
<TokenList
onTokenClick={(tokenAddress) => {
onClickAsset(tokenAddress);
trackEvent({
event: EVENT_NAMES.TOKEN_SCREEN_OPENED,
category: EVENT.CATEGORIES.NAVIGATION,
properties: {
token_symbol: primaryCurrencyProperties.suffix,
location: 'Home',
},
});
}}
/>
{detectedTokens.length > 0 &&
!istokenDetectionInactiveOnNonMainnetSupportedNetwork && (
<DetectedTokensLink setShowDetectedTokens={setShowDetectedTokens} />
)}
2022-05-09 19:47:06 +02:00
<Box marginTop={detectedTokens.length > 0 ? 0 : 4}>
<Box justifyContent={JUSTIFY_CONTENT.CENTER}>
<Typography
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.NORMAL}
>
{t('missingToken')}
</Typography>
</Box>
2022-05-09 19:47:06 +02:00
<ImportTokenLink />
</Box>
2022-05-09 19:47:06 +02:00
{showDetectedTokens && (
<DetectedToken setShowDetectedTokens={setShowDetectedTokens} />
)}
</>
);
};
AssetList.propTypes = {
onClickAsset: PropTypes.func.isRequired,
};
export default AssetList;