diff --git a/embark-ui/src/components/GasStation.js b/embark-ui/src/components/GasStation.js index c50a19de..da4caab7 100644 --- a/embark-ui/src/components/GasStation.js +++ b/embark-ui/src/components/GasStation.js @@ -5,7 +5,7 @@ import {withRouter} from "react-router-dom"; import {Card, Form, Grid, StampCard, Stamp} from 'tabler-react'; import {CopyToClipboard} from 'react-copy-to-clipboard'; import {listenToGasOracle, gasOracle as ethGasAction} from "../actions"; -import {getGasStats, getOracleGasStats} from "../reducers/selectors"; +import {getOracleGasStats, getLastBlock} from "../reducers/selectors"; const COLORS = { good: 'green', @@ -17,6 +17,8 @@ class GasStation extends Component { constructor(props) { super(props); + this.PRICE_UNIT_DIVIDER = 1000000000; + this.WAIT_UNIT = 'sec'; this.state = { gasOracleSliderIndex: 0, copied: false @@ -31,13 +33,19 @@ class GasStation extends Component { } getGasOracleFormatted() { + let totalWait = 0; + let totalTxs = 0; + let totalGasPrice = 0; const gasPrices = Object.keys(this.props.gasOracleStats); if (!gasPrices.length) { return []; } - return gasPrices.filter((gasPrice) => { + const formattedStats = gasPrices.filter((gasPrice) => { return this.props.gasOracleStats[gasPrice].nbTxs >= 10; // Only keep prices with enough transactions }).map(gasPrice => { + totalWait += this.props.gasOracleStats[gasPrice].totalWait; + totalTxs += this.props.gasOracleStats[gasPrice].nbTxs; + totalGasPrice = gasPrice * this.props.gasOracleStats[gasPrice].nbTxs; return { gasPrice, 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) => { return a.gasPrice - b.gasPrice; }); + + this.averageWait = totalWait / totalTxs; + this.averagePrice = totalGasPrice / totalTxs; + + return formattedStats; } 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) { if (wait <= 60) { return COLORS.good; @@ -85,7 +106,7 @@ class GasStation extends Component { Gas Price Estimator - this.setState({copied: true})} title="Copy gas price to clipboard"> @@ -98,12 +119,12 @@ class GasStation extends Component { - {currentGasStep.gasPrice / 1000000000} GWei + {this.getFormattedPrice(currentGasStep.gasPrice)} - {currentGasStep.wait} seconds + {this.getFormattedWait(currentGasStep.wait)} @@ -118,23 +139,23 @@ class GasStation extends Component { /> - {/* + - Average Price: {this.formattedGasStats.average.price} GWei + Average Price: {this.getFormattedPrice(this.averagePrice)} - Average Wait: {this.formattedGasStats.average.wait} min + Average Wait: {this.getFormattedWait(this.averageWait)} - Last Block: {this.formattedGasStats.blockNum} + Last Block: {this.props.lastBlock.number} - */} + @@ -144,6 +165,7 @@ class GasStation extends Component { GasStation.propTypes = { gasOracleStats: PropTypes.object, + lastBlock: PropTypes.object, listenToGasOracle: PropTypes.func, fetchEthGas: PropTypes.func }; @@ -151,7 +173,7 @@ GasStation.propTypes = { function mapStateToProps(state, _props) { return { gasOracleStats: getOracleGasStats(state), - gasStats: getGasStats(state) + lastBlock: getLastBlock(state) }; } diff --git a/embark-ui/src/containers/ContractDeploymentContainer.js b/embark-ui/src/containers/ContractDeploymentContainer.js index 2d6003e0..5cba6e0c 100644 --- a/embark-ui/src/containers/ContractDeploymentContainer.js +++ b/embark-ui/src/containers/ContractDeploymentContainer.js @@ -7,7 +7,7 @@ import {contractProfile as contractProfileAction, contractDeploy as contractDepl import ContractFunctions from '../components/ContractFunctions'; import DataWrapper from "../components/DataWrapper"; import GasStation from "../components/GasStation"; -import {getContractProfile, getContractDeploys, getGasStats} from "../reducers/selectors"; +import {getContractProfile, getContractDeploys} from "../reducers/selectors"; class ContractDeploymentContainer extends Component { componentDidMount() { @@ -35,7 +35,6 @@ function mapStateToProps(state, props) { return { contractProfile: getContractProfile(state, props.match.params.contractName), contractDeploys: getContractDeploys(state, props.match.params.contractName), - gasStats: getGasStats(state), error: state.errorMessage, loading: state.loading }; diff --git a/embark-ui/src/reducers/index.js b/embark-ui/src/reducers/index.js index 3285b457..63d6da7c 100644 --- a/embark-ui/src/reducers/index.js +++ b/embark-ui/src/reducers/index.js @@ -25,7 +25,6 @@ const entitiesDefaultState = { plugins: [], ensRecords: [], files: [], - gasStats: [], gasOracleStats: [] }; diff --git a/embark-ui/src/reducers/selectors.js b/embark-ui/src/reducers/selectors.js index 67d63072..b3c85dbb 100644 --- a/embark-ui/src/reducers/selectors.js +++ b/embark-ui/src/reducers/selectors.js @@ -28,6 +28,10 @@ export function getBlocks(state) { return state.entities.blocks; } +export function getLastBlock(state) { + return state.entities.blocks[0]; +} + export function getBlock(state, number) { return state.entities.blocks.find((block) => block.number.toString() === number); } @@ -84,10 +88,6 @@ export function getVersions(state) { return state.entities.versions; } -export function getGasStats(state) { - return state.entities.gasStats[state.entities.gasStats.length - 1]; -} - export function getOracleGasStats(state) { if (!state.entities.gasOracleStats.length) { return {};