[WIP] Hotfix/authorize dapp prompt

package.json

@@ -4,8 +4,8 @@
   "private": true,
   "homepage": ".",
   "dependencies": {
-    "@ledgerhq/hw-app-eth": "^4.7.3",
-    "@ledgerhq/hw-transport-u2f": "^4.7.3",
+    "@ledgerhq/hw-app-eth": "4.7.3",
+    "@ledgerhq/hw-transport-u2f": "4.7.3",
     "bluebird": "^3.5.1",
     "create-react-class": "^15.6.2",
     "hdkey": "^0.8.0",
@@ -23,5 +23,18 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "surge": "npm run build && surge ./build/ https://oasis-direct.surge.sh"
+  },
+  "babel": {
+    "plugins": [
+      [
+        "transform-runtime",
+        {
+          "regenerator": true
+        }
+      ]
+    ]
+  },
+  "devDependencies": {
+    "babel-plugin-transform-runtime": "^6.23.0"
   }
 }

src/components/App.jsx

@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
 import * as Blockchain from "../blockchainHandler";
-import { addressToBytes32, toBigNumber, toWei, fromWei, BigNumber, calculateTradePrice } from '../helpers';
+import {
+  addressToBytes32, toBigNumber, toWei, fromWei, BigNumber, calculateTradePrice,
+  currencyPairCompare
+} from '../helpers';
 import Widget from './Widget';
 import { Logo } from "./Icons";
 import FAQ from "./FAQ";
@@ -93,7 +96,7 @@ class App extends Component {
                 network = 'private';
             }
             if (!this.state.network.stopIntervals // To avoid race condition
-                && this.state.network.network !== network) {
+              && this.state.network.network !== network) {
               this.initNetwork(network);
             }
           }, () => {
@@ -158,7 +161,8 @@ class App extends Component {
           })
         }
       });
