add hamburger menu to eth page (#10938)
* add hamburger menu to eth page * change token-options to asset-options, use more direct selector for user address fetchfeature/default_network_editable
parent
37159a58e1
commit
13a0389c96
@ -0,0 +1,80 @@ |
||||
import React, { useContext, useState } from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
import { I18nContext } from '../../../contexts/i18n'; |
||||
import { Menu, MenuItem } from '../../../components/ui/menu'; |
||||
|
||||
const AssetOptions = ({ |
||||
onRemove, |
||||
onViewEtherscan, |
||||
onViewAccountDetails, |
||||
tokenSymbol, |
||||
isNativeAsset, |
||||
}) => { |
||||
const t = useContext(I18nContext); |
||||
const [assetOptionsButtonElement, setAssetOptionsButtonElement] = useState( |
||||
null, |
||||
); |
||||
const [assetOptionsOpen, setAssetOptionsOpen] = useState(false); |
||||
|
||||
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={() => { |
||||
setAssetOptionsOpen(false); |
||||
onViewEtherscan(); |
||||
}} |
||||
> |
||||
{t('viewOnEtherscan')} |
||||
</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> |
||||
)} |
||||
</Menu> |
||||
) : null} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
AssetOptions.propTypes = { |
||||
isNativeAsset: PropTypes.bool, |
||||
onRemove: PropTypes.func.isRequired, |
||||
onViewEtherscan: PropTypes.func.isRequired, |
||||
onViewAccountDetails: PropTypes.func.isRequired, |
||||
tokenSymbol: PropTypes.string, |
||||
}; |
||||
|
||||
export default AssetOptions; |
@ -1,76 +0,0 @@ |
||||
import React, { useContext, useState } from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
import { I18nContext } from '../../../contexts/i18n'; |
||||
import { Menu, MenuItem } from '../../../components/ui/menu'; |
||||
|
||||
const TokenOptions = ({ |
||||
onRemove, |
||||
onViewEtherscan, |
||||
onViewAccountDetails, |
||||
tokenSymbol, |
||||
}) => { |
||||
const t = useContext(I18nContext); |
||||
const [tokenOptionsButtonElement, setTokenOptionsButtonElement] = useState( |
||||
null, |
||||
); |
||||
const [tokenOptionsOpen, setTokenOptionsOpen] = useState(false); |
||||
|
||||
return ( |
||||
<> |
||||
<button |
||||
className="fas fa-ellipsis-v token-options__button" |
||||
data-testid="token-options__button" |
||||
onClick={() => setTokenOptionsOpen(true)} |
||||
ref={setTokenOptionsButtonElement} |
||||
title={t('tokenOptions')} |
||||
/> |
||||
{tokenOptionsOpen ? ( |
||||
<Menu |
||||
anchorElement={tokenOptionsButtonElement} |
||||
onHide={() => setTokenOptionsOpen(false)} |
||||
> |
||||
<MenuItem |
||||
iconClassName="fas fa-qrcode" |
||||
data-testid="token-options__account-details" |
||||
onClick={() => { |
||||
setTokenOptionsOpen(false); |
||||
onViewAccountDetails(); |
||||
}} |
||||
> |
||||
{t('accountDetails')} |
||||
</MenuItem> |
||||
<MenuItem |
||||
iconClassName="fas fa-external-link-alt token-options__icon" |
||||
data-testid="token-options__etherscan" |
||||
onClick={() => { |
||||
setTokenOptionsOpen(false); |
||||
onViewEtherscan(); |
||||
}} |
||||
> |
||||
{t('viewOnEtherscan')} |
||||
</MenuItem> |
||||
<MenuItem |
||||
iconClassName="fas fa-trash-alt token-options__icon" |
||||
data-testid="token-options__hide" |
||||
onClick={() => { |
||||
setTokenOptionsOpen(false); |
||||
onRemove(); |
||||
}} |
||||
> |
||||
{t('hideTokenSymbol', [tokenSymbol])} |
||||
</MenuItem> |
||||
</Menu> |
||||
) : null} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
TokenOptions.propTypes = { |
||||
onRemove: PropTypes.func.isRequired, |
||||
onViewEtherscan: PropTypes.func.isRequired, |
||||
onViewAccountDetails: PropTypes.func.isRequired, |
||||
tokenSymbol: PropTypes.string.isRequired, |
||||
}; |
||||
|
||||
export default TokenOptions; |
Loading…
Reference in new issue