Merge pull request #191 from leapdao/fix/currency-calculations

Fix currency calculation timing

src/App.js

@@ -128,9 +128,9 @@ export default class App extends Component {
       ethprice: 0.00,
       hasUpdateOnce: false,
       possibleNewPrivateKey: '',
-      exchangeRate: {
-        USD: 0.00
-      }
+      // NOTE: USD in exchangeRate is undefined, such that any result using this
+      // number becomes NaN intentionally until it's defined.
+      exchangeRate: {}
     };
     this.alertTimeout = null;
 
@@ -156,18 +156,30 @@ export default class App extends Component {
     this.setPossibleNewPrivateKey = this.setPossibleNewPrivateKey.bind(this)
   }
 
-  currencyDisplay = (amount)=>{
-    let { exchangeRate } = this.state
-    let locale = localStorage.getItem('i18nextLng')
-    let balance = Math.floor(amount * 100) / 100
-
-    let symbol = localStorage.getItem('currency') || Object.keys(exchangeRate)[0];
-    let rate = Object.values(exchangeRate)[0];
-    return new Intl.NumberFormat(locale, { style: 'currency', currency: symbol, maximumFractionDigits: 2 }).format(this.convertExchangeRate(rate, balance))
+  // NOTE: This function is for _displaying_ a currency value to a user. It
+  // adds a currency unit to the beginning or end of the number!
+  currencyDisplay = amount => {
+    // NOTE: For some reason, this function seems to take very long.
+    const { exchangeRate } = this.state
+    const locale = localStorage.getItem('i18nextLng') 
+    const symbol = localStorage.getItem('currency') || Object.keys(exchangeRate)[0];
+    const convertedAmount = this.convertExchangeRate(amount);
+
+    return new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: symbol,
+      maximumFractionDigits: 2 
+    }).format(convertedAmount)
   }
 
