watch oracle changes

embark-ui/src/components/GasStation.js

@@ -22,6 +22,7 @@ class GasStation extends Component {
 
     this.state = {
       gasSliderIndex: 0,
+      gasOracleSliderIndex: 0,
       copied: false
     };
     this.formattedGasStats = GasStation.formatGasStats(props.gasStats);
@@ -51,9 +52,22 @@ class GasStation extends Component {
     };
   }
 
-  gasSliderChange(e) {
+  getGasOracleFormatted() {
+    const gasPrices = Object.keys(this.props.gasOracleStats);
+    if (!gasPrices.length) {
+      return [];
+    }
+    return gasPrices.map(gasPrice => {
+      return {
+        gasPrice: gasPrice,
+        wait: this.props.gasOracleStats[gasPrice].averageWait
+      };
+    });
+  }
+
+  gasSliderChange(e, name) {
     this.setState({
-      gasSliderIndex: e.target.value
+      [name]: e.target.value
     });
   }
 
@@ -79,6 +93,7 @@ class GasStation extends Component {
 
   render() {
     const currentGasStep = this.formattedGasStats.gasSteps[this.state.gasSliderIndex];
+    const formattedGasOracleStats = this.getGasOracleFormatted();
     return <Grid.Row>
       <Grid.Col>
         <Card>
@@ -114,10 +129,18 @@ class GasStation extends Component {
                      min={0}
                      step={1}
                      value={this.state.gasSliderIndex}
-                     onChange={(e) => this.gasSliderChange(e)}
+                     onChange={(e) => this.gasSliderChange(e, 'gasSliderIndex')}
               />
-            </Form.Group>
 
+              {formattedGasOracleStats.length > 0 &&
+              <input type="range" className="slider"
+                     max={formattedGasOracleStats.length - 1}
+                     min={0}
+                     step={1}
+                     value={this.state.gasOracleSliderIndex}
+                     onChange={(e) => this.gasSliderChange(e, 'gasOracleSliderIndex')}
+              />}
+            </Form.Group>
 
             <Grid.Row cards={true}>
               <Grid.Col lg={4} md={6} sm={12}>

embark-ui/src/reducers/selectors.js

@@ -89,7 +89,10 @@ export function getGasStats(state) {
 }
 
 export function getOracleGasStats(state) {
-  return state.entities.gasOracleStats;
+  if (!state.entities.gasOracleStats.length) {
+    return {};
+  }
+  return state.entities.gasOracleStats[0];
 }
 
 export function isWeb3Enabled(state) {

lib/modules/blockchain_connector/index.js

@@ -147,7 +147,6 @@ class BlockchainConnector {
           self.isWeb3Ready = true;
           self.events.emit(WEB3_READY);
           self.registerWeb3Object();
-          self.subscribeToNewBlockHeaders();
         });
       });
     });
@@ -362,7 +361,7 @@ class BlockchainConnector {
       'ws',
       '/embark-api/blockchain/blockHeader',
       (ws) => {
-        self.events.on('blockchain:newBlockHeaders', (block) => {
+        self.events.on('block:header', (block) => {
           ws.send(JSON.stringify({block: block}), () => {});
         });
       }
@@ -491,18 +490,6 @@ class BlockchainConnector {
     });
   }
 
-  subscribeToNewBlockHeaders() {
-    let self = this;
-    self.web3.eth.subscribe("newBlockHeaders", (err) => {
-      if (err) {
-        self.logger.error(err.message);
-      }
-    }).on("data", (block) => {
-      self.events.emit("blockchain:newBlockHeaders", block);
-    });
-  }
-
-
   defaultAccount() {
     return this.web3.eth.defaultAccount;
   }

lib/modules/transactionTracker/index.js

@@ -10,8 +10,8 @@ class TransactionTracker {
     this.registerAPICalls();
   }
 
-  onPendingTransaction(pendingTransaction) {
+  onPendingTransaction(pendingTransactionHash) {
-    this.transactions[pendingTransaction] = {
+    this.transactions[pendingTransactionHash] = {
       startTimestamp: Date.now() / 1000
     };
   }