import React, { useContext } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import PropTypes from 'prop-types'; import { setSwapsFromToken } from '../../../ducks/swaps/swaps'; import { I18nContext } from '../../../contexts/i18n'; import { BUILD_QUOTE_ROUTE } from '../../../helpers/constants/routes'; import { useNewMetricEvent } from '../../../hooks/useMetricEvent'; import { getSwapsEthToken } from '../../../selectors'; import Button from '../../../components/ui/button'; import Popover from '../../../components/ui/popover'; export default function IntroPopup({ onClose }) { const dispatch = useDispatch(useDispatch); const history = useHistory(); const t = useContext(I18nContext); const enteredSwapsEvent = useNewMetricEvent({ event: 'Swaps Opened', properties: { source: 'Intro popup', active_currency: 'ETH' }, category: 'swaps', }); const blogPostVisitedEvent = useNewMetricEvent({ event: 'Blog Post Visited ', category: 'swaps', }); const contractAuditVisitedEvent = useNewMetricEvent({ event: 'Contract Audit Visited', category: 'swaps', }); const productOverviewDismissedEvent = useNewMetricEvent({ event: 'Product Overview Dismissed', category: 'swaps', }); const swapsEthToken = useSelector(getSwapsEthToken); return (
{ productOverviewDismissedEvent(); onClose(); }} footerClassName="intro-popup__footer" footer={ } >
{t('swapIntroLiquiditySourcesLabel')}
{t('swapIntroLearnMoreHeader')}
{ global.platform.openTab({ url: 'https://medium.com/metamask/introducing-metamask-swaps-84318c643785', }); blogPostVisitedEvent(); }} > {t('swapIntroLearnMoreLink')}
{ global.platform.openTab({ url: 'https://diligence.consensys.net/audits/private/lsjipyllnw2/', }); contractAuditVisitedEvent(); }} > {t('swapLearnMoreContractsAuditReview')}
); } IntroPopup.propTypes = { onClose: PropTypes.func.isRequired, };