diff --git a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js deleted file mode 100644 index 5f40a6cc4..000000000 --- a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js +++ /dev/null @@ -1,32 +0,0 @@ -import { connect } from 'react-redux'; -import { compose } from 'redux'; -import { withRouter } from 'react-router-dom'; -import { rejectWatchAsset, acceptWatchAsset } from '../../store/actions'; -import { getMostRecentOverviewPage } from '../../ducks/history/history'; -import ConfirmAddSuggestedToken from './confirm-add-suggested-token.component'; - -const mapStateToProps = (state) => { - const { - metamask: { suggestedAssets, tokens }, - } = state; - - return { - mostRecentOverviewPage: getMostRecentOverviewPage(state), - suggestedAssets, - tokens, - }; -}; - -const mapDispatchToProps = (dispatch) => { - return { - rejectWatchAsset: (suggestedAssetID) => - dispatch(rejectWatchAsset(suggestedAssetID)), - acceptWatchAsset: (suggestedAssetID) => - dispatch(acceptWatchAsset(suggestedAssetID)), - }; -}; - -export default compose( - withRouter, - connect(mapStateToProps, mapDispatchToProps), -)(ConfirmAddSuggestedToken); diff --git a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js similarity index 64% rename from ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js rename to ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js index 8e7d30ec0..cb59f95d6 100644 --- a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js +++ b/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js @@ -1,16 +1,21 @@ -import React, { useContext, useEffect, useMemo } from 'react'; -import PropTypes from 'prop-types'; +import React, { useCallback, useContext, useEffect, useMemo } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { useHistory } from 'react-router-dom'; import ActionableMessage from '../../components/ui/actionable-message/actionable-message'; import Button from '../../components/ui/button'; import Identicon from '../../components/ui/identicon'; import TokenBalance from '../../components/ui/token-balance'; import { I18nContext } from '../../contexts/i18n'; -import { MetaMetricsContext } from '../../contexts/metametrics'; +import { MetaMetricsContext as NewMetaMetricsContext } from '../../contexts/metametrics.new'; +import { getMostRecentOverviewPage } from '../../ducks/history/history'; +import { getTokens } from '../../ducks/metamask/metamask'; import ZENDESK_URLS from '../../helpers/constants/zendesk-url'; import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils'; +import { getSuggestedAssets } from '../../selectors'; +import { rejectWatchAsset, acceptWatchAsset } from '../../store/actions'; function getTokenName(name, symbol) { - return typeof name === 'undefined' ? symbol : `${name} (${symbol})`; + return name === undefined ? symbol : `${name} (${symbol})`; } /** @@ -51,32 +56,16 @@ function hasDuplicateSymbolAndDiffAddress(suggestedAssets, tokens) { return Boolean(duplicate); } -const ConfirmAddSuggestedToken = (props) => { - const { - acceptWatchAsset, - history, - mostRecentOverviewPage, - rejectWatchAsset, - suggestedAssets, - tokens, - } = props; - - const metricsEvent = useContext(MetaMetricsContext); +const ConfirmAddSuggestedToken = () => { const t = useContext(I18nContext); + const dispatch = useDispatch(); + const history = useHistory(); - const tokenAddedEvent = (asset) => { - metricsEvent({ - event: 'Token Added', - category: 'Wallet', - sensitiveProperties: { - token_symbol: asset.symbol, - token_contract_address: asset.address, - token_decimal_precision: asset.decimals, - unlisted: asset.unlisted, - source: 'dapp', - }, - }); - }; + const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage); + const suggestedAssets = useSelector(getSuggestedAssets); + const tokens = useSelector(getTokens); + + const trackEvent = useContext(NewMetaMetricsContext); const knownTokenActionableMessage = useMemo(() => { return ( @@ -117,11 +106,38 @@ const ConfirmAddSuggestedToken = (props) => { ); }, [suggestedAssets, tokens, t]); - useEffect(() => { + const handleAddTokensClick = useCallback(async () => { + await Promise.all( + suggestedAssets.map(async ({ asset, id }) => { + await dispatch(acceptWatchAsset(id)); + + trackEvent({ + event: 'Token Added', + category: 'Wallet', + sensitiveProperties: { + token_symbol: asset.symbol, + token_contract_address: asset.address, + token_decimal_precision: asset.decimals, + unlisted: asset.unlisted, + source: 'dapp', + }, + }); + }), + ); + + history.push(mostRecentOverviewPage); + }, [dispatch, history, trackEvent, mostRecentOverviewPage, suggestedAssets]); + + const goBackIfNoSuggestedAssetsOnFirstRender = () => { if (!suggestedAssets.length) { history.push(mostRecentOverviewPage); } - }, [history, suggestedAssets, mostRecentOverviewPage]); + }; + + useEffect(() => { + goBackIfNoSuggestedAssetsOnFirstRender(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); return (