Merge branch 'master' into i1210-txdisappearance

feature/default_network_editable
Kevin Serrano 8 years ago committed by GitHub
commit 21f41718ce
  1. 3
      CHANGELOG.md
  2. 2
      app/scripts/lib/tx-utils.js
  3. 36
      app/scripts/migrations/012.js
  4. 1
      app/scripts/notice-controller.js
  5. 1
      notices/archive/notice_1.md
  6. 2
      notices/notice-nonce.json
  7. 2
      notices/notices.json
  8. 7
      test/lib/migrations/004.json
  9. 7
      test/unit/migrations-test.js
  10. 1
      ui/app/actions.js
  11. 78
      ui/app/components/hex-as-decimal-input.js
  12. 5
      ui/app/components/notice.js
  13. 344
      ui/app/components/pending-tx-details.js
  14. 414
      ui/app/components/pending-tx.js
  15. 2
      ui/app/components/transaction-list-item.js
  16. 27
      ui/app/conf-tx.js
  17. 12
      ui/app/css/index.css
  18. 3
      ui/app/reducers/app.js

@ -9,6 +9,9 @@
- Removed support for old, lightwallet based vault. Users who have not opened app in over a month will need to recover with their seed phrase. This will allow Firefox support sooner. - Removed support for old, lightwallet based vault. Users who have not opened app in over a month will need to recover with their seed phrase. This will allow Firefox support sooner.
- Fixed bug where spinner wouldn't disappear on incorrect password submission on seed word reveal. - Fixed bug where spinner wouldn't disappear on incorrect password submission on seed word reveal.
- Polish the private key UI. - Polish the private key UI.
- Enforce minimum values for gas price and gas limit.
- Fix bug where total gas was sometimes not live-updated.
- Fix bug where editing gas value could have some abrupt behaviors (#1233)
- Add Kovan as an option on our network list. - Add Kovan as an option on our network list.
- Fixed bug where transactions on other networks would disappear when submitting a transaction on another network. - Fixed bug where transactions on other networks would disappear when submitting a transaction on another network.

@ -99,7 +99,7 @@ module.exports = class txProviderUtils {
txParams.from = normalize(txParams.from) txParams.from = normalize(txParams.from)
txParams.value = normalize(txParams.value) txParams.value = normalize(txParams.value)
txParams.data = normalize(txParams.data) txParams.data = normalize(txParams.data)
txParams.gasLimit = normalize(txParams.gasLimit || txParams.gas) txParams.gas = normalize(txParams.gas || txParams.gasLimit)
txParams.nonce = normalize(txParams.nonce) txParams.nonce = normalize(txParams.nonce)
// build ethTx // build ethTx
log.info(`Prepared tx for signing: ${JSON.stringify(txParams)}`) log.info(`Prepared tx for signing: ${JSON.stringify(txParams)}`)

@ -0,0 +1,36 @@
const version = 12
/*
This migration modifies our notices to delete their body after being read.
*/
const clone = require('clone')
module.exports = {
version,
migrate: function (originalVersionedData) {
let versionedData = clone(originalVersionedData)
versionedData.meta.version = version
try {
const state = versionedData.data
const newState = transformState(state)
versionedData.data = newState
} catch (err) {
console.warn(`MetaMask Migration #${version}` + err.stack)
}
return Promise.resolve(versionedData)
},
}
function transformState (state) {
const newState = state
newState.NoticeController.noticesList.forEach((notice) => {
if (notice.read) {
notice.body = ''
}
})
return newState
}

@ -41,6 +41,7 @@ module.exports = class NoticeController extends EventEmitter {
var notices = this.getNoticesList() var notices = this.getNoticesList()
var index = notices.findIndex((currentNotice) => currentNotice.id === noticeToMark.id) var index = notices.findIndex((currentNotice) => currentNotice.id === noticeToMark.id)
notices[index].read = true notices[index].read = true
notices[index].body = ''
this.setNoticesList(notices) this.setNoticesList(notices)
const latestNotice = this.getLatestUnreadNotice() const latestNotice = this.getLatestUnreadNotice()
cb(null, latestNotice) cb(null, latestNotice)

@ -0,0 +1 @@
MetaMask now lists a new network on our dropdown list: Kovan, a [Proof of Authority](https://github.com/paritytech/parity/wiki/Proof-of-Authority-Chains) testchain managed by several blockchain organizations such as Digix, Etherscan, and Parity. It is designed to be a more stable and reliable testnet alternative to Ropsten and was created in response to recent attacks that slowed down the Ropsten network. You can read more about Kovan [here](https://medium.com/@Digix/announcing-kovan-a-stable-ethereum-public-testnet-10ac7cb6c85f#.6o8sz8cct) and [here](https://medium.com/@Digix/letter-from-the-ceo-some-context-regarding-kovan-7b5121adb901#.kfv7zhw83). As with Ropsten, the default remote node to connect to Kovan is managed by Infura.

File diff suppressed because one or more lines are too long

@ -48,6 +48,13 @@
"title":"Ending Morden Support", "title":"Ending Morden Support",
"body":"Due to [recent events](https://blog.ethereum.org/2016/11/20/from-morden-to-ropsten/), MetaMask is now deprecating support for the Morden Test Network.\n\nUsers will still be able to access Morden through a locally hosted node, but we will no longer be providing hosted access to this network through [Infura](http://infura.io/).\n\nPlease use the new Ropsten Network as your new default test network.\n\nYou can fund your Ropsten account using the buy button on your account page.\n\nBest wishes!\nThe MetaMask Team\n\n", "body":"Due to [recent events](https://blog.ethereum.org/2016/11/20/from-morden-to-ropsten/), MetaMask is now deprecating support for the Morden Test Network.\n\nUsers will still be able to access Morden through a locally hosted node, but we will no longer be providing hosted access to this network through [Infura](http://infura.io/).\n\nPlease use the new Ropsten Network as your new default test network.\n\nYou can fund your Ropsten account using the buy button on your account page.\n\nBest wishes!\nThe MetaMask Team\n\n",
"id":0 "id":0
},
{
"read":false,
"date":"Sat Dec 17 2016",
"title":"Keeping It Real",
"body":"nonempty",
"id":1
} }
], ],
"conversionRate":12.66441492, "conversionRate":12.66441492,

