metamask-extension/ui/app/pages/permissions-connect/choose-account/choose-account.component.js

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-v2'
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.object,
  }

  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 (
      <div className="permissions-connect-choose-account__accounts-list">
        {
          accounts.map((account, index) => {
            const { address, addressLabel, balance } = account
            return (
              <div
                key={`permissions-connect-choose-account-${index}`}
                onClick={ () => this.handleAccountClick(address) }
                className="permissions-connect-choose-account__account"
              >
                <div className="permissions-connect-choose-account__account-info-wrapper">
                  <CheckBox
                    className="permissions-connect-choose-account__list-check-box"
                    checked={selectedAccounts.has(address)}
                  />
                  <Identicon
                    diameter={34}
                    address={address}
                  />
                  <div className="permissions-connect-choose-account__account__info">
                    <div className="permissions-connect-choose-account__account__label">{ addressLabel }</div>
                    <UserPreferencedCurrencyDisplay
                      className="permissions-connect-choose-account__account__balance"
                      type={PRIMARY}
                      value={balance}
                      style={{ color: '#6A737D' }}
                      suffix={nativeCurrency}
                    />
                  </div>
                </div>
                { addressLastConnectedMap[address]
                  ? (
                    <Tooltip title={`${this.context.t('lastConnected')} ${addressLastConnectedMap[address]}`}>
                      <i className="fa fa-info-circle" />
                    </Tooltip>
                  )
                  : null
                }
              </div>
            )
          })
        }
      </div>
    )
  }

  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 (
      <div
        className={classnames({
          'permissions-connect-choose-account__accounts-list-header--one-item': accounts.length === 1,
          'permissions-connect-choose-account__accounts-list-header--two-items': accounts.length > 1,
        })}
      >
        { accounts.length > 1
          ? (
            <div className="permissions-connect-choose-account__select-all">
              <CheckBox
                className="permissions-connect-choose-account__header-check-box"
                checked={checked}
                onClick={() => (this.allAreSelected() ? this.deselectAll() : this.selectAll())}
              />
              <div className="permissions-connect-choose-account__text-grey">{ this.context.t('selectAll') }</div>
              <Tooltip
                position="bottom"
                html={(
                  <div style={{ width: 200, padding: 4 }}>
                    {t('selectingAllWillAllow')}
                  </div>
                )}
              >
                <i className="fa fa-info-circle" />
              </Tooltip>
            </div>
          )
          : null
        }
        <div
          className="permissions-connect-choose-account__text-blue"
          onClick={() => selectNewAccountViaModal(this.handleAccountClick.bind(this))}
        >
          { this.context.t('newAccount') }
        </div>
      </div>
    )
  }

  render () {
    const {
      selectAccounts,
      permissionsRequestId,
      cancelPermissionsRequest,
      targetDomainMetadata,
      accounts,
    } = this.props
    const { selectedAccounts } = this.state
    const { t } = this.context
    return (
      <div className="permissions-connect-choose-account">
        <PermissionsConnectHeader
          icon={targetDomainMetadata.icon}
          iconName={targetDomainMetadata.origin}
          headerTitle={t('connectWithMetaMask')}
          headerText={accounts.length > 0
            ? t('selectAccounts')
            : t('connectAccountOrCreate')
          }
        />
        { this.renderAccountsListHeader() }
        { this.renderAccountsList() }
        <div className="permissions-connect-choose-account__footer-container">
          <PermissionsConnectFooter />
          <div className="permissions-connect-choose-account__bottom-buttons">
            <Button
              onClick={ () => cancelPermissionsRequest(permissionsRequestId) }
              type="default"
            >
              { t('cancel') }
            </Button>
            <Button
              onClick={ () => selectAccounts(selectedAccounts) }
              type="primary"
              disabled={ selectedAccounts.size === 0 }
            >
              { t('next') }
            </Button>
          </div>
        </div>
      </div>
    )
  }
}