metamask-extension/ui/app/accounts/index.js

const inherits = require('util').inherits
const Component = require('react').Component
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const actions = require('../actions')
const valuesFor = require('../util').valuesFor
const findDOMNode = require('react-dom').findDOMNode
const AccountListItem = require('./account-list-item')

module.exports = connect(mapStateToProps)(AccountsScreen)

function mapStateToProps (state) {
  const pendingTxs = valuesFor(state.metamask.unapprovedTxs)
  .filter(txMeta => txMeta.metamaskNetworkId === state.metamask.network)
  const pendingMsgs = valuesFor(state.metamask.unapprovedMsgs)
  const pending = pendingTxs.concat(pendingMsgs)

  return {
    accounts: state.metamask.accounts,
    identities: state.metamask.identities,
    unapprovedTxs: state.metamask.unapprovedTxs,
    selectedAddress: state.metamask.selectedAddress,
    scrollToBottom: state.appState.scrollToBottom,
    pending,
    keyrings: state.metamask.keyrings,
    conversionRate: state.metamask.conversionRate,
    currentCurrency: state.metamask.currentCurrency,
  }
}

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

AccountsScreen.prototype.render = function () {
  const props = this.props
  const { keyrings, conversionRate, currentCurrency } = props
  const identityList = valuesFor(props.identities)
  const unapprovedTxList = valuesFor(props.unapprovedTxs)

  return (

    h('.accounts-section.flex-grow', [

      // subtitle and nav
      h('.section-title.flex-center', [
        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
          onClick: this.goHome.bind(this),
        }),
        h('h2.page-subtitle', 'Select Account'),
      ]),

      h('hr.horizontal-line'),

      // identity selection
      h('section.identity-section', {
        style: {
          height: '418px',
          overflowY: 'auto',
          overflowX: 'hidden',
        },
      },
        [
          identityList.map((identity) => {
            const pending = this.props.pending.filter((txOrMsg) => {
              if ('txParams' in txOrMsg) {
                return txOrMsg.txParams.from === identity.address
              } else if ('msgParams' in txOrMsg) {
                return txOrMsg.msgParams.from === identity.address
              } else {
                return false
              }
            })

            const simpleAddress = identity.address.substring(2).toLowerCase()
            const keyring = keyrings.find((kr) => {
              return kr.accounts.includes(simpleAddress) ||
                kr.accounts.includes(identity.address)
            })

            return h(AccountListItem, {
              key: `acct-panel-${identity.address}`,
              identity,
              selectedAddress: this.props.selectedAddress,
              conversionRate,
              currentCurrency,
              accounts: this.props.accounts,
              onShowDetail: this.onShowDetail.bind(this),
              pending,
              keyring,
            })
          }),

          h('hr.horizontal-line'),
          h('div.footer.hover-white.pointer', {
            key: 'reveal-account-bar',
            onClick: () => {
              this.addNewAccount()
            },
            style: {
              display: 'flex',
              height: '40px',
              padding: '10px',
              justifyContent: 'center',
              alignItems: 'center',
            },
          }, [
            h('i.fa.fa-plus.fa-lg', {key: ''}),
          ]),
          h('hr.horizontal-line'),
        ]),

      unapprovedTxList.length ? (

        h('.unconftx-link.flex-row.flex-center', {
          onClick: this.navigateToConfTx.bind(this),
        }, [
          h('span', 'Unconfirmed Txs'),
          h('i.fa.fa-arrow-right.fa-lg'),
        ])

      ) : (
        null
      ),
    ])
  )
}

// If a new account was revealed, scroll to the bottom
AccountsScreen.prototype.componentDidUpdate = function () {
  const scrollToBottom = this.props.scrollToBottom

  if (scrollToBottom) {
    var container = findDOMNode(this)
    var scrollable = container.querySelector('.identity-section')
    scrollable.scrollTop = scrollable.scrollHeight
  }
}

AccountsScreen.prototype.navigateToConfTx = function () {
  event.stopPropagation()
  this.props.dispatch(actions.showConfTxPage())
}

AccountsScreen.prototype.onShowDetail = function (address, event) {
  event.stopPropagation()
  this.props.dispatch(actions.showAccountDetail(address))
}

AccountsScreen.prototype.addNewAccount = function () {
  this.props.dispatch(actions.addNewAccount(0))
}

/* An optional view proposed in this design:
 * https://consensys.quip.com/zZVrAysM5znY
AccountsScreen.prototype.addNewAccount = function () {
  this.props.dispatch(actions.navigateToNewAccountScreen())
}
*/

AccountsScreen.prototype.goHome = function () {
  this.props.dispatch(actions.goHome())
}