Only show the customize gas modal if the estimateGas call is not currently in flight.

feature/default_network_editable
Dan 6 years ago
parent 6bf09c0ffe
commit 957d729c17
  1. 21
      ui/app/actions.js
  2. 48
      ui/app/components/customize-gas-modal/index.js
  3. 11
      ui/app/reducers/app.js
  4. 5
      ui/app/selectors.js

@ -175,6 +175,8 @@ var actions = {
CLEAR_SEND: 'CLEAR_SEND',
OPEN_FROM_DROPDOWN: 'OPEN_FROM_DROPDOWN',
CLOSE_FROM_DROPDOWN: 'CLOSE_FROM_DROPDOWN',
GAS_LOADING_STARTED: 'GAS_LOADING_STARTED',
GAS_LOADING_FINISHED: 'GAS_LOADING_FINISHED',
setGasLimit,
setGasPrice,
updateGasData,
@ -190,6 +192,8 @@ var actions = {
updateSendErrors,
clearSend,
setSelectedAddress,
gasLoadingStarted,
gasLoadingFinished,
// app messages
confirmSeedWords: confirmSeedWords,
showAccountDetail: showAccountDetail,
@ -740,8 +744,9 @@ function updateGasData ({
to,
value,
}) {
const estimatedGasPrice = estimateGasPriceFromRecentBlocks(recentBlocks)
return (dispatch) => {
dispatch(actions.gasLoadingStarted())
const estimatedGasPrice = estimateGasPriceFromRecentBlocks(recentBlocks)
return Promise.all([
Promise.resolve(estimatedGasPrice),
estimateGas({
@ -762,14 +767,28 @@ function updateGasData ({
.then((gasEstimate) => {
dispatch(actions.setGasTotal(gasEstimate))
dispatch(updateSendErrors({ gasLoadingError: null }))
dispatch(actions.gasLoadingFinished())
})
.catch(err => {
log.error(err)
dispatch(updateSendErrors({ gasLoadingError: 'gasLoadingError' }))
dispatch(actions.gasLoadingFinished())
})
}
}
function gasLoadingStarted () {
return {
type: actions.GAS_LOADING_STARTED,
}
}
function gasLoadingFinished () {
return {
type: actions.GAS_LOADING_FINISHED,
}
}
function updateSendTokenBalance ({
selectedToken,
tokenContract,

@ -33,6 +33,7 @@ const {
const {
getGasPrice,
getGasLimit,
getGasIsLoading,
getForceGasMin,
conversionRateSelector,
getSendAmount,
@ -51,6 +52,7 @@ function mapStateToProps (state) {
return {
gasPrice: getGasPrice(state),
gasLimit: getGasLimit(state),
gasIsLoading: getGasIsLoading(state),
forceGasMin: getForceGasMin(state),
conversionRate,
amount: getSendAmount(state),
@ -73,7 +75,7 @@ function mapDispatchToProps (dispatch) {
}
}
function getOriginalState (props) {
function getFreshState (props) {
const gasPrice = props.gasPrice || MIN_GAS_PRICE_DEC
const gasLimit = props.gasLimit || MIN_GAS_LIMIT_DEC
@ -97,7 +99,11 @@ inherits(CustomizeGasModal, Component)
function CustomizeGasModal (props) {
Component.call(this)
this.state = getOriginalState(props)
const originalState = getFreshState(props)
this.state = {
...originalState,
originalState,
}
}
CustomizeGasModal.contextTypes = {
@ -106,6 +112,36 @@ CustomizeGasModal.contextTypes = {
module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)
CustomizeGasModal.prototype.componentWillReceiveProps = function (nextProps) {
const currentState = getFreshState(this.props)
const {
gasPrice: currentGasPrice,
gasLimit: currentGasLimit,
} = currentState
const newState = getFreshState(nextProps)
const {
gasPrice: newGasPrice,
gasLimit: newGasLimit,
gasTotal: newGasTotal,
} = newState
const gasPriceChanged = currentGasPrice !== newGasPrice
const gasLimitChanged = currentGasLimit !== newGasLimit
if (gasPriceChanged) {
this.setState({
gasPrice: newGasPrice,
gasTotal: newGasTotal,
priceSigZeros: '',
priceSigDec: '',
})
}
if (gasLimitChanged) {
this.setState({ gasLimit: newGasLimit, gasTotal: newGasTotal })
}
if (gasLimitChanged || gasPriceChanged) {
this.validate({ gasLimit: newGasLimit, gasTotal: newGasTotal })
}
}
CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
const {
@ -137,7 +173,7 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
}
CustomizeGasModal.prototype.revert = function () {
this.setState(getOriginalState(this.props))
this.setState(this.state.originalState)
}
CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
@ -233,7 +269,7 @@ CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) {
}
CustomizeGasModal.prototype.render = function () {
const { hideModal, forceGasMin } = this.props
const { hideModal, forceGasMin, gasIsLoading } = this.props
const { gasPrice, gasLimit, gasTotal, error, priceSigZeros, priceSigDec } = this.state
let convertedGasPrice = conversionUtil(gasPrice, {
@ -266,7 +302,7 @@ CustomizeGasModal.prototype.render = function () {
toNumericBase: 'dec',
})
return h('div.send-v2__customize-gas', {}, [
return !gasIsLoading && h('div.send-v2__customize-gas', {}, [
h('div.send-v2__customize-gas__content', {
}, [
h('div.send-v2__customize-gas__header', {}, [
@ -288,6 +324,7 @@ CustomizeGasModal.prototype.render = function () {
onChange: value => this.convertAndSetGasPrice(value),
title: this.context.t('gasPrice'),
copy: this.context.t('gasPriceCalculation'),
gasIsLoading,
}),
h(GasModalCard, {
@ -297,6 +334,7 @@ CustomizeGasModal.prototype.render = function () {
onChange: value => this.convertAndSetGasLimit(value),
title: this.context.t('gasLimit'),
copy: this.context.t('gasLimitCalculation'),
gasIsLoading,
}),
]),

@ -62,6 +62,7 @@ function reduceApp (state, action) {
warning: null,
buyView: {},
isMouseUser: false,
gasIsLoading: false,
}, state.appState)
switch (action.type) {
@ -675,6 +676,16 @@ function reduceApp (state, action) {
isMouseUser: action.value,
})
case actions.GAS_LOADING_STARTED:
return extend(appState, {
gasIsLoading: true,
})
case actions.GAS_LOADING_FINISHED:
return extend(appState, {
gasIsLoading: false,
})
default:
return appState
}

@ -16,6 +16,7 @@ const selectors = {
transactionsSelector,
accountsWithSendEtherInfoSelector,
getCurrentAccountWithSendEtherInfo,
getGasIsLoading,
getGasPrice,
getGasLimit,
getForceGasMin,
@ -117,6 +118,10 @@ function transactionsSelector (state) {
.sort((a, b) => b.time - a.time)
}
function getGasIsLoading (state) {
return state.appState.gasIsLoading
}
function getGasPrice (state) {
return state.metamask.send.gasPrice
}

Loading…
Cancel
Save