Use ethgasstation to predict tx wait times

src/App.js

@@ -864,6 +864,22 @@ export default class App extends Component {
                   )
                 }
 
+                if (view.includes("loader_")) {
+                  const network = view.replace("loader_");
+                  return (
+                    <div>
+                      <div
+                        style={{zIndex:1,position:"relative",color:"#dddddd"}}>
+
+                        <NavCard
+                          title={"Sending..."}
+                          goBack={this.goBack.bind(this)} />
+                      </div>
+                      <Loader loaderImage={LOADERIMAGE} network={network} />
+                    </div>
+                  );
+                }
+
                 const sendByScan = (
                   <SendByScan
                     parseAndCleanPath={this.parseAndCleanPath.bind(this)}

src/components/Bity.js

@@ -7,7 +7,7 @@ import { format } from "@tammo/react-iban";
 import styled from "styled-components";
 import { isValid } from "iban";
 import { placeOrder, getOrder, getEstimate } from "../services/bity";
-import { gasPrice } from "../services/core";
+import { price } from "../services/ethgasstation";
 
 const P = styled.p`
   color: gray;
@@ -126,7 +126,7 @@ class Bity extends Component {
       changeAlert
     } = this.props;
     if (IBAN.valid) {
-      changeView("loader");
+      changeView("loader_ROOTCHAIN");
 
       let order;
       const amountInEth = (amount.value / ethPrice).toString();
@@ -152,7 +152,7 @@ class Bity extends Component {
       if (metaAccount) {
         let gwei;
         try {
-          gwei = await gasPrice();
+          gwei = await price();
         } catch (err) {
           changeAlert(
             "warning",

src/components/Exchange.js

@@ -19,7 +19,7 @@ import { bi, add, divide } from 'jsbi-utils';
 import getConfig from "../config";
 import { PrimaryButton, BorderButton } from "./Buttons";
 import bityLogo from '../assets/bity.png';
-import { gasPrice } from "../services/core";
+import { price } from "../services/ethgasstation";
 
 const CONFIG = getConfig();
 const BN = Web3.utils.BN
@@ -311,7 +311,7 @@ export default class Exchange extends React.Component {
 
       let gwei;
       try {
-        gwei = await gasPrice();
+        gwei = await price();
       } catch(err) {
         console.log("Error getting gas price",err)
       }
@@ -375,7 +375,7 @@ export default class Exchange extends React.Component {
   async depositDai(destination, amount, message, cb) {
     let gwei
     try {
-      gwei = await gasPrice();
+      gwei = await price();
     } catch(err) {
       console.log("Error getting gas price",err)
     }
@@ -565,7 +565,7 @@ export default class Exchange extends React.Component {
 
       let gwei;
       try {
-        gwei = await gasPrice();
+        gwei = await price();
       } catch(err) {
         // TODO: Propagate error to user
         console.log("Error getting gas price",err)
@@ -630,7 +630,7 @@ export default class Exchange extends React.Component {
     if(this.state.mainnetMetaAccount){
       //send funds using metaaccount on mainnet
 
-      gasPrice()
+      price()
       .catch((err)=>{
         console.log("Error getting gas price",err)
       })
@@ -1159,7 +1159,7 @@ export default class Exchange extends React.Component {
               if(this.state.mainnetMetaAccount){
                 //send funds using metaaccount on mainnet
 
-                gasPrice()
+                price()
                   .catch((err)=>{
                     console.log("Error getting gas price",err)
                   })
@@ -1514,7 +1514,7 @@ export default class Exchange extends React.Component {
                 ml={2}
                 onClick={() => {
                   console.log("Getting gas price...")
-                  gasPrice()
+                  price()
                   .catch((err)=>{
                     console.log("Error getting gas price",err)
                   })

src/components/Loader.js

@@ -1,32 +1,84 @@
-import React, { Component }  from 'react';
-let interval
+// @format
+import React, { Component } from "react";
+import { time } from "../services/ethgasstation";
+import getConfig from "../config";
+
+let interval;
+const CONFIG = getConfig();
+const RATE = {
+  PERCENT: 3,
+  EACH: 250
+};
+
 class Loader extends Component {
   constructor(props) {
     super(props);
+
     this.state = {
-      percent: 5,
+      progress: 0,
+      rate: {
+        percent: RATE.PERCENT,
+        each: RATE.EACH
+      }
     };
+
+    this.progress = this.progress.bind(this);
   }
-  componentDidMount(){
-    interval = setInterval(this.loadMore.bind(this),250)
+
+  async componentDidMount() {
+    const { network } = this.props;
+
+    let t;
+    if (network === "ROOTCHAIN") {
+      t = await time();
+    } else if (network === "SIDECHAIN") {
+      t = CONFIG.SIDECHAIN.TIME_ESTIMATES.TX; //ms
+      throw new Error("Network not yet supported");
+    } else {
+      // 8ms was Loader's default value.
+      t = 8333; // ms
+    }
+
+    const rate = {
+      // NOTE: We "round" the result of "each"'s calculation
+      each: parseInt(t / 100 / RATE.PERCENT, 10),
+      percent: RATE.PERCENT
+    };
+    this.setState({ rate }, () => {
+      interval = setInterval(this.progress, rate.each);
+    });
   }
-  componentWillUnmount(){
-    clearInterval(interval)
+
+  componentWillUnmount() {
+    clearInterval(interval);
   }
-  loadMore(){
-    let newPercent = this.state.percent+3
-    if(newPercent>100) newPercent=100
-    this.setState({percent:newPercent})
+
+  progress() {
+    const { rate, progress } = this.state;
+
+    let newProgress = progress + rate.percent;
+    if (newProgress > 100) {
+      newProgress = 100;
+      clearInterval(interval);
+    }
+    this.setState({ progress: newProgress });
   }
+
   render() {
+    const { progress } = this.state;
+    const { loaderImage } = this.props;
+
     return (
       <div className="loader">
-        <img src ={this.props.loaderImage} className="loader__logo" alt=""/>
+        <img src={loaderImage} className="loader__logo" alt="" />
         <div className="loader__progress">
-          <div className="loader__progress_fill" style={{width:this.state.percent+"%"}}/>
+          <div
+            className="loader__progress_fill"
+            style={{ width: progress + "%" }}
+          />
         </div>
       </div>
-    )
+    );
   }
 }
 export default Loader;

src/components/SendToAddress.js

@@ -132,7 +132,7 @@ export default class SendToAddress extends React.Component {
         this.props.changeAlert({type: 'warning', message: 'Not enough funds: '+currencyDisplay(Math.floor((parseFloat(this.props.balance))*100)/100)})
       }else{
         console.log("SWITCH TO LOADER VIEW...",amount)
-        this.props.changeView('loader')
+        this.props.changeView('loader_SIDECHAIN')
         setTimeout(()=>{window.scrollTo(0,0)},60)
 
         console.log("web3",this.props.web3)

src/components/WithdrawFromPrivate.js

@@ -70,7 +70,7 @@ export default class SendToAddress extends React.Component {
 
     if(this.state.canWithdraw){
         console.log("SWITCH TO LOADER VIEW...")
-        this.props.changeView('loader')
+        this.props.changeView('loader_SIDECHAIN')
         setTimeout(()=>{window.scrollTo(0,0)},60)
         //console.log("metaAccount",this.state.metaAccount,"amount",this.props.web3.utils.toWei(amount,'ether'))
 

src/config.js

@@ -22,7 +22,8 @@ const configs = [
         // is dependent on how often blocks are submitted to the network.
         // Ultimately, we want to remove this value from the code base somehow.
         EXIT: 160000,
-        DEPOSIT: 330000
+        DEPOSIT: 330000,
+        TX: 1000,
       }
     },
     ROOTCHAIN: {
@@ -57,7 +58,8 @@ const configs = [
         // is dependent on how often blocks are submitted to the network.
         // Ultimately, we want to remove this value from the code base somehow.
         EXIT: 160000,
-        DEPOSIT: 330000
+        DEPOSIT: 330000,
+        TX: 1000,
       }
     },
     ROOTCHAIN: {
@@ -92,7 +94,8 @@ const configs = [
         // is dependent on how often blocks are submitted to the network.
         // Ultimately, we want to remove this value from the code base somehow.
         EXIT: 160000,
-        DEPOSIT: 330000
+        DEPOSIT: 330000,
+        TX: 1000,
       }
     },
     ROOTCHAIN: {

src/services/ethgasstation.js

@@ -0,0 +1,31 @@
+// @format
+import getConfig from "../config";
+
+const CONFIG = getConfig();
+const API = "https://ethgasstation.info/json/ethgasAPI.json";
+
+function get() {
+  return fetch(API, {
+    mode: "cors",
+    method: "get"
+  }).then(r => r.json());
+}
+
+// NOTE: Both price() and time() currently default to average. In the future,
+// these function could be adjusted to feature "fast" and "safe" too.
+// NOTE2: Both functions can throw and should be try-catch'ed.
+export async function price() {
+  const { average } = await get();
+  if (average > 0 && average < 200) {
+    const avg = average + average * CONFIG.ROOTCHAIN.GAS.BOOST_BY;
+    return Math.round(avg * 100) / 1000;
+  }
+  return Promise.reject("Average out of range (0–200)");
+}
+
+export async function time() {
+  // NOTE: avgWait is returned from ethgasstation in minutes (double)
+  const { avgWait } = await get();
+  // We convert minutes to milliseconds
+  return avgWait * 60 * 1000;
+}