2016-05-03 23:32:22 +02:00
|
|
|
const Component = require('react').Component
|
|
|
|
const h = require('react-hyperscript')
|
|
|
|
const inherits = require('util').inherits
|
2016-06-24 21:48:52 +02:00
|
|
|
const PendingTxDetails = require('./pending-tx-details')
|
2016-06-25 02:22:27 +02:00
|
|
|
|
2016-09-15 19:24:05 +02:00
|
|
|
const ethUtil = require('ethereumjs-util')
|
|
|
|
const BN = ethUtil.BN
|
2016-05-03 23:32:22 +02:00
|
|
|
|
|
|
|
module.exports = PendingTx
|
|
|
|
|
|
|
|
inherits(PendingTx, Component)
|
2016-06-21 22:18:32 +02:00
|
|
|
function PendingTx () {
|
2016-05-03 23:32:22 +02:00
|
|
|
Component.call(this)
|
|
|
|
}
|
|
|
|
|
2016-06-21 22:18:32 +02:00
|
|
|
PendingTx.prototype.render = function () {
|
2016-05-03 23:32:22 +02:00
|
|
|
var state = this.props
|
|
|
|
var txData = state.txData
|
2016-09-15 21:42:35 +02:00
|
|
|
var txParams = txData.txParams || {}
|
|
|
|
var address = txParams.from || state.selectedAddress
|
|
|
|
|
|
|
|
var account = state.accounts[address]
|
|
|
|
var balance = account ? account.balance : '0x0'
|
|
|
|
|
|
|
|
var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16)
|
|
|
|
var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
|
|
|
|
var txFee = gasCost.mul(gasPrice)
|
|
|
|
var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
|
|
|
|
var maxCost = txValue.add(txFee)
|
|
|
|
|
|
|
|
var balanceBn = new BN(ethUtil.stripHexPrefix(balance), 16)
|
|
|
|
var insufficientBalance = maxCost.gt(balanceBn)
|
|
|
|
|
2016-05-03 23:32:22 +02:00
|
|
|
return (
|
2016-06-23 04:28:11 +02:00
|
|
|
|
2016-06-24 21:48:52 +02:00
|
|
|
h('div', {
|
2016-05-03 23:32:22 +02:00
|
|
|
key: txData.id,
|
|
|
|
}, [
|
|
|
|
|
2016-06-24 21:48:52 +02:00
|
|
|
// tx info
|
|
|
|
h(PendingTxDetails, state),
|
2016-05-03 23:32:22 +02:00
|
|
|
|
2016-07-07 21:39:40 +02:00
|
|
|
h('style', `
|
|
|
|
.conf-buttons button {
|
|
|
|
margin-left: 10px;
|
|
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
`),
|
|
|
|
|
2016-05-03 23:32:22 +02:00
|
|
|
// send + cancel
|
2016-07-07 21:39:40 +02:00
|
|
|
h('.flex-row.flex-space-around.conf-buttons', {
|
2016-07-07 06:32:36 +02:00
|
|
|
style: {
|
2016-07-07 21:39:40 +02:00
|
|
|
display: 'flex',
|
|
|
|
justifyContent: 'flex-end',
|
|
|
|
margin: '14px 25px',
|
2016-07-07 07:51:28 +02:00
|
|
|
},
|
2016-07-07 06:32:36 +02:00
|
|
|
}, [
|
2016-09-15 19:24:05 +02:00
|
|
|
|
2016-09-15 21:42:35 +02:00
|
|
|
( insufficientBalance ?
|
|
|
|
h('button.btn-green', {
|
|
|
|
onClick: state.sendTransaction,
|
|
|
|
}, 'Buy Ether')
|
|
|
|
:
|
|
|
|
null
|
|
|
|
),
|
2016-07-07 21:39:40 +02:00
|
|
|
|
2016-09-15 21:42:35 +02:00
|
|
|
h('button.confirm', {
|
|
|
|
disabled: insufficientBalance,
|
|
|
|
onClick: state.sendTransaction,
|
|
|
|
}, 'Accept'),
|
|
|
|
|
|
|
|
h('button.cancel.btn-red', {
|
2016-07-07 21:39:40 +02:00
|
|
|
onClick: state.cancelTransaction,
|
2016-07-07 22:22:38 +02:00
|
|
|
}, 'Reject'),
|
2016-06-25 02:27:42 +02:00
|
|
|
]),
|
2016-05-03 23:32:22 +02:00
|
|
|
])
|
|
|
|
)
|
|
|
|
}
|