diff --git a/CHANGELOG.md b/CHANGELOG.md index a3577d46f..21c501edd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Current Master - Fix bug where web3 was being injected into XML files. +- Add a custom transaction fee field to send form. ## 2.13.3 2016-10-4 diff --git a/app/scripts/lib/config-manager.js b/app/scripts/lib/config-manager.js index ecc9bc5f7..cced32670 100644 --- a/app/scripts/lib/config-manager.js +++ b/app/scripts/lib/config-manager.js @@ -384,3 +384,15 @@ ConfigManager.prototype.createShapeShiftTx = function (depositAddress, depositTy } this.setData(data) } + +ConfigManager.prototype.getGasMultiplier = function () { + var data = this.getData() + return ('gasMultiplier' in data) && data.gasMultiplier +} + +ConfigManager.prototype.setGasMultiplier = function (gasMultiplier) { + var data = this.getData() + + data.gasMultiplier = gasMultiplier + this.setData(data) +} diff --git a/app/scripts/lib/id-management.js b/app/scripts/lib/id-management.js index 2d42e1e30..421f2105f 100644 --- a/app/scripts/lib/id-management.js +++ b/app/scripts/lib/id-management.js @@ -7,6 +7,7 @@ */ const ethUtil = require('ethereumjs-util') +const BN = ethUtil.BN const Transaction = require('ethereumjs-tx') module.exports = IdManagement @@ -24,7 +25,13 @@ 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 + txParams.to = ethUtil.addHexPrefix(txParams.to) txParams.from = ethUtil.addHexPrefix(txParams.from.toLowerCase()) txParams.value = ethUtil.addHexPrefix(txParams.value) diff --git a/app/scripts/lib/idStore.js b/app/scripts/lib/idStore.js index 6837a1e8d..aa77c3360 100644 --- a/app/scripts/lib/idStore.js +++ b/app/scripts/lib/idStore.js @@ -112,6 +112,8 @@ IdentityStore.prototype.getState = function () { currentFiat: configManager.getCurrentFiat(), conversionRate: configManager.getConversionRate(), conversionDate: configManager.getConversionDate(), + gasMultiplier: configManager.getGasMultiplier(), + })) } @@ -211,6 +213,7 @@ IdentityStore.prototype.exportAccount = function (address, cb) { // comes from dapp via zero-client hooked-wallet provider IdentityStore.prototype.addUnconfirmedTransaction = function (txParams, onTxDoneCb, cb) { const configManager = this.configManager + var self = this // create txData obj with parameters and meta data var time = (new Date()).getTime() @@ -222,6 +225,7 @@ IdentityStore.prototype.addUnconfirmedTransaction = function (txParams, onTxDone txParams: txParams, time: time, status: 'unconfirmed', + gasMultiplier: configManager.getGasMultiplier() || 1, } console.log('addUnconfirmedTransaction:', txData) diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 65c5ba58b..8b593d820 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -55,6 +55,7 @@ module.exports = class MetamaskController { agreeToEthWarning: this.agreeToEthWarning.bind(this), setTOSHash: this.setTOSHash.bind(this), checkTOSChange: this.checkTOSChange.bind(this), + setGasMultiplier: this.setGasMultiplier.bind(this), // forward directly to idStore createNewVault: idStore.createNewVault.bind(idStore), @@ -377,4 +378,13 @@ module.exports = class MetamaskController { createShapeShiftTx (depositAddress, depositType) { this.configManager.createShapeShiftTx(depositAddress, depositType) } + + setGasMultiplier (gasMultiplier, cb) { + try { + this.configManager.setGasMultiplier(gasMultiplier) + cb() + } catch (e) { + cb(e) + } + } } diff --git a/ui/app/actions.js b/ui/app/actions.js index 0cce9065e..1f0d8fc78 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -278,14 +278,16 @@ function signMsg (msgData) { function signTx (txData) { return (dispatch) => { - web3.eth.sendTransaction(txData, (err, data) => { - dispatch(actions.hideLoadingIndication()) - + _accountManager.setGasMultiplier(txData.gasMultiplier, (err) => { if (err) return dispatch(actions.displayWarning(err.message)) - dispatch(actions.hideWarning()) - dispatch(actions.goHome()) + 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(this.showConfTxPage()) } } diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js index d8e8524bf..545302098 100644 --- a/ui/app/components/pending-tx-details.js +++ b/ui/app/components/pending-tx-details.js @@ -29,8 +29,10 @@ PTXP.render = function () { var account = props.accounts[address] var balance = account ? account.balance : '0x0' + var gasMultiplier = txData.gasMultiplier var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.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) diff --git a/ui/app/components/range-slider.js b/ui/app/components/range-slider.js new file mode 100644 index 000000000..823f5eb01 --- /dev/null +++ b/ui/app/components/range-slider.js @@ -0,0 +1,58 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +module.exports = RangeSlider + +inherits(RangeSlider, Component) +function RangeSlider () { + Component.call(this) +} + +RangeSlider.prototype.render = function () { + const state = this.state || {} + const props = this.props + const onInput = props.onInput || function () {} + const name = props.name + const { + min = 0, + max = 100, + increment = 1, + defaultValue = 50, + mirrorInput = false, + } = this.props.options + const {container, input, range} = props.style + + return ( + h('.flex-row', { + style: container, + }, [ + h('input', { + type: 'range', + name: name, + min: min, + max: max, + step: increment, + style: range, + value: state.value || defaultValue, + onChange: mirrorInput ? this.mirrorInputs.bind(this, event) : onInput, + }), + + // Mirrored input for range + mirrorInput ? h('input.large-input', { + type: 'number', + name: `${name}Mirror`, + min: min, + max: max, + value: state.value || defaultValue, + step: increment, + style: input, + onChange: this.mirrorInputs.bind(this, event), + }) : null, + ]) + ) +} + +RangeSlider.prototype.mirrorInputs = function (event) { + this.setState({value: event.target.value}) +} diff --git a/ui/app/send.js b/ui/app/send.js index 009866cf7..97ed29e4a 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -9,7 +9,8 @@ const numericBalance = require('./util').numericBalance const addressSummary = require('./util').addressSummary 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) { @@ -50,7 +51,7 @@ SendTransactionScreen.prototype.render = function () { // Sender Profile // - h('.account-data-subsection.flex-column.flex-grow', { + h('.account-data-subsection.flex-row.flex-grow', { style: { margin: '0 20px', }, @@ -59,10 +60,9 @@ SendTransactionScreen.prototype.render = function () { // header - identicon + nav h('.flex-row.flex-space-between', { style: { - marginTop: 28, + marginTop: '15px', }, }, [ - // back button h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { onClick: this.back.bind(this), @@ -77,42 +77,53 @@ SendTransactionScreen.prototype.render = function () { ]), // invisible place holder - h('i.fa.fa-users.fa-lg.invisible'), - - ]), - - // account label - h('h2.font-medium.color-forest.flex-center', { - style: { - paddingTop: 8, - marginBottom: 8, - }, - }, identity && identity.name), - - // address and getter actions - h('.flex-row.flex-center', { - style: { - marginBottom: 8, - }, - }, [ - - h('div', { + h('i.fa.fa-users.fa-lg.invisible', { style: { - lineHeight: '16px', + marginTop: '28px', }, - }, addressSummary(address)), - - ]), - - // balance - h('.flex-row.flex-center', [ - - h(EthBalance, { - value: account && account.balance, }), ]), + // account label + + h('.flex-column', { + style: { + marginTop: '10px', + alignItems: 'flex-start', + }, + }, [ + h('h2.font-medium.color-forest.flex-center', { + style: { + paddingTop: '8px', + marginBottom: '8px', + }, + }, identity && identity.name), + + // address and getter actions + h('.flex-row.flex-center', { + style: { + marginBottom: '8px', + }, + }, [ + + h('div', { + style: { + lineHeight: '16px', + }, + }, addressSummary(address)), + + ]), + + // balance + h('.flex-row.flex-center', [ + + h(EthBalance, { + value: account && account.balance, + }), + + ]), + ]), ]), // @@ -123,8 +134,8 @@ SendTransactionScreen.prototype.render = function () { style: { background: '#EBEBEB', color: '#AEAEAE', - marginTop: 32, - marginBottom: 16, + marginTop: '15px', + marginBottom: '16px', }, }, [ 'Send Transaction', @@ -152,7 +163,7 @@ SendTransactionScreen.prototype.render = function () { placeholder: 'Amount', type: 'number', style: { - marginRight: 6, + marginRight: '6px', }, dataset: { persistentFormId: 'tx-amount', @@ -171,20 +182,19 @@ SendTransactionScreen.prototype.render = function () { // // Optional Fields // - h('h3.flex-center.text-transform-uppercase', { style: { background: '#EBEBEB', color: '#AEAEAE', - marginTop: 16, - marginBottom: 16, + marginTop: '16px', + marginBottom: '16px', }, }, [ 'Transactional Data (optional)', ]), // 'data' field - h('section.flex-row.flex-center', [ + h('section.flex-column.flex-center', [ h('input.large-input', { name: 'txData', placeholder: '0x01234', @@ -197,6 +207,73 @@ 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'), + ]), + ]), ]) ) } @@ -211,11 +288,12 @@ SendTransactionScreen.prototype.back = function () { this.props.dispatch(actions.backToAccountDetail(address)) } -SendTransactionScreen.prototype.onSubmit = function () { +SendTransactionScreen.prototype.onSubmit = function (gasPrice) { 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 @@ -239,6 +317,7 @@ SendTransactionScreen.prototype.onSubmit = function () { var txParams = { from: this.props.address, value: '0x' + value.toString(16), + gasMultiplier: gasMultiplier * 0.01, } if (recipient) txParams.to = ethUtil.addHexPrefix(recipient)