-  convertExchangeRate = (rate, amount)=>{
-    return (parseFloat(amount) * rate)
+  // NOTE: This function is for telling a computer the converted value between
+  // two currencies. Please do not use this function to display values to
+  // users but use `currencyDisplay`.
+  convertExchangeRate = amount => {
+    const { exchangeRate } = this.state
+    const rate = Object.values(exchangeRate)[0];
+
+    return amount * rate;
   }
 
   parseAndCleanPath(path){
@@ -292,6 +304,9 @@ export default class App extends Component {
     }
     interval = setInterval(this.poll,1500)
     intervalLong = setInterval(this.longPoll,45000)
+    // NOTE: We query once before starting the interval to define the value
+    // for the UI, as it needs to be readily available for the user.
+    this.queryExchangeWithNativeCurrency(CONFIG.CURRENCY.EXCHANGE_RATE_QUERY);
     exchangeRatesQueryTimer = setInterval(this.queryExchangeWithNativeCurrency, CONFIG.CURRENCY.EXCHANGE_RATE_QUERY)
     setTimeout(this.longPoll,150)
 
@@ -359,13 +374,22 @@ export default class App extends Component {
 
   queryExchangeWithNativeCurrency() {
     let currency = localStorage.getItem('currency') || CONFIG.CURRENCY.DEFAULT_CURRENCY
-    fetch(`https://min-api.cryptocompare.com/data/price?fsym=DAI&tsyms=${currency}`)
-      .then(response => response.json())
-      .then(response => {
-        this.setState({
-          'exchangeRate': response
+    if (currency === "USD") {
+      // NOTE: 1 DAI === 1 USD. Veritas in numeris! :)
+      this.setState({
+        exchangeRate: {
+          USD: 1
+        }
+      });
+    } else {
+      fetch(`https://min-api.cryptocompare.com/data/price?fsym=DAI&tsyms=${currency}`)
+        .then(response => response.json())
+        .then(response => {
+          this.setState({
+            'exchangeRate': response
+          })
         })
-      })
+    }
   }
 
   setPossibleNewPrivateKey(value){
@@ -797,12 +821,16 @@ export default class App extends Component {
                   />
                 )
 
-                let selected = "xDai"
                 let extraTokens = ""
 
                 let defaultBalanceDisplay = (
                   <div>
-                    <Balance icon={pdai} selected={false} text={"PDAI"} amount={this.state.xdaiBalance} address={account} currencyDisplay={this.currencyDisplay} />
+                    <Balance
+                      icon={pdai}
+                      text={"PDAI"}
+                      amount={this.state.xdaiBalance}
+                      address={account}
+                      currencyDisplay={this.currencyDisplay} />
                   </div>
                 )
 
@@ -908,11 +936,26 @@ export default class App extends Component {
                       <Card>
                         {extraTokens}
 
-                        <Balance icon={pdai} selected={selected} text={"PDAI"} amount={this.state.xdaiBalance} address={account} currencyDisplay={this.currencyDisplay}/>
+                        <Balance
+                          icon={pdai}
+                          text={"PDAI"} 
+                          amount={this.state.xdaiBalance}
+                          address={account}
+                          currencyDisplay={this.currencyDisplay}/>
 
-                        <Balance icon={dai} selected={selected} text={"DAI"} amount={this.state.daiBalance} address={account} currencyDisplay={this.currencyDisplay}/>
+                        <Balance
+                          icon={dai}
+                          text={"DAI"}
+                          amount={this.state.daiBalance}
+                          address={account}
+                          currencyDisplay={this.currencyDisplay}/>
 
-                        <Balance icon={eth} selected={selected} text={"ETH"} amount={parseFloat(this.state.ethBalance) * parseFloat(this.state.ethprice)} address={account} currencyDisplay={this.currencyDisplay}/>
+                        <Balance
+                          icon={eth}
+                          text={"ETH"}
+                          amount={parseFloat(this.state.ethBalance) * parseFloat(this.state.ethprice)}
+                          address={account}
+                          currencyDisplay={this.currencyDisplay}/>
 
                         {/* eslint-disable-next-line jsx-a11y/accessible-emoji */}
                         <Warning>💀 This product is currently in early alpha. Use at your own risk! 💀</Warning>
@@ -957,7 +1000,6 @@ export default class App extends Component {
                           <div>
                             <Balance
                               icon={eth}
-                              selected={selected}
                               text={"ETH"}
                               amount={parseFloat(this.state.ethBalance) * parseFloat(this.state.ethprice)}
                               currencyDisplay={this.currencyDisplay}
@@ -1059,6 +1101,7 @@ export default class App extends Component {
                           changeView={this.changeView}
                           setReceipt={this.setReceipt}
                           changeAlert={this.changeAlert}
+                          convertExchangeRate={this.convertExchangeRate}
                           currencyDisplay={this.currencyDisplay}
                         />
                       </Card>

src/components/Balance.js

@@ -1,15 +1,11 @@
 import React from 'react';
 import { Flex, Text, Image } from "rimble-ui";
 
-export  default ({icon, text, selected, amount, currencyDisplay}) => {
+export  default ({icon, text, amount, currencyDisplay}) => {
 
   let opacity = 1
-  if(text === selected){
-    opacity=0.95
-  }
 
-  if(isNaN(amount) || typeof amount === "undefined"){
-    amount = 0.00
+  if(isNaN(amount)){
     opacity = 0.25
   }
 
@@ -23,7 +19,11 @@ export  default ({icon, text, selected, amount, currencyDisplay}) => {
       </Flex>
 
       <Text fontSize={4}>
-        {currencyDisplay(amount)}
+
+      {/* NOTE: Sometimes the exchangeRate to fiat wasn't loaded yet and hence
+        * amount can become NaN. In this case, we simply pass 0 to
+        *  currencyDisplay.*/}
+        {isNaN(amount) ? currencyDisplay(0) : currencyDisplay(amount)}
       </Text>
     </Flex>
   )

src/components/SendToAddress.js

@@ -119,9 +119,9 @@ export default class SendToAddress extends React.Component {
 
   send = async () => {
     let { toAddress, amount } = this.state;
-    let {currencyDisplay} = this.props
+    let { convertExchangeRate, currencyDisplay } = this.props
 
-    amount = currencyDisplay(amount)
+    amount = convertExchangeRate(amount);
     console.log("CONVERTED TO DOLLAR AMOUNT",amount)
 
     if(this.state.canSend){