-    }, () => {});
+    }, () => {
+    });
   }
 
   componentDidMount = () => {
@@ -695,7 +699,7 @@ class App extends Component {
 
   doTrade = () => {
     const amount = this.state.trade[this.state.trade.operation === 'sellAll' ? 'amountPay' : 'amountBuy'];
-    const threshold = settings.chain[this.state.network.network].threshold[[this.state.trade.from, this.state.trade.to].sort((a, b) => a > b).join('')] * 0.01;
+    const threshold = settings.chain[this.state.network.network].threshold[[this.state.trade.from, this.state.trade.to].sort(currencyPairCompare).join('')] * 0.01;
     const limit = toWei(this.state.trade.operation === 'sellAll' ? this.state.trade.amountBuy.times(1 - threshold) : this.state.trade.amountPay.times(1 + threshold)).round(0);
     if (this.state.trade.from === 'eth') {
       this.setState(prevState => {
@@ -1178,10 +1182,23 @@ class App extends Component {
       network.stopIntervals = false;
       return {network};
     }, async () => {
-      await Blockchain.setWebClientProvider();
-      this.checkNetwork();
-      this.checkAccountsInterval = setInterval(this.checkAccounts, 1000);
-      this.checkNetworkInterval = setInterval(this.checkNetwork, 3000);
+      const isSet = await Blockchain.setWebClientProvider().catch(_ => {
+        return false;
+      });
+
+      if (isSet) {
+        this.checkNetwork();
+        this.checkAccountsInterval = setInterval(this.checkAccounts, 1000);
+        this.checkNetworkInterval = setInterval(this.checkNetwork, 3000);
+      } else {
+        this.setState(prevState => {
+          const network = {...prevState.network};
+          network.loadingAddress = false;
+          network.loadingFirstAddress = false;
+          network.stopIntervals = true;
+          return {network};
+        });
+      }
     });
   }
 
@@ -1268,30 +1285,30 @@ class App extends Component {
 
   renderWidget = () => {
     return <Widget isConnected={this.state.network.isConnected}
-            section={this.state.section}
-            network={this.state.network.network}
-            loadingAddress={this.state.network.loadingAddress}
-            loadingFirstAddress={this.state.network.loadingFirstAddress}
-            account={this.state.network.defaultAccount}
-            proxy={this.state.proxy}
-            trade={this.state.trade}
-            balances={this.state.balances}
-            showTxMessage={this.state.showTxMessage}
-            transactions={this.state.transactions}
-            setMainState={this.setMainState}
-            fasterGasPrice={this.fasterGasPrice}
-            doTrade={this.doTrade}
-            reset={this.reset}
-            calculateBuyAmount={this.calculateBuyAmount}
-            calculatePayAmount={this.calculatePayAmount}
-            cleanInputs={this.cleanInputs}
-            setWeb3WebClient={this.setWeb3WebClient}
-            hw={this.state.hw}
-            showHW={this.showHW}
-            showClientChoice={this.showClientChoice}
-            loadHWAddresses={this.loadHWAddresses}
-            selectHWAddress={this.selectHWAddress}
-            importAddress={this.importAddress}/>
+                   section={this.state.section}
+                   network={this.state.network.network}
+                   loadingAddress={this.state.network.loadingAddress}
+                   loadingFirstAddress={this.state.network.loadingFirstAddress}
+                   account={this.state.network.defaultAccount}
+                   proxy={this.state.proxy}
+                   trade={this.state.trade}
+                   balances={this.state.balances}
+                   showTxMessage={this.state.showTxMessage}
+                   transactions={this.state.transactions}
+                   setMainState={this.setMainState}
+                   fasterGasPrice={this.fasterGasPrice}
+                   doTrade={this.doTrade}
+                   reset={this.reset}
+                   calculateBuyAmount={this.calculateBuyAmount}
+                   calculatePayAmount={this.calculatePayAmount}
+                   cleanInputs={this.cleanInputs}
+                   setWeb3WebClient={this.setWeb3WebClient}
+                   hw={this.state.hw}
+                   showHW={this.showHW}
+                   showClientChoice={this.showClientChoice}
+                   loadHWAddresses={this.loadHWAddresses}
+                   selectHWAddress={this.selectHWAddress}
+                   importAddress={this.importAddress}/>
   }
 
   render = () => {

src/components/DoTrade.jsx

@@ -4,7 +4,7 @@ import { Ether, MKR, DAI, Done, AccountIcon, Attention } from './Icons';
 import Spinner from './Spinner';
 import TokenAmount from './TokenAmount';
 import Congratulation from './Congratulation';
-import { etherscanUrl, quotation, toBigNumber, toWei } from '../helpers';
+import { etherscanUrl, quotation, currencyPairCompare, toBigNumber, toWei } from '../helpers';
 
 const settings = require('../settings');
 
@@ -221,7 +221,7 @@ class DoTrade extends Component {
                   <span
                     className="label">Perhaps the market has moved, so your order could not be filled within the</span>
                   <span className="value">
-                    {settings.chain[this.props.network].threshold[[this.props.trade.from, this.props.trade.to].sort((a, b) => a > b).join('')]}% slippage limit
+                    {settings.chain[this.props.network].threshold[[this.props.trade.from, this.props.trade.to].sort(currencyPairCompare).join('')]}% slippage limit
                   </span>
                 </span>
                 </div>

src/components/SetTrade.jsx

@@ -7,7 +7,7 @@ import {
 } from './Icons';
 import Spinner from './Spinner';
 import TokenAmount from './TokenAmount';
-import { fetchETHPriceInUSD, toWei } from '../helpers'
+import { currencyPairCompare, fetchETHPriceInUSD, toWei } from '../helpers'
 import * as Blockchain from "../blockchainHandler";
 
 const settings = require('../settings');
@@ -240,7 +240,7 @@ class SetTrade extends Component {
                             </p>
                           </ReactTooltip>
                         </span>
-                        <span className="value">{settings.chain[this.props.network].threshold[[this.state.from, this.state.to].sort((a, b) => a > b).join('')]}%</span>
+                        <span className="value">{settings.chain[this.props.network].threshold[[this.state.from, this.state.to].sort(currencyPairCompare).join('')]}%</span>
                       </span>
                       <span style={{paddingTop: "4px", lineHeight: "18px"}} className="holder half holder--spread">
                       <span className="label">Gas cost</span>

src/helpers.js

@@ -145,4 +145,10 @@ export const calculateTradePrice = (tokenSell, amountSell, tokenBuy, amountBuy)
     {price: amountBuy.div(amountSell), priceUnit: `${tokenSell}/${tokenBuy}`};
 }
 
+export const currencyPairCompare = ( firstToken, secondToken ) => {
+  if ( firstToken > secondToken ) return 1;
+  if ( firstToken < secondToken ) return -1;
+  return 0;
+}
+
 export const {toBigNumber , toWei, fromWei, isAddress, BigNumber, toHex} = web3;

src/settings.json

@@ -4,7 +4,7 @@
   "chain": {
     "kovan": {
       "nodeURL" : "https://kovan.infura.io/mtXsTjGvCTFRFFHwzn1f",
-      "otc": "0x8cf1cab422a0b6b554077a361f8419cdf122a9f9",
+      "otc": "0xdb3b642ebc6ff85a3ab335cff9af2954f9215994",
       "threshold": {
         "daieth": 2,
         "daimkr": 1,
@@ -36,7 +36,7 @@
     },
     "main": {
       "nodeURL" : "https://mainnet.infura.io/mtXsTjGvCTFRFFHwzn1f",
-      "otc": "0x14fbca95be7e99c15cc2996c6c9d841e54b79425",
+      "otc": "0xb7ac09c2c0217b07d7c103029b4918a2c401eecb",
       "threshold": {
         "daieth": 2,
         "daimkr": 1,

src/web3.js

@@ -7,32 +7,32 @@ import TrezorSubProvider from './vendor/trezor-subprovider';
 
 const settings = require('./settings');
 
-export const getCurrentProviderName = () => {
-  if (!window.web3 || typeof window.web3.currentProvider === 'undefined')
-    return '';
+export const getCurrentProviderName = ( provider = window.web3.currentProvider ) => {
+  if (provider.isMetaMask)
+    return "metamask";
 
-  if (window.web3.currentProvider.isMetaMask)
-    return 'metamask';
+  if (provider.isTrust)
+    return "trust";
 
-  if (window.web3.currentProvider.isTrust)
-    return 'trust';
+  if (window.web3.currentProvider.isStatus)
+    return "status";
 
   if (typeof window.SOFA !== 'undefined')
     return 'coinbase';
 
   if (typeof window.__CIPHER__ !== 'undefined')
     return 'cipher';
 
-  if (window.web3.currentProvider.constructor.name === 'EthereumProvider')
+  if (provider.constructor.name === 'EthereumProvider')
     return 'mist';
 
-  if (window.web3.currentProvider.constructor.name === 'Web3FrameProvider')
+  if (provider.constructor.name === 'Web3FrameProvider')
     return 'parity';
 
-  if (window.web3.currentProvider.host && window.web3.currentProvider.host.indexOf('infura') !== -1)
+  if (provider.host && provider.host.indexOf('infura') !== -1)
     return 'infura';
 
-  if (window.web3.currentProvider.host && window.web3.currentProvider.host.indexOf('localhost') !== -1)
+  if (provider.host && provider.host.indexOf('localhost') !== -1)
     return 'localhost';
 
   return 'other';
@@ -59,35 +59,53 @@ class Web3Extended extends Web3 {
         this.currentProvider.addProvider(hwWalletSubProvider);
         this.currentProvider.addProvider(new RpcSource({rpcUrl: settings.chain[network].nodeURL}));
         this.currentProvider.start();
-        this.useLogs = false;
         resolve(true);
-      } catch(e) {
+      } catch (e) {
         reject(e);
       }
     });
-  }
+  };
+
+  bindProvider = provider => {
+    this.setProvider(provider);
+    this.currentProvider.name = getCurrentProviderName(provider);
+  };
 
   setWebClientProvider = () => {
     this.stop();
     return new Promise(async (resolve, reject) => {
       try {
-        if (window.web3) {
-          this.setProvider(window.web3.currentProvider);
-        } else {
-          alert('error');
+        // Checking if the the provider is compliant with the new EIP1102 Standard.
+        if (window.ethereum) { //following the new EIP1102 standard
+          window.ethereum.enable().then(
+            () => {
+              this.bindProvider(window.ethereum);
+              resolve(true);
+            },
+            () => {
+              reject();
+            });
+
+          return;
         }
-        this.useLogs = true;
-        this.currentProvider.name = getCurrentProviderName();
-        resolve(true);
-      } catch(e) {
+
+        if (window.web3) { // This is the case for Provider Injectors which don't follow EIP1102 ( parity-extension ? )
+          this.bindProvider(window.web3.currentProvider);
+          resolve(true);
+
+          return;
+        }
+
+        reject();
+      } catch (e) {
         reject(e);
       }
     });
   }
 }
 
 const web3 = new Web3Extended();
-web3.BigNumber.config({EXPONENTIAL_AT:[-18,21]});
+web3.BigNumber.config({EXPONENTIAL_AT: [-18, 21]});
 window.web3Provider = web3;
 
 export default web3;