metamask-extension/ui/app/pages/asset/components/token-options.js

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