m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Add custom gas field to send page

Browse Source
This commit is contained in:
Frankie 2016-10-06 13:03:01 -07:00
parent a52c497ad1
commit e1b78da3e6
4 changed files with 195 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/scripts/lib/id-management.js
View File

@ -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 = txParams.gasMultiplier || 1
delete txParams.gasMultiplier
var gasPrice = parseFloat(new BN(ethUtil.stripHexPrefix(txParams.gasPrice), 16).toString()) * gasMultiplier
txParams.gasPrice = ethUtil.intToHex(parseInt(gasPrice))
// normalize values
txParams.to = ethUtil.addHexPrefix(txParams.to)
txParams.from = ethUtil.addHexPrefix(txParams.from)
txParams.value = ethUtil.addHexPrefix(txParams.value)

2
ui/app/components/pending-tx-details.js
View File

@ -29,8 +29,10 @@ PTXP.render = function () {
var account = props.accounts[address]
var balance = account ? account.balance : '0x0'
var gasMultiplier = txParams.gasMultiplier
var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16)
var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
gasPrice = new BN(parseFloat(gasPrice.toString()) * gasMultiplier)
var txFee = gasCost.mul(gasPrice)
var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
var maxCost = txValue.add(txFee)

63
ui/app/components/range-slider.js Normal file
View File

@ -0,0 +1,63 @@
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 props = this.props
const onChange = props.onChange || 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,
defaultValue: defaultValue,
onChange: mirrorInput ? this.mirrorInputs.bind(this, name) : onChange,
}),
// Mirrored input for range
mirrorInput ? h('input.large-input', {
type: 'number',
name: `${name}Mirror`,
min: min,
max: max,
defaultValue: defaultValue,
step: increment,
style: input,
onChange: this.mirrorInputs.bind(this, `${name}Mirror`),
}) : null,
])
)
}
RangeSlider.prototype.mirrorInputs = function (active) {
var range = document.querySelector(`input[name="${this.props.name}"]`)
var inputMirror = document.querySelector(`input[name="${this.props.name}Mirror"]`)
if (active === this.props.name) {
inputMirror.value = range.value
} else {
range.value = inputMirror.value
}
}

166
ui/app/send.js
View File

@ -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,75 @@ SendTransactionScreen.prototype.render = function () {
},
}),
]),
// custom gas 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 transactions
gas price. seting it to 100% will use
the full recomend 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 +290,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
@ -243,6 +323,6 @@ SendTransactionScreen.prototype.onSubmit = function () {
if (recipient) txParams.to = ethUtil.addHexPrefix(recipient)
if (txData) txParams.data = txData
txParams.gasMultiplier = gasMultiplier * 0.01
this.props.dispatch(actions.signTx(txParams))
}