add gasPrice feature

KostasRodolakis · Jul 3, 2018 · 9853128 · 9853128
1 parent 4011806
commit 9853128
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 8 deletions.
diff --git a/src/components/3.js b/src/components/3.js
@@ -4,14 +4,20 @@ import ReactJson from 'react-json-view'
 import { inject, observer } from "mobx-react";
 import BN from 'bignumber.js'
 import swal from 'sweetalert';
+import Select from 'react-select';
+
 @inject("UiStore")
 @observer
 export class ThirdStep extends React.Component {
   constructor(props){
     super(props);
     this.tokenStore = props.UiStore.tokenStore;
     this.gasPriceStore = props.UiStore.gasPriceStore;
+    console.log(this.gasPriceStore.gasPricesArray)
     this.onNext = this.onNext.bind(this)
+    this.state = {
+      gasPrice: ''
+    }
   }
   componentDidMount() {
     if(this.tokenStore.dublicates.length > 0){
@@ -45,6 +51,12 @@ export class ThirdStep extends React.Component {
     }
     this.props.history.push('/4')
   }
+
+  onGasPriceChange = (selected) => {
+    if(selected){
+      this.gasPriceStore.setSelectedGasPrice(selected.value)
+    }
+  }
   render() {
     return (
       <div className="container container_bg">
@@ -62,6 +74,17 @@ export class ThirdStep extends React.Component {
               name={false}
               theme="solarized"
               src={this.tokenStore.jsonAddresses.slice()} />
+              <div style={{padding: "25px 0px"}}>
+                <p>Network Speed (Gas Price)</p>
+                <Select.Creatable
+                  isLoading={this.gasPriceStore.loading}
+                  value={this.gasPriceStore.selectedGasPrice}
+                  onChange={this.onGasPriceChange}
+                  loadingPlaceholder="Fetching gas Price data ..."
+                  placeholder="Please select desired network speed"
+                  options={this.gasPriceStore.gasPricesArray.slice()}
+                />
+              </div>
             <div className="send-info">
               <div className="send-info-side">
                 <div className="send-info-i">
@@ -73,7 +96,7 @@ export class ThirdStep extends React.Component {
                   <p className="send-info-amount">{this.tokenStore.defAccTokenBalance} {this.tokenStore.tokenSymbol}</p>
                 </div>
                 <div className="send-info-i">
-                  <p>Your Current fee Per tx</p>
+                  <p>Your Contract's Current fee Per tx</p>
                   <p className="send-info-amount">{this.tokenStore.currentFee} ETH</p>
                 </div>
                 <div className="send-info-i">
@@ -101,13 +124,14 @@ export class ThirdStep extends React.Component {
                   </p>
                 </div>
                 <div className="send-info-i">
-                  <p>Instant Gas Price</p>
+                  <p>Selected Network speed (Gas Price)</p>
                   <p className="send-info-amount">
-                  {this.gasPriceStore.gasPrices.fast} gwei
+                  {this.gasPriceStore.selectedGasPrice} gwei
                   </p>
                 </div>
               </div>
             </div>
+
             <Link onClick={this.onNext} className="button button_next" to='/4'>Next</Link>
           </form>
         </div>

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -6,7 +6,8 @@ import { inject, observer } from "mobx-react";
 @observer
 export class Header extends React.Component {
   render() {
-    const explorerUrl = this.props.UiStore.web3Store.explorerUrl;
+    const explorerUrl = this.props.UiStore.web3Store.explorerUrl || 'https://etherscan.io';
+
     return (
     <header className="header">
         <div className="container">

diff --git a/src/stores/gasPriceStore.js b/src/stores/gasPriceStore.js
@@ -3,6 +3,14 @@ import Web3Utils from 'web3-utils';
 
 class GasPriceStore {
   @observable gasPrices = {};
+  @observable loading = true;
+  @observable gasPricesArray = [
+    {label: 'fast', value: '21'},
+    {label: 'standard', value: '21'},
+    {label: 'slow', value: '21'},
+    {label: 'instant', value: '21'},
+  ];
+  @observable selectedGasPrice = '22'
   gasPricePromise = null;
   constructor(rootStore) {
     this.getGasPrices()
@@ -12,17 +20,28 @@ class GasPriceStore {
     this.gasPricePromise = fetch('https://gasprice.poa.network/').then((response) => {
       return response.json()
     }).then((data) => {
-      console.log(data)
+      this.gasPricesArray.map((v) => {
+        v.value = data[v.label]
+        v.label = `${v.label}: ${data[v.label]} gwei`
+        return v;
+      })
+      this.selectedGasPrice = data.fast;
       this.gasPrices = data;
+      this.loading = false;
     }).catch((e) => {
+      this.loading = true;
       console.error(e)
     })
   }
 
   @computed get standardInHex() {
-    const toWei = Web3Utils.toWei(this.gasPrices.fast.toString(), 'gwei')
+    const toWei = Web3Utils.toWei(this.selectedGasPrice.toString(), 'gwei')
     return Web3Utils.toHex(toWei)
   }
+  @action
+  setSelectedGasPrice(value) {
+    this.selectedGasPrice = value;
+  }
 
 }
 

diff --git a/src/stores/tokenStore.js b/src/stores/tokenStore.js
@@ -217,9 +217,9 @@ class TokenStore {
   }
 
   @computed get totalCostInEth(){
-    const standardGasPrice = Web3Utils.toWei(this.gasPriceStore.gasPrices.fast.toString(), 'gwei');
+    const standardGasPrice = Web3Utils.toWei(this.gasPriceStore.selectedGasPrice.toString(), 'gwei');
     const currentFeeInWei = Web3Utils.toWei(this.currentFee);
-    const tx = new BN(standardGasPrice).times(new BN('6000000'))
+    const tx = new BN(standardGasPrice).times(new BN('5000000'))
     const txFeeMiners = tx.times(new BN(this.totalNumberTx))
     const contractFee = new BN(currentFeeInWei).times(this.totalNumberTx);