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

Customize Gas connected to state

This commit is contained in:
Dan 2017-10-12 14:12:14 -02:30 committed by Chi Kei Chan
parent a59972dcab
commit a9244f5e42
8 changed files with 147 additions and 27 deletions

View File

@ -133,6 +133,10 @@ var actions = {
// send screen // send screen
estimateGas, estimateGas,
getGasPrice, getGasPrice,
UPDATE_GAS_LIMIT: 'UPDATE_GAS_LIMIT',
UPDATE_GAS_PRICE: 'UPDATE_GAS_PRICE',
updateGasLimit,
updateGasPrice,
// app messages // app messages
confirmSeedWords: confirmSeedWords, confirmSeedWords: confirmSeedWords,
showAccountDetail: showAccountDetail, showAccountDetail: showAccountDetail,
@ -463,12 +467,20 @@ function estimateGas (params = {}) {
return reject(err) return reject(err)
} }
dispatch(actions.hideWarning()) dispatch(actions.hideWarning())
dispatch(actions.updateGasLimit(data))
return resolve(data) return resolve(data)
}) })
}) })
} }
} }
function updateGasLimit (gasLimit) {
return {
type: actions.UPDATE_GAS_LIMIT,
value: gasLimit,
}
}
function getGasPrice () { function getGasPrice () {
return (dispatch) => { return (dispatch) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -478,12 +490,20 @@ function getGasPrice () {
return reject(err) return reject(err)
} }
dispatch(actions.hideWarning()) dispatch(actions.hideWarning())
dispatch(actions.updateGasPrice(data))
return resolve(data) return resolve(data)
}) })
}) })
} }
} }
function updateGasPrice (gasPrice) {
return {
type: actions.UPDATE_GAS_PRICE,
value: gasPrice,
}
}
function sendTx (txData) { function sendTx (txData) {
log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`) log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`)
return (dispatch) => { return (dispatch) => {

View File

@ -5,32 +5,90 @@ const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const GasModalCard = require('./gas-modal-card') const GasModalCard = require('./gas-modal-card')
const { conversionUtil } = require('../../conversion-util')
const {
getGasPrice,
getGasLimit,
conversionRateSelector,
} = require('../../selectors')
function mapStateToProps (state) { function mapStateToProps (state) {
return {} return {
gasPrice: getGasPrice(state),
gasLimit: getGasLimit(state),
conversionRate: conversionRateSelector(state),
}
} }
function mapDispatchToProps (dispatch) { function mapDispatchToProps (dispatch) {
return { return {
hideModal: () => dispatch(actions.hideModal()), hideModal: () => dispatch(actions.hideModal()),
updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
} }
} }
inherits(CustomizeGasModal, Component) inherits(CustomizeGasModal, Component)
function CustomizeGasModal () { function CustomizeGasModal (props) {
Component.call(this) Component.call(this)
this.state = { this.state = {
gasPrice: '0.23', gasPrice: props.gasPrice,
gasLimit: '25000', gasLimit: props.gasLimit,
} }
} }
module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal) module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)
CustomizeGasModal.prototype.save = function (gasPrice, gasLimit) {
const {
updateGasPrice,
updateGasLimit,
hideModal,
} = this.props
updateGasPrice(gasPrice)
updateGasLimit(gasLimit)
hideModal()
}
CustomizeGasModal.prototype.convertAndSetGasLimit = function (newGasLimit) {
const convertedGasLimit = conversionUtil(newGasLimit, {
fromNumericBase: 'dec',
toNumericBase: 'hex',
})
this.setState({ gasLimit: convertedGasLimit })
}
CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) {
const convertedGasPrice = conversionUtil(newGasPrice, {
fromNumericBase: 'dec',
toNumericBase: 'hex',
fromDenomination: 'GWEI',
toDenomination: 'WEI',
})
this.setState({ gasPrice: convertedGasPrice })
}
CustomizeGasModal.prototype.render = function () { CustomizeGasModal.prototype.render = function () {
const { hideModal } = this.props const { hideModal, conversionRate } = this.props
const { gasPrice, gasLimit } = this.state const { gasPrice, gasLimit } = this.state
const convertedGasPrice = conversionUtil(gasPrice, {
fromNumericBase: 'hex',
toNumericBase: 'dec',
fromDenomination: 'WEI',
toDenomination: 'GWEI',
})
const convertedGasLimit = conversionUtil(gasLimit, {
fromNumericBase: 'hex',
toNumericBase: 'dec',
})
return h('div.send-v2__customize-gas', {}, [ return h('div.send-v2__customize-gas', {}, [
h('div', { h('div', {
}, [ }, [
@ -47,21 +105,21 @@ CustomizeGasModal.prototype.render = function () {
h('div.send-v2__customize-gas__body', {}, [ h('div.send-v2__customize-gas__body', {}, [
h(GasModalCard, { h(GasModalCard, {
value: gasPrice, value: convertedGasPrice,
min: 0.0, min: 0,
max: 5.0, max: 1000,
step: 0.01, step: 1,
onChange: gasPrice => this.setState({ gasPrice }), onChange: value => this.convertAndSetGasPrice(value),
title: 'Gas Price', title: 'Gas Price',
copy: 'We calculate the suggested gas prices based on network success rates.', copy: 'We calculate the suggested gas prices based on network success rates.',
}), }),
h(GasModalCard, { h(GasModalCard, {
value: gasLimit, value: convertedGasLimit,
min: 20000, min: 20000,
max: 100000, max: 100000,
step: 1, step: 1,
onChange: gasLimit => this.setState({ gasLimit }), onChange: value => this.convertAndSetGasLimit(value),
title: 'Gas Limit', title: 'Gas Limit',
copy: 'We calculate the suggested gas limit based on network success rates.', copy: 'We calculate the suggested gas limit based on network success rates.',
}), }),
@ -80,7 +138,7 @@ CustomizeGasModal.prototype.render = function () {
}, ['CANCEL']), }, ['CANCEL']),
h('div.send-v2__customize-gas__save', { h('div.send-v2__customize-gas__save', {
onClick: () => console.log('Save'), onClick: () => this.save(gasPrice, gasLimit),
}, ['SAVE']), }, ['SAVE']),
]) ])

View File

@ -28,7 +28,11 @@ GasFeeDisplay.prototype.render = function () {
? h(CurrencyDisplay, { ? h(CurrencyDisplay, {
primaryCurrency: 'ETH', primaryCurrency: 'ETH',
convertedCurrency: 'USD', convertedCurrency: 'USD',
value: multiplyCurrencies(gasLimit, gasPrice, { toNumericBase: 'hex' }), value: multiplyCurrencies(gasLimit, gasPrice, {
toNumericBase: 'hex',
multiplicandBase: 16,
multiplierBase: 16,
}),
conversionRate, conversionRate,
convertedPrefix: '$', convertedPrefix: '$',
readOnly: true, readOnly: true,

View File

@ -12,6 +12,8 @@ const {
getSelectedToken, getSelectedToken,
getSelectedTokenExchangeRate, getSelectedTokenExchangeRate,
getSelectedAddress, getSelectedAddress,
getGasPrice,
getGasLimit,
} = require('../../selectors') } = require('../../selectors')
module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther) module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
@ -49,6 +51,8 @@ function mapStateToProps (state) {
primaryCurrency, primaryCurrency,
data, data,
tokenToUSDRate, tokenToUSDRate,
gasPrice: getGasPrice(state),
gasLimit: getGasLimit(state),
} }
} }

View File

@ -32,6 +32,7 @@ BigNumber.config({
// Big Number Constants // Big Number Constants
const BIG_NUMBER_WEI_MULTIPLIER = new BigNumber('1000000000000000000') const BIG_NUMBER_WEI_MULTIPLIER = new BigNumber('1000000000000000000')
const BIG_NUMBER_GWEI_MULTIPLIER = new BigNumber('1000000000')
// Individual Setters // Individual Setters
const convert = R.invoker(1, 'times') const convert = R.invoker(1, 'times')
@ -45,10 +46,12 @@ const toBigNumber = {
BN: n => new BigNumber(n.toString(16), 16), BN: n => new BigNumber(n.toString(16), 16),
} }
const toNormalizedDenomination = { const toNormalizedDenomination = {
WEI: bigNumber => bigNumber.div(BIG_NUMBER_WEI_MULTIPLIER) WEI: bigNumber => bigNumber.div(BIG_NUMBER_WEI_MULTIPLIER),
GWEI: bigNumber => bigNumber.div(BIG_NUMBER_GWEI_MULTIPLIER),
} }
const toSpecifiedDenomination = { const toSpecifiedDenomination = {
WEI: bigNumber => bigNumber.times(BIG_NUMBER_WEI_MULTIPLIER).round() WEI: bigNumber => bigNumber.times(BIG_NUMBER_WEI_MULTIPLIER).round(),
GWEI: bigNumber => bigNumber.times(BIG_NUMBER_GWEI_MULTIPLIER).round(),
} }
const baseChange = { const baseChange = {
hex: n => n.toString(16), hex: n => n.toString(16),
@ -139,8 +142,13 @@ const addCurrencies = (a, b, options = {}) => {
} }
const multiplyCurrencies = (a, b, options = {}) => { const multiplyCurrencies = (a, b, options = {}) => {
const { toNumericBase, numberOfDecimals } = options const {
const value = (new BigNumber(a)).times(b); toNumericBase,
numberOfDecimals,
multiplicandBase,
multiplierBase,
} = options
const value = (new BigNumber(a, multiplicandBase)).times(b, multiplierBase);
return converter({ return converter({
value, value,
toNumericBase, toNumericBase,

View File

@ -20,6 +20,10 @@ function reduceMetamask (state, action) {
selectedTokenAddress: null, selectedTokenAddress: null,
tokenExchangeRates: {}, tokenExchangeRates: {},
tokens: [], tokens: [],
send: {
gasLimit: null,
gasPrice: null,
},
}, state.metamask) }, state.metamask)
switch (action.type) { switch (action.type) {
@ -152,6 +156,22 @@ function reduceMetamask (state, action) {
tokens: action.newTokens, tokens: action.newTokens,
}) })
case actions.UPDATE_GAS_LIMIT:
return extend(metamaskState, {
send: {
...metamaskState.send,
gasLimit: action.value,
},
})
case actions.UPDATE_GAS_PRICE:
return extend(metamaskState, {
send: {
...metamaskState.send,
gasPrice: action.value,
},
})
default: default:
return metamaskState return metamaskState

View File

@ -10,6 +10,8 @@ const selectors = {
transactionsSelector, transactionsSelector,
accountsWithSendEtherInfoSelector, accountsWithSendEtherInfoSelector,
getCurrentAccountWithSendEtherInfo, getCurrentAccountWithSendEtherInfo,
getGasPrice,
getGasLimit,
} }
module.exports = selectors module.exports = selectors
@ -46,7 +48,7 @@ function getSelectedTokenExchangeRate (state) {
const tokenExchangeRates = state.metamask.tokenExchangeRates const tokenExchangeRates = state.metamask.tokenExchangeRates
const selectedToken = getSelectedToken(state) || {} const selectedToken = getSelectedToken(state) || {}
const { symbol = '' } = selectedToken const { symbol = '' } = selectedToken
const pair = `${symbol.toLowerCase()}_eth` const pair = `${symbol.toLowerCase()}_eth`
const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
@ -92,3 +94,11 @@ function transactionsSelector (state) {
: txsToRender : txsToRender
.sort((a, b) => b.time - a.time) .sort((a, b) => b.time - a.time)
} }
function getGasPrice (state) {
return state.metamask.send.gasPrice
}
function getGasLimit (state) {
return state.metamask.send.gasLimit
}

View File

@ -62,12 +62,6 @@ SendTransactionScreen.prototype.componentWillMount = function () {
gas: '746a528800', gas: '746a528800',
}), }),
]) ])
.then(([blockGasPrice, estimatedGas]) => {
this.setState({
gasPrice: blockGasPrice,
gasLimit: estimatedGas,
})
})
} }
SendTransactionScreen.prototype.renderHeaderIcon = function () { SendTransactionScreen.prototype.renderHeaderIcon = function () {
@ -112,14 +106,16 @@ SendTransactionScreen.prototype.render = function () {
showCustomizeGasModal, showCustomizeGasModal,
selectedAccount, selectedAccount,
primaryCurrency = 'ETH', primaryCurrency = 'ETH',
gasLimit,
gasPrice,
} = this.props } = this.props
const { const {
dropdownOpen, dropdownOpen,
to, to,
amount, amount,
gasLimit, // gasLimit,
gasPrice, // gasPrice,
memo, memo,
} = this.state } = this.state