|
|
|
@ -6,23 +6,46 @@ const actions = require('../../actions') |
|
|
|
|
const GasModalCard = require('./gas-modal-card') |
|
|
|
|
|
|
|
|
|
const { |
|
|
|
|
MIN_GAS_PRICE, |
|
|
|
|
MIN_GAS_LIMIT, |
|
|
|
|
MIN_GAS_PRICE_DEC, |
|
|
|
|
MIN_GAS_LIMIT_DEC, |
|
|
|
|
MIN_GAS_PRICE_GWEI, |
|
|
|
|
} = require('../send/send-constants') |
|
|
|
|
|
|
|
|
|
const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') |
|
|
|
|
const { |
|
|
|
|
isBalanceSufficient, |
|
|
|
|
} = require('../send/send-utils') |
|
|
|
|
|
|
|
|
|
const { |
|
|
|
|
conversionUtil, |
|
|
|
|
multiplyCurrencies, |
|
|
|
|
conversionGreaterThan, |
|
|
|
|
} = require('../../conversion-util') |
|
|
|
|
|
|
|
|
|
const { |
|
|
|
|
getGasPrice, |
|
|
|
|
getGasLimit, |
|
|
|
|
conversionRateSelector, |
|
|
|
|
getSendAmount, |
|
|
|
|
getSelectedToken, |
|
|
|
|
getSendFrom, |
|
|
|
|
getCurrentAccountWithSendEtherInfo, |
|
|
|
|
getSelectedTokenToFiatRate, |
|
|
|
|
} = require('../../selectors') |
|
|
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
|
|
const selectedToken = getSelectedToken(state) |
|
|
|
|
const currentAccount = getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state) |
|
|
|
|
const conversionRate = conversionRateSelector(state) |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
gasPrice: getGasPrice(state), |
|
|
|
|
gasLimit: getGasLimit(state), |
|
|
|
|
conversionRate: conversionRateSelector(state), |
|
|
|
|
conversionRate, |
|
|
|
|
amount: getSendAmount(state), |
|
|
|
|
balance: currentAccount.balance, |
|
|
|
|
primaryCurrency: selectedToken && selectedToken.symbol, |
|
|
|
|
selectedToken, |
|
|
|
|
amountConversionRate: selectedToken ? getSelectedTokenToFiatRate(state) : conversionRate, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -39,15 +62,26 @@ inherits(CustomizeGasModal, Component) |
|
|
|
|
function CustomizeGasModal (props) { |
|
|
|
|
Component.call(this) |
|
|
|
|
|
|
|
|
|
const gasPrice = props.gasPrice || MIN_GAS_PRICE_DEC |
|
|
|
|
const gasLimit = props.gasLimit || MIN_GAS_LIMIT_DEC |
|
|
|
|
|
|
|
|
|
const gasTotal = multiplyCurrencies(gasLimit, gasPrice, { |
|
|
|
|
toNumericBase: 'hex', |
|
|
|
|
multiplicandBase: 16, |
|
|
|
|
multiplierBase: 16, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this.state = { |
|
|
|
|
gasPrice: props.gasPrice || MIN_GAS_PRICE, |
|
|
|
|
gasLimit: props.gasLimit || MIN_GAS_LIMIT, |
|
|
|
|
gasPrice, |
|
|
|
|
gasLimit, |
|
|
|
|
gasTotal, |
|
|
|
|
error: null, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal) |
|
|
|
|
|
|
|
|
|
CustomizeGasModal.prototype.save = function (gasPrice, gasLimit) { |
|
|
|
|
CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { |
|
|
|
|
const { |
|
|
|
|
updateGasPrice, |
|
|
|
|
updateGasLimit, |
|
|
|
@ -55,41 +89,101 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit) { |
|
|
|
|
updateGasTotal |
|
|
|
|
} = this.props |
|
|
|
|
|
|
|
|
|
const newGasTotal = multiplyCurrencies(gasLimit, gasPrice, { |
|
|
|
|
toNumericBase: 'hex', |
|
|
|
|
multiplicandBase: 16, |
|
|
|
|
multiplierBase: 16, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
updateGasPrice(gasPrice) |
|
|
|
|
updateGasLimit(gasLimit) |
|
|
|
|
updateGasTotal(newGasTotal) |
|
|
|
|
updateGasTotal(gasTotal) |
|
|
|
|
hideModal() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { |
|
|
|
|
const { |
|
|
|
|
amount, |
|
|
|
|
balance, |
|
|
|
|
primaryCurrency, |
|
|
|
|
selectedToken, |
|
|
|
|
amountConversionRate, |
|
|
|
|
conversionRate, |
|
|
|
|
} = this.props |
|
|
|
|
|
|
|
|
|
let error = null |
|
|
|
|
|
|
|
|
|
const balanceIsSufficient = isBalanceSufficient({ |
|
|
|
|
amount, |
|
|
|
|
gasTotal, |
|
|
|
|
balance, |
|
|
|
|
primaryCurrency, |
|
|
|
|
selectedToken, |
|
|
|
|
amountConversionRate, |
|
|
|
|
conversionRate, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
if (!balanceIsSufficient) { |
|
|
|
|
error = 'Insufficient balance for current gas total'
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const gasLimitTooLow = gasLimit && conversionGreaterThan( |
|
|
|
|
{ |
|
|
|
|
value: MIN_GAS_LIMIT_DEC, |
|
|
|
|
fromNumericBase: 'dec', |
|
|
|
|
conversionRate, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: gasLimit, |
|
|
|
|
fromNumericBase: 'hex', |
|
|
|
|
}, |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
if (gasLimitTooLow) { |
|
|
|
|
error = 'Gas limit must be at least 21000'
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.setState({ error }) |
|
|
|
|
return error |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
CustomizeGasModal.prototype.convertAndSetGasLimit = function (newGasLimit) { |
|
|
|
|
const convertedGasLimit = conversionUtil(newGasLimit, { |
|
|
|
|
const { gasPrice } = this.state |
|
|
|
|
|
|
|
|
|
const gasLimit = conversionUtil(newGasLimit, { |
|
|
|
|
fromNumericBase: 'dec', |
|
|
|
|
toNumericBase: 'hex', |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this.setState({ gasLimit: convertedGasLimit }) |
|
|
|
|
const gasTotal = multiplyCurrencies(gasLimit, gasPrice, { |
|
|
|
|
toNumericBase: 'hex', |
|
|
|
|
multiplicandBase: 16, |
|
|
|
|
multiplierBase: 16, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this.validate({ gasTotal, gasLimit }) |
|
|
|
|
|
|
|
|
|
this.setState({ gasTotal, gasLimit }) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) { |
|
|
|
|
const convertedGasPrice = conversionUtil(newGasPrice, { |
|
|
|
|
const { gasLimit } = this.state |
|
|
|
|
|
|
|
|
|
const gasPrice = conversionUtil(newGasPrice, { |
|
|
|
|
fromNumericBase: 'dec', |
|
|
|
|
toNumericBase: 'hex', |
|
|
|
|
fromDenomination: 'GWEI', |
|
|
|
|
toDenomination: 'WEI', |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this.setState({ gasPrice: convertedGasPrice }) |
|
|
|
|
const gasTotal = multiplyCurrencies(gasLimit, gasPrice, { |
|
|
|
|
toNumericBase: 'hex', |
|
|
|
|
multiplicandBase: 16, |
|
|
|
|
multiplierBase: 16, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this.validate({ gasTotal }) |
|
|
|
|
|
|
|
|
|
this.setState({ gasTotal, gasPrice }) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
CustomizeGasModal.prototype.render = function () { |
|
|
|
|
const { hideModal, conversionRate } = this.props |
|
|
|
|
const { gasPrice, gasLimit } = this.state |
|
|
|
|
const { gasPrice, gasLimit, gasTotal, error } = this.state |
|
|
|
|
|
|
|
|
|
const convertedGasPrice = conversionUtil(gasPrice, { |
|
|
|
|
fromNumericBase: 'hex', |
|
|
|
@ -120,7 +214,7 @@ CustomizeGasModal.prototype.render = function () { |
|
|
|
|
|
|
|
|
|
h(GasModalCard, { |
|
|
|
|
value: convertedGasPrice, |
|
|
|
|
min: MIN_GAS_PRICE, |
|
|
|
|
min: MIN_GAS_PRICE_GWEI, |
|
|
|
|
// max: 1000,
|
|
|
|
|
step: 1, |
|
|
|
|
onChange: value => this.convertAndSetGasPrice(value), |
|
|
|
@ -130,7 +224,7 @@ CustomizeGasModal.prototype.render = function () { |
|
|
|
|
|
|
|
|
|
h(GasModalCard, { |
|
|
|
|
value: convertedGasLimit, |
|
|
|
|
min: MIN_GAS_LIMIT, |
|
|
|
|
min: 1, |
|
|
|
|
// max: 100000,
|
|
|
|
|
step: 1, |
|
|
|
|
onChange: value => this.convertAndSetGasLimit(value), |
|
|
|
@ -141,6 +235,10 @@ CustomizeGasModal.prototype.render = function () { |
|
|
|
|
]), |
|
|
|
|
|
|
|
|
|
h('div.send-v2__customize-gas__footer', {}, [ |
|
|
|
|
|
|
|
|
|
error && h('div.send-v2__customize-gas__error-message', [ |
|
|
|
|
error, |
|
|
|
|
]), |
|
|
|
|
|
|
|
|
|
h('div.send-v2__customize-gas__revert', { |
|
|
|
|
onClick: () => console.log('Revert'), |
|
|
|
@ -151,8 +249,8 @@ CustomizeGasModal.prototype.render = function () { |
|
|
|
|
onClick: this.props.hideModal, |
|
|
|
|
}, ['CANCEL']), |
|
|
|
|
|
|
|
|
|
h('div.send-v2__customize-gas__save', { |
|
|
|
|
onClick: () => this.save(gasPrice, gasLimit), |
|
|
|
|
h(`div.send-v2__customize-gas__save${error ? '__error' : ''}`, { |
|
|
|
|
onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal), |
|
|
|
|
}, ['SAVE']), |
|
|
|
|
]) |
|
|
|
|
|
|
|
|
|