conflict in reducer
This commit is contained in:
parent
486c839cd3
commit
5593534343
|
@ -5,7 +5,7 @@ import {withRouter} from "react-router-dom";
|
||||||
import {Card, Form, Grid, StampCard, Stamp} from 'tabler-react';
|
import {Card, Form, Grid, StampCard, Stamp} from 'tabler-react';
|
||||||
import {CopyToClipboard} from 'react-copy-to-clipboard';
|
import {CopyToClipboard} from 'react-copy-to-clipboard';
|
||||||
import {listenToGasOracle, gasOracle as ethGasAction} from "../actions";
|
import {listenToGasOracle, gasOracle as ethGasAction} from "../actions";
|
||||||
import {getGasStats, getOracleGasStats} from "../reducers/selectors";
|
import {getOracleGasStats, getLastBlock} from "../reducers/selectors";
|
||||||
|
|
||||||
const COLORS = {
|
const COLORS = {
|
||||||
good: 'green',
|
good: 'green',
|
||||||
|
@ -17,6 +17,8 @@ class GasStation extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
|
this.PRICE_UNIT_DIVIDER = 1000000000;
|
||||||
|
this.WAIT_UNIT = 'sec';
|
||||||
this.state = {
|
this.state = {
|
||||||
gasOracleSliderIndex: 0,
|
gasOracleSliderIndex: 0,
|
||||||
copied: false
|
copied: false
|
||||||
|
@ -31,13 +33,19 @@ class GasStation extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
getGasOracleFormatted() {
|
getGasOracleFormatted() {
|
||||||
|
let totalWait = 0;
|
||||||
|
let totalTxs = 0;
|
||||||
|
let totalGasPrice = 0;
|
||||||
const gasPrices = Object.keys(this.props.gasOracleStats);
|
const gasPrices = Object.keys(this.props.gasOracleStats);
|
||||||
if (!gasPrices.length) {
|
if (!gasPrices.length) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
return gasPrices.filter((gasPrice) => {
|
const formattedStats = gasPrices.filter((gasPrice) => {
|
||||||
return this.props.gasOracleStats[gasPrice].nbTxs >= 10; // Only keep prices with enough transactions
|
return this.props.gasOracleStats[gasPrice].nbTxs >= 10; // Only keep prices with enough transactions
|
||||||
}).map(gasPrice => {
|
}).map(gasPrice => {
|
||||||
|
totalWait += this.props.gasOracleStats[gasPrice].totalWait;
|
||||||
|
totalTxs += this.props.gasOracleStats[gasPrice].nbTxs;
|
||||||
|
totalGasPrice = gasPrice * this.props.gasOracleStats[gasPrice].nbTxs;
|
||||||
return {
|
return {
|
||||||
gasPrice,
|
gasPrice,
|
||||||
wait: this.props.gasOracleStats[gasPrice].averageWait >= 0.1 ? this.props.gasOracleStats[gasPrice].averageWait : 0.1
|
wait: this.props.gasOracleStats[gasPrice].averageWait >= 0.1 ? this.props.gasOracleStats[gasPrice].averageWait : 0.1
|
||||||
|
@ -45,6 +53,11 @@ class GasStation extends Component {
|
||||||
}).sort((a, b) => {
|
}).sort((a, b) => {
|
||||||
return a.gasPrice - b.gasPrice;
|
return a.gasPrice - b.gasPrice;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.averageWait = totalWait / totalTxs;
|
||||||
|
this.averagePrice = totalGasPrice / totalTxs;
|
||||||
|
|
||||||
|
return formattedStats;
|
||||||
}
|
}
|
||||||
|
|
||||||
gasSliderChange(e, name) {
|
gasSliderChange(e, name) {
|
||||||
|
@ -53,6 +66,14 @@ class GasStation extends Component {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getFormattedPrice(price) {
|
||||||
|
return (price / this.PRICE_UNIT_DIVIDER).toFixed(3) + ' GWei';
|
||||||
|
}
|
||||||
|
|
||||||
|
getFormattedWait(wait) {
|
||||||
|
return `${wait.toFixed(3)} ${this.WAIT_UNIT}`;
|
||||||
|
}
|
||||||
|
|
||||||
static getColorForWait(wait) {
|
static getColorForWait(wait) {
|
||||||
if (wait <= 60) {
|
if (wait <= 60) {
|
||||||
return COLORS.good;
|
return COLORS.good;
|
||||||
|
@ -85,7 +106,7 @@ class GasStation extends Component {
|
||||||
<Card.Header>
|
<Card.Header>
|
||||||
<Card.Title>Gas Price Estimator</Card.Title>
|
<Card.Title>Gas Price Estimator</Card.Title>
|
||||||
<Card.Options>
|
<Card.Options>
|
||||||
<CopyToClipboard text={currentGasStep.gasPrice / 1000000000}
|
<CopyToClipboard text={currentGasStep.gasPrice / this.PRICE_UNIT_DIVIDER}
|
||||||
onCopy={() => this.setState({copied: true})}
|
onCopy={() => this.setState({copied: true})}
|
||||||
title="Copy gas price to clipboard">
|
title="Copy gas price to clipboard">
|
||||||
<span><Stamp color="blue" icon="copy"/></span>
|
<span><Stamp color="blue" icon="copy"/></span>
|
||||||
|
@ -98,12 +119,12 @@ class GasStation extends Component {
|
||||||
<Grid.Row cards={true}>
|
<Grid.Row cards={true}>
|
||||||
<Grid.Col lg={6} md={6} sm={12}>
|
<Grid.Col lg={6} md={6} sm={12}>
|
||||||
<StampCard icon="sliders" color={GasStation.getColorForPrice(currentGasStep.gasPrice)}>
|
<StampCard icon="sliders" color={GasStation.getColorForPrice(currentGasStep.gasPrice)}>
|
||||||
{currentGasStep.gasPrice / 1000000000} GWei
|
{this.getFormattedPrice(currentGasStep.gasPrice)}
|
||||||
</StampCard>
|
</StampCard>
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
<Grid.Col lg={6} md={6} sm={12}>
|
<Grid.Col lg={6} md={6} sm={12}>
|
||||||
<StampCard icon="clock" color={GasStation.getColorForWait(currentGasStep.wait)}>
|
<StampCard icon="clock" color={GasStation.getColorForWait(currentGasStep.wait)}>
|
||||||
{currentGasStep.wait} seconds
|
{this.getFormattedWait(currentGasStep.wait)}
|
||||||
</StampCard>
|
</StampCard>
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
</Grid.Row>
|
</Grid.Row>
|
||||||
|
@ -118,23 +139,23 @@ class GasStation extends Component {
|
||||||
/>
|
/>
|
||||||
</Form.Group>
|
</Form.Group>
|
||||||
|
|
||||||
{/*<Grid.Row cards={true}>
|
<Grid.Row cards={true}>
|
||||||
<Grid.Col lg={4} md={6} sm={12}>
|
<Grid.Col lg={4} md={6} sm={12}>
|
||||||
<StampCard icon="sliders" color="grey">
|
<StampCard icon="sliders" color="grey">
|
||||||
Average Price: {this.formattedGasStats.average.price} GWei
|
Average Price: {this.getFormattedPrice(this.averagePrice)}
|
||||||
</StampCard>
|
</StampCard>
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
<Grid.Col lg={4} md={6} sm={12}>
|
<Grid.Col lg={4} md={6} sm={12}>
|
||||||
<StampCard icon="clock" color="grey">
|
<StampCard icon="clock" color="grey">
|
||||||
Average Wait: {this.formattedGasStats.average.wait} min
|
Average Wait: {this.getFormattedWait(this.averageWait)}
|
||||||
</StampCard>
|
</StampCard>
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
<Grid.Col lg={4} md={6} sm={12}>
|
<Grid.Col lg={4} md={6} sm={12}>
|
||||||
<StampCard icon="square" color="grey">
|
<StampCard icon="square" color="grey">
|
||||||
Last Block: {this.formattedGasStats.blockNum}
|
Last Block: {this.props.lastBlock.number}
|
||||||
</StampCard>
|
</StampCard>
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
</Grid.Row>*/}
|
</Grid.Row>
|
||||||
</Card.Body>
|
</Card.Body>
|
||||||
</Card>
|
</Card>
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
|
@ -144,6 +165,7 @@ class GasStation extends Component {
|
||||||
|
|
||||||
GasStation.propTypes = {
|
GasStation.propTypes = {
|
||||||
gasOracleStats: PropTypes.object,
|
gasOracleStats: PropTypes.object,
|
||||||
|
lastBlock: PropTypes.object,
|
||||||
listenToGasOracle: PropTypes.func,
|
listenToGasOracle: PropTypes.func,
|
||||||
fetchEthGas: PropTypes.func
|
fetchEthGas: PropTypes.func
|
||||||
};
|
};
|
||||||
|
@ -151,7 +173,7 @@ GasStation.propTypes = {
|
||||||
function mapStateToProps(state, _props) {
|
function mapStateToProps(state, _props) {
|
||||||
return {
|
return {
|
||||||
gasOracleStats: getOracleGasStats(state),
|
gasOracleStats: getOracleGasStats(state),
|
||||||
gasStats: getGasStats(state)
|
lastBlock: getLastBlock(state)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -7,7 +7,7 @@ import {contractProfile as contractProfileAction, contractDeploy as contractDepl
|
||||||
import ContractFunctions from '../components/ContractFunctions';
|
import ContractFunctions from '../components/ContractFunctions';
|
||||||
import DataWrapper from "../components/DataWrapper";
|
import DataWrapper from "../components/DataWrapper";
|
||||||
import GasStation from "../components/GasStation";
|
import GasStation from "../components/GasStation";
|
||||||
import {getContractProfile, getContractDeploys, getGasStats} from "../reducers/selectors";
|
import {getContractProfile, getContractDeploys} from "../reducers/selectors";
|
||||||
|
|
||||||
class ContractDeploymentContainer extends Component {
|
class ContractDeploymentContainer extends Component {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -35,7 +35,6 @@ function mapStateToProps(state, props) {
|
||||||
return {
|
return {
|
||||||
contractProfile: getContractProfile(state, props.match.params.contractName),
|
contractProfile: getContractProfile(state, props.match.params.contractName),
|
||||||
contractDeploys: getContractDeploys(state, props.match.params.contractName),
|
contractDeploys: getContractDeploys(state, props.match.params.contractName),
|
||||||
gasStats: getGasStats(state),
|
|
||||||
error: state.errorMessage,
|
error: state.errorMessage,
|
||||||
loading: state.loading
|
loading: state.loading
|
||||||
};
|
};
|
||||||
|
|
|
@ -25,7 +25,6 @@ const entitiesDefaultState = {
|
||||||
plugins: [],
|
plugins: [],
|
||||||
ensRecords: [],
|
ensRecords: [],
|
||||||
files: [],
|
files: [],
|
||||||
gasStats: [],
|
|
||||||
gasOracleStats: []
|
gasOracleStats: []
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -28,6 +28,10 @@ export function getBlocks(state) {
|
||||||
return state.entities.blocks;
|
return state.entities.blocks;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getLastBlock(state) {
|
||||||
|
return state.entities.blocks[0];
|
||||||
|
}
|
||||||
|
|
||||||
export function getBlock(state, number) {
|
export function getBlock(state, number) {
|
||||||
return state.entities.blocks.find((block) => block.number.toString() === number);
|
return state.entities.blocks.find((block) => block.number.toString() === number);
|
||||||
}
|
}
|
||||||
|
@ -84,10 +88,6 @@ export function getVersions(state) {
|
||||||
return state.entities.versions;
|
return state.entities.versions;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getGasStats(state) {
|
|
||||||
return state.entities.gasStats[state.entities.gasStats.length - 1];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getOracleGasStats(state) {
|
export function getOracleGasStats(state) {
|
||||||
if (!state.entities.gasOracleStats.length) {
|
if (!state.entities.gasOracleStats.length) {
|
||||||
return {};
|
return {};
|
||||||
|
|
Loading…
Reference in New Issue