1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/collectible-options/collectible-options.js

62 lines
1.8 KiB
JavaScript
Raw Normal View History

import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import { I18nContext } from '../../../contexts/i18n';
import { Menu, MenuItem } from '../../ui/menu';
import { ICON_NAMES } from '../../component-library';
const CollectibleOptions = ({ onRemove, onViewOnOpensea }) => {
const t = useContext(I18nContext);
2022-07-31 20:26:40 +02:00
const [collectibleOptionsButtonElement, setCollectibleOptionsButtonElement] =
useState(null);
const [collectibleOptionsOpen, setCollectibleOptionsOpen] = useState(false);
return (
<>
<button
className="fas fa-ellipsis-v collectible-options__button"
data-testid="collectible-options__button"
onClick={() => setCollectibleOptionsOpen(true)}
ref={setCollectibleOptionsButtonElement}
/>
{collectibleOptionsOpen ? (
<Menu
anchorElement={collectibleOptionsButtonElement}
data-testid="close-collectible-options-menu"
onHide={() => setCollectibleOptionsOpen(false)}
>
{onViewOnOpensea ? (
<MenuItem
iconName={ICON_NAMES.EXPORT}
data-testid="collectible-options__view-on-opensea"
onClick={() => {
setCollectibleOptionsOpen(false);
onViewOnOpensea();
}}
>
{t('viewOnOpensea')}
</MenuItem>
) : null}
<MenuItem
iconName={ICON_NAMES.TRASH}
data-testid="collectible-item-remove"
onClick={() => {
setCollectibleOptionsOpen(false);
onRemove();
}}
>
{t('removeNFT')}
</MenuItem>
</Menu>
) : null}
</>
);
};
CollectibleOptions.propTypes = {
onRemove: PropTypes.func.isRequired,
onViewOnOpensea: PropTypes.func,
};
export default CollectibleOptions;