mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-12 04:37:13 +01:00
2cd242252f
* Created new screen/page "Token details" * Change color in scss * Modify elements to the latest requirements and added unit tests * Review requested changes * Condensing files into one component * Added unit tests for token details page * Added redirection when switching networks, added image for a token and update unit tests * Requested review changes * Modify index.scss regarding of the requested review * Delete data-testid's from Typography and token-details-page.js * Requested review changes
99 lines
2.9 KiB
JavaScript
99 lines
2.9 KiB
JavaScript
import React, { useContext, useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { I18nContext } from '../../../contexts/i18n';
|
|
import { Menu, MenuItem } from '../../../components/ui/menu';
|
|
|
|
const AssetOptions = ({
|
|
onRemove,
|
|
onClickBlockExplorer,
|
|
onViewAccountDetails,
|
|
onViewTokenDetails,
|
|
tokenSymbol,
|
|
isNativeAsset,
|
|
isEthNetwork,
|
|
}) => {
|
|
const t = useContext(I18nContext);
|
|
const [assetOptionsButtonElement, setAssetOptionsButtonElement] = useState(
|
|
null,
|
|
);
|
|
const [assetOptionsOpen, setAssetOptionsOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
className="fas fa-ellipsis-v asset-options__button"
|
|
data-testid="asset-options__button"
|
|
onClick={() => setAssetOptionsOpen(true)}
|
|
ref={setAssetOptionsButtonElement}
|
|
title={t('assetOptions')}
|
|
/>
|
|
{assetOptionsOpen ? (
|
|
<Menu
|
|
anchorElement={assetOptionsButtonElement}
|
|
onHide={() => setAssetOptionsOpen(false)}
|
|
>
|
|
<MenuItem
|
|
iconClassName="fas fa-qrcode"
|
|
data-testid="asset-options__account-details"
|
|
onClick={() => {
|
|
setAssetOptionsOpen(false);
|
|
onViewAccountDetails();
|
|
}}
|
|
>
|
|
{t('accountDetails')}
|
|
</MenuItem>
|
|
<MenuItem
|
|
iconClassName="fas fa-external-link-alt asset-options__icon"
|
|
data-testid="asset-options__etherscan"
|
|
onClick={() => {
|
|
setAssetOptionsOpen(false);
|
|
onClickBlockExplorer();
|
|
}}
|
|
>
|
|
{isEthNetwork
|
|
? t('viewOnEtherscan', [t('blockExplorerAssetAction')])
|
|
: t('viewinExplorer', [t('blockExplorerAssetAction')])}
|
|
</MenuItem>
|
|
{isNativeAsset ? null : (
|
|
<MenuItem
|
|
iconClassName="fas fa-trash-alt asset-options__icon"
|
|
data-testid="asset-options__hide"
|
|
onClick={() => {
|
|
setAssetOptionsOpen(false);
|
|
onRemove();
|
|
}}
|
|
>
|
|
{t('hideTokenSymbol', [tokenSymbol])}
|
|
</MenuItem>
|
|
)}
|
|
{isNativeAsset ? null : (
|
|
<MenuItem
|
|
iconClassName="fas fa-info-circle asset-options__icon"
|
|
data-testid="asset-options__token-details"
|
|
onClick={() => {
|
|
setAssetOptionsOpen(false);
|
|
onViewTokenDetails();
|
|
}}
|
|
>
|
|
{t('tokenDetails')}
|
|
</MenuItem>
|
|
)}
|
|
</Menu>
|
|
) : null}
|
|
</>
|
|
);
|
|
};
|
|
|
|
AssetOptions.propTypes = {
|
|
isEthNetwork: PropTypes.bool,
|
|
isNativeAsset: PropTypes.bool,
|
|
onRemove: PropTypes.func.isRequired,
|
|
onClickBlockExplorer: PropTypes.func.isRequired,
|
|
onViewAccountDetails: PropTypes.func.isRequired,
|
|
onViewTokenDetails: PropTypes.func.isRequired,
|
|
tokenSymbol: PropTypes.string,
|
|
};
|
|
|
|
export default AssetOptions;
|