add gas station container

embark-ui/src/components/GasStation.js

@@ -1,11 +1,7 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
-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, gasOracle as ethGasAction} from "../actions";
-import {getOracleGasStats, getLastBlock} from "../reducers/selectors";
 
 const COLORS = {
   good: 'green',
@@ -25,13 +21,6 @@ class GasStation extends Component {
     };
   }
 
-  componentDidMount() {
-    this.props.fetchEthGas();
-    if (!this.props.gasOracleStats.length) {
-      this.props.listenToGasOracle();
-    }
-  }
-
   getGasOracleFormatted() {
     let totalWait = 0;
     let totalTxs = 0;
@@ -164,23 +153,8 @@ class GasStation extends Component {
 }
 
 GasStation.propTypes = {
-  gasOracleStats: PropTypes.object,
-  lastBlock: PropTypes.object,
-  listenToGasOracle: PropTypes.func,
-  fetchEthGas: PropTypes.func
+  gasOracleStats: PropTypes.object.isRequired,
+  lastBlock: PropTypes.object.isRequired
 };
 
-function mapStateToProps(state, _props) {
-  return {
-    gasOracleStats: getOracleGasStats(state),
-    lastBlock: getLastBlock(state)
-  };
-}
-
-export default withRouter(connect(
-  mapStateToProps,
-  {
-    listenToGasOracle: listenToGasOracle,
-    fetchEthGas: ethGasAction.request
-  }
-)(GasStation));
+export default GasStation;

embark-ui/src/containers/ContractDeploymentContainer.js

@@ -6,7 +6,7 @@ import {withRouter} from 'react-router-dom';
 import {contractProfile as contractProfileAction, contractDeploy as contractDeployAction} from '../actions';
 import ContractFunctions from '../components/ContractFunctions';
 import DataWrapper from "../components/DataWrapper";
-import GasStation from "../components/GasStation";
+import GasStationContainer from "../containers/GasStationContainer";
 import {getContractProfile, getContractDeploys} from "../reducers/selectors";
 
 class ContractDeploymentContainer extends Component {
@@ -16,17 +16,17 @@ class ContractDeploymentContainer extends Component {
 
   render() {
     return (
-      <React.Fragment>
-        <DataWrapper shouldRender={this.props.contractProfile !== undefined}
-                     {...this.props}
-                     render={({contractProfile, contractDeploys, postContractDeploy}) => (
+      <DataWrapper shouldRender={this.props.contractProfile !== undefined}
+                   {...this.props}
+                   render={({contractProfile, contractDeploys, postContractDeploy}) => (
+                     <React.Fragment>
                        <ContractFunctions contractProfile={contractProfile}
                                           contractFunctions={contractDeploys}
                                           onlyConstructor
                                           postContractFunction={postContractDeploy}/>
-                     )}/>
-        <GasStation/>
-      </React.Fragment>
+                       <GasStationContainer/>
+                     </React.Fragment>
+                   )}/>
     );
   }
 }

embark-ui/src/containers/ContractFunctionsContainer.js

@@ -6,7 +6,7 @@ import {withRouter} from 'react-router-dom';
 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 GasStationContainer from "../containers/GasStationContainer";
 import {getContractProfile, getContractFunctions} from "../reducers/selectors";
 
 class ContractFunctionsContainer extends Component {
@@ -16,21 +16,17 @@ class ContractFunctionsContainer extends Component {
 
   render() {
     return (
-      <React.Fragment>
-        <DataWrapper shouldRender={this.props.contractProfile !== undefined}
-                     {...this.props}
-                     render={({contractProfile, contractFunctions, postContractFunction}) => (
+      <DataWrapper shouldRender={this.props.contractProfile !== undefined}
+                   {...this.props}
+                   render={({contractProfile, contractFunctions, postContractFunction}) => (
+                     <React.Fragment>
                        <ContractFunctions contractProfile={contractProfile}
                                           contractFunctions={contractFunctions}
                                           postContractFunction={postContractFunction}/>
-                     )}/>
 
-        <DataWrapper shouldRender={this.props.gasStats !== undefined}
-                     {...this.props}
-                     render={() => (
-                       <GasStation/>
-                     )}/>
-      </React.Fragment>
+                       <GasStationContainer/>
+                     </React.Fragment>
+                   )}/>
     );
   }
 }
@@ -50,7 +46,6 @@ ContractFunctionsContainer.propTypes = {
   contractFunctions: PropTypes.arrayOf(PropTypes.object),
   postContractFunction: PropTypes.func,
   fetchContractProfile: PropTypes.func,
-  fetchEthGas: PropTypes.func,
   error: PropTypes.string
 };
 

embark-ui/src/containers/GasStationContainer.js

@@ -0,0 +1,51 @@
+import PropTypes from "prop-types";
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {withRouter} from "react-router-dom";
+import GasStation from '../components/GasStation';
+import {listenToGasOracle, gasOracle as ethGasAction, blocks as blocksAction} from "../actions";
+import DataWrapper from "../components/DataWrapper";
+import {getOracleGasStats, getLastBlock} from "../reducers/selectors";
+
+class GasStationContainer extends Component {
+  componentDidMount() {
+    this.props.fetchEthGas();
+    if (!this.props.gasOracleStats.length) {
+      this.props.listenToGasOracle();
+    }
+    if (!this.props.lastBlock) {
+      this.props.fetchBlocks();
+    }
+  }
+
+  render() {
+    return <DataWrapper shouldRender={this.props.gasOracleStats && Object.keys(this.props.gasOracleStats).length && this.props.lastBlock}
+                        {...this.props} render={({lastBlock, gasOracleStats}) => (
+      <GasStation gasOracleStats={gasOracleStats} lastBlock={lastBlock}/>
+    )}/>;
+
+  }
+}
+
+GasStationContainer.propTypes = {
+  gasOracleStats: PropTypes.object,
+  lastBlock: PropTypes.object,
+  listenToGasOracle: PropTypes.func,
+  fetchEthGas: PropTypes.func
+};
+
+function mapStateToProps(state, _props) {
+  return {
+    gasOracleStats: getOracleGasStats(state),
+    lastBlock: getLastBlock(state)
+  };
+}
+
+export default withRouter(connect(
+  mapStateToProps,
+  {
+    listenToGasOracle: listenToGasOracle,
+    fetchEthGas: ethGasAction.request,
+    fetchBlocks: blocksAction.request
+  }
+)(GasStationContainer));