metamask-extension/ui/app/account-detail.js

const inherits = require('util').inherits
const extend = require('xtend')
const Component = require('react').Component
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const copyToClipboard = require('copy-to-clipboard')
const actions = require('./actions')
const addressSummary = require('./util').addressSummary
const formatBalance = require('./util').formatBalance
const ReactCSSTransitionGroup = require('react-addons-css-transition-group')

const AccountPanel = require('./components/account-panel')
const Identicon = require('./components/identicon')
const transactionList = require('./components/transaction-list')
const ExportAccountView = require('./components/account-export')

module.exports = connect(mapStateToProps)(AccountDetailScreen)

function mapStateToProps(state) {
  return {
    identities: state.metamask.identities,
    accounts: state.metamask.accounts,
    address: state.metamask.selectedAccount,
    accountDetail: state.appState.accountDetail,
    transactions: state.metamask.transactions,
    networkVersion: state.metamask.network,
  }
}

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

AccountDetailScreen.prototype.render = function() {
  var state = this.props
  var selected = state.address || Object.keys(state.accounts)[0]
  var identity = state.identities[selected]
  var account = state.accounts[selected]
  var accountDetail = state.accountDetail
  var transactions = state.transactions

  return (

    h('.account-detail-section.flex-column.flex-grow', {
      style: {
        width: 330,
        'margin-top': 28,
      },
    }, [

      h('.flex-row.flex-space-between', [

        // invisible placeholder for later
        h('i.fa.fa-users.fa-lg.color-orange', {
          style: {
            visibility: 'hidden',
          },
        }),

        // large identicon
        h('.identicon-wrapper.flex-column.flex-center.select-none', [
          h(Identicon, {
            diameter: 62,
            address: selected,
          }),
        ]),

        // small accounts nav
        h('i.fa.fa-users.fa-lg.cursor-pointer.color-orange', {
          onClick: this.navigateToAccounts.bind(this),
        }),

      ]),

      h('h2.font-medium.color-forest.flex-center', {
        style: {
          'padding-top': 8,
          'margin-bottom': 32,
        },
      }, identity && identity.name),

      h('.flex-row.flex-space-between', {
        style: {
          'margin-bottom': 16,
        },
      }, [

        h('div', {
          style: {
            'line-height': 16,
          },
        }, addressSummary(selected)),

        h('i.fa.fa-download.fa-md.cursor-pointer.color-orange', {
          onClick: () => this.requestAccountExport(account.address),
        }),

        h('i.fa.fa-qrcode.fa-md.cursor-disabled.color-orange', {
          onClick: () => console.warn('QRCode not implented...'),
        }),

        h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', {
          onClick: () => copyToClipboard(account.address),
        }),

      ]),

      h('.flex-row.flex-space-between', [

        h('div', {
          style: {
            'line-height': 50,
          },
        }, formatBalance(account.balance)),

        h('button', {
          onClick: () => this.props.dispatch(actions.showSendPage()),
        }, 'SEND ETH'),

      ]),

      h(ReactCSSTransitionGroup, {
        transitionName: "main",
        transitionEnterTimeout: 300,
        transitionLeaveTimeout: 300,
      }, [
        this.subview(),
      ]),

    ])
  )
}

AccountDetailScreen.prototype.subview = function() {
  var subview
  try {
    subview = this.props.accountDetail.subview
  } catch (e) {
    subview = null
  }

  switch (subview) {
    case 'transactions':
      return this.transactionList()
    case 'export':
      var state = extend({key: 'export'}, this.props)
      return h(ExportAccountView, state)
    default:
      return this.transactionList()
  }
}

AccountDetailScreen.prototype.transactionList = function() {
  var state = this.props
  var transactions = state.transactions

  return transactionList(transactions
  // only transactions that have a hash
  .filter(tx => tx.hash)
  // only transactions that are from the current address
  .filter(tx => tx.txParams.from === state.address)
  // only transactions that are on the current network
  .filter(tx => tx.txParams.metamaskNetworkId === state.networkVersion)
  // sort by recency
  .sort((a, b) => b.time - a.time), state.networkVersion)
}

AccountDetailScreen.prototype.navigateToAccounts = function(event){
  event.stopPropagation()
  this.props.dispatch(actions.showAccountsPage())
}

AccountDetailScreen.prototype.requestAccountExport = function() {
  this.props.dispatch(actions.requestExportAccount())
}