2023-02-15 15:39:46 +01:00
|
|
|
import React, { useContext, useRef, useState } from 'react';
|
2021-04-28 00:48:46 +02:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
2022-08-02 23:56:02 +02:00
|
|
|
import { useHistory } from 'react-router-dom';
|
|
|
|
import { useSelector } from 'react-redux';
|
2021-04-28 00:48:46 +02:00
|
|
|
import { I18nContext } from '../../../contexts/i18n';
|
|
|
|
import { Menu, MenuItem } from '../../../components/ui/menu';
|
2022-08-02 23:56:02 +02:00
|
|
|
import { getBlockExplorerLinkText } from '../../../selectors';
|
|
|
|
import { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
|
2023-04-04 18:48:04 +02:00
|
|
|
import { ICON_NAMES } from '../../../components/component-library/icon/deprecated';
|
2023-04-12 17:55:24 +02:00
|
|
|
import { ButtonIcon } from '../../../components/component-library/button-icon/deprecated';
|
2023-02-15 15:39:46 +01:00
|
|
|
import { Color } from '../../../helpers/constants/design-system';
|
2021-04-28 00:48:46 +02:00
|
|
|
|
|
|
|
const AssetOptions = ({
|
|
|
|
onRemove,
|
2021-05-19 16:51:47 +02:00
|
|
|
onClickBlockExplorer,
|
2021-04-28 00:48:46 +02:00
|
|
|
onViewAccountDetails,
|
2022-02-16 17:59:39 +01:00
|
|
|
onViewTokenDetails,
|
2021-04-28 00:48:46 +02:00
|
|
|
tokenSymbol,
|
|
|
|
isNativeAsset,
|
|
|
|
}) => {
|
|
|
|
const t = useContext(I18nContext);
|
|
|
|
const [assetOptionsOpen, setAssetOptionsOpen] = useState(false);
|
2022-08-02 23:56:02 +02:00
|
|
|
const history = useHistory();
|
|
|
|
const blockExplorerLinkText = useSelector(getBlockExplorerLinkText);
|
2023-02-15 15:39:46 +01:00
|
|
|
const ref = useRef(false);
|
2022-08-02 23:56:02 +02:00
|
|
|
|
|
|
|
const routeToAddBlockExplorerUrl = () => {
|
|
|
|
history.push(`${NETWORKS_ROUTE}#blockExplorerUrl`);
|
|
|
|
};
|
|
|
|
|
|
|
|
const openBlockExplorer = () => {
|
|
|
|
setAssetOptionsOpen(false);
|
|
|
|
onClickBlockExplorer();
|
|
|
|
};
|
2021-04-28 00:48:46 +02:00
|
|
|
|
|
|
|
return (
|
2023-02-15 15:39:46 +01:00
|
|
|
<div ref={ref}>
|
|
|
|
<ButtonIcon
|
|
|
|
className="asset-options__button"
|
2021-04-28 00:48:46 +02:00
|
|
|
data-testid="asset-options__button"
|
|
|
|
onClick={() => setAssetOptionsOpen(true)}
|
2023-02-15 15:39:46 +01:00
|
|
|
ariaLabel={t('assetOptions')}
|
|
|
|
iconName={ICON_NAMES.MORE_VERTICAL}
|
|
|
|
color={Color.textDefault}
|
2021-04-28 00:48:46 +02:00
|
|
|
/>
|
|
|
|
{assetOptionsOpen ? (
|
|
|
|
<Menu
|
2023-02-15 15:39:46 +01:00
|
|
|
anchorElement={ref.current}
|
2021-04-28 00:48:46 +02:00
|
|
|
onHide={() => setAssetOptionsOpen(false)}
|
|
|
|
>
|
|
|
|
<MenuItem
|
2023-01-31 15:47:00 +01:00
|
|
|
iconName={ICON_NAMES.SCAN_BARCODE}
|
2021-04-28 00:48:46 +02:00
|
|
|
data-testid="asset-options__account-details"
|
|
|
|
onClick={() => {
|
|
|
|
setAssetOptionsOpen(false);
|
|
|
|
onViewAccountDetails();
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{t('accountDetails')}
|
|
|
|
</MenuItem>
|
|
|
|
<MenuItem
|
2023-01-31 15:47:00 +01:00
|
|
|
iconName={ICON_NAMES.EXPORT}
|
2021-04-28 00:48:46 +02:00
|
|
|
data-testid="asset-options__etherscan"
|
2022-08-02 23:56:02 +02:00
|
|
|
onClick={
|
|
|
|
blockExplorerLinkText.firstPart === 'addBlockExplorer'
|
|
|
|
? routeToAddBlockExplorerUrl
|
|
|
|
: openBlockExplorer
|
|
|
|
}
|
2021-04-28 00:48:46 +02:00
|
|
|
>
|
2022-08-02 23:56:02 +02:00
|
|
|
{t(
|
|
|
|
blockExplorerLinkText.firstPart,
|
|
|
|
blockExplorerLinkText.secondPart === ''
|
|
|
|
? null
|
|
|
|
: [t('blockExplorerAssetAction')],
|
|
|
|
)}
|
2021-04-28 00:48:46 +02:00
|
|
|
</MenuItem>
|
|
|
|
{isNativeAsset ? null : (
|
|
|
|
<MenuItem
|
2023-01-31 15:47:00 +01:00
|
|
|
iconName={ICON_NAMES.TRASH}
|
2021-04-28 00:48:46 +02:00
|
|
|
data-testid="asset-options__hide"
|
|
|
|
onClick={() => {
|
|
|
|
setAssetOptionsOpen(false);
|
|
|
|
onRemove();
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{t('hideTokenSymbol', [tokenSymbol])}
|
|
|
|
</MenuItem>
|
|
|
|
)}
|
2022-02-16 17:59:39 +01:00
|
|
|
{isNativeAsset ? null : (
|
|
|
|
<MenuItem
|
2023-01-31 15:47:00 +01:00
|
|
|
iconName={ICON_NAMES.INFO}
|
2022-02-16 17:59:39 +01:00
|
|
|
data-testid="asset-options__token-details"
|
|
|
|
onClick={() => {
|
|
|
|
setAssetOptionsOpen(false);
|
|
|
|
onViewTokenDetails();
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{t('tokenDetails')}
|
|
|
|
</MenuItem>
|
|
|
|
)}
|
2021-04-28 00:48:46 +02:00
|
|
|
</Menu>
|
|
|
|
) : null}
|
2023-02-15 15:39:46 +01:00
|
|
|
</div>
|
2021-04-28 00:48:46 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-06-08 23:21:53 +02:00
|
|
|
const isNotFunc = (p) => {
|
2022-06-08 01:04:59 +02:00
|
|
|
return typeof p !== 'function';
|
|
|
|
};
|
|
|
|
|
2021-04-28 00:48:46 +02:00
|
|
|
AssetOptions.propTypes = {
|
|
|
|
isNativeAsset: PropTypes.bool,
|
2021-05-19 16:51:47 +02:00
|
|
|
onClickBlockExplorer: PropTypes.func.isRequired,
|
2021-04-28 00:48:46 +02:00
|
|
|
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-02 18:27:01 +02:00
|
|
|
}
|
|
|
|
},
|
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-02 18:27:01 +02:00
|
|
|
}
|
|
|
|
},
|
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-02 18:27:01 +02:00
|
|
|
}
|
2022-06-08 01:04:59 +02:00
|
|
|
},
|
2021-04-28 00:48:46 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
export default AssetOptions;
|