mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Merge pull request #1154 from MetaMask/i765-gaslimits
Add ability to customize gas and gasPrice on tx confirmation screen
This commit is contained in:
commit
f162a11585
@ -3,6 +3,7 @@
|
||||
## Current Master
|
||||
|
||||
- Add personal_sign method support.
|
||||
- Add ability to customize gas and gasPrice on the transaction approval screen.
|
||||
|
||||
## 3.3.0 2017-2-20
|
||||
|
||||
|
@ -228,18 +228,6 @@ ConfigManager.prototype._emitUpdates = function (state) {
|
||||
})
|
||||
}
|
||||
|
||||
ConfigManager.prototype.getGasMultiplier = function () {
|
||||
var data = this.getData()
|
||||
return data.gasMultiplier
|
||||
}
|
||||
|
||||
ConfigManager.prototype.setGasMultiplier = function (gasMultiplier) {
|
||||
var data = this.getData()
|
||||
|
||||
data.gasMultiplier = gasMultiplier
|
||||
this.setData(data)
|
||||
}
|
||||
|
||||
ConfigManager.prototype.setLostAccounts = function (lostAccounts) {
|
||||
var data = this.getData()
|
||||
data.lostAccounts = lostAccounts
|
||||
|
@ -7,7 +7,6 @@
|
||||
*/
|
||||
|
||||
const ethUtil = require('ethereumjs-util')
|
||||
const BN = ethUtil.BN
|
||||
const Transaction = require('ethereumjs-tx')
|
||||
|
||||
module.exports = IdManagement
|
||||
@ -25,13 +24,9 @@ function IdManagement (opts) {
|
||||
}
|
||||
|
||||
this.signTx = function (txParams) {
|
||||
// calculate gas with custom gas multiplier
|
||||
var gasMultiplier = this.configManager.getGasMultiplier() || 1
|
||||
var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice), 16)
|
||||
gasPrice = gasPrice.mul(new BN(gasMultiplier * 100, 10)).div(new BN(100, 10))
|
||||
txParams.gasPrice = ethUtil.intToHex(gasPrice.toNumber())
|
||||
// normalize values
|
||||
|
||||
// normalize values
|
||||
txParams.gasPrice = ethUtil.intToHex(txParams.gasPrice)
|
||||
txParams.to = ethUtil.addHexPrefix(txParams.to)
|
||||
txParams.from = ethUtil.addHexPrefix(txParams.from.toLowerCase())
|
||||
txParams.value = ethUtil.addHexPrefix(txParams.value)
|
||||
|
@ -95,7 +95,6 @@ IdentityStore.prototype.getState = function () {
|
||||
isUnlocked: this._isUnlocked(),
|
||||
seedWords: seedWords,
|
||||
selectedAddress: configManager.getSelectedAccount(),
|
||||
gasMultiplier: configManager.getGasMultiplier(),
|
||||
}))
|
||||
}
|
||||
|
||||
|
@ -92,11 +92,10 @@ module.exports = class txProviderUtils {
|
||||
}
|
||||
|
||||
// builds ethTx from txParams object
|
||||
buildEthTxFromParams (txParams, gasMultiplier = 1) {
|
||||
buildEthTxFromParams (txParams) {
|
||||
// apply gas multiplyer
|
||||
let gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice), 16)
|
||||
// multiply and divide by 100 so as to add percision to integer mul
|
||||
gasPrice = gasPrice.mul(new BN(gasMultiplier * 100, 10)).div(new BN(100, 10))
|
||||
txParams.gasPrice = ethUtil.intToHex(gasPrice.toNumber())
|
||||
// normalize values
|
||||
txParams.to = normalize(txParams.to)
|
||||
@ -106,6 +105,7 @@ module.exports = class txProviderUtils {
|
||||
txParams.gasLimit = normalize(txParams.gasLimit || txParams.gas)
|
||||
txParams.nonce = normalize(txParams.nonce)
|
||||
// build ethTx
|
||||
log.info(`Prepared tx for signing: ${JSON.stringify(txParams)}`)
|
||||
const ethTx = new Transaction(txParams)
|
||||
return ethTx
|
||||
}
|
||||
|
@ -248,7 +248,6 @@ module.exports = class MetamaskController extends EventEmitter {
|
||||
setProviderType: this.setProviderType.bind(this),
|
||||
useEtherscanProvider: this.useEtherscanProvider.bind(this),
|
||||
setCurrentCurrency: this.setCurrentCurrency.bind(this),
|
||||
setGasMultiplier: this.setGasMultiplier.bind(this),
|
||||
markAccountsFound: this.markAccountsFound.bind(this),
|
||||
// coinbase
|
||||
buyEth: this.buyEth.bind(this),
|
||||
@ -276,8 +275,9 @@ module.exports = class MetamaskController extends EventEmitter {
|
||||
exportAccount: nodeify(keyringController.exportAccount).bind(keyringController),
|
||||
|
||||
// txManager
|
||||
approveTransaction: txManager.approveTransaction.bind(txManager),
|
||||
cancelTransaction: txManager.cancelTransaction.bind(txManager),
|
||||
approveTransaction: txManager.approveTransaction.bind(txManager),
|
||||
cancelTransaction: txManager.cancelTransaction.bind(txManager),
|
||||
updateAndApproveTransaction: this.updateAndApproveTx.bind(this),
|
||||
|
||||
// messageManager
|
||||
signMessage: nodeify(this.signMessage).bind(this),
|
||||
@ -407,6 +407,7 @@ module.exports = class MetamaskController extends EventEmitter {
|
||||
//
|
||||
|
||||
newUnapprovedTransaction (txParams, cb) {
|
||||
log.debug(`MetaMaskController newUnapprovedTransaction ${JSON.stringify(txParams)}`)
|
||||
const self = this
|
||||
self.txManager.addUnapprovedTransaction(txParams, (err, txMeta) => {
|
||||
if (err) return cb(err)
|
||||
@ -462,6 +463,13 @@ module.exports = class MetamaskController extends EventEmitter {
|
||||
})
|
||||
}
|
||||
|
||||
updateAndApproveTx(txMeta, cb) {
|
||||
log.debug(`MetaMaskController - updateAndApproveTx: ${JSON.stringify(txMeta)}`)
|
||||
const txManager = this.txManager
|
||||
txManager.updateTx(txMeta)
|
||||
txManager.approveTransaction(txMeta.id, cb)
|
||||
}
|
||||
|
||||
signMessage (msgParams, cb) {
|
||||
log.info('MetaMaskController - signMessage')
|
||||
const msgId = msgParams.metamaskId
|
||||
@ -644,15 +652,6 @@ module.exports = class MetamaskController extends EventEmitter {
|
||||
this.shapeshiftController.createShapeShiftTx(depositAddress, depositType)
|
||||
}
|
||||
|
||||
setGasMultiplier (gasMultiplier, cb) {
|
||||
try {
|
||||
this.txManager.setGasMultiplier(gasMultiplier)
|
||||
cb()
|
||||
} catch (err) {
|
||||
cb(err)
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// network
|
||||
//
|
||||
|
@ -13,7 +13,6 @@ module.exports = class TransactionManager extends EventEmitter {
|
||||
super()
|
||||
this.store = new ObservableStore(extend({
|
||||
transactions: [],
|
||||
gasMultiplier: 1,
|
||||
}, opts.initState))
|
||||
this.memStore = new ObservableStore({})
|
||||
this.networkStore = opts.networkStore || new ObservableStore({})
|
||||
@ -52,14 +51,6 @@ module.exports = class TransactionManager extends EventEmitter {
|
||||
return fullTxList.filter(txMeta => txMeta.metamaskNetworkId === network)
|
||||
}
|
||||
|
||||
getGasMultiplier () {
|
||||
return this.store.getState().gasMultiplier
|
||||
}
|
||||
|
||||
setGasMultiplier (gasMultiplier) {
|
||||
return this.store.updateState({ gasMultiplier })
|
||||
}
|
||||
|
||||
// Adds a tx to the txlist
|
||||
addTx (txMeta) {
|
||||
var txList = this.getTxList()
|
||||
@ -129,7 +120,6 @@ module.exports = class TransactionManager extends EventEmitter {
|
||||
id: txId,
|
||||
time: time,
|
||||
status: 'unapproved',
|
||||
gasMultiplier: this.getGasMultiplier(),
|
||||
metamaskNetworkId: this.getNetwork(),
|
||||
txParams: txParams,
|
||||
}
|
||||
@ -147,16 +137,15 @@ module.exports = class TransactionManager extends EventEmitter {
|
||||
|
||||
setMaxTxCostAndFee (txMeta) {
|
||||
var txParams = txMeta.txParams
|
||||
var gasMultiplier = txMeta.gasMultiplier
|
||||
var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
|
||||
var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
|
||||
gasPrice = gasPrice.mul(new BN(gasMultiplier * 100), 10).div(new BN(100, 10))
|
||||
var txFee = gasCost.mul(gasPrice)
|
||||
var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
|
||||
var maxCost = txValue.add(txFee)
|
||||
txMeta.txFee = txFee
|
||||
txMeta.txValue = txValue
|
||||
txMeta.maxCost = maxCost
|
||||
txMeta.gasPrice = gasPrice
|
||||
this.updateTx(txMeta)
|
||||
}
|
||||
|
||||
@ -209,7 +198,7 @@ module.exports = class TransactionManager extends EventEmitter {
|
||||
let txMeta = this.getTx(txId)
|
||||
let txParams = txMeta.txParams
|
||||
let fromAddress = txParams.from
|
||||
let ethTx = this.txProviderUtils.buildEthTxFromParams(txParams, txMeta.gasMultiplier)
|
||||
let ethTx = this.txProviderUtils.buildEthTxFromParams(txParams)
|
||||
this.signEthTx(ethTx, fromAddress).then(() => {
|
||||
this.setTxStatusSigned(txMeta.id)
|
||||
cb(null, ethUtil.bufferToHex(ethTx.serialize()))
|
||||
|
211
development/states/conf-tx.json
Normal file
211
development/states/conf-tx.json
Normal file
File diff suppressed because one or more lines are too long
@ -94,6 +94,7 @@ var actions = {
|
||||
cancelPersonalMsg,
|
||||
sendTx: sendTx,
|
||||
signTx: signTx,
|
||||
updateAndApproveTx,
|
||||
cancelTx: cancelTx,
|
||||
completedTx: completedTx,
|
||||
txError: txError,
|
||||
@ -387,22 +388,18 @@ function signPersonalMsg (msgData) {
|
||||
|
||||
function signTx (txData) {
|
||||
return (dispatch) => {
|
||||
log.debug(`background.setGasMultiplier`)
|
||||
background.setGasMultiplier(txData.gasMultiplier, (err) => {
|
||||
web3.eth.sendTransaction(txData, (err, data) => {
|
||||
dispatch(actions.hideLoadingIndication())
|
||||
if (err) return dispatch(actions.displayWarning(err.message))
|
||||
web3.eth.sendTransaction(txData, (err, data) => {
|
||||
dispatch(actions.hideLoadingIndication())
|
||||
if (err) return dispatch(actions.displayWarning(err.message))
|
||||
dispatch(actions.hideWarning())
|
||||
dispatch(actions.goHome())
|
||||
})
|
||||
dispatch(this.showConfTxPage())
|
||||
dispatch(actions.hideWarning())
|
||||
dispatch(actions.goHome())
|
||||
})
|
||||
dispatch(this.showConfTxPage())
|
||||
}
|
||||
}
|
||||
|
||||
function sendTx (txData) {
|
||||
log.info('actions: sendTx')
|
||||
log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`)
|
||||
return (dispatch) => {
|
||||
log.debug(`actions calling background.approveTransaction`)
|
||||
background.approveTransaction(txData.id, (err) => {
|
||||
@ -415,6 +412,20 @@ function sendTx (txData) {
|
||||
}
|
||||
}
|
||||
|
||||
function updateAndApproveTx (txData) {
|
||||
log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
|
||||
return (dispatch) => {
|
||||
log.debug(`actions calling background.updateAndApproveTx`)
|
||||
background.updateAndApproveTransaction(txData, (err) => {
|
||||
if (err) {
|
||||
dispatch(actions.txError(err))
|
||||
return console.error(err.message)
|
||||
}
|
||||
dispatch(actions.completedTx(txData.id))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function completedTx (id) {
|
||||
return {
|
||||
type: actions.COMPLETED_TX,
|
||||
|
76
ui/app/components/hex-as-decimal-input.js
Normal file
76
ui/app/components/hex-as-decimal-input.js
Normal file
@ -0,0 +1,76 @@
|
||||
const Component = require('react').Component
|
||||
const h = require('react-hyperscript')
|
||||
const inherits = require('util').inherits
|
||||
const ethUtil = require('ethereumjs-util')
|
||||
const BN = ethUtil.BN
|
||||
const extend = require('xtend')
|
||||
|
||||
module.exports = HexAsDecimalInput
|
||||
|
||||
inherits(HexAsDecimalInput, Component)
|
||||
function HexAsDecimalInput () {
|
||||
Component.call(this)
|
||||
}
|
||||
|
||||
/* Hex as Decimal Input
|
||||
*
|
||||
* A component for allowing easy, decimal editing
|
||||
* of a passed in hex string value.
|
||||
*
|
||||
* On change, calls back its `onChange` function parameter
|
||||
* and passes it an updated hex string.
|
||||
*/
|
||||
|
||||
HexAsDecimalInput.prototype.render = function () {
|
||||
const props = this.props
|
||||
const { value, onChange } = props
|
||||
const toEth = props.toEth
|
||||
const suffix = props.suffix
|
||||
const decimalValue = decimalize(value, toEth)
|
||||
const style = props.style
|
||||
|
||||
return (
|
||||
h('.flex-row', {
|
||||
style: {
|
||||
alignItems: 'flex-end',
|
||||
lineHeight: '13px',
|
||||
fontFamily: 'Montserrat Light',
|
||||
textRendering: 'geometricPrecision',
|
||||
},
|
||||
}, [
|
||||
h('input.ether-balance.ether-balance-amount', {
|
||||
style: extend({
|
||||
display: 'block',
|
||||
textAlign: 'right',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid #bdbdbd',
|
||||
}, style),
|
||||
value: decimalValue,
|
||||
onChange: (event) => {
|
||||
const hexString = hexify(event.target.value)
|
||||
onChange(hexString)
|
||||
},
|
||||
}),
|
||||
h('div', {
|
||||
style: {
|
||||
color: ' #AEAEAE',
|
||||
fontSize: '12px',
|
||||
marginLeft: '5px',
|
||||
marginRight: '6px',
|
||||
width: '20px',
|
||||
},
|
||||
}, suffix),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
function hexify (decimalString) {
|
||||
const hexBN = new BN(decimalString, 10)
|
||||
return '0x' + hexBN.toString('hex')
|
||||
}
|
||||
|
||||
function decimalize (input, toEth) {
|
||||
const strippedInput = ethUtil.stripHexPrefix(input)
|
||||
const inputBN = new BN(strippedInput, 'hex')
|
||||
return inputBN.toString(10)
|
||||
}
|
@ -1,12 +1,16 @@
|
||||
const Component = require('react').Component
|
||||
const h = require('react-hyperscript')
|
||||
const inherits = require('util').inherits
|
||||
const extend = require('xtend')
|
||||
const ethUtil = require('ethereumjs-util')
|
||||
const BN = ethUtil.BN
|
||||
|
||||
const MiniAccountPanel = require('./mini-account-panel')
|
||||
const EthBalance = require('./eth-balance')
|
||||
const util = require('../util')
|
||||
const addressSummary = util.addressSummary
|
||||
const nameForAddress = require('../../lib/contract-namer')
|
||||
const HexInput = require('./hex-as-decimal-input')
|
||||
|
||||
module.exports = PendingTxDetails
|
||||
|
||||
@ -19,7 +23,8 @@ const PTXP = PendingTxDetails.prototype
|
||||
|
||||
PTXP.render = function () {
|
||||
var props = this.props
|
||||
var txData = props.txData
|
||||
var state = this.state || {}
|
||||
var txData = state.txMeta || props.txData
|
||||
|
||||
var txParams = txData.txParams || {}
|
||||
var address = txParams.from || props.selectedAddress
|
||||
@ -27,11 +32,18 @@ PTXP.render = function () {
|
||||
var account = props.accounts[address]
|
||||
var balance = account ? account.balance : '0x0'
|
||||
|
||||
var txFee = txData.txFee || ''
|
||||
var maxCost = txData.maxCost || ''
|
||||
const gas = state.gas || txParams.gas
|
||||
const gasPrice = state.gasPrice || txData.gasPrice
|
||||
const gasDefault = txParams.gas
|
||||
const gasPriceDefault = txData.gasPrice
|
||||
|
||||
var txFee = state.txFee || txData.txFee || ''
|
||||
var maxCost = state.maxCost || txData.maxCost || ''
|
||||
var dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
|
||||
var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
|
||||
|
||||
log.debug(`rendering gas: ${gas}, gasPrice: ${gasPrice}, txFee: ${txFee}, maxCost: ${maxCost}`)
|
||||
|
||||
return (
|
||||
h('div', [
|
||||
|
||||
@ -97,11 +109,63 @@ PTXP.render = function () {
|
||||
|
||||
h('.table-box', [
|
||||
|
||||
// Ether Value
|
||||
// Currently not customizable, but easily modified
|
||||
// in the way that gas and gasLimit currently are.
|
||||
h('.row', [
|
||||
h('.cell.label', 'Amount'),
|
||||
h(EthBalance, { value: txParams.value }),
|
||||
]),
|
||||
|
||||
// Gas Limit (customizable)
|
||||
h('.cell.row', [
|
||||
h('.cell.label', 'Gas Limit'),
|
||||
h('.cell.value', {
|
||||
}, [
|
||||
h(HexInput, {
|
||||
value: gas,
|
||||
suffix: 'UNITS',
|
||||
style: {
|
||||
position: 'relative',
|
||||
top: '5px',
|
||||
},
|
||||
onChange: (newHex) => {
|
||||
log.info(`Gas limit changed to ${newHex}`)
|
||||
if (newHex === '0x0') {
|
||||
this.setState({gas: gasDefault})
|
||||
} else {
|
||||
this.setState({ gas: newHex })
|
||||
}
|
||||
},
|
||||
}),
|
||||
]),
|
||||
]),
|
||||
|
||||
// Gas Price (customizable)
|
||||
h('.cell.row', [
|
||||
h('.cell.label', 'Gas Price'),
|
||||
h('.cell.value', {
|
||||
}, [
|
||||
h(HexInput, {
|
||||
value: gasPrice,
|
||||
suffix: 'WEI',
|
||||
style: {
|
||||
position: 'relative',
|
||||
top: '5px',
|
||||
},
|
||||
onChange: (newHex) => {
|
||||
log.info(`Gas price changed to: ${newHex}`)
|
||||
if (newHex === '0x0') {
|
||||
this.setState({gasPrice: gasPriceDefault})
|
||||
} else {
|
||||
this.setState({ gasPrice: newHex })
|
||||
}
|
||||
},
|
||||
}),
|
||||
]),
|
||||
]),
|
||||
|
||||
// Max Transaction Fee (calculated)
|
||||
h('.cell.row', [
|
||||
h('.cell.label', 'Max Transaction Fee'),
|
||||
h(EthBalance, { value: txFee.toString(16) }),
|
||||
@ -130,6 +194,7 @@ PTXP.render = function () {
|
||||
]),
|
||||
]),
|
||||
|
||||
// Data size row:
|
||||
h('.cell.row', {
|
||||
style: {
|
||||
background: '#f7f7f7',
|
||||
@ -191,6 +256,80 @@ PTXP.miniAccountPanelForRecipient = function () {
|
||||
}
|
||||
}
|
||||
|
||||
PTXP.componentDidUpdate = function (prevProps, previousState) {
|
||||
log.debug(`pending-tx-details componentDidUpdate`)
|
||||
const state = this.state || {}
|
||||
const prevState = previousState || {}
|
||||
const { gas, gasPrice } = state
|
||||
|
||||
// Only if gas or gasPrice changed:
|
||||
if (!prevState ||
|
||||
(gas !== prevState.gas ||
|
||||
gasPrice !== prevState.gasPrice)) {
|
||||
log.debug(`recalculating gas since prev state change: ${JSON.stringify({ prevState, state })}`)
|
||||
this.calculateGas()
|
||||
}
|
||||
}
|
||||
|
||||
PTXP.calculateGas = function () {
|
||||
const txMeta = this.gatherParams()
|
||||
log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`)
|
||||
|
||||
var txParams = txMeta.txParams
|
||||
var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.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)
|
||||
|
||||
const txFeeHex = '0x' + txFee.toString('hex')
|
||||
const maxCostHex = '0x' + maxCost.toString('hex')
|
||||
const gasPriceHex = '0x' + gasPrice.toString('hex')
|
||||
|
||||
txMeta.txFee = txFeeHex
|
||||
txMeta.maxCost = maxCostHex
|
||||
txMeta.txParams.gasPrice = gasPriceHex
|
||||
|
||||
this.setState({
|
||||
txFee: '0x' + txFee.toString('hex'),
|
||||
maxCost: '0x' + maxCost.toString('hex'),
|
||||
})
|
||||
|
||||
if (this.props.onTxChange) {
|
||||
this.props.onTxChange(txMeta)
|
||||
}
|
||||
}
|
||||
|
||||
PTXP.resetGasFields = function () {
|
||||
log.debug(`pending-tx-details#resetGasFields`)
|
||||
const txData = this.props.txData
|
||||
this.setState({
|
||||
gas: txData.txParams.gas,
|
||||
gasPrice: txData.gasPrice,
|
||||
})
|
||||
}
|
||||
|
||||
// After a customizable state value has been updated,
|
||||
PTXP.gatherParams = function () {
|
||||
log.debug(`pending-tx-details#gatherParams`)
|
||||
const props = this.props
|
||||
const state = this.state || {}
|
||||
const txData = state.txData || props.txData
|
||||
const txParams = txData.txParams
|
||||
|
||||
const gas = state.gas || txParams.gas
|
||||
const gasPrice = state.gasPrice || txParams.gasPrice
|
||||
const resultTx = extend(txParams, {
|
||||
gas,
|
||||
gasPrice,
|
||||
})
|
||||
const resultTxMeta = extend(txData, {
|
||||
txParams: resultTx,
|
||||
})
|
||||
log.debug(`UI has computed tx params ${JSON.stringify(resultTx)}`)
|
||||
return resultTxMeta
|
||||
}
|
||||
|
||||
function forwardCarrat () {
|
||||
return (
|
||||
|
||||
|
@ -2,6 +2,7 @@ const Component = require('react').Component
|
||||
const h = require('react-hyperscript')
|
||||
const inherits = require('util').inherits
|
||||
const PendingTxDetails = require('./pending-tx-details')
|
||||
const extend = require('xtend')
|
||||
|
||||
module.exports = PendingTx
|
||||
|
||||
@ -11,8 +12,9 @@ function PendingTx () {
|
||||
}
|
||||
|
||||
PendingTx.prototype.render = function () {
|
||||
var state = this.props
|
||||
var txData = state.txData
|
||||
const props = this.props
|
||||
const newProps = extend(props, {ref: 'details'})
|
||||
const txData = props.txData
|
||||
|
||||
return (
|
||||
|
||||
@ -21,7 +23,7 @@ PendingTx.prototype.render = function () {
|
||||
}, [
|
||||
|
||||
// tx info
|
||||
h(PendingTxDetails, state),
|
||||
h(PendingTxDetails, newProps),
|
||||
|
||||
h('style', `
|
||||
.conf-buttons button {
|
||||
@ -39,7 +41,7 @@ PendingTx.prototype.render = function () {
|
||||
}, 'Transaction Error. Exception thrown in contract code.')
|
||||
: null,
|
||||
|
||||
state.insufficientBalance ?
|
||||
props.insufficientBalance ?
|
||||
h('span.error', {
|
||||
style: {
|
||||
marginLeft: 50,
|
||||
@ -57,20 +59,26 @@ PendingTx.prototype.render = function () {
|
||||
},
|
||||
}, [
|
||||
|
||||
state.insufficientBalance ?
|
||||
props.insufficientBalance ?
|
||||
h('button.btn-green', {
|
||||
onClick: state.buyEth,
|
||||
onClick: props.buyEth,
|
||||
}, 'Buy Ether')
|
||||
: null,
|
||||
|
||||
h('button.confirm', {
|
||||
disabled: state.insufficientBalance,
|
||||
onClick: state.sendTransaction,
|
||||
disabled: props.insufficientBalance,
|
||||
onClick: props.sendTransaction,
|
||||
}, 'Accept'),
|
||||
|
||||
h('button.cancel.btn-red', {
|
||||
onClick: state.cancelTransaction,
|
||||
onClick: props.cancelTransaction,
|
||||
}, 'Reject'),
|
||||
|
||||
h('button', {
|
||||
onClick: () => {
|
||||
this.refs.details.resetGasFields()
|
||||
},
|
||||
}, 'Reset'),
|
||||
]),
|
||||
])
|
||||
)
|
||||
|
@ -13,6 +13,7 @@ const BN = ethUtil.BN
|
||||
const PendingTx = require('./components/pending-tx')
|
||||
const PendingMsg = require('./components/pending-msg')
|
||||
const PendingPersonalMsg = require('./components/pending-personal-msg')
|
||||
const Loading = require('./components/loading')
|
||||
|
||||
module.exports = connect(mapStateToProps)(ConfirmTxScreen)
|
||||
|
||||
@ -48,7 +49,7 @@ ConfirmTxScreen.prototype.render = function () {
|
||||
var isNotification = isPopupOrNotification() === 'notification'
|
||||
|
||||
log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`)
|
||||
if (unconfTxList.length === 0) return null
|
||||
if (unconfTxList.length === 0) return h(Loading)
|
||||
|
||||
return (
|
||||
|
||||
@ -104,6 +105,8 @@ ConfirmTxScreen.prototype.render = function () {
|
||||
accounts: props.accounts,
|
||||
identities: props.identities,
|
||||
insufficientBalance: this.checkBalanceAgainstTx(txData),
|
||||
// State actions
|
||||
onTxChange: this.onTxChange.bind(this),
|
||||
// Actions
|
||||
buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
|
||||
sendTransaction: this.sendTransaction.bind(this, txData),
|
||||
@ -141,6 +144,7 @@ function currentTxView (opts) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ConfirmTxScreen.prototype.checkBalanceAgainstTx = function (txData) {
|
||||
if (!txData.txParams) return false
|
||||
var props = this.props
|
||||
@ -158,9 +162,20 @@ ConfirmTxScreen.prototype.buyEth = function (address, event) {
|
||||
this.props.dispatch(actions.buyEthView(address))
|
||||
}
|
||||
|
||||
// Allows the detail view to update the gas calculations,
|
||||
// for manual gas controls.
|
||||
ConfirmTxScreen.prototype.onTxChange = function (txData) {
|
||||
log.debug(`conf-tx onTxChange triggered with ${JSON.stringify(txData)}`)
|
||||
this.setState({ txData })
|
||||
}
|
||||
|
||||
// Must default to any local state txData,
|
||||
// to allow manual override of gas calculations.
|
||||
ConfirmTxScreen.prototype.sendTransaction = function (txData, event) {
|
||||
event.stopPropagation()
|
||||
this.props.dispatch(actions.sendTx(txData))
|
||||
const state = this.state || {}
|
||||
const txMeta = state.txData
|
||||
this.props.dispatch(actions.updateAndApproveTx(txMeta || txData))
|
||||
}
|
||||
|
||||
ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) {
|
||||
|
@ -291,7 +291,7 @@ function reduceApp (state, action) {
|
||||
case actions.SHOW_CONF_TX_PAGE:
|
||||
return extend(appState, {
|
||||
currentView: {
|
||||
name: pendingTxs ? 'confTx' : 'account-detail',
|
||||
name: 'confTx',
|
||||
context: 0,
|
||||
},
|
||||
transForward: action.transForward,
|
||||
|
@ -10,8 +10,6 @@ const addressSummary = require('./util').addressSummary
|
||||
const isHex = require('./util').isHex
|
||||
const EthBalance = require('./components/eth-balance')
|
||||
const ethUtil = require('ethereumjs-util')
|
||||
const RangeSlider = require('./components/range-slider')
|
||||
const Tooltip = require('./components/tooltip')
|
||||
module.exports = connect(mapStateToProps)(SendTransactionScreen)
|
||||
|
||||
function mapStateToProps (state) {
|
||||
@ -208,73 +206,6 @@ SendTransactionScreen.prototype.render = function () {
|
||||
},
|
||||
}),
|
||||
]),
|
||||
// custom gasPrice field
|
||||
h('h3.flex-center.text-transform-uppercase', {
|
||||
style: {
|
||||
background: '#EBEBEB',
|
||||
color: '#AEAEAE',
|
||||
marginBottom: '5px',
|
||||
},
|
||||
}, [
|
||||
'Transaction Fee (optional)',
|
||||
h(Tooltip, {
|
||||
title: `
|
||||
This is used to set the transaction's gas price.
|
||||
Setting it to 100% will use the full recommended value. `,
|
||||
}, [
|
||||
h('i.fa.fa-question-circle', {
|
||||
style: {
|
||||
marginLeft: '5px',
|
||||
},
|
||||
}),
|
||||
]),
|
||||
]),
|
||||
|
||||
h('section.flex-column.flex-center', [
|
||||
h('.flex-row', [
|
||||
h(RangeSlider, {
|
||||
name: 'gasInput',
|
||||
options: {
|
||||
mirrorInput: true,
|
||||
defaultValue: 100,
|
||||
min: 80,
|
||||
max: 220,
|
||||
},
|
||||
style: {
|
||||
container: {
|
||||
marginBottom: '16px',
|
||||
},
|
||||
range: {
|
||||
width: '68vw',
|
||||
},
|
||||
input: {
|
||||
width: '5em',
|
||||
marginLeft: '5px',
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
h('div', {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
paddingTop: '8px',
|
||||
paddingLeft: '5px',
|
||||
},
|
||||
}, '%'),
|
||||
]),
|
||||
h('.flex-row', {
|
||||
style: {
|
||||
justifyContent: 'space-between',
|
||||
width: '243px',
|
||||
position: 'relative',
|
||||
fontSize: '12px',
|
||||
right: '42px',
|
||||
bottom: '30px',
|
||||
},
|
||||
}, [
|
||||
h('span', 'Cheaper'), h('span', 'Faster'),
|
||||
]),
|
||||
]),
|
||||
])
|
||||
)
|
||||
}
|
||||
@ -289,12 +220,11 @@ SendTransactionScreen.prototype.back = function () {
|
||||
this.props.dispatch(actions.backToAccountDetail(address))
|
||||
}
|
||||
|
||||
SendTransactionScreen.prototype.onSubmit = function (gasPrice) {
|
||||
SendTransactionScreen.prototype.onSubmit = function () {
|
||||
const recipient = document.querySelector('input[name="address"]').value
|
||||
const input = document.querySelector('input[name="amount"]').value
|
||||
const value = util.normalizeEthStringToWei(input)
|
||||
const txData = document.querySelector('input[name="txData"]').value
|
||||
const gasMultiplier = document.querySelector('input[name="gasInput"]').value
|
||||
const balance = this.props.balance
|
||||
let message
|
||||
|
||||
@ -323,7 +253,6 @@ SendTransactionScreen.prototype.onSubmit = function (gasPrice) {
|
||||
var txParams = {
|
||||
from: this.props.address,
|
||||
value: '0x' + value.toString(16),
|
||||
gasMultiplier: gasMultiplier * 0.01,
|
||||
}
|
||||
|
||||
if (recipient) txParams.to = ethUtil.addHexPrefix(recipient)
|
||||
|
@ -37,7 +37,7 @@ function startApp (metamaskState, accountManager, opts) {
|
||||
})
|
||||
|
||||
// if unconfirmed txs, start on txConf page
|
||||
var unapprovedTxsAll = txHelper(metamaskState.unapprovedTxs, metamaskState.unapprovedMsgs, metamaskState.network)
|
||||
var unapprovedTxsAll = txHelper(metamaskState.unapprovedTxs, metamaskState.unapprovedMsgs, metamaskState.unapprovedPersonalMsgs, metamaskState.network)
|
||||
if (unapprovedTxsAll.length > 0) {
|
||||
store.dispatch(actions.showConfTxPage())
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user