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

140 lines
4.1 KiB
JavaScript
Raw Normal View History

import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { I18nContext } from '../../../contexts/i18n';
import { Menu, MenuItem } from '../../../components/ui/menu';
import { getBlockExplorerLinkText } from '../../../selectors';
import { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
const AssetOptions = ({
onRemove,
onClickBlockExplorer,
onViewAccountDetails,
onViewTokenDetails,
tokenSymbol,
isNativeAsset,
}) => {
const t = useContext(I18nContext);
2022-07-31 20:26:40 +02:00
const [assetOptionsButtonElement, setAssetOptionsButtonElement] =
useState(null);
const [assetOptionsOpen, setAssetOptionsOpen] = useState(false);
const history = useHistory();
const blockExplorerLinkText = useSelector(getBlockExplorerLinkText);
const routeToAddBlockExplorerUrl = () => {
history.push(`${NETWORKS_ROUTE}#blockExplorerUrl`);
};
const openBlockExplorer = () => {
setAssetOptionsOpen(false);
onClickBlockExplorer();
};
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={
blockExplorerLinkText.firstPart === 'addBlockExplorer'
? routeToAddBlockExplorerUrl
: openBlockExplorer
}
>
{t(
blockExplorerLinkText.firstPart,
blockExplorerLinkText.secondPart === ''
? null
: [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}
</>
);
};
2022-06-08 23:21:53 +02:00
const isNotFunc = (p) => {
2022-06-08 01:04:59 +02:00
return typeof p !== 'function';
};
AssetOptions.propTypes = {
isNativeAsset: PropTypes.bool,
onClickBlockExplorer: PropTypes.func.isRequired,
onViewAccountDetails: PropTypes.func.isRequired,
2022-06-08 01:04:59 +02:00
onRemove: (props) => {
2022-06-08 23:21:53 +02:00
if (props.isNativeAsset === false && isNotFunc(props.onRemove)) {
2022-06-08 01:04:59 +02:00
throw new Error(
'When isNativeAsset is true, onRemove is a required prop',
);
}
},
2022-06-08 01:04:59 +02:00
onViewTokenDetails: (props) => {
2022-06-08 23:21:53 +02:00
if (props.isNativeAsset === false && isNotFunc(props.onViewTokenDetails)) {
2022-06-08 01:04:59 +02:00
throw new Error(
'When isNativeAsset is true, onViewTokenDetails is a required prop',
);
}
},
2022-06-08 01:04:59 +02:00
tokenSymbol: (props) => {
if (
props.isNativeAsset === false &&
typeof props.tokenSymbol !== 'string'
) {
throw new Error(
'When isNativeAsset is true, tokenSymbol is a required prop',
);
}
2022-06-08 01:04:59 +02:00
},
};
export default AssetOptions;