import React, { useContext, useState } from 'react'; import PropTypes from 'prop-types'; import { I18nContext } from '../../../contexts/i18n'; import { Menu, MenuItem } from '../../../components/ui/menu'; const TokenOptions = ({ onRemove, onViewEtherscan, tokenSymbol }) => { const t = useContext(I18nContext); const [tokenOptionsButtonElement, setTokenOptionsButtonElement] = useState( null, ); const [tokenOptionsOpen, setTokenOptionsOpen] = useState(false); return ( <> <button className="fas fa-ellipsis-v token-options__button" data-testid="token-options__button" onClick={() => setTokenOptionsOpen(true)} ref={setTokenOptionsButtonElement} title={t('tokenOptions')} /> {tokenOptionsOpen ? ( <Menu anchorElement={tokenOptionsButtonElement} onHide={() => setTokenOptionsOpen(false)} > <MenuItem iconClassName="fas fa-external-link-alt token-options__icon" data-testid="token-options__etherscan" onClick={() => { setTokenOptionsOpen(false); onViewEtherscan(); }} > {t('viewOnEtherscan')} </MenuItem> <MenuItem iconClassName="fas fa-trash-alt token-options__icon" data-testid="token-options__hide" onClick={() => { setTokenOptionsOpen(false); onRemove(); }} > {t('hideTokenSymbol', [tokenSymbol])} </MenuItem> </Menu> ) : null} </> ); }; TokenOptions.propTypes = { onRemove: PropTypes.func.isRequired, onViewEtherscan: PropTypes.func.isRequired, tokenSymbol: PropTypes.string.isRequired, }; export default TokenOptions;