mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-11 20:27:12 +01:00
bc6c60cde1
This reverts commit4d42715220
, reversing changes made tof09ab88891
.
126 lines
4.1 KiB
JavaScript
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;
|