Prevent invalid gas price states (#996)
* Slider using value instead of raw to prevent errors. Dont show empty gas price as invalid. Clamp slider values to min / max on mount. * Remove gas price from local storage.
This commit is contained in:
parent
942eb6b341
commit
39da226cd1
|
@ -96,7 +96,11 @@ class TXMetaDataPanel extends React.Component<Props, State> {
|
||||||
options={advancedGasOptions}
|
options={advancedGasOptions}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<SimpleGas gasPrice={gasPrice} inputGasPrice={this.handleGasPriceInput} />
|
<SimpleGas
|
||||||
|
gasPrice={gasPrice}
|
||||||
|
inputGasPrice={this.handleGasPriceInput}
|
||||||
|
setGasPrice={this.props.inputGasPrice}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!offline &&
|
{!offline &&
|
||||||
|
|
|
@ -74,7 +74,9 @@ class AdvancedGas extends React.Component<Props, State> {
|
||||||
<div className="AdvancedGas-gas-price">
|
<div className="AdvancedGas-gas-price">
|
||||||
<label>{translate('OFFLINE_Step2_Label_3')} (gwei)</label>
|
<label>{translate('OFFLINE_Step2_Label_3')} (gwei)</label>
|
||||||
<input
|
<input
|
||||||
className={classnames('form-control', { 'is-invalid': !validGasPrice })}
|
className={classnames('form-control', {
|
||||||
|
'is-invalid': !!gasPrice.raw && !validGasPrice
|
||||||
|
})}
|
||||||
type="number"
|
type="number"
|
||||||
placeholder="40"
|
placeholder="40"
|
||||||
value={gasPrice.raw}
|
value={gasPrice.raw}
|
||||||
|
|
|
@ -9,11 +9,13 @@ import { getGasLimitEstimationTimedOut } from 'selectors/transaction';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { GasLimitField } from 'components/GasLimitField';
|
import { GasLimitField } from 'components/GasLimitField';
|
||||||
import { getIsWeb3Node } from 'selectors/config';
|
import { getIsWeb3Node } from 'selectors/config';
|
||||||
|
import { Wei, fromWei } from 'libs/units';
|
||||||
const SliderWithTooltip = Slider.createSliderWithTooltip(Slider);
|
const SliderWithTooltip = Slider.createSliderWithTooltip(Slider);
|
||||||
|
|
||||||
interface OwnProps {
|
interface OwnProps {
|
||||||
gasPrice: AppState['transaction']['fields']['gasPrice'];
|
gasPrice: AppState['transaction']['fields']['gasPrice'];
|
||||||
inputGasPrice(rawGas: string);
|
inputGasPrice(rawGas: string);
|
||||||
|
setGasPrice(rawGas: string);
|
||||||
}
|
}
|
||||||
|
|
||||||
interface StateProps {
|
interface StateProps {
|
||||||
|
@ -24,6 +26,10 @@ interface StateProps {
|
||||||
type Props = OwnProps & StateProps;
|
type Props = OwnProps & StateProps;
|
||||||
|
|
||||||
class SimpleGas extends React.Component<Props> {
|
class SimpleGas extends React.Component<Props> {
|
||||||
|
public componentDidMount() {
|
||||||
|
this.fixGasPrice(this.props.gasPrice);
|
||||||
|
}
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
const { gasPrice, gasLimitEstimationTimedOut, isWeb3Node } = this.props;
|
const { gasPrice, gasLimitEstimationTimedOut, isWeb3Node } = this.props;
|
||||||
|
|
||||||
|
@ -53,7 +59,7 @@ class SimpleGas extends React.Component<Props> {
|
||||||
onChange={this.handleSlider}
|
onChange={this.handleSlider}
|
||||||
min={gasPriceDefaults.gasPriceMinGwei}
|
min={gasPriceDefaults.gasPriceMinGwei}
|
||||||
max={gasPriceDefaults.gasPriceMaxGwei}
|
max={gasPriceDefaults.gasPriceMaxGwei}
|
||||||
value={parseFloat(gasPrice.raw)}
|
value={this.getGasPriceGwei(gasPrice.value)}
|
||||||
tipFormatter={gas => `${gas} Gwei`}
|
tipFormatter={gas => `${gas} Gwei`}
|
||||||
/>
|
/>
|
||||||
<div className="SimpleGas-slider-labels">
|
<div className="SimpleGas-slider-labels">
|
||||||
|
@ -78,7 +84,22 @@ class SimpleGas extends React.Component<Props> {
|
||||||
private handleSlider = (gasGwei: number) => {
|
private handleSlider = (gasGwei: number) => {
|
||||||
this.props.inputGasPrice(gasGwei.toString());
|
this.props.inputGasPrice(gasGwei.toString());
|
||||||
};
|
};
|
||||||
|
|
||||||
|
private fixGasPrice(gasPrice: AppState['transaction']['fields']['gasPrice']) {
|
||||||
|
// If the gas price is above or below our minimum, bring it in line
|
||||||
|
const gasPriceGwei = this.getGasPriceGwei(gasPrice.value);
|
||||||
|
if (gasPriceGwei > gasPriceDefaults.gasPriceMaxGwei) {
|
||||||
|
this.props.setGasPrice(gasPriceDefaults.gasPriceMaxGwei.toString());
|
||||||
|
} else if (gasPriceGwei < gasPriceDefaults.gasPriceMinGwei) {
|
||||||
|
this.props.setGasPrice(gasPriceDefaults.gasPriceMinGwei.toString());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private getGasPriceGwei(gasPriceValue: Wei) {
|
||||||
|
return parseFloat(fromWei(gasPriceValue, 'gwei'));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect((state: AppState) => ({
|
export default connect((state: AppState) => ({
|
||||||
gasLimitEstimationTimedOut: getGasLimitEstimationTimedOut(state),
|
gasLimitEstimationTimedOut: getGasLimitEstimationTimedOut(state),
|
||||||
isWeb3Node: getIsWeb3Node(state)
|
isWeb3Node: getIsWeb3Node(state)
|
||||||
|
|
|
@ -5,10 +5,6 @@ import {
|
||||||
State as CustomTokenState,
|
State as CustomTokenState,
|
||||||
INITIAL_STATE as customTokensInitialState
|
INITIAL_STATE as customTokensInitialState
|
||||||
} from 'reducers/customTokens';
|
} from 'reducers/customTokens';
|
||||||
import {
|
|
||||||
INITIAL_STATE as transactionInitialState,
|
|
||||||
State as TransactionState
|
|
||||||
} from 'reducers/transaction';
|
|
||||||
import { State as SwapState, INITIAL_STATE as swapInitialState } from 'reducers/swap';
|
import { State as SwapState, INITIAL_STATE as swapInitialState } from 'reducers/swap';
|
||||||
import { applyMiddleware, createStore } from 'redux';
|
import { applyMiddleware, createStore } from 'redux';
|
||||||
import { composeWithDevTools } from 'redux-devtools-extension';
|
import { composeWithDevTools } from 'redux-devtools-extension';
|
||||||
|
@ -21,7 +17,6 @@ import { getNodeConfigFromId } from 'utils/node';
|
||||||
import { getNetworkConfigFromId } from 'utils/network';
|
import { getNetworkConfigFromId } from 'utils/network';
|
||||||
import { dedupeCustomTokens } from 'utils/tokens';
|
import { dedupeCustomTokens } from 'utils/tokens';
|
||||||
import sagas from './sagas';
|
import sagas from './sagas';
|
||||||
import { gasPricetoBase } from 'libs/units';
|
|
||||||
|
|
||||||
const configureStore = () => {
|
const configureStore = () => {
|
||||||
const logger = createLogger({
|
const logger = createLogger({
|
||||||
|
@ -60,7 +55,6 @@ const configureStore = () => {
|
||||||
}
|
}
|
||||||
: { ...swapInitialState };
|
: { ...swapInitialState };
|
||||||
|
|
||||||
const savedTransactionState = loadStatePropertyOrEmptyObject<TransactionState>('transaction');
|
|
||||||
const savedConfigState = loadStatePropertyOrEmptyObject<ConfigState>('config');
|
const savedConfigState = loadStatePropertyOrEmptyObject<ConfigState>('config');
|
||||||
|
|
||||||
// If they have a saved node, make sure we assign that too. The node selected
|
// If they have a saved node, make sure we assign that too. The node selected
|
||||||
|
@ -94,19 +88,6 @@ const configureStore = () => {
|
||||||
...configInitialState,
|
...configInitialState,
|
||||||
...savedConfigState
|
...savedConfigState
|
||||||
},
|
},
|
||||||
transaction: {
|
|
||||||
...transactionInitialState,
|
|
||||||
fields: {
|
|
||||||
...transactionInitialState.fields,
|
|
||||||
gasPrice:
|
|
||||||
savedTransactionState && savedTransactionState.fields.gasPrice
|
|
||||||
? {
|
|
||||||
raw: savedTransactionState.fields.gasPrice.raw,
|
|
||||||
value: gasPricetoBase(+savedTransactionState.fields.gasPrice.raw)
|
|
||||||
}
|
|
||||||
: transactionInitialState.fields.gasPrice
|
|
||||||
}
|
|
||||||
},
|
|
||||||
customTokens,
|
customTokens,
|
||||||
// ONLY LOAD SWAP STATE FROM LOCAL STORAGE IF STEP WAS 3
|
// ONLY LOAD SWAP STATE FROM LOCAL STORAGE IF STEP WAS 3
|
||||||
swap: swapState
|
swap: swapState
|
||||||
|
@ -134,11 +115,6 @@ const configureStore = () => {
|
||||||
customNodes: state.config.customNodes,
|
customNodes: state.config.customNodes,
|
||||||
customNetworks: state.config.customNetworks
|
customNetworks: state.config.customNetworks
|
||||||
},
|
},
|
||||||
transaction: {
|
|
||||||
fields: {
|
|
||||||
gasPrice: state.transaction.fields.gasPrice
|
|
||||||
}
|
|
||||||
},
|
|
||||||
swap: {
|
swap: {
|
||||||
...state.swap,
|
...state.swap,
|
||||||
options: {
|
options: {
|
||||||
|
|
Loading…
Reference in New Issue