import PropTypes from 'prop-types' import React, { Component } from 'react' import classnames from 'classnames' import Identicon from '../../../components/ui/identicon' import Button from '../../../components/ui/button' import CheckBox, { CHECKED, INDETERMINATE, UNCHECKED } from '../../../components/ui/check-box' import Tooltip from '../../../components/ui/tooltip' import { PRIMARY } from '../../../helpers/constants/common' import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display' import PermissionsConnectHeader from '../../../components/app/permissions-connect-header' import PermissionsConnectFooter from '../../../components/app/permissions-connect-footer' export default class ChooseAccount extends Component { static propTypes = { accounts: PropTypes.arrayOf(PropTypes.shape({ address: PropTypes.string, addressLabel: PropTypes.string, lastConnectedDate: PropTypes.string, balance: PropTypes.string, })).isRequired, selectAccounts: PropTypes.func.isRequired, selectNewAccountViaModal: PropTypes.func.isRequired, nativeCurrency: PropTypes.string.isRequired, addressLastConnectedMap: PropTypes.object, cancelPermissionsRequest: PropTypes.func.isRequired, permissionsRequestId: PropTypes.string.isRequired, selectedAccountAddresses: PropTypes.object.isRequired, targetDomainMetadata: PropTypes.shape({ extensionId: PropTypes.string, icon: PropTypes.string, host: PropTypes.string.isRequired, name: PropTypes.string.isRequired, origin: PropTypes.string.isRequired, }), } state = { selectedAccounts: this.props.selectedAccountAddresses, } static defaultProps = { addressLastConnectedMap: {}, } static contextTypes = { t: PropTypes.func, } handleAccountClick (address) { const { selectedAccounts } = this.state const newSelectedAccounts = new Set(selectedAccounts) if (newSelectedAccounts.has(address)) { newSelectedAccounts.delete(address) } else { newSelectedAccounts.add(address) } this.setState({ selectedAccounts: newSelectedAccounts }) } selectAll () { const { accounts } = this.props const newSelectedAccounts = new Set(accounts.map((account) => account.address)) this.setState({ selectedAccounts: newSelectedAccounts }) } deselectAll () { this.setState({ selectedAccounts: new Set() }) } allAreSelected () { const { accounts } = this.props const { selectedAccounts } = this.state return accounts.every(({ address }) => selectedAccounts.has(address)) } renderAccountsList = () => { const { accounts, nativeCurrency, addressLastConnectedMap } = this.props const { selectedAccounts } = this.state return (
{ accounts.map((account, index) => { const { address, addressLabel, balance } = account return (
this.handleAccountClick(address) } className="permissions-connect-choose-account__account" >
{ addressLabel }
{ addressLastConnectedMap[address] ? ( ) : null }
) }) }
) } renderAccountsListHeader () { const { t } = this.context const { selectNewAccountViaModal, accounts } = this.props const { selectedAccounts } = this.state let checked if (this.allAreSelected()) { checked = CHECKED } else if (selectedAccounts.size === 0) { checked = UNCHECKED } else { checked = INDETERMINATE } return (
1, })} > { accounts.length > 1 ? (
(this.allAreSelected() ? this.deselectAll() : this.selectAll())} />
{ this.context.t('selectAll') }
{t('selectingAllWillAllow')}
)} >
) : null }
selectNewAccountViaModal(this.handleAccountClick.bind(this))} > { this.context.t('newAccount') }
) } render () { const { selectAccounts, permissionsRequestId, cancelPermissionsRequest, targetDomainMetadata, accounts, } = this.props const { selectedAccounts } = this.state const { t } = this.context return (
0 ? t('selectAccounts') : t('connectAccountOrCreate') } siteOrigin={targetDomainMetadata.origin} /> {this.renderAccountsListHeader()} {this.renderAccountsList()}
) } }