1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/menu-bar/account-options-menu.js
George Marshall 739075662c
Migrating Icon to typescript and deprecating JS component (#18431)
* Migrating Icon to typescript and deprecating JS component

* gw suggestions (#18434)

---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>
2023-04-04 09:48:04 -07:00

180 lines
5.5 KiB
JavaScript

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';
import {
getBlockExplorerLinkText,
getCurrentChainId,
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 { KeyringType } from '../../../../shared/constants/keyring';
import {
MetaMetricsEventCategory,
MetaMetricsEventLinkType,
MetaMetricsEventName,
} from '../../../../shared/constants/metametrics';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { ICON_NAMES } from '../../component-library/icon/deprecated';
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 !== KeyringType.hdKeyTree;
const routeToAddBlockExplorerUrl = () => {
history.push(`${NETWORKS_ROUTE}#blockExplorerUrl`);
};
const openBlockExplorer = () => {
trackEvent({
event: MetaMetricsEventName.ExternalLinkClicked,
category: MetaMetricsEventCategory.Navigation,
properties: {
link_type: MetaMetricsEventLinkType.AccountTracker,
location: 'Account Options',
url_domain: getURLHostName(addressLink),
},
});
global.platform.openTab({
url: addressLink,
});
onClose();
};
return (
<Menu
anchorElement={anchorElement}
className="account-options-menu"
onHide={onClose}
>
<MenuItem
onClick={
blockExplorerLinkText.firstPart === 'addBlockExplorer'
? routeToAddBlockExplorerUrl
: openBlockExplorer
}
subtitle={
blockExplorerUrlSubTitle ? (
<span className="account-options-menu__explorer-origin">
{blockExplorerUrlSubTitle}
</span>
) : null
}
iconName={ICON_NAMES.EXPORT}
>
{t(
blockExplorerLinkText.firstPart,
blockExplorerLinkText.secondPart === ''
? null
: [t(blockExplorerLinkText.secondPart)],
)}
</MenuItem>
{getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN ? null : (
<MenuItem
onClick={() => {
trackEvent({
event: MetaMetricsEventName.AppWindowExpanded,
category: MetaMetricsEventCategory.Navigation,
properties: {
location: 'Account Options',
},
});
global.platform.openExtensionInBrowser();
onClose();
}}
iconName={ICON_NAMES.EXPAND}
>
{t('expandView')}
</MenuItem>
)}
<MenuItem
data-testid="account-options-menu__account-details"
onClick={() => {
dispatch(showModal({ name: 'ACCOUNT_DETAILS' }));
trackEvent({
event: MetaMetricsEventName.NavAccountDetailsOpened,
category: MetaMetricsEventCategory.Navigation,
properties: {
location: 'Account Options',
},
});
onClose();
}}
iconName={ICON_NAMES.SCAN_BARCODE}
>
{t('accountDetails')}
</MenuItem>
<MenuItem
data-testid="account-options-menu__connected-sites"
onClick={() => {
trackEvent({
event: MetaMetricsEventName.NavConnectedSitesOpened,
category: MetaMetricsEventCategory.Navigation,
properties: {
location: 'Account Options',
},
});
history.push(CONNECTED_ROUTE);
onClose();
}}
iconName={ICON_NAMES.CONNECT}
>
{t('connectedSites')}
</MenuItem>
{isRemovable ? (
<MenuItem
data-testid="account-options-menu__remove-account"
onClick={() => {
dispatch(
showModal({
name: 'CONFIRM_REMOVE_ACCOUNT',
identity: selectedIdentity,
}),
);
onClose();
}}
iconName={ICON_NAMES.TRASH}
>
{t('removeAccount')}
</MenuItem>
) : null}
</Menu>
);
}
AccountOptionsMenu.propTypes = {
anchorElement: PropTypes.instanceOf(window.Element),
onClose: PropTypes.func.isRequired,
};
AccountOptionsMenu.defaultProps = {
anchorElement: undefined,
};