fix(cockpit/estimator): make estimator clearer

embarklabs · Feb 26, 2019 · 1759aac · 1759aac
1 parent 57cd6d3
commit 1759aac
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/packages/embark-ui/src/components/Contracts.js b/packages/embark-ui/src/components/Contracts.js
@@ -15,11 +15,11 @@ const Contracts = ({contracts, title = "Contracts"}) => (
         </CardHeader>
         <CardBody>
           {
-            contracts.map(contract => {
+            contracts.map((contract, key) => {
               const contractDisplay = formatContractForDisplay(contract);
 
               return (
-                <div className="explorer-row border-top" key={contract.address}>
+                <div className="explorer-row border-top" key={`contract-${key}`}>
                   <CardTitleIdenticon id={contract.className}>
                     <Link to={`/explorer/contracts/${contract.className}`}>{contract.className}</Link>
                   </CardTitleIdenticon>

diff --git a/packages/embark-ui/src/components/GasStation.js b/packages/embark-ui/src/components/GasStation.js
@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
-import {Card, CardBody, CardHeader, CardTitle, Row, Col, Input, Badge} from 'reactstrap';
+import {Card, CardBody, CardHeader, CardTitle, Row, Col, Input, Badge, Alert} from 'reactstrap';
 import CopyButton from './CopyButton';
 
 const COLORS = {
@@ -29,7 +29,7 @@ class GasStation extends Component {
     if (!gasPrices.length) {
       return [];
     }
-    const formattedStats =  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;
@@ -50,6 +50,10 @@ class GasStation extends Component {
   }
 
   getCurrentGas() {
+    const formattedGas = this.getGasOracleFormatted();
+    if (!formattedGas.length) {
+      return 'Too few blocks';
+    }
     return this.getGasOracleFormatted()[this.state.gasOracleSliderIndex].gasPrice / this.PRICE_UNIT_DIVIDER;
   }
 
@@ -91,7 +95,7 @@ class GasStation extends Component {
     const formattedGasOracleStats = this.getGasOracleFormatted();
     const currentGasStep = formattedGasOracleStats[this.state.gasOracleSliderIndex];
     if (!formattedGasOracleStats.length) {
-      return '';
+      return <Alert color="warning">Currently not enough blocks mined to estimate</Alert>;
     }
     return <Row>
       <Col>

diff --git a/packages/embark-ui/src/containers/GasStationContainer.js b/packages/embark-ui/src/containers/GasStationContainer.js
@@ -30,11 +30,7 @@ class GasStationContainer extends Component {
                         {...this.props} render={({lastBlock, gasOracleStats}) => (
       <GasStation gasOracleStats={gasOracleStats} lastBlock={lastBlock} ref={instance => { this.gasStation = instance; }}/>
     )} elseRender={() => {
-      let message = 'Currently not enough blocks mined to estimated';
-      if (Object.keys(this.props.gasOracleStats).length === 0) {
-        message = 'No blocks detected. If you are connected using an RPC connection, switch to WS to have access to new block events.'
-      }
-      return (<Alert color="danger">{message}</Alert>)
+      return (<Alert color="danger">No blocks detected. If you are connected using an RPC connection, switch to WS to have access to new block events. If you are in development, add new blocks by making transactions.</Alert>)
     }}/>;
 
   }