1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-11 20:27:12 +01:00
metamask-extension/ui/components/app/asset-list/asset-list.js
Dan Miller bc6c60cde1 Revert "Merge pull request #15063 from MetaMask/revert-v10.16.0"
This reverts commit 4d42715220, reversing
changes made to f09ab88891.
2022-06-29 13:03:10 -02:30

126 lines
4.1 KiB
JavaScript

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';
import {
getCurrentAccountWithSendEtherInfo,
getShouldShowFiat,
getNativeCurrencyImage,
getDetectedTokensInCurrentNetwork,
} 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 } from '../../../../shared/constants/metametrics';
import DetectedToken from '../detected-token/detected-token';
import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link';
const AssetList = ({ onClickAsset }) => {
const t = useI18nContext();
const [showDetectedTokens, setShowDetectedTokens] = useState(false);
const selectedAccountBalance = useSelector(
(state) => getCurrentAccountWithSendEtherInfo(state).balance,
);
const nativeCurrency = useSelector(getNativeCurrency);
const showFiat = useSelector(getShouldShowFiat);
const trackEvent = useContext(MetaMetricsContext);
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);
const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork) || [];
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);
trackEvent({
event: 'Clicked Token',
category: EVENT.CATEGORIES.NAVIGATION,
properties: {
action: 'Token Menu',
legacy_event: true,
},
});
}}
/>
{process.env.TOKEN_DETECTION_V2
? detectedTokens.length > 0 && (
<DetectedTokensLink setShowDetectedTokens={setShowDetectedTokens} />
)
: null}
<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>
<ImportTokenLink />
</Box>
{showDetectedTokens && (
<DetectedToken setShowDetectedTokens={setShowDetectedTokens} />
)}
</>
);
};
AssetList.propTypes = {
onClickAsset: PropTypes.func.isRequired,
};
export default AssetList;