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/detected-token/detected-token-selection-popover/detected-token-selection-popover.js

108 lines
3.0 KiB
JavaScript
Raw Normal View History

import React, { useContext } from 'react';
2022-05-09 19:47:06 +02:00
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
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 { getDetectedTokensInCurrentNetwork } from '../../../../selectors';
import Popover from '../../../ui/popover';
import Box from '../../../ui/box';
import Button from '../../../ui/button';
import DetectedTokenDetails from '../detected-token-details/detected-token-details';
const DetectedTokenSelectionPopover = ({
tokensListDetected,
handleTokenSelection,
onImport,
onIgnoreAll,
setShowDetectedTokens,
sortingBasedOnTokenSelection,
}) => {
const t = useI18nContext();
const trackEvent = useContext(MetaMetricsContext);
2022-05-09 19:47:06 +02:00
const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork);
2022-07-31 20:26:40 +02:00
const { selected: selectedTokens = [] } =
sortingBasedOnTokenSelection(tokensListDetected);
2022-05-09 19:47:06 +02:00
const numOfTokensImporting =
selectedTokens.length === detectedTokens.length
? `All`
: `(${selectedTokens.length})`;
const onClose = () => {
setShowDetectedTokens(false);
const eventTokensDetails = detectedTokens.map(
({ address, symbol }) => `${symbol} - ${address}`,
);
trackEvent({
event: EVENT_NAMES.TOKEN_IMPORT_CANCELED,
category: EVENT.CATEGORIES.WALLET,
properties: {
source: EVENT.SOURCE.TOKEN.DETECTED,
tokens: eventTokensDetails,
},
});
2022-05-09 19:47:06 +02:00
};
const footer = (
<>
<Button
className="detected-token-selection-popover__ignore-button"
type="secondary"
onClick={() => onIgnoreAll()}
>
{t('ignoreAll')}
</Button>
<Button
className="detected-token-selection-popover__import-button"
type="primary"
onClick={onImport}
>
{t('importWithCount', [numOfTokensImporting])}
</Button>
</>
);
return (
<Popover
className="detected-token-selection-popover"
title={
detectedTokens.length === 1
? t('tokenFoundTitle')
: t('tokensFoundTitle', [detectedTokens.length])
}
2022-05-09 19:47:06 +02:00
onClose={onClose}
footer={footer}
>
<Box margin={3}>
{detectedTokens.map((token, index) => {
return (
<DetectedTokenDetails
key={index}
token={token}
handleTokenSelection={handleTokenSelection}
tokensListDetected={tokensListDetected}
/>
);
})}
</Box>
</Popover>
);
};
DetectedTokenSelectionPopover.propTypes = {
tokensListDetected: PropTypes.object,
handleTokenSelection: PropTypes.func.isRequired,
onIgnoreAll: PropTypes.func.isRequired,
onImport: PropTypes.func.isRequired,
setShowDetectedTokens: PropTypes.func.isRequired,
sortingBasedOnTokenSelection: PropTypes.func.isRequired,
};
export default DetectedTokenSelectionPopover;