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:
parent
a59972dcab
commit
a9244f5e42
@ -133,6 +133,10 @@ var actions = {
|
||||
// send screen
|
||||
estimateGas,
|
||||
getGasPrice,
|
||||
UPDATE_GAS_LIMIT: 'UPDATE_GAS_LIMIT',
|
||||
UPDATE_GAS_PRICE: 'UPDATE_GAS_PRICE',
|
||||
updateGasLimit,
|
||||
updateGasPrice,
|
||||
// app messages
|
||||
confirmSeedWords: confirmSeedWords,
|
||||
showAccountDetail: showAccountDetail,
|
||||
@ -463,12 +467,20 @@ function estimateGas (params = {}) {
|
||||
return reject(err)
|
||||
}
|
||||
dispatch(actions.hideWarning())
|
||||
dispatch(actions.updateGasLimit(data))
|
||||
return resolve(data)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function updateGasLimit (gasLimit) {
|
||||
return {
|
||||
type: actions.UPDATE_GAS_LIMIT,
|
||||
value: gasLimit,
|
||||
}
|
||||
}
|
||||
|
||||
function getGasPrice () {
|
||||
return (dispatch) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
@ -478,12 +490,20 @@ function getGasPrice () {
|
||||
return reject(err)
|
||||
}
|
||||
dispatch(actions.hideWarning())
|
||||
dispatch(actions.updateGasPrice(data))
|
||||
return resolve(data)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function updateGasPrice (gasPrice) {
|
||||
return {
|
||||
type: actions.UPDATE_GAS_PRICE,
|
||||
value: gasPrice,
|
||||
}
|
||||
}
|
||||
|
||||
function sendTx (txData) {
|
||||
log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`)
|
||||
return (dispatch) => {
|
||||
|
@ -5,32 +5,90 @@ const connect = require('react-redux').connect
|
||||
const actions = require('../../actions')
|
||||
const GasModalCard = require('./gas-modal-card')
|
||||
|
||||
const { conversionUtil } = require('../../conversion-util')
|
||||
|
||||
const {
|
||||
getGasPrice,
|
||||
getGasLimit,
|
||||
conversionRateSelector,
|
||||
} = require('../../selectors')
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {}
|
||||
return {
|
||||
gasPrice: getGasPrice(state),
|
||||
gasLimit: getGasLimit(state),
|
||||
conversionRate: conversionRateSelector(state),
|
||||
}
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return {
|
||||
hideModal: () => dispatch(actions.hideModal()),
|
||||
updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
|
||||
updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
|
||||
}
|
||||
}
|
||||
|
||||
inherits(CustomizeGasModal, Component)
|
||||
function CustomizeGasModal () {
|
||||
function CustomizeGasModal (props) {
|
||||
Component.call(this)
|
||||
|
||||
this.state = {
|
||||
gasPrice: '0.23',
|
||||
gasLimit: '25000',
|
||||
gasPrice: props.gasPrice,
|
||||
gasLimit: props.gasLimit,
|
||||
}
|
||||
}
|
||||
|
||||
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 () {
|
||||
const { hideModal } = this.props
|
||||
const { hideModal, conversionRate } = this.props
|
||||
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', {}, [
|
||||
h('div', {
|
||||
}, [
|
||||
@ -47,21 +105,21 @@ CustomizeGasModal.prototype.render = function () {
|
||||
h('div.send-v2__customize-gas__body', {}, [
|
||||
|
||||
h(GasModalCard, {
|
||||
value: gasPrice,
|
||||
min: 0.0,
|
||||
max: 5.0,
|
||||
step: 0.01,
|
||||
onChange: gasPrice => this.setState({ gasPrice }),
|
||||
value: convertedGasPrice,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
step: 1,
|
||||
onChange: value => this.convertAndSetGasPrice(value),
|
||||
title: 'Gas Price',
|
||||
copy: 'We calculate the suggested gas prices based on network success rates.',
|
||||
}),
|
||||
|
||||
h(GasModalCard, {
|
||||
value: gasLimit,
|
||||
value: convertedGasLimit,
|
||||
min: 20000,
|
||||
max: 100000,
|
||||
step: 1,
|
||||
onChange: gasLimit => this.setState({ gasLimit }),
|
||||
onChange: value => this.convertAndSetGasLimit(value),
|
||||
title: 'Gas Limit',
|
||||
copy: 'We calculate the suggested gas limit based on network success rates.',
|
||||
}),
|
||||
@ -80,7 +138,7 @@ CustomizeGasModal.prototype.render = function () {
|
||||
}, ['CANCEL']),
|
||||
|
||||
h('div.send-v2__customize-gas__save', {
|
||||
onClick: () => console.log('Save'),
|
||||
onClick: () => this.save(gasPrice, gasLimit),
|
||||
}, ['SAVE']),
|
||||
])
|
||||
|
||||
|
@ -28,7 +28,11 @@ GasFeeDisplay.prototype.render = function () {
|
||||
? h(CurrencyDisplay, {
|
||||
primaryCurrency: 'ETH',
|
||||
convertedCurrency: 'USD',
|
||||
value: multiplyCurrencies(gasLimit, gasPrice, { toNumericBase: 'hex' }),
|
||||
value: multiplyCurrencies(gasLimit, gasPrice, {
|
||||
toNumericBase: 'hex',
|
||||
multiplicandBase: 16,
|
||||
multiplierBase: 16,
|
||||
}),
|
||||
conversionRate,
|
||||
convertedPrefix: '$',
|
||||
readOnly: true,
|
||||
|
@ -12,6 +12,8 @@ const {
|
||||
getSelectedToken,
|
||||
getSelectedTokenExchangeRate,
|
||||
getSelectedAddress,
|
||||
getGasPrice,
|
||||
getGasLimit,
|
||||
} = require('../../selectors')
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
|
||||
@ -49,6 +51,8 @@ function mapStateToProps (state) {
|
||||
primaryCurrency,
|
||||
data,
|
||||
tokenToUSDRate,
|
||||
gasPrice: getGasPrice(state),
|
||||
gasLimit: getGasLimit(state),
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -32,6 +32,7 @@ BigNumber.config({
|
||||
|
||||
// Big Number Constants
|
||||
const BIG_NUMBER_WEI_MULTIPLIER = new BigNumber('1000000000000000000')
|
||||
const BIG_NUMBER_GWEI_MULTIPLIER = new BigNumber('1000000000')
|
||||
|
||||
// Individual Setters
|
||||
const convert = R.invoker(1, 'times')
|
||||
@ -45,10 +46,12 @@ const toBigNumber = {
|
||||
BN: n => new BigNumber(n.toString(16), 16),
|
||||
}
|
||||
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 = {
|
||||
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 = {
|
||||
hex: n => n.toString(16),
|
||||
@ -139,8 +142,13 @@ const addCurrencies = (a, b, options = {}) => {
|
||||
}
|
||||
|
||||
const multiplyCurrencies = (a, b, options = {}) => {
|
||||
const { toNumericBase, numberOfDecimals } = options
|
||||
const value = (new BigNumber(a)).times(b);
|
||||
const {
|
||||
toNumericBase,
|
||||
numberOfDecimals,
|
||||
multiplicandBase,
|
||||
multiplierBase,
|
||||
} = options
|
||||
const value = (new BigNumber(a, multiplicandBase)).times(b, multiplierBase);
|
||||
return converter({
|
||||
value,
|
||||
toNumericBase,
|
||||
|
@ -20,6 +20,10 @@ function reduceMetamask (state, action) {
|
||||
selectedTokenAddress: null,
|
||||
tokenExchangeRates: {},
|
||||
tokens: [],
|
||||
send: {
|
||||
gasLimit: null,
|
||||
gasPrice: null,
|
||||
},
|
||||
}, state.metamask)
|
||||
|
||||
switch (action.type) {
|
||||
@ -152,6 +156,22 @@ function reduceMetamask (state, action) {
|
||||
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:
|
||||
return metamaskState
|
||||
|
||||
|
@ -10,6 +10,8 @@ const selectors = {
|
||||
transactionsSelector,
|
||||
accountsWithSendEtherInfoSelector,
|
||||
getCurrentAccountWithSendEtherInfo,
|
||||
getGasPrice,
|
||||
getGasLimit,
|
||||
}
|
||||
|
||||
module.exports = selectors
|
||||
@ -92,3 +94,11 @@ function transactionsSelector (state) {
|
||||
: txsToRender
|
||||
.sort((a, b) => b.time - a.time)
|
||||
}
|
||||
|
||||
function getGasPrice (state) {
|
||||
return state.metamask.send.gasPrice
|
||||
}
|
||||
|
||||
function getGasLimit (state) {
|
||||
return state.metamask.send.gasLimit
|
||||
}
|
||||
|
@ -62,12 +62,6 @@ SendTransactionScreen.prototype.componentWillMount = function () {
|
||||
gas: '746a528800',
|
||||
}),
|
||||
])
|
||||
.then(([blockGasPrice, estimatedGas]) => {
|
||||
this.setState({
|
||||
gasPrice: blockGasPrice,
|
||||
gasLimit: estimatedGas,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
SendTransactionScreen.prototype.renderHeaderIcon = function () {
|
||||
@ -112,14 +106,16 @@ SendTransactionScreen.prototype.render = function () {
|
||||
showCustomizeGasModal,
|
||||
selectedAccount,
|
||||
primaryCurrency = 'ETH',
|
||||
gasLimit,
|
||||
gasPrice,
|
||||
} = this.props
|
||||
|
||||
const {
|
||||
dropdownOpen,
|
||||
to,
|
||||
amount,
|
||||
gasLimit,
|
||||
gasPrice,
|
||||
// gasLimit,
|
||||
// gasPrice,
|
||||
memo,
|
||||
} = this.state
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user