diff options
Diffstat (limited to 'ui/app/components/account-menu')
-rw-r--r-- | ui/app/components/account-menu/account-menu.component.js | 340 | ||||
-rw-r--r-- | ui/app/components/account-menu/account-menu.container.js | 62 | ||||
-rw-r--r-- | ui/app/components/account-menu/index.js | 1 | ||||
-rw-r--r-- | ui/app/components/account-menu/index.scss | 177 |
4 files changed, 0 insertions, 580 deletions
diff --git a/ui/app/components/account-menu/account-menu.component.js b/ui/app/components/account-menu/account-menu.component.js deleted file mode 100644 index f7c962874..000000000 --- a/ui/app/components/account-menu/account-menu.component.js +++ /dev/null @@ -1,340 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import debounce from 'lodash.debounce' -import { Menu, Item, Divider, CloseArea } from '../dropdowns/components/menu' -import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums' -import { getEnvironmentType } from '../../../../app/scripts/lib/util' -import Tooltip from '../tooltip' -import Identicon from '../identicon' -import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display' -import { PRIMARY } from '../../constants/common' -import { - SETTINGS_ROUTE, - INFO_ROUTE, - NEW_ACCOUNT_ROUTE, - IMPORT_ACCOUNT_ROUTE, - CONNECT_HARDWARE_ROUTE, - DEFAULT_ROUTE, -} from '../../routes' - -export default class AccountMenu extends PureComponent { - static contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, - } - - static propTypes = { - accounts: PropTypes.object, - history: PropTypes.object, - identities: PropTypes.object, - isAccountMenuOpen: PropTypes.bool, - prevIsAccountMenuOpen: PropTypes.bool, - keyrings: PropTypes.array, - lockMetamask: PropTypes.func, - selectedAddress: PropTypes.string, - showAccountDetail: PropTypes.func, - showRemoveAccountConfirmationModal: PropTypes.func, - toggleAccountMenu: PropTypes.func, - } - - state = { - atAccountListBottom: false, - } - - componentDidUpdate (prevProps) { - const { prevIsAccountMenuOpen } = prevProps - const { isAccountMenuOpen } = this.props - - if (!prevIsAccountMenuOpen && isAccountMenuOpen) { - this.setAtAccountListBottom() - } - } - - renderAccounts () { - const { - identities, - accounts, - selectedAddress, - keyrings, - showAccountDetail, - } = this.props - - const accountOrder = keyrings.reduce((list, keyring) => list.concat(keyring.accounts), []) - - return accountOrder.filter(address => !!identities[address]).map(address => { - const identity = identities[address] - const isSelected = identity.address === selectedAddress - - const balanceValue = accounts[address] ? accounts[address].balance : '' - const simpleAddress = identity.address.substring(2).toLowerCase() - - const keyring = keyrings.find(kr => { - return kr.accounts.includes(simpleAddress) || kr.accounts.includes(identity.address) - }) - - return ( - <div - className="account-menu__account menu__item--clickable" - onClick={() => { - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Main Menu', - name: 'Switched Account', - }, - }) - showAccountDetail(identity.address) - }} - key={identity.address} - > - <div className="account-menu__check-mark"> - { isSelected && <div className="account-menu__check-mark-icon" /> } - </div> - <Identicon - address={identity.address} - diameter={24} - /> - <div className="account-menu__account-info"> - <div className="account-menu__name"> - { identity.name || '' } - </div> - <UserPreferencedCurrencyDisplay - className="account-menu__balance" - value={balanceValue} - type={PRIMARY} - /> - </div> - { this.renderKeyringType(keyring) } - { this.renderRemoveAccount(keyring, identity) } - </div> - ) - }) - } - - renderRemoveAccount (keyring, identity) { - const { t } = this.context - // Any account that's not from the HD wallet Keyring can be removed - const { type } = keyring - const isRemovable = type !== 'HD Key Tree' - - return isRemovable && ( - <Tooltip - title={t('removeAccount')} - position="bottom" - > - <a - className="remove-account-icon" - onClick={e => this.removeAccount(e, identity)} - /> - </Tooltip> - ) - } - - removeAccount (e, identity) { - e.preventDefault() - e.stopPropagation() - const { showRemoveAccountConfirmationModal } = this.props - showRemoveAccountConfirmationModal(identity) - } - - renderKeyringType (keyring) { - const { t } = this.context - - // Sometimes keyrings aren't loaded yet - if (!keyring) { - return null - } - - const { type } = keyring - let label - - switch (type) { - case 'Trezor Hardware': - case 'Ledger Hardware': - label = t('hardware') - break - case 'Simple Key Pair': - label = t('imported') - break - } - - return label && ( - <div className="keyring-label allcaps"> - { label } - </div> - ) - } - - setAtAccountListBottom = () => { - const target = document.querySelector('.account-menu__accounts') - const { scrollTop, offsetHeight, scrollHeight } = target - const atAccountListBottom = scrollTop + offsetHeight >= scrollHeight - this.setState({ atAccountListBottom }) - } - - onScroll = debounce(this.setAtAccountListBottom, 25) - - handleScrollDown = e => { - e.stopPropagation() - const target = document.querySelector('.account-menu__accounts') - const { scrollHeight } = target - target.scroll({ left: 0, top: scrollHeight, behavior: 'smooth' }) - this.setAtAccountListBottom() - } - - renderScrollButton () { - const { accounts } = this.props - const { atAccountListBottom } = this.state - - return !atAccountListBottom && Object.keys(accounts).length > 3 && ( - <div - className="account-menu__scroll-button" - onClick={this.handleScrollDown} - > - <img - src="./images/icons/down-arrow.svg" - width={28} - height={28} - /> - </div> - ) - } - - render () { - const { t } = this.context - const { - isAccountMenuOpen, - toggleAccountMenu, - lockMetamask, - history, - } = this.props - const { metricsEvent } = this.context - - return ( - <Menu - className="account-menu" - isShowing={isAccountMenuOpen} - > - <CloseArea onClick={toggleAccountMenu} /> - <Item className="account-menu__header"> - { t('myAccounts') } - <button - className="account-menu__logout-button" - onClick={() => { - lockMetamask() - history.push(DEFAULT_ROUTE) - }} - > - { t('logout') } - </button> - </Item> - <Divider /> - <div className="account-menu__accounts-container"> - <div - className="account-menu__accounts" - onScroll={this.onScroll} - > - { this.renderAccounts() } - </div> - { this.renderScrollButton() } - </div> - <Divider /> - <Item - onClick={() => { - toggleAccountMenu() - metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Main Menu', - name: 'Clicked Create Account', - }, - }) - history.push(NEW_ACCOUNT_ROUTE) - }} - icon={ - <img - className="account-menu__item-icon" - src="images/plus-btn-white.svg" - /> - } - text={t('createAccount')} - /> - <Item - onClick={() => { - toggleAccountMenu() - metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Main Menu', - name: 'Clicked Import Account', - }, - }) - history.push(IMPORT_ACCOUNT_ROUTE) - }} - icon={ - <img - className="account-menu__item-icon" - src="images/import-account.svg" - /> - } - text={t('importAccount')} - /> - <Item - onClick={() => { - toggleAccountMenu() - metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Main Menu', - name: 'Clicked Connect Hardware', - }, - }) - if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { - global.platform.openExtensionInBrowser(CONNECT_HARDWARE_ROUTE) - } else { - history.push(CONNECT_HARDWARE_ROUTE) - } - }} - icon={ - <img - className="account-menu__item-icon" - src="images/connect-icon.svg" - /> - } - text={t('connectHardwareWallet')} - /> - <Divider /> - <Item - onClick={() => { - toggleAccountMenu() - history.push(INFO_ROUTE) - }} - icon={ - <img src="images/mm-info-icon.svg" /> - } - text={t('infoHelp')} - /> - <Item - onClick={() => { - toggleAccountMenu() - history.push(SETTINGS_ROUTE) - this.context.metricsEvent({ - eventOpts: { - category: 'Navigation', - action: 'Main Menu', - name: 'Opened Settings', - }, - }) - }} - icon={ - <img - className="account-menu__item-icon" - src="images/settings.svg" - /> - } - text={t('settings')} - /> - </Menu> - ) - } -} diff --git a/ui/app/components/account-menu/account-menu.container.js b/ui/app/components/account-menu/account-menu.container.js deleted file mode 100644 index 93246ec72..000000000 --- a/ui/app/components/account-menu/account-menu.container.js +++ /dev/null @@ -1,62 +0,0 @@ -import { connect } from 'react-redux' -import { compose } from 'recompose' -import { withRouter } from 'react-router-dom' -import { - toggleAccountMenu, - showAccountDetail, - hideSidebar, - lockMetamask, - hideWarning, - showConfigPage, - showInfoPage, - showModal, -} from '../../actions' -import { getMetaMaskAccounts } from '../../selectors' -import AccountMenu from './account-menu.component' - -function mapStateToProps (state) { - const { metamask: { selectedAddress, isAccountMenuOpen, keyrings, identities } } = state - - return { - selectedAddress, - isAccountMenuOpen, - keyrings, - identities, - accounts: getMetaMaskAccounts(state), - } -} - -function mapDispatchToProps (dispatch) { - return { - toggleAccountMenu: () => dispatch(toggleAccountMenu()), - showAccountDetail: address => { - dispatch(showAccountDetail(address)) - dispatch(hideSidebar()) - dispatch(toggleAccountMenu()) - }, - lockMetamask: () => { - dispatch(lockMetamask()) - dispatch(hideWarning()) - dispatch(hideSidebar()) - dispatch(toggleAccountMenu()) - }, - showConfigPage: () => { - dispatch(showConfigPage()) - dispatch(hideSidebar()) - dispatch(toggleAccountMenu()) - }, - showInfoPage: () => { - dispatch(showInfoPage()) - dispatch(hideSidebar()) - dispatch(toggleAccountMenu()) - }, - showRemoveAccountConfirmationModal: identity => { - return dispatch(showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity })) - }, - } -} - -export default compose( - withRouter, - connect(mapStateToProps, mapDispatchToProps) -)(AccountMenu) diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js deleted file mode 100644 index b2b4e4c6f..000000000 --- a/ui/app/components/account-menu/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './account-menu.container' diff --git a/ui/app/components/account-menu/index.scss b/ui/app/components/account-menu/index.scss deleted file mode 100644 index 9a61bf887..000000000 --- a/ui/app/components/account-menu/index.scss +++ /dev/null @@ -1,177 +0,0 @@ -.account-menu { - position: fixed; - z-index: 100; - top: 58px; - width: 310px; - - @media screen and (max-width: 575px) { - right: calc(((100vw - 100%) / 2) + 8px); - } - - @media screen and (min-width: 576px) { - right: calc((100vw - 85vw) / 2); - } - - @media screen and (min-width: 769px) { - right: calc((100vw - 80vw) / 2); - } - - @media screen and (min-width: 1281px) { - right: calc((100vw - 65vw) / 2); - } - - &__icon { - margin-left: 20px; - cursor: pointer; - - &--disabled { - cursor: initial; - } - } - - &__header { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - align-items: center; - } - - &__logout-button { - border: 1px solid $dusty-gray; - background-color: transparent; - color: $white; - border-radius: 4px; - font-size: 12px; - line-height: 23px; - padding: 0 24px; - } - - &__item-icon { - width: 16px; - height: 16px; - } - - &__accounts { - display: flex; - flex-flow: column nowrap; - overflow-y: auto; - max-height: 256px; - position: relative; - z-index: 200; - - &::-webkit-scrollbar { - display: none; - } - - @media screen and (max-width: 575px) { - max-height: 228px; - } - - .keyring-label { - margin-top: 5px; - background-color: $dusty-gray; - color: $black; - font-weight: normal; - letter-spacing: .5px; - } - } - - &__account { - display: flex; - flex-flow: row nowrap; - padding: 16px 14px; - flex: 0 0 auto; - - @media screen and (max-width: 575px) { - padding: 12px 14px; - } - - .remove-account-icon { - width: 15px; - margin-left: 10px; - height: 15px; - } - - &:hover { - .remove-account-icon::after { - content: '\00D7'; - font-size: 25px; - color: $white; - cursor: pointer; - position: absolute; - margin-top: -5px; - } - } - } - - &__account-info { - flex: 1 0 auto; - display: flex; - flex-flow: column nowrap; - } - - &__check-mark { - width: 14px; - margin-right: 12px; - flex: 0 0 auto; - } - - &__check-mark-icon { - background-image: url("images/check-white.svg"); - height: 18px; - width: 18px; - background-repeat: no-repeat; - background-position: center; - background-size: contain; - margin: 3px 0; - } - - .identicon { - margin: 0 12px 0 0; - flex: 0 0 auto; - } - - &__name { - color: $white; - font-size: 18px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - max-width: 200px; - } - - &__balance { - color: $dusty-gray; - font-size: 14px; - } - - &__action { - font-size: 16px; - line-height: 18px; - cursor: pointer; - } - - &__accounts-container { - position: relative; - } - - &__scroll-button { - position: absolute; - bottom: 12px; - right: 12px; - height: 28px; - width: 28px; - border-radius: 14px; - background: #3f3f3f; - z-index: 201; - cursor: pointer; - opacity: .8; - display: flex; - justify-content: center; - align-items: center; - - &:hover { - opacity: 1; - } - } -} |