@ -15,6 +15,8 @@ const migration8 = require(path.join('..', '..', 'app', 'scripts', 'migrations',
const migration9 = require(path.join('..', '..', 'app', 'scripts', 'migrations', '009')) const migration9 = require(path.join('..', '..', 'app', 'scripts', 'migrations', '009'))
const migration10 = require(path.join('..', '..', 'app', 'scripts', 'migrations', '010')) const migration10 = require(path.join('..', '..', 'app', 'scripts', 'migrations', '010'))
const migration11 = require(path.join('..', '..', 'app', 'scripts', 'migrations', '011')) const migration11 = require(path.join('..', '..', 'app', 'scripts', 'migrations', '011'))
const migration12 = require(path.join('..', '..', 'app', 'scripts', 'migrations', '012'))
const oldTestRpc = 'https://rawtestrpc.metamask.io/' const oldTestRpc = 'https://rawtestrpc.metamask.io/'
const newTestRpc = 'https://testrpc.metamask.io/' const newTestRpc = 'https://testrpc.metamask.io/'
@ -91,6 +93,11 @@ describe('wallet1 is migrated successfully', () => {
}).then((eleventhResult) => { }).then((eleventhResult) => {
assert.equal(eleventhResult.data.isDisclaimerConfirmed, null, 'isDisclaimerConfirmed should not exist') assert.equal(eleventhResult.data.isDisclaimerConfirmed, null, 'isDisclaimerConfirmed should not exist')
assert.equal(eleventhResult.data.TOSHash, null, 'TOSHash should not exist') assert.equal(eleventhResult.data.TOSHash, null, 'TOSHash should not exist')
return migration12.migrate(eleventhResult)
}).then((twelfthResult) => {
assert.equal(twelfthResult.data.NoticeController.noticesList[0].body, '', 'notices that have been read should have an empty body.')
assert.equal(twelfthResult.data.NoticeController.noticesList[1].body, 'nonempty', 'notices that have not been read should not have an empty body.')
}) })
}) })

