From 0b4469b8423b09ce1d67dd426f5753596dbc8c56 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 20 Dec 2018 12:26:11 -0800 Subject: Add scrolling button to account list --- .../account-menu/account-menu.component.js | 301 +++++++++++++++++++++ 1 file changed, 301 insertions(+) create mode 100644 ui/app/components/account-menu/account-menu.component.js (limited to 'ui/app/components/account-menu/account-menu.component.js') diff --git a/ui/app/components/account-menu/account-menu.component.js b/ui/app/components/account-menu/account-menu.component.js new file mode 100644 index 000000000..b2fec647a --- /dev/null +++ b/ui/app/components/account-menu/account-menu.component.js @@ -0,0 +1,301 @@ +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, + } + + static propTypes = { + accounts: PropTypes.object, + history: PropTypes.object, + identities: PropTypes.object, + isAccountMenuOpen: 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 ( +
showAccountDetail(identity.address)} + key={identity.address} + > +
+ { isSelected &&
} +
+ +
+
+ { identity.name || '' } +
+ +
+ { this.renderKeyringType(keyring) } + { this.renderRemoveAccount(keyring, identity) } +
+ ) + }) + } + + 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 && ( + + this.removeAccount(e, identity)} + /> + + ) + } + + 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 && ( +
+ { label } +
+ ) + } + + 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 && ( +
+ +
+ ) + } + + render () { + const { t } = this.context + const { + isAccountMenuOpen, + toggleAccountMenu, + lockMetamask, + history, + } = this.props + + return ( + + + + { t('myAccounts') } + + + +
+
+ { this.renderAccounts() } +
+ { this.renderScrollButton() } +
+ + { + toggleAccountMenu() + history.push(NEW_ACCOUNT_ROUTE) + }} + icon={ + + } + text={t('createAccount')} + /> + { + toggleAccountMenu() + history.push(IMPORT_ACCOUNT_ROUTE) + }} + icon={ + + } + text={t('importAccount')} + /> + { + toggleAccountMenu() + + if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { + global.platform.openExtensionInBrowser(CONNECT_HARDWARE_ROUTE) + } else { + history.push(CONNECT_HARDWARE_ROUTE) + } + }} + icon={ + + } + text={t('connectHardwareWallet')} + /> + + { + toggleAccountMenu() + history.push(INFO_ROUTE) + }} + icon={ + + } + text={t('infoHelp')} + /> + { + toggleAccountMenu() + history.push(SETTINGS_ROUTE) + }} + icon={ + + } + text={t('settings')} + /> + + ) + } +} -- cgit v1.2.3