conflict in reducer

This commit is contained in:
Jonathan Rainville 2018-08-31 16:49:28 -04:00 committed by Pascal Precht
parent 486c839cd3
commit 5593534343
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
4 changed files with 38 additions and 18 deletions

View File

@ -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)
}; };
} }

View File

@ -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
}; };

View File

@ -25,7 +25,6 @@ const entitiesDefaultState = {
plugins: [], plugins: [],
ensRecords: [], ensRecords: [],
files: [], files: [],
gasStats: [],
gasOracleStats: [] gasOracleStats: []
}; };

View File

@ -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 {};