diff --git a/src/App.js b/src/App.js index e404cbfc8..58f96725d 100644 --- a/src/App.js +++ b/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 = (
- +
) @@ -908,11 +936,26 @@ export default class App extends Component { {extraTokens} - + - + - + {/* eslint-disable-next-line jsx-a11y/accessible-emoji */} 💀 This product is currently in early alpha. Use at your own risk! 💀 @@ -957,7 +1000,6 @@ export default class App extends Component {
diff --git a/src/components/Balance.js b/src/components/Balance.js index 42df851c9..aa7021ff4 100644 --- a/src/components/Balance.js +++ b/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}) => { - {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)} ) diff --git a/src/components/SendToAddress.js b/src/components/SendToAddress.js index cad1beb75..b891d1708 100644 --- a/src/components/SendToAddress.js +++ b/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){