@ -397,7 +397,6 @@ function signTx (txData) {
dispatch(actions.hideLoadingIndication()) dispatch(actions.hideLoadingIndication())
if (err) return dispatch(actions.displayWarning(err.message)) if (err) return dispatch(actions.displayWarning(err.message))
dispatch(actions.hideWarning()) dispatch(actions.hideWarning())
dispatch(actions.goHome())
}) })
dispatch(this.showConfTxPage()) dispatch(this.showConfTxPage())
} }

@ -9,6 +9,7 @@ module.exports = HexAsDecimalInput
inherits(HexAsDecimalInput, Component) inherits(HexAsDecimalInput, Component)
function HexAsDecimalInput () { function HexAsDecimalInput () {
this.state = { invalid: null }
Component.call(this) Component.call(this)
} }
@ -23,13 +24,17 @@ function HexAsDecimalInput () {
HexAsDecimalInput.prototype.render = function () { HexAsDecimalInput.prototype.render = function () {
const props = this.props const props = this.props
const { value, onChange } = props const state = this.state
const { value, onChange, min, max } = props
const toEth = props.toEth const toEth = props.toEth
const suffix = props.suffix const suffix = props.suffix
const decimalValue = decimalize(value, toEth) const decimalValue = decimalize(value, toEth)
const style = props.style const style = props.style
return ( return (
h('.flex-column', [
h('.flex-row', { h('.flex-row', {
style: { style: {
alignItems: 'flex-end', alignItems: 'flex-end',
@ -38,8 +43,11 @@ HexAsDecimalInput.prototype.render = function () {
textRendering: 'geometricPrecision', textRendering: 'geometricPrecision',
}, },
}, [ }, [
h('input.ether-balance.ether-balance-amount', { h('input.hex-input', {
type: 'number', type: 'number',
required: true,
min: min,
max: max,
style: extend({ style: extend({
display: 'block', display: 'block',
textAlign: 'right', textAlign: 'right',
@ -47,11 +55,24 @@ HexAsDecimalInput.prototype.render = function () {
border: '1px solid #bdbdbd', border: '1px solid #bdbdbd',
}, style), }, style),
value: decimalValue, value: parseInt(decimalValue),
onBlur: (event) => {
this.updateValidity(event)
},
onChange: (event) => { onChange: (event) => {
this.updateValidity(event)
const hexString = (event.target.value === '') ? '' : hexify(event.target.value) const hexString = (event.target.value === '') ? '' : hexify(event.target.value)
onChange(hexString) onChange(hexString)
}, },
onInvalid: (event) => {
const msg = this.constructWarning()
if (msg === state.invalid) {
return
}
this.setState({ invalid: msg })
event.preventDefault()
return false
},
}), }),
h('div', { h('div', {
style: { style: {
@ -62,10 +83,61 @@ HexAsDecimalInput.prototype.render = function () {
width: '20px', width: '20px',
}, },
}, suffix), }, suffix),
]),
state.invalid ? h('span.error', {
style: {
position: 'absolute',
right: '0px',
textAlign: 'right',
transform: 'translateY(26px)',
padding: '3px',
background: 'rgba(255,255,255,0.85)',
zIndex: '1',
textTransform: 'capitalize',
border: '2px solid #E20202',
},
}, state.invalid) : null,
]) ])
) )
} }
HexAsDecimalInput.prototype.setValid = function (message) {
this.setState({ invalid: null })
}
HexAsDecimalInput.prototype.updateValidity = function (event) {
const target = event.target
const value = this.props.value
const newValue = target.value
if (value === newValue) {
return
}
const valid = target.checkValidity()
if (valid) {
this.setState({ invalid: null })
}
}
HexAsDecimalInput.prototype.constructWarning = function () {
const { name, min, max } = this.props
let message = name ? name + ' ' : ''
if (min && max) {
message += `must be greater than or equal to ${min} and less than or equal to ${max}.`
} else if (min) {
message += `must be greater than or equal to ${min}.`
} else if (max) {
message += `must be less than or equal to ${max}.`
} else {
message += 'Invalid input.'
}
return message
}
function hexify (decimalString) { function hexify (decimalString) {
const hexBN = new BN(decimalString, 10) const hexBN = new BN(decimalString, 10)
return '0x' + hexBN.toString('hex') return '0x' + hexBN.toString('hex')

@ -99,7 +99,10 @@ Notice.prototype.render = function () {
h('button', { h('button', {
disabled, disabled,
onClick: onConfirm, onClick: () => {
this.setState({disclaimerDisabled: true})
onConfirm()
},
style: { style: {
marginTop: '18px', marginTop: '18px',
}, },

@ -1,344 +0,0 @@
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
inherits(PendingTxDetails, Component)
function PendingTxDetails () {
Component.call(this)
}
const PTXP = PendingTxDetails.prototype
PTXP.render = function () {
var props = this.props
var state = this.state || {}
var txData = state.txMeta || props.txData
var txParams = txData.txParams || {}
var address = txParams.from || props.selectedAddress
var identity = props.identities[address] || { address: address }
var account = props.accounts[address]
var balance = account ? account.balance : '0x0'
const gas = (state.gas === undefined) ? txParams.gas : state.gas
const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.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', [
h('.flex-row.flex-center', {
style: {
maxWidth: '100%',
},
}, [
h(MiniAccountPanel, {
imageSeed: address,
imageifyIdenticons: imageify,
picOrder: 'right',
}, [
h('span.font-small', {
style: {
fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
},
}, identity.name),
h('span.font-small', {
style: {
fontFamily: 'Montserrat Light, Montserrat, sans-serif',
},
}, addressSummary(address, 6, 4, false)),
h('span.font-small', {
style: {
fontFamily: 'Montserrat Light, Montserrat, sans-serif',
},
}, [
h(EthBalance, {
value: balance,
inline: true,
labelColor: '#F7861C',
}),
]),
]),
forwardCarrat(),
this.miniAccountPanelForRecipient(),
]),
h('style', `
.table-box {
margin: 7px 0px 0px 0px;
width: 100%;
}
.table-box .row {
margin: 0px;
background: rgb(236,236,236);
display: flex;
justify-content: space-between;
font-family: Montserrat Light, sans-serif;
font-size: 13px;
padding: 5px 25px;
}
.table-box .row .value {
font-family: Montserrat Regular;
}
`),
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}`)
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}`)
this.setState({ gasPrice: newHex })
},
}),
]),
]),
// Max Transaction Fee (calculated)
h('.cell.row', [
h('.cell.label', 'Max Transaction Fee'),
h(EthBalance, { value: txFee.toString(16) }),
]),
h('.cell.row', {
style: {
fontFamily: 'Montserrat Regular',
background: 'white',
padding: '10px 25px',
},
}, [
h('.cell.label', 'Max Total'),
h('.cell.value', {
style: {
display: 'flex',
alignItems: 'center',
},
}, [
h(EthBalance, {
value: maxCost.toString(16),
inline: true,
labelColor: 'black',
fontSize: '16px',
}),
]),
]),
// Data size row:
h('.cell.row', {
style: {
background: '#f7f7f7',
paddingBottom: '0px',
},
}, [
h('.cell.label'),
h('.cell.value', {
style: {
fontFamily: 'Montserrat Light',
fontSize: '11px',
},
}, `Data included: ${dataLength} bytes`),
]),
]), // End of Table
])
)
}
PTXP.miniAccountPanelForRecipient = function () {
var props = this.props
var txData = props.txData
var txParams = txData.txParams || {}
var isContractDeploy = !('to' in txParams)
var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
// If it's not a contract deploy, send to the account
if (!isContractDeploy) {
return h(MiniAccountPanel, {
imageSeed: txParams.to,
imageifyIdenticons: imageify,
picOrder: 'left',
}, [
h('span.font-small', {
style: {
fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
},
}, nameForAddress(txParams.to, props.identities)),
h('span.font-small', {
style: {
fontFamily: 'Montserrat Light, Montserrat, sans-serif',
},
}, addressSummary(txParams.to, 6, 4, false)),
])
} else {
return h(MiniAccountPanel, {
imageifyIdenticons: imageify,
picOrder: 'left',
}, [
h('span.font-small', {
style: {
fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
},
}, 'New Contract'),
])
}
}
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
}
PTXP.verifyGasParams = function () {
// We call this in case the gas has not been modified at all
if (!this.state) { return true }
return this._notZeroOrEmptyString(this.state.gas) && this._notZeroOrEmptyString(this.state.gasPrice)
}
PTXP._notZeroOrEmptyString = function (obj) {
return obj !== '' && obj !== '0x0'
}
function forwardCarrat () {
return (
h('img', {
src: 'images/forward-carrat.svg',
style: {
padding: '5px 6px 0px 10px',
height: '37px',
},
})
)
}

