diff --git a/embark-ui/src/actions/index.js b/embark-ui/src/actions/index.js index cf987b74..0eb5e5e0 100644 --- a/embark-ui/src/actions/index.js +++ b/embark-ui/src/actions/index.js @@ -200,17 +200,10 @@ export const files = { failure: (error) => action(FILES[FAILURE], {error}) }; -export const ETH_GAS = createRequestTypes('ETH_GAS'); -export const ethGas = { - request: () => action(ETH_GAS[REQUEST]), - success: (gasStats) => action(ETH_GAS[SUCCESS], {gasStats: [gasStats]}), - failure: (error) => action(ETH_GAS[FAILURE], {error}) -}; - export const GAS_ORACLE = createRequestTypes('GAS_ORACLE'); export const gasOracle = { request: () => action(GAS_ORACLE[REQUEST]), - success: (gasOracleStats) => action(GAS_ORACLE[SUCCESS], {gasOracleStats}), + success: (gasOracleStats) => action(GAS_ORACLE[SUCCESS], {gasOracleStats: [gasOracleStats]}), failure: (error) => action(GAS_ORACLE[FAILURE], {error}) }; diff --git a/embark-ui/src/api/index.js b/embark-ui/src/api/index.js index edb2a65d..405b360e 100644 --- a/embark-ui/src/api/index.js +++ b/embark-ui/src/api/index.js @@ -109,7 +109,7 @@ export function fetchContractFile(payload) { } export function getEthGasAPI() { - return get('/json/ethgasAPI.json', {}, 'https://ethgasstation.info'); + return get('/blockchain/gas/oracle', {}); } export function fetchLastFiddle() { diff --git a/embark-ui/src/components/GasStation.js b/embark-ui/src/components/GasStation.js index aeca641e..eed3cb26 100644 --- a/embark-ui/src/components/GasStation.js +++ b/embark-ui/src/components/GasStation.js @@ -4,8 +4,8 @@ import {connect} from 'react-redux'; import {withRouter} from "react-router-dom"; import {Card, Form, Grid, StampCard, Stamp} from 'tabler-react'; import {CopyToClipboard} from 'react-copy-to-clipboard'; -import {listenToGasOracle} from "../actions"; -import {getOracleGasStats} from "../reducers/selectors"; +import {listenToGasOracle, gasOracle as ethGasAction} from "../actions"; +import {getGasStats, getOracleGasStats} from "../reducers/selectors"; const COLORS = { good: 'green', @@ -16,42 +16,20 @@ const COLORS = { class GasStation extends Component { constructor(props) { super(props); - if (!props.gasStats) { - return console.error('gasStats is a needed Prop for GasStation'); - } this.state = { - gasSliderIndex: 0, gasOracleSliderIndex: 0, copied: false }; - this.formattedGasStats = GasStation.formatGasStats(props.gasStats); } componentDidMount() { + this.props.fetchEthGas(); if (!this.props.gasOracleStats.length) { this.props.listenToGasOracle(); } } - static formatGasStats(gasStats) { - const { - fast, speed, fastest, avgWait, fastWait, blockNum, safeLowWait, - block_time, fastestWait, safeLow, average - } = gasStats; - return { - average: {price: average, wait: avgWait}, - blockTime: block_time, - blockNum, - speed, - gasSteps: [ - {price: safeLow, wait: safeLowWait}, - {price: fast, wait: fastWait}, - {price: fastest, wait: fastestWait} - ] - }; - } - getGasOracleFormatted() { const gasPrices = Object.keys(this.props.gasOracleStats); if (!gasPrices.length) { @@ -59,9 +37,11 @@ class GasStation extends Component { } return gasPrices.map(gasPrice => { return { - gasPrice: gasPrice, + gasPrice, wait: this.props.gasOracleStats[gasPrice].averageWait }; + }).sort((a, b) => { + return a.gasPrice - b.gasPrice; }); } @@ -72,35 +52,38 @@ class GasStation extends Component { } static getColorForWait(wait) { - if (wait <= 1) { + if (wait <= 60) { return COLORS.good; } - if (wait <= 3) { + if (wait <= 180) { return COLORS.medium; } return COLORS.bad; } static getColorForPrice(gasPrice) { - if (gasPrice <= 20) { + if (gasPrice <= 20000000000) { return COLORS.good; } - if (gasPrice <= 40) { + if (gasPrice <= 40000000000) { return COLORS.medium; } return COLORS.bad; } render() { - const currentGasStep = this.formattedGasStats.gasSteps[this.state.gasSliderIndex]; const formattedGasOracleStats = this.getGasOracleFormatted(); + const currentGasStep = formattedGasOracleStats[this.state.gasOracleSliderIndex]; + if (!formattedGasOracleStats.length) { + return ''; + } return - Gas Price Estimator (for Mainnet) + Gas Price Estimator - this.setState({copied: true})} title="Copy gas price to clipboard"> @@ -112,40 +95,31 @@ class GasStation extends Component { {this.state.copied &&

Copied Gas Price

} - - {currentGasStep.price / 10} GWei + + {currentGasStep.gasPrice / 1000000000} Wei - {currentGasStep.wait} minutes + {currentGasStep.wait} seconds - this.gasSliderChange(e, 'gasSliderIndex')} - /> - - {formattedGasOracleStats.length > 0 && this.gasSliderChange(e, 'gasOracleSliderIndex')} - />} + /> - + {/* - Average Price: {this.formattedGasStats.average.price / 10} Gwei + Average Price: {this.formattedGasStats.average.price} Wei @@ -158,7 +132,7 @@ class GasStation extends Component { Last Block: {this.formattedGasStats.blockNum} - + */} @@ -167,20 +141,22 @@ class GasStation extends Component { } GasStation.propTypes = { - gasStats: PropTypes.object.isRequired, - gasOracleStats: PropTypes.array, - listenToGasOracle: PropTypes.func + gasOracleStats: PropTypes.object, + listenToGasOracle: PropTypes.func, + fetchEthGas: PropTypes.func }; function mapStateToProps(state, _props) { return { - gasOracleStats: getOracleGasStats(state) + gasOracleStats: getOracleGasStats(state), + gasStats: getGasStats(state) }; } export default withRouter(connect( mapStateToProps, { - listenToGasOracle: listenToGasOracle + listenToGasOracle: listenToGasOracle, + fetchEthGas: ethGasAction.request } )(GasStation)); diff --git a/embark-ui/src/containers/ContractDeploymentContainer.js b/embark-ui/src/containers/ContractDeploymentContainer.js index 58fae465..2d6003e0 100644 --- a/embark-ui/src/containers/ContractDeploymentContainer.js +++ b/embark-ui/src/containers/ContractDeploymentContainer.js @@ -3,11 +3,7 @@ import {connect} from 'react-redux'; import PropTypes from 'prop-types'; import {withRouter} from 'react-router-dom'; -import { - contractProfile as contractProfileAction, - contractDeploy as contractDeployAction, - ethGas as ethGasAction -} from '../actions'; +import {contractProfile as contractProfileAction, contractDeploy as contractDeployAction} from '../actions'; import ContractFunctions from '../components/ContractFunctions'; import DataWrapper from "../components/DataWrapper"; import GasStation from "../components/GasStation"; @@ -16,7 +12,6 @@ import {getContractProfile, getContractDeploys, getGasStats} from "../reducers/s class ContractDeploymentContainer extends Component { componentDidMount() { this.props.fetchContractProfile(this.props.match.params.contractName); - this.props.fetchEthGas(); } render() { @@ -30,12 +25,7 @@ class ContractDeploymentContainer extends Component { onlyConstructor postContractFunction={postContractDeploy}/> )}/> - - ( - - )}/> + ); } @@ -57,7 +47,6 @@ ContractDeploymentContainer.propTypes = { contractFunctions: PropTypes.arrayOf(PropTypes.object), postContractDeploy: PropTypes.func, fetchContractProfile: PropTypes.func, - fetchEthGas: PropTypes.func, error: PropTypes.string }; @@ -65,7 +54,6 @@ export default withRouter(connect( mapStateToProps, { fetchContractProfile: contractProfileAction.request, - postContractDeploy: contractDeployAction.post, - fetchEthGas: ethGasAction.request + postContractDeploy: contractDeployAction.post } )(ContractDeploymentContainer)); diff --git a/embark-ui/src/containers/ContractFunctionsContainer.js b/embark-ui/src/containers/ContractFunctionsContainer.js index 28221cc2..4fc871f2 100644 --- a/embark-ui/src/containers/ContractFunctionsContainer.js +++ b/embark-ui/src/containers/ContractFunctionsContainer.js @@ -3,20 +3,15 @@ import {connect} from 'react-redux'; import PropTypes from 'prop-types'; import {withRouter} from 'react-router-dom'; -import { - contractProfile as contractProfileAction, - contractFunction as contractFunctionAction, - ethGas as ethGasAction -} from '../actions'; +import {contractProfile as contractProfileAction, contractFunction as contractFunctionAction} from '../actions'; import ContractFunctions from '../components/ContractFunctions'; import DataWrapper from "../components/DataWrapper"; import GasStation from "../components/GasStation"; -import {getContractProfile, getContractFunctions, getGasStats} from "../reducers/selectors"; +import {getContractProfile, getContractFunctions} from "../reducers/selectors"; class ContractFunctionsContainer extends Component { componentDidMount() { this.props.fetchContractProfile(this.props.match.params.contractName); - this.props.fetchEthGas(); } render() { @@ -32,8 +27,8 @@ class ContractFunctionsContainer extends Component { ( - + render={() => ( + )}/> ); @@ -44,7 +39,6 @@ function mapStateToProps(state, props) { return { contractProfile: getContractProfile(state, props.match.params.contractName), contractFunctions: getContractFunctions(state, props.match.params.contractName), - gasStats: getGasStats(state), error: state.errorMessage, loading: state.loading }; @@ -64,7 +58,6 @@ export default withRouter(connect( mapStateToProps, { fetchContractProfile: contractProfileAction.request, - postContractFunction: contractFunctionAction.post, - fetchEthGas: ethGasAction.request + postContractFunction: contractFunctionAction.post } )(ContractFunctionsContainer)); diff --git a/embark-ui/src/sagas/index.js b/embark-ui/src/sagas/index.js index 900cb292..673f5fa6 100644 --- a/embark-ui/src/sagas/index.js +++ b/embark-ui/src/sagas/index.js @@ -42,7 +42,7 @@ export const sendMessage = doRequest.bind(null, messageSend, api.sendMessage); export const fetchEnsRecord = doRequest.bind(null, ensRecord, api.fetchEnsRecord); export const postEnsRecord = doRequest.bind(null, ensRecords, api.postEnsRecord); export const fetchFiles = doRequest.bind(null, files, api.fetchFiles); -export const fetchEthGas = doRequest.bind(null, ethGas, api.getEthGasAPI); +export const fetchEthGas = doRequest.bind(null, gasOracle, api.getEthGasAPI); export function *watchFetchTransaction() { yield takeEvery(actions.TRANSACTION[actions.REQUEST], fetchTransaction); @@ -153,7 +153,7 @@ export function *watchFetchFiles() { } export function *watchFetchEthGas() { - yield takeEvery(actions.ETH_GAS[actions.REQUEST], fetchEthGas); + yield takeEvery(actions.GAS_ORACLE[actions.REQUEST], fetchEthGas); } function createChannel(socket) { @@ -212,7 +212,7 @@ export function *listenGasOracle() { const channel = yield call(createChannel, socket); while (true) { const gasOracleStats = yield take(channel); - yield put(gasOracle.success([gasOracleStats])); + yield put(gasOracle.success(gasOracleStats)); } } diff --git a/lib/modules/transactionTracker/index.js b/lib/modules/transactionTracker/index.js index ba8779ee..6bff5294 100644 --- a/lib/modules/transactionTracker/index.js +++ b/lib/modules/transactionTracker/index.js @@ -56,6 +56,13 @@ class TransactionTracker { registerAPICalls() { const self = this; + self.embark.registerAPICall( + 'get', + '/embark-api/blockchain/gas/oracle', + (req, res) => { + res.send(self.calculateGasPriceSpeeds()); + } + ); self.embark.registerAPICall( 'ws', '/embark-api/blockchain/gas/oracle',