metamask-extension/ui/app/components/app/connected-accounts-list/connected-accounts-list.component.js

import PropTypes from 'prop-types'
import React, { PureComponent } from 'react'
import ConnectedAccountsListItem from './connected-accounts-list-item'
import ConnectedAccountsListOptions from './connected-accounts-list-options'
import { MenuItem } from '../../ui/menu'

export default class ConnectedAccountsList extends PureComponent {
  static contextTypes = {
    t: PropTypes.func.isRequired,
  }

  static defaultProps = {
    accountToConnect: null,
  }

  static propTypes = {
    accountToConnect: PropTypes.shape({
      address: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
    }),
    connectedAccounts: PropTypes.arrayOf(PropTypes.shape({
      address: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      lastActive: PropTypes.number,
    })).isRequired,
    connectAccount: PropTypes.func.isRequired,
    selectedAddress: PropTypes.string.isRequired,
    removePermittedAccount: PropTypes.func,
    setSelectedAddress: PropTypes.func.isRequired,
    shouldRenderListOptions: (props, propName, componentName) => {
      if (typeof props[propName] !== 'boolean') {
        return new Error(
          `Warning: Failed prop type: '${propName}' of component '${componentName}' must be a boolean. Received: ${typeof props[propName]}`,
        )
      } else if (props[propName] && !props['removePermittedAccount']) {
        return new Error(
          `Warning: Failed prop type: '${propName}' of component '${componentName}' requires prop 'removePermittedAccount'.`,
        )
      }
    },
  }

  state = {
    accountWithOptionsShown: null,
  }

  disconnectAccount = () => {
    this.hideAccountOptions()
    this.props.removePermittedAccount(this.state.accountWithOptionsShown)
  }

  switchAccount = (address) => {
    this.hideAccountOptions()
    this.props.setSelectedAddress(address)
  }

  hideAccountOptions = () => {
    this.setState({ accountWithOptionsShown: null })
  }

  showAccountOptions = (address) => {
    this.setState({ accountWithOptionsShown: address })
  }

  renderUnconnectedAccount () {
    const { accountToConnect, connectAccount } = this.props
    const { t } = this.context

    if (!accountToConnect) {
      return null
    }

    const { address, name } = accountToConnect
    return (
      <ConnectedAccountsListItem
        className="connected-accounts-list__row--highlight"
        address={address}
        name={`${name} (…${address.substr(-4, 4)})`}
        status={t('statusNotConnected')}
        action={(
          <a
            className="connected-accounts-list__account-status-link"
            onClick={() => connectAccount(accountToConnect.address)}
          >
            {t('connect')}
          </a>
        )}
      />
    )
  }

  renderListItemOptions (address) {
    const { accountWithOptionsShown } = this.state
    const { t } = this.context

    return (
      <ConnectedAccountsListOptions
        onHideOptions={this.hideAccountOptions}
        onShowOptions={this.showAccountOptions.bind(null, address)}
        show={accountWithOptionsShown === address}
      >
        <MenuItem
          iconClassName="disconnect-icon"
          onClick={this.disconnectAccount}
        >
          {t('disconnectThisAccount')}
        </MenuItem>
      </ConnectedAccountsListOptions>
    )
  }

  renderListItemAction (address) {
    const { t } = this.context

    return (
      <a
        className="connected-accounts-list__account-status-link"
        onClick={() => this.switchAccount(address)}
      >
        {t('switchToThisAccount')}
      </a>
    )
  }

  render () {
    const {
      connectedAccounts,
      selectedAddress,
      shouldRenderListOptions,
    } = this.props
    const { t } = this.context

    return (
      <>
        <main className="connected-accounts-list">
          {this.renderUnconnectedAccount()}
          {
            connectedAccounts.map(({ address, name }, index) => {
              return (
                <ConnectedAccountsListItem
                  key={address}
                  address={address}
                  name={`${name} (…${address.substr(-4, 4)})`}
                  status={index === 0 ? t('active') : null}
                  options={
                    shouldRenderListOptions
                      ? this.renderListItemOptions(address)
                      : null
                  }
                  action={
                    address !== selectedAddress
                      ? this.renderListItemAction(address)
                      : null
                  }
                />
              )
            })
          }
        </main>
      </>
    )
  }
}