metamask-extension/ui/app/components/account-menu/index.js

const inherits = require('util').inherits
const Component = require('react').Component
const connect = require('react-redux').connect
const { compose } = require('recompose')
const { withRouter } = require('react-router-dom')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const actions = require('../../actions')
const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums')
const { getEnvironmentType } = require('../../../../app/scripts/lib/util')
const Tooltip = require('../tooltip')
import Identicon from '../identicon'
import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
import { PRIMARY } from '../../constants/common'
import { getMetaMaskAccounts } from '../../selectors'

const {
  SETTINGS_ROUTE,
  INFO_ROUTE,
  NEW_ACCOUNT_ROUTE,
  IMPORT_ACCOUNT_ROUTE,
  CONNECT_HARDWARE_ROUTE,
  DEFAULT_ROUTE,
} = require('../../routes')

module.exports = compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
)(AccountMenu)

AccountMenu.contextTypes = {
  t: PropTypes.func,
}

inherits(AccountMenu, Component)
function AccountMenu () { Component.call(this) }

function mapStateToProps (state) {
  return {
    selectedAddress: state.metamask.selectedAddress,
    isAccountMenuOpen: state.metamask.isAccountMenuOpen,
    keyrings: state.metamask.keyrings,
    identities: state.metamask.identities,
    accounts: getMetaMaskAccounts(state),
  }
}

function mapDispatchToProps (dispatch) {
  return {
    toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
    showAccountDetail: address => {
      dispatch(actions.showAccountDetail(address))
      dispatch(actions.hideSidebar())
      dispatch(actions.toggleAccountMenu())
    },
    lockMetamask: () => {
      dispatch(actions.lockMetamask())
      dispatch(actions.hideWarning())
      dispatch(actions.hideSidebar())
      dispatch(actions.toggleAccountMenu())
    },
    showConfigPage: () => {
      dispatch(actions.showConfigPage())
      dispatch(actions.hideSidebar())
      dispatch(actions.toggleAccountMenu())
    },
    showInfoPage: () => {
      dispatch(actions.showInfoPage())
      dispatch(actions.hideSidebar())
      dispatch(actions.toggleAccountMenu())
    },
    showRemoveAccountConfirmationModal: (identity) => {
      return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity }))
    },
  }
}

AccountMenu.prototype.render = function () {
  const {
    isAccountMenuOpen,
    toggleAccountMenu,
    lockMetamask,
    history,
  } = this.props

  return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [
    h(CloseArea, { onClick: toggleAccountMenu }),
    h(Item, {
      className: 'account-menu__header',
    }, [
      this.context.t('myAccounts'),
      h('button.account-menu__logout-button', {
        onClick: () => {
          lockMetamask()
          history.push(DEFAULT_ROUTE)
        },
      }, this.context.t('logout')),
    ]),
    h(Divider),
    h('div.account-menu__accounts', this.renderAccounts()),
    h(Divider),
    h(Item, {
      onClick: () => {
        toggleAccountMenu()
        history.push(NEW_ACCOUNT_ROUTE)
      },
      icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }),
      text: this.context.t('createAccount'),
    }),
    h(Item, {
      onClick: () => {
        toggleAccountMenu()
        history.push(IMPORT_ACCOUNT_ROUTE)
      },
      icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }),
      text: this.context.t('importAccount'),
    }),
    h(Item, {
      onClick: () => {
        toggleAccountMenu()
        if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
          global.platform.openExtensionInBrowser(CONNECT_HARDWARE_ROUTE)
        } else {
          history.push(CONNECT_HARDWARE_ROUTE)
        }
      },
      icon: h('img.account-menu__item-icon', { src: 'images/connect-icon.svg' }),
      text: this.context.t('connectHardwareWallet'),
    }),
    h(Divider),
    h(Item, {
      onClick: () => {
        toggleAccountMenu()
        history.push(INFO_ROUTE)
      },
      icon: h('img', { src: 'images/mm-info-icon.svg' }),
      text: this.context.t('infoHelp'),
    }),
    h(Item, {
      onClick: () => {
        toggleAccountMenu()
        history.push(SETTINGS_ROUTE)
      },
      icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
      text: this.context.t('settings'),
    }),
  ])
}

AccountMenu.prototype.renderAccounts = function () {
  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 h(
      'div.account-menu__account.menu__item--clickable',
      { onClick: () => showAccountDetail(identity.address) },
      [
        h('div.account-menu__check-mark', [
          isSelected ? h('div.account-menu__check-mark-icon') : null,
        ]),

        h(
          Identicon,
          {
            address: identity.address,
            diameter: 24,
          },
        ),

        h('div.account-menu__account-info', [
          h('div.account-menu__name', identity.name || ''),
          h(UserPreferencedCurrencyDisplay, {
            className: 'account-menu__balance',
            value: balanceValue,
            type: PRIMARY,
          }),
        ]),

        this.renderKeyringType(keyring),
        this.renderRemoveAccount(keyring, identity),
      ],
    )
  })
}

AccountMenu.prototype.renderRemoveAccount = function (keyring, identity) {
  // Any account that's not from the HD wallet Keyring can be removed
  const type = keyring.type
  const isRemovable = type !== 'HD Key Tree'
  if (isRemovable) {
    return h(Tooltip, {
      title: this.context.t('removeAccount'),
      position: 'bottom',
    }, [
        h('a.remove-account-icon', {
          onClick: (e) => this.removeAccount(e, identity),
        }, ''),
      ])
  }
  return null
}

AccountMenu.prototype.removeAccount = function (e, identity) {
  e.preventDefault()
  e.stopPropagation()
  const { showRemoveAccountConfirmationModal } = this.props
  showRemoveAccountConfirmationModal(identity)
}

AccountMenu.prototype.renderKeyringType = function (keyring) {
  try { // Sometimes keyrings aren't loaded yet:
    const type = keyring.type
    let label
    switch (type) {
      case 'Trezor Hardware':
      case 'Ledger Hardware':
        label = this.context.t('hardware')
      break
      case 'Simple Key Pair':
        label = this.context.t('imported')
      break
      default:
        label = ''
    }

    return label !== '' ? h('.keyring-label.allcaps', label) : null

  } catch (e) { return }
}