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

const inherits = require('util').inherits
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 AccountPanel = require('./components/account-panel')
const transactionList = require('./components/transaction-list')

module.exports = connect(mapStateToProps)(AccountDetailScreen)

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

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

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

  return (

    h('.account-detail-section.flex-column.flex-grow', [

      // subtitle and nav
      h('.section-title.flex-row.flex-center', [
        h('h2.page-subtitle', 'Account Detail'),
      ]),

      // account summary, with embedded action buttons
      h(AccountPanel, {
        showFullAddress: true,
        identity: identity,
        account: account,
      }, []),

      h('div', {
        style: {
          display: 'flex',
        }
      }, [

        h('button', {
          onClick: this.navigateToAccounts.bind(this),
        }, 'CHANGE ACCT'),

        h('button', {
          onClick: () => {
            copyToClipboard(identity.address)
          },
        }, 'COPY ADDR'),

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

        h('button', {
          onClick: () => {
            this.requestAccountExport(identity.address)
          },
        }, 'EXPORT'),
      ]),

      transactionList(transactions
        .filter(tx => tx.txParams.from === state.address)
        .sort((a, b) => b.time - a.time), state.networkVersion),
      this.exportedAccount(accountDetail),

      // transaction table
      /*
      h('section.flex-column', [
        h('span', 'your transaction history will go here.'),
      ]),
      */
    ])
  )
}

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

AccountDetailScreen.prototype.exportAccount = function(address) {
  this.props.dispatch(actions.exportAccount(address))
}

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

AccountDetailScreen.prototype.exportedAccount = function(accountDetail) {
  if (!accountDetail) return
  var accountExport = accountDetail.accountExport

  var notExporting = accountExport === 'none'
  var exportRequested = accountExport === 'requested'
  var accountExported = accountExport === 'completed'

  if (notExporting) return

  if (exportRequested) {
    var warning = `Exporting your private key is very dangerous,
      and you should only do it if you know what you're doing.`
    var confirmation = `If you're absolutely sure, type "I understand" below and
                        hit Enter.`
    return h('div', {}, [
      h('p.error', warning),
      h('p', confirmation),
      h('input#exportAccount', {
        onKeyPress: this.onExportKeyPress.bind(this),
      })
    ])
  }

  if (accountExported) {
    return h('div.privateKey', {

    }, [
      h('label', 'Your private key (click to copy):'),
      h('p.error.cursor-pointer', {
        style: {
          textOverflow: 'ellipsis',
          overflow: 'hidden',
          webkitUserSelect: 'text',
          width: '100%',
        },
        onClick: function(event) {
          copyToClipboard(accountDetail.privateKey)
        }
      }, accountDetail.privateKey),
    ])
  }
}

AccountDetailScreen.prototype.onExportKeyPress = function(event) {
  if (event.key !== 'Enter') return
  event.preventDefault()

  var input = document.getElementById('exportAccount')
  if (input.value === 'I understand') {
    this.props.dispatch(actions.exportAccount(this.props.address))
  } else {
    input.value = ''
    input.placeholder = 'Please retype "I understand" exactly.'
  }
}