@ -2,27 +2,64 @@ const Component = require('react').Component
const connect = require('react-redux').connect const connect = require('react-redux').connect
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 extend = require('xtend') const extend = require('xtend')
const actions = require('../actions') const actions = require('../actions')
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')
const MIN_GAS_PRICE_BN = new BN(20000000)
const MIN_GAS_LIMIT_BN = new BN(21000)
module.exports = connect(mapStateToProps)(PendingTx) module.exports = connect(mapStateToProps)(PendingTx)
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {}
}
} }
inherits(PendingTx, Component) inherits(PendingTx, Component)
function PendingTx () { function PendingTx () {
Component.call(this) Component.call(this)
this.state = {
valid: true,
gas: null,
gasPrice: null,
txData: null,
}
} }
PendingTx.prototype.render = function () { PendingTx.prototype.render = function () {
const props = this.props const props = this.props
const newProps = extend(props, {ref: 'details'}) const state = this.state
const txData = props.txData
const txData = state.txData || props.txData
const txParams = txData.txParams || {}
const address = txParams.from || props.selectedAddress
const identity = props.identities[address] || { address: address }
const account = props.accounts[address]
const balance = account ? account.balance : '0x0'
const gas = state.gas || txParams.gas
const gasPrice = state.gasPrice || txData.gasPrice
const gasBn = new BN(gas, 16)
const gasPriceBn = new BN(gasPrice, 16)
const txFeeBn = gasBn.mul(gasPriceBn)
const valueBn = new BN(ethUtil.stripHexPrefix(txParams.value), 16)
const maxCost = txFeeBn.add(valueBn)
const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
this.inputs = []
return ( return (
@ -30,8 +67,186 @@ PendingTx.prototype.render = function () {
key: txData.id, key: txData.id,
}, [ }, [
h('form#pending-tx-form', {
onSubmit: (event) => {
event.preventDefault()
const form = document.querySelector('form#pending-tx-form')
const valid = form.checkValidity()
this.setState({ valid })
if (valid && this.verifyGasParams()) {
props.sendTransaction(txData, event)
} else {
this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
}
},
}, [
// tx info // tx info
h(PendingTxDetails, newProps), h('div', [
h('.flex-row.flex-center', {
style: {
maxWidth: '100%',
},
}, [
h(MiniAccountPanel, {
imageSeed: address,
imageifyIdenticons: imageify,
picOrder: 'right',
}, [
h('span.font-small', {
style: {
fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
},
}, identity.name),
h('span.font-small', {
style: {
fontFamily: 'Montserrat Light, Montserrat, sans-serif',
},
}, addressSummary(address, 6, 4, false)),
h('span.font-small', {
style: {
fontFamily: 'Montserrat Light, Montserrat, sans-serif',
},
}, [
h(EthBalance, {
value: balance,
inline: true,
labelColor: '#F7861C',
}),
]),
]),
forwardCarrat(),
this.miniAccountPanelForRecipient(),
]),
h('style', `
.table-box {
margin: 7px 0px 0px 0px;
width: 100%;
}
.table-box .row {
margin: 0px;
background: rgb(236,236,236);
display: flex;
justify-content: space-between;
font-family: Montserrat Light, sans-serif;
font-size: 13px;
padding: 5px 25px;
}
.table-box .row .value {
font-family: Montserrat Regular;
}
`),
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, {
name: 'Gas Limit',
value: gas,
min: MIN_GAS_LIMIT_BN.toString(10), // The hard lower limit for gas.
suffix: 'UNITS',
style: {
position: 'relative',
top: '5px',
},
onChange: (newHex) => {
log.info(`Gas limit changed to ${newHex}`)
this.setState({ gas: newHex })
},
ref: (hexInput) => { this.inputs.push(hexInput) },
}),
]),
]),
// Gas Price (customizable)
h('.cell.row', [
h('.cell.label', 'Gas Price'),
h('.cell.value', {
}, [
h(HexInput, {
name: 'Gas Price',
value: gasPrice,
suffix: 'WEI',
min: MIN_GAS_PRICE_BN.toString(10),
style: {
position: 'relative',
top: '5px',
},
onChange: (newHex) => {
log.info(`Gas price changed to: ${newHex}`)
this.setState({ gasPrice: newHex })
},
ref: (hexInput) => { this.inputs.push(hexInput) },
}),
]),
]),
// Max Transaction Fee (calculated)
h('.cell.row', [
h('.cell.label', 'Max Transaction Fee'),
h(EthBalance, { value: txFeeBn.toString(16) }),
]),
h('.cell.row', {
style: {
fontFamily: 'Montserrat Regular',
background: 'white',
padding: '10px 25px',
},
}, [
h('.cell.label', 'Max Total'),
h('.cell.value', {
style: {
display: 'flex',
alignItems: 'center',
},
}, [
h(EthBalance, {
value: maxCost.toString(16),
inline: true,
labelColor: 'black',
fontSize: '16px',
}),
]),
]),
// Data size row:
h('.cell.row', {
style: {
background: '#f7f7f7',
paddingBottom: '0px',
},
}, [
h('.cell.label'),
h('.cell.value', {
style: {
fontFamily: 'Montserrat Light',
fontSize: '11px',
},
}, `Data included: ${dataLength} bytes`),
]),
]), // End of Table
]),
h('style', ` h('style', `
.conf-buttons button { .conf-buttons button {
@ -67,6 +282,7 @@ PendingTx.prototype.render = function () {
}, },
}, [ }, [
props.insufficientBalance ? props.insufficientBalance ?
h('button', { h('button', {
onClick: props.buyEth, onClick: props.buyEth,
@ -74,26 +290,186 @@ PendingTx.prototype.render = function () {
: null, : null,
h('button', { h('button', {
onClick: () => { onClick: (event) => {
this.refs.details.resetGasFields() this.resetGasFields()
event.preventDefault()
}, },
}, 'Reset'), }, 'Reset'),
h('button.confirm.btn-green', { // Accept Button
disabled: props.insufficientBalance, h('input.confirm.btn-green', {
onClick: (txData, event) => { type: 'submit',
if (this.refs.details.verifyGasParams()) { value: 'ACCEPT',
props.sendTransaction(txData, event) style: { marginLeft: '10px' },
} else { disabled: props.insufficientBalance || !this.state.valid,
this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) }),
}
},
}, 'Accept'),
h('button.cancel.btn-red', { h('button.cancel.btn-red', {
onClick: props.cancelTransaction, onClick: props.cancelTransaction,
}, 'Reject'), }, 'Reject'),
]), ]),
]),
]) ])
) )
} }
PendingTx.prototype.validChanged = function (newValid) {
this.setState({ valid: newValid })
}
PendingTx.prototype.miniAccountPanelForRecipient = function () {
const props = this.props
const txData = props.txData
const txParams = txData.txParams || {}
const isContractDeploy = !('to' in txParams)
const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
// If it's not a contract deploy, send to the account
if (!isContractDeploy) {
return h(MiniAccountPanel, {
imageSeed: txParams.to,
imageifyIdenticons: imageify,
picOrder: 'left',
}, [
h('span.font-small', {
style: {
fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
},
}, nameForAddress(txParams.to, props.identities)),
h('span.font-small', {
style: {
fontFamily: 'Montserrat Light, Montserrat, sans-serif',
},
}, addressSummary(txParams.to, 6, 4, false)),
])
} else {
return h(MiniAccountPanel, {
imageifyIdenticons: imageify,
picOrder: 'left',
}, [
h('span.font-small', {
style: {
fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
},
}, 'New Contract'),
])
}
}
PendingTx.prototype.componentDidUpdate = function (prevProps, previousState) {
log.debug(`pending-tx 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()
}
}
PendingTx.prototype.calculateGas = function () {
const state = this.state
const props = this.props
const txData = props.txData
const txMeta = this.gatherParams()
log.debug(`pending-tx calculating gas for ${JSON.stringify(txMeta)}`)
const txParams = txMeta.txParams
const gasLimit = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
const gasPriceHex = state.gasPrice || txData.gasPrice
const gasPrice = new BN(ethUtil.stripHexPrefix(gasPriceHex), 16)
const valid = !gasPrice.lt(MIN_GAS_PRICE_BN) && !gasLimit.lt(MIN_GAS_LIMIT_BN)
this.validChanged(valid)
const txFee = gasLimit.mul(gasPrice)
const txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
const maxCost = txValue.add(txFee)
const txFeeHex = '0x' + txFee.toString('hex')
const maxCostHex = '0x' + maxCost.toString('hex')
txMeta.txFee = txFeeHex
txMeta.maxCost = maxCostHex
txMeta.txParams.gasPrice = gasPriceHex
const newState = {
txFee: '0x' + txFee.toString('hex'),
maxCost: '0x' + maxCost.toString('hex'),
}
log.info(`tx form updating local state with ${JSON.stringify(newState)}`)
this.setState(newState)
if (this.props.onTxChange) {
this.props.onTxChange(txMeta)
}
}
PendingTx.prototype.resetGasFields = function () {
log.debug(`pending-tx resetGasFields`)
const txData = this.props.txData
this.inputs.forEach((hexInput) => {
if (hexInput) {
hexInput.setValid()
}
})
this.setState({
gas: txData.txParams.gas,
gasPrice: txData.gasPrice,
valid: true,
})
}
// After a customizable state value has been updated,
PendingTx.prototype.gatherParams = function () {
log.debug(`pending-tx 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
}
PendingTx.prototype.verifyGasParams = function () {
// We call this in case the gas has not been modified at all
if (!this.state) { return true }
return this._notZeroOrEmptyString(this.state.gas) && this._notZeroOrEmptyString(this.state.gasPrice)
}
PendingTx.prototype._notZeroOrEmptyString = function (obj) {
return obj !== '' && obj !== '0x0'
}
function forwardCarrat () {
return (
h('img', {
src: 'images/forward-carrat.svg',
style: {
padding: '5px 6px 0px 10px',
height: '37px',
},
})
)
}

@ -28,7 +28,7 @@ TransactionListItem.prototype.render = function () {
let isLinkable = false let isLinkable = false
const numericNet = parseInt(network) const numericNet = parseInt(network)
isLinkable = numericNet === 1 || numericNet === 3 isLinkable = numericNet === 1 || numericNet === 3 || numericNet === 42
var isMsg = ('msgParams' in transaction) var isMsg = ('msgParams' in transaction)
var isTx = ('txParams' in transaction) var isTx = ('txParams' in transaction)

@ -43,8 +43,8 @@ ConfirmTxScreen.prototype.render = function () {
unapprovedMsgs, unapprovedPersonalMsgs } = props unapprovedMsgs, unapprovedPersonalMsgs } = props
var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network) var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
var index = props.index !== undefined && unconfTxList[index] ? props.index : 0
var txData = unconfTxList[index] || {} var txData = unconfTxList[props.index] || {}
var txParams = txData.params || {} var txParams = txData.params || {}
var isNotification = isPopupOrNotification() === 'notification' var isNotification = isPopupOrNotification() === 'notification'
@ -158,7 +158,7 @@ ConfirmTxScreen.prototype.checkBalanceAgainstTx = function (txData) {
} }
ConfirmTxScreen.prototype.buyEth = function (address, event) { ConfirmTxScreen.prototype.buyEth = function (address, event) {
event.stopPropagation() this.stopPropagation(event)
this.props.dispatch(actions.buyEthView(address)) this.props.dispatch(actions.buyEthView(address))
} }
@ -172,14 +172,15 @@ ConfirmTxScreen.prototype.onTxChange = function (txData) {
// Must default to any local state txData, // Must default to any local state txData,
// to allow manual override of gas calculations. // to allow manual override of gas calculations.
ConfirmTxScreen.prototype.sendTransaction = function (txData, event) { ConfirmTxScreen.prototype.sendTransaction = function (txData, event) {
event.stopPropagation() this.stopPropagation(event)
const state = this.state || {} const state = this.state || {}
const txMeta = state.txData const txMeta = state.txData
this.props.dispatch(actions.updateAndApproveTx(txMeta || txData)) this.props.dispatch(actions.updateAndApproveTx(txMeta || txData))
} }
ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) { ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) {
event.stopPropagation() this.stopPropagation(event)
event.preventDefault()
this.props.dispatch(actions.cancelTx(txData)) this.props.dispatch(actions.cancelTx(txData))
} }
@ -187,32 +188,38 @@ ConfirmTxScreen.prototype.signMessage = function (msgData, event) {
log.info('conf-tx.js: signing message') log.info('conf-tx.js: signing message')
var params = msgData.msgParams var params = msgData.msgParams
params.metamaskId = msgData.id params.metamaskId = msgData.id
event.stopPropagation() this.stopPropagation(event)
this.props.dispatch(actions.signMsg(params)) this.props.dispatch(actions.signMsg(params))
} }
ConfirmTxScreen.prototype.stopPropagation = function (event) {
if (event.stopPropagation) {
event.stopPropagation()
}
}
ConfirmTxScreen.prototype.signPersonalMessage = function (msgData, event) { ConfirmTxScreen.prototype.signPersonalMessage = function (msgData, event) {
log.info('conf-tx.js: signing personal message') log.info('conf-tx.js: signing personal message')
var params = msgData.msgParams var params = msgData.msgParams
params.metamaskId = msgData.id params.metamaskId = msgData.id
event.stopPropagation() this.stopPropagation(event)
this.props.dispatch(actions.signPersonalMsg(params)) this.props.dispatch(actions.signPersonalMsg(params))
} }
ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) { ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) {
log.info('canceling message') log.info('canceling message')
event.stopPropagation() this.stopPropagation(event)
this.props.dispatch(actions.cancelMsg(msgData)) this.props.dispatch(actions.cancelMsg(msgData))
} }
ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) { ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) {
log.info('canceling personal message') log.info('canceling personal message')
event.stopPropagation() this.stopPropagation(event)
this.props.dispatch(actions.cancelPersonalMsg(msgData)) this.props.dispatch(actions.cancelPersonalMsg(msgData))
} }
ConfirmTxScreen.prototype.goHome = function (event) { ConfirmTxScreen.prototype.goHome = function (event) {
event.stopPropagation() this.stopPropagation(event)
this.props.dispatch(actions.goHome()) this.props.dispatch(actions.goHome())
} }

@ -32,7 +32,7 @@ input:focus, textarea:focus {
height: 500px; height: 500px;
} }
button { button, input[type="submit"] {
font-family: 'Montserrat Bold'; font-family: 'Montserrat Bold';
outline: none; outline: none;
cursor: pointer; cursor: pointer;
@ -46,17 +46,17 @@ button {
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
} }
button.btn-green { .btn-green, input[type="submit"].btn-green {
background: rgba(106, 195, 96, 1); background: rgba(106, 195, 96, 1);
box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36); box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36);
} }
button.btn-red { .btn-red {
background: rgba(254, 35, 17, 1); background: rgba(254, 35, 17, 1);
box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
} }
button[disabled] { button[disabled], input[type="submit"][disabled] {
cursor: not-allowed; cursor: not-allowed;
background: rgba(197, 197, 197, 1); background: rgba(197, 197, 197, 1);
box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
@ -66,10 +66,10 @@ button.spaced {
margin: 2px; margin: 2px;
} }
button:not([disabled]):hover { button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
transform: scale(1.1); transform: scale(1.1);
} }
button:not([disabled]):active { button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
transform: scale(0.95); transform: scale(0.95);
} }

@ -592,8 +592,9 @@ function hasPendingTxs (state) {
function indexForPending (state, txId) { function indexForPending (state, txId) {
var unapprovedTxs = state.metamask.unapprovedTxs var unapprovedTxs = state.metamask.unapprovedTxs
var unapprovedMsgs = state.metamask.unapprovedMsgs var unapprovedMsgs = state.metamask.unapprovedMsgs
var unapprovedPersonalMsgs = state.metamask.unapprovedPersonalMsgs
var network = state.metamask.network var network = state.metamask.network
var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, network) var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
let idx let idx
unconfTxList.forEach((tx, i) => { unconfTxList.forEach((tx, i) => {
if (tx.id === txId) { if (tx.id === txId) {

Loading…
Cancel
Save