1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/pages/asset/components/asset-options.js
VSaric 2cd242252f
Created "Token details" page (#13216)
* 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
2022-02-16 13:29:39 -03:30

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;