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 = (