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/menu-bar/account-options-menu.js

175 lines
5.3 KiB
JavaScript
Raw Normal View History

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { getAccountLink } from '@metamask/etherscan-link';
import { showModal } from '../../../store/actions';
import {
CONNECTED_ROUTE,
NETWORKS_ROUTE,
} from '../../../helpers/constants/routes';
import { getURLHostName } from '../../../helpers/utils/util';
import { Menu, MenuItem } from '../../ui/menu';
2020-11-03 00:41:28 +01:00
import {
getBlockExplorerLinkText,
getCurrentChainId,
2020-11-03 00:41:28 +01:00
getCurrentKeyring,
getRpcPrefsForCurrentProvider,
getSelectedIdentity,
} from '../../../selectors';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
import { KEYRING_TYPES } from '../../../../shared/constants/keyrings';
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
import { MetaMetricsContext } from '../../../contexts/metametrics';
2020-11-03 00:41:28 +01:00
export default function AccountOptionsMenu({ anchorElement, onClose }) {
const t = useI18nContext();
const dispatch = useDispatch();
const history = useHistory();
const keyring = useSelector(getCurrentKeyring);
const chainId = useSelector(getCurrentChainId);
const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
const selectedIdentity = useSelector(getSelectedIdentity);
const { address } = selectedIdentity;
const addressLink = getAccountLink(address, chainId, rpcPrefs);
const { blockExplorerUrl } = rpcPrefs;
const blockExplorerUrlSubTitle = getURLHostName(blockExplorerUrl);
const trackEvent = useContext(MetaMetricsContext);
const blockExplorerLinkText = useSelector(getBlockExplorerLinkText);
const isRemovable = keyring.type !== KEYRING_TYPES.HD_KEY_TREE;
const routeToAddBlockExplorerUrl = () => {
history.push(`${NETWORKS_ROUTE}#blockExplorerUrl`);
};
const openBlockExplorer = () => {
trackEvent({
event: EVENT_NAMES.EXTERNAL_LINK_CLICKED,
category: EVENT.CATEGORIES.NAVIGATION,
properties: {
link_type: EVENT.EXTERNAL_LINK_TYPES.ACCOUNT_TRACKER,
location: 'Account Options',
url_domain: getURLHostName(addressLink),
},
});
global.platform.openTab({
url: addressLink,
});
onClose();
};
return (
<Menu
anchorElement={anchorElement}
className="account-options-menu"
onHide={onClose}
>
2021-10-18 16:57:59 +02:00
<MenuItem
onClick={
blockExplorerLinkText.firstPart === 'addBlockExplorer'
? routeToAddBlockExplorerUrl
: openBlockExplorer
}
2021-10-18 16:57:59 +02:00
subtitle={
blockExplorerUrlSubTitle ? (
<span className="account-options-menu__explorer-origin">
{blockExplorerUrlSubTitle}
</span>
) : null
}
iconClassName="fas fa-external-link-alt"
>
{t(
blockExplorerLinkText.firstPart,
blockExplorerLinkText.secondPart === ''
? null
: [t(blockExplorerLinkText.secondPart)],
)}
2021-10-18 16:57:59 +02:00
</MenuItem>
2020-11-03 00:41:28 +01:00
{getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN ? null : (
<MenuItem
onClick={() => {
trackEvent({
event: EVENT_NAMES.APP_WINDOW_EXPANDED,
category: EVENT.CATEGORIES.NAVIGATION,
properties: {
location: 'Account Options',
},
});
global.platform.openExtensionInBrowser();
onClose();
2020-11-03 00:41:28 +01:00
}}
iconClassName="fas fa-expand-alt"
>
{t('expandView')}
</MenuItem>
)}
<MenuItem
data-testid="account-options-menu__account-details"
onClick={() => {
dispatch(showModal({ name: 'ACCOUNT_DETAILS' }));
trackEvent({
event: EVENT_NAMES.NAV_ACCOUNT_DETAILS_OPENED,
category: EVENT.CATEGORIES.NAVIGATION,
properties: {
location: 'Account Options',
},
});
onClose();
}}
iconClassName="fas fa-qrcode"
>
2020-11-03 00:41:28 +01:00
{t('accountDetails')}
</MenuItem>
<MenuItem
data-testid="account-options-menu__connected-sites"
onClick={() => {
trackEvent({
event: EVENT_NAMES.NAV_CONNECTED_SITES_OPENED,
category: EVENT.CATEGORIES.NAVIGATION,
properties: {
location: 'Account Options',
},
});
history.push(CONNECTED_ROUTE);
onClose();
}}
iconClassName="fa fa-bullseye"
>
2020-11-03 00:41:28 +01:00
{t('connectedSites')}
</MenuItem>
2020-11-03 00:41:28 +01:00
{isRemovable ? (
<MenuItem
data-testid="account-options-menu__remove-account"
onClick={() => {
dispatch(
showModal({
name: 'CONFIRM_REMOVE_ACCOUNT',
identity: selectedIdentity,
}),
);
onClose();
2020-11-03 00:41:28 +01:00
}}
iconClassName="fas fa-trash-alt"
>
{t('removeAccount')}
</MenuItem>
) : null}
</Menu>
);
}
AccountOptionsMenu.propTypes = {
anchorElement: PropTypes.instanceOf(window.Element),
onClose: PropTypes.func.isRequired,
};
AccountOptionsMenu.defaultProps = {
anchorElement: undefined,
};