1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/app/account-detail.js
2016-10-11 16:03:52 -07:00

290 lines
8.4 KiB
JavaScript

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 CopyButton = require('./components/copyButton')
const AccountInfoLink = require('./components/account-info-link')
const actions = require('./actions')
const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
const valuesFor = require('./util').valuesFor
const Identicon = require('./components/identicon')
const EthBalance = require('./components/eth-balance')
const TransactionList = require('./components/transaction-list')
const ExportAccountView = require('./components/account-export')
const ethUtil = require('ethereumjs-util')
const EditableLabel = require('./components/editable-label')
const Tooltip = require('./components/tooltip')
const BuyButtonSubview = require('./components/buy-button-subview')
module.exports = connect(mapStateToProps)(AccountDetailScreen)
function mapStateToProps (state) {
return {
metamask: state.metamask,
identities: state.metamask.identities,
accounts: state.metamask.accounts,
address: state.metamask.selectedAccount,
accountDetail: state.appState.accountDetail,
transactions: state.metamask.transactions,
network: state.metamask.network,
unconfTxs: valuesFor(state.metamask.unconfTxs),
unconfMsgs: valuesFor(state.metamask.unconfMsgs),
isEthWarningConfirmed: state.metamask.isEthConfirmed,
shapeShiftTxList: state.metamask.shapeShiftTxList,
}
}
inherits(AccountDetailScreen, Component)
function AccountDetailScreen () {
Component.call(this)
}
AccountDetailScreen.prototype.render = function () {
var props = this.props
var selected = props.address || Object.keys(props.accounts)[0]
var identity = props.identities[selected]
var account = props.accounts[selected]
const { network } = props
return (
h('.account-detail-section', [
// identicon, label, balance, etc
h('.account-data-subsection', {
style: {
margin: '0 20px',
},
}, [
// header - identicon + nav
h('div', {
style: {
marginTop: '20px',
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'flex-start',
},
}, [
// large identicon and addresses
h('.identicon-wrapper.select-none', [
h(Identicon, {
diameter: 62,
address: selected,
}),
]),
h('flex-column', {
style: {
lineHeight: '10px',
marginLeft: '15px',
},
}, [
h(EditableLabel, {
textValue: identity ? identity.name : '',
state: {
isEditingLabel: false,
},
saveText: (text) => {
props.dispatch(actions.saveAccountLabel(selected, text))
},
}, [
// What is shown when not editing + edit text:
h('label.editing-label', [h('.edit-text', 'edit')]),
h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
]),
h('.flex-row', {
style: {
width: '15em',
justifyContent: 'space-between',
alignItems: 'baseline',
},
}, [
// address
h('div', {
style: {
overflow: 'hidden',
textOverflow: 'ellipsis',
paddingTop: '3px',
width: '5em',
fontSize: '13px',
fontFamily: 'Montserrat Light',
textRendering: 'geometricPrecision',
marginTop: '10px',
marginBottom: '15px',
color: '#AEAEAE',
},
}, ethUtil.toChecksumAddress(selected)),
// copy and export
h('.flex-row', {
style: {
justifyContent: 'flex-end',
position: 'relative',
bottom: '15px',
},
}, [
h(AccountInfoLink, { selected, network }),
h(CopyButton, {
value: ethUtil.toChecksumAddress(selected),
}),
h(Tooltip, {
title: 'QR Code',
}, [
h('i.fa.fa-qrcode.pointer.pop-hover', {
onClick: () => props.dispatch(actions.showQrView(selected, identity ? identity.name : '')),
style: {
fontSize: '18px',
position: 'relative',
color: 'rgb(247, 134, 28)',
top: '5px',
marginLeft: '3px',
marginRight: '3px',
},
}),
]),
h(Tooltip, {
title: 'Export Private Key',
}, [
h('div', {
style: {
display: 'flex',
alignItems: 'center',
},
}, [
h('img.cursor-pointer.color-orange', {
src: 'images/key-32.png',
onClick: () => this.requestAccountExport(selected),
style: {
height: '19px',
},
}),
]),
]),
]),
]),
// account ballence
]),
]),
h('.flex-row', {
style: {
justifyContent: 'space-between',
alignItems: 'flex-start',
},
}, [
h(EthBalance, {
value: account && account.balance,
style: {
lineHeight: '7px',
marginTop: '10px',
},
}),
h('button', {
onClick: () => props.dispatch(actions.buyEthView(selected)),
style: {
marginBottom: '20px',
marginRight: '8px',
position: 'absolute',
left: '219px',
},
}, 'BUY'),
h('button', {
onClick: () => props.dispatch(actions.showSendPage()),
style: {
marginBottom: '20px',
marginRight: '8px',
},
}, 'SEND'),
]),
]),
// subview (tx history, pk export confirm, buy eth warning)
h(ReactCSSTransitionGroup, {
className: 'css-transition-group',
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)
case 'buyForm':
return h(BuyButtonSubview, extend({key: 'buyForm'}, this.props))
default:
return this.transactionList()
}
}
AccountDetailScreen.prototype.transactionList = function () {
const { transactions, unconfTxs, unconfMsgs, address, network, shapeShiftTxList } = this.props
var txsToRender = transactions.concat(unconfTxs)
// only transactions that are from the current address
.filter(tx => tx.txParams.from === address)
// only transactions that are on the current network
.filter(tx => tx.txParams.metamaskNetworkId === network)
// sort by recency
.sort((a, b) => b.time - a.time)
return h(TransactionList, {
txsToRender,
network,
unconfTxs,
unconfMsgs,
address,
shapeShiftTxList,
viewPendingTx: (txId) => {
this.props.dispatch(actions.viewPendingTx(txId))
},
})
}
AccountDetailScreen.prototype.requestAccountExport = function () {
this.props.dispatch(actions.requestExportAccount())
}
AccountDetailScreen.prototype.buyButtonDeligator = function () {
var props = this.props
var selected = props.address || Object.keys(props.accounts)[0]
if (this.props.accountDetail.subview === 'buyForm') {
props.dispatch(actions.backToAccountDetail(props.address))
} else {
props.dispatch(actions.buyEthView(selected))
}
}