import React, { useCallback, useContext, useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { ASSET_ROUTE, IMPORT_TOKEN_ROUTE, } from '../../helpers/constants/routes'; 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 { getMostRecentOverviewPage } from '../../ducks/history/history'; import { getPendingTokens } from '../../ducks/metamask/metamask'; import { useNewMetricEvent } from '../../hooks/useMetricEvent'; import { addTokens, clearPendingTokens } from '../../store/actions'; const getTokenName = (name, symbol) => { return name === undefined ? symbol : `${name} (${symbol})`; }; const ConfirmImportToken = () => { const t = useContext(I18nContext); const dispatch = useDispatch(); const history = useHistory(); const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage); const pendingTokens = useSelector(getPendingTokens); const [addedToken, setAddedToken] = useState({}); const trackTokenAddedEvent = useNewMetricEvent({ event: 'Token Added', category: 'Wallet', sensitiveProperties: { token_symbol: addedToken.symbol, token_contract_address: addedToken.address, token_decimal_precision: addedToken.decimals, unlisted: addedToken.unlisted, source: addedToken.isCustom ? 'custom' : 'list', }, }); const handleAddTokens = useCallback(async () => { await dispatch(addTokens(pendingTokens)); const addedTokenValues = Object.values(pendingTokens); const firstTokenAddress = addedTokenValues?.[0].address?.toLowerCase(); addedTokenValues.forEach((pendingToken) => { setAddedToken({ ...pendingToken }); }); dispatch(clearPendingTokens()); if (firstTokenAddress) { history.push(`${ASSET_ROUTE}/${firstTokenAddress}`); } else { history.push(mostRecentOverviewPage); } }, [dispatch, history, mostRecentOverviewPage, pendingTokens]); useEffect(() => { if (Object.keys(addedToken).length) { trackTokenAddedEvent(); } }, [addedToken, trackTokenAddedEvent]); useEffect(() => { if (Object.keys(pendingTokens).length === 0) { history.push(mostRecentOverviewPage); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (
{t('importTokensCamelCase')}
{t('likeToImportTokens')}
{t('token')}
{t('balance')}
{Object.entries(pendingTokens).map(([address, token]) => { const { name, symbol } = token; return (
{getTokenName(name, symbol)}
); })}
); }; export default ConfirmImportToken;