Broke hex decimal input into its own component
Also added a new state to try to make UI dev mode work again, but it has other issues, like #1128, that need to be addressed before UI dev mode can be used again.
This commit is contained in:
parent
89af0ef408
commit
6b56d6ba98
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,49 @@
|
||||||
|
const Component = require('react').Component
|
||||||
|
const h = require('react-hyperscript')
|
||||||
|
const inherits = require('util').inherits
|
||||||
|
const ethUtil = require('ethereumjs-util')
|
||||||
|
const BN = ethUtil.BN
|
||||||
|
|
||||||
|
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 decimalValue = decimalize(value)
|
||||||
|
|
||||||
|
return (
|
||||||
|
h('input', {
|
||||||
|
value: decimalValue,
|
||||||
|
onChange: (event) => {
|
||||||
|
const hexString = hexify(event.target.value)
|
||||||
|
onChange(hexString)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function hexify (decimalString) {
|
||||||
|
const hexBN = new BN(decimalString, 10)
|
||||||
|
return '0x' + hexBN.toString('hex')
|
||||||
|
}
|
||||||
|
|
||||||
|
function decimalize (input) {
|
||||||
|
const strippedInput = ethUtil.stripHexPrefix(input)
|
||||||
|
const inputBN = new BN(strippedInput, 'hex')
|
||||||
|
return inputBN.toString(10)
|
||||||
|
}
|
||||||
|
|
|
@ -2,8 +2,7 @@ const Component = require('react').Component
|
||||||
const h = require('react-hyperscript')
|
const h = require('react-hyperscript')
|
||||||
const inherits = require('util').inherits
|
const inherits = require('util').inherits
|
||||||
const PendingTxDetails = require('./pending-tx-details')
|
const PendingTxDetails = require('./pending-tx-details')
|
||||||
const BN = require('ethereumjs-util').BN
|
const HexInput = require('./hex-as-decimal-input')
|
||||||
const ethUtil = require('ethereumjs-util')
|
|
||||||
|
|
||||||
module.exports = PendingTx
|
module.exports = PendingTx
|
||||||
|
|
||||||
|
@ -13,12 +12,13 @@ function PendingTx () {
|
||||||
}
|
}
|
||||||
|
|
||||||
PendingTx.prototype.render = function () {
|
PendingTx.prototype.render = function () {
|
||||||
var props = this.props
|
const props = this.props
|
||||||
var state = this.state || {}
|
const state = this.state || {}
|
||||||
var txData = props.txData
|
const txData = props.txData
|
||||||
var txParams = txData.txParams
|
const txParams = txData.txParams
|
||||||
var gasValue = state.gas || txParams.gas
|
|
||||||
var decimalGas = decimalize(gasValue)
|
const gas = state.gas || txParams.gas
|
||||||
|
const gasPrice = state.gasPrice || txParams.gasPrice
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
|
@ -78,24 +78,22 @@ PendingTx.prototype.render = function () {
|
||||||
onClick: props.cancelTransaction,
|
onClick: props.cancelTransaction,
|
||||||
}, 'Reject'),
|
}, 'Reject'),
|
||||||
]),
|
]),
|
||||||
h('input', {
|
|
||||||
value: decimalGas,
|
h(HexInput, {
|
||||||
onChange: (event) => {
|
value: gas,
|
||||||
const hexString = hexify(event.target.value)
|
onChange: (newHex) => {
|
||||||
this.setState({ gas: hexString })
|
this.setState({ gas: newHex })
|
||||||
}
|
},
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
h(HexInput, {
|
||||||
|
value: gasPrice,
|
||||||
|
onChange: (newHex) => {
|
||||||
|
this.setState({ gasPrice: newHex })
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
|
||||||
])
|
])
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function decimalize (input) {
|
|
||||||
const strippedInput = ethUtil.stripHexPrefix(input)
|
|
||||||
const inputBN = new BN(strippedInput, 'hex')
|
|
||||||
return inputBN.toString(10)
|
|
||||||
}
|
|
||||||
|
|
||||||
function hexify (decimalString) {
|
|
||||||
const hexBN = new BN(decimalString, 10)
|
|
||||||
return '0x' + hexBN.toString('hex')
|
|
||||||
}
|
|
||||||
|
|
|
@ -36,7 +36,6 @@ function ConfirmTxScreen () {
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.render = function () {
|
ConfirmTxScreen.prototype.render = function () {
|
||||||
var props = this.props
|
var props = this.props
|
||||||
var state = this.state || {}
|
|
||||||
|
|
||||||
var network = props.network
|
var network = props.network
|
||||||
var provider = props.provider
|
var provider = props.provider
|
||||||
|
|
Loading…
Reference in New Issue