1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 20:57:12 +01:00
metamask-extension/ui/components/app/menu-bar/account-options-menu.js

169 lines
4.8 KiB
JavaScript

import React 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 } from '../../../helpers/constants/routes';
import { Menu, MenuItem } from '../../ui/menu';
import {
getCurrentChainId,
getCurrentKeyring,
getRpcPrefsForCurrentProvider,
getSelectedIdentity,
} from '../../../selectors';
import { useI18nContext } from '../../../hooks/useI18nContext';
import {
useMetricEvent,
useNewMetricEvent,
} from '../../../hooks/useMetricEvent';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
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 getBlockExplorerUrlHost = () => {
try {
return new URL(blockExplorerUrl)?.hostname;
} catch (err) {
return '';
}
};
const openFullscreenEvent = useMetricEvent({
eventOpts: {
category: 'Navigation',
action: 'Account Options',
name: 'Clicked Expand View',
},
});
const viewAccountDetailsEvent = useMetricEvent({
eventOpts: {
category: 'Navigation',
action: 'Account Options',
name: 'Viewed Account Details',
},
});
const openConnectedSitesEvent = useMetricEvent({
eventOpts: {
category: 'Navigation',
action: 'Account Options',
name: 'Opened Connected Sites',
},
});
const blockExplorerLinkClickedEvent = useNewMetricEvent({
category: 'Navigation',
event: 'Clicked Block Explorer Link',
properties: {
link_type: 'Account Tracker',
action: 'Account Options',
block_explorer_domain: addressLink ? new URL(addressLink)?.hostname : '',
},
});
const isRemovable = keyring.type !== 'HD Key Tree';
const blockExplorerUrlSubTitle = getBlockExplorerUrlHost();
return (
<Menu
anchorElement={anchorElement}
className="account-options-menu"
onHide={onClose}
>
{getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN ? null : (
<MenuItem
onClick={() => {
openFullscreenEvent();
global.platform.openExtensionInBrowser();
onClose();
}}
iconClassName="fas fa-expand-alt"
>
{t('expandView')}
</MenuItem>
)}
<MenuItem
data-testid="account-options-menu__account-details"
onClick={() => {
dispatch(showModal({ name: 'ACCOUNT_DETAILS' }));
viewAccountDetailsEvent();
onClose();
}}
iconClassName="fas fa-qrcode"
>
{t('accountDetails')}
</MenuItem>
<MenuItem
onClick={() => {
blockExplorerLinkClickedEvent();
global.platform.openTab({
url: addressLink,
});
onClose();
}}
subtitle={
blockExplorerUrlSubTitle ? (
<span className="account-options-menu__explorer-origin">
{blockExplorerUrlSubTitle}
</span>
) : null
}
iconClassName="fas fa-external-link-alt"
>
{rpcPrefs.blockExplorerUrl ? t('viewinExplorer') : t('viewOnEtherscan')}
</MenuItem>
<MenuItem
data-testid="account-options-menu__connected-sites"
onClick={() => {
openConnectedSitesEvent();
history.push(CONNECTED_ROUTE);
onClose();
}}
iconClassName="account-options-menu__connected-sites"
>
{t('connectedSites')}
</MenuItem>
{isRemovable ? (
<MenuItem
data-testid="account-options-menu__remove-account"
onClick={() => {
dispatch(
showModal({
name: 'CONFIRM_REMOVE_ACCOUNT',
identity: selectedIdentity,
}),
);
onClose();
}}
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,
};