Merge pull request #3853 from MetaMask/i3580-InternationalizeCurrency

Internationalize currency

4 files changed, 77 insertions, 16 deletions

diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index d591ab455..e31552f2d 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -4,6 +4,8 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenBalance = require('./token-balance')
 const Identicon = require('./identicon')
+const currencyFormatter = require('currency-formatter')
+const currencies = require('currency-formatter/currencies')
 
 const { formatBalance, generateBalanceObject } = require('../util')
 
@@ -97,9 +99,17 @@ BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatS
   const shouldNotRenderFiat = fiatDisplayNumber === 'N/A' || Number(fiatDisplayNumber) === 0
   if (shouldNotRenderFiat) return null
 
+  const upperCaseFiatSuffix = fiatSuffix.toUpperCase()
+
+  const display = currencies.find(currency => currency.code === upperCaseFiatSuffix)
+    ? currencyFormatter.format(Number(fiatDisplayNumber), {
+      code: upperCaseFiatSuffix,
+    })
+    : `${fiatPrefix}${fiatDisplayNumber} ${upperCaseFiatSuffix}`
+
   return h('div.fiat-amount', {
     style: {},
-  }, `${fiatPrefix}${fiatDisplayNumber} ${fiatSuffix}`)
+  }, display)
 }
 
 BalanceComponent.prototype.getTokenBalance = function (formattedBalance, shorten) {
@@ -117,5 +127,9 @@ BalanceComponent.prototype.getFiatDisplayNumber = function (formattedBalance, co
 
   const splitBalance = formattedBalance.split(' ')
 
-  return (Number(splitBalance[0]) * conversionRate).toFixed(2)
+  const convertedNumber = (Number(splitBalance[0]) * conversionRate)
+  const wholePart = Math.floor(convertedNumber)
+  const decimalPart = convertedNumber - wholePart
+
+  return wholePart + Number(decimalPart.toPrecision(2))
 }
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 3ee614a2a..16dbd273b 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -23,6 +23,8 @@ const {
 const GasFeeDisplay = require('../send/gas-fee-display-v2')
 const SenderToRecipient = require('../sender-to-recipient')
 const NetworkDisplay = require('../network-display')
+const currencyFormatter = require('currency-formatter')
+const currencies = require('currency-formatter/currencies')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes')
@@ -275,6 +277,16 @@ ConfirmSendEther.prototype.getData = function () {
   }
 }
 
+ConfirmSendEther.prototype.convertToRenderableCurrency = function (value, currencyCode) {
+  const upperCaseCurrencyCode = currencyCode.toUpperCase()
+
+  return currencies.find(currency => currency.code === upperCaseCurrencyCode)
+    ? currencyFormatter.format(Number(value), {
+      code: upperCaseCurrencyCode,
+    })
+    : value
+}
+
 ConfirmSendEther.prototype.editTransaction = function (txMeta) {
   const { editTransaction, history } = this.props
   editTransaction(txMeta)
@@ -319,6 +331,9 @@ ConfirmSendEther.prototype.render = function () {
     ? 'Increase your gas fee to attempt to overwrite and speed up your transaction'
     : 'Please review your transaction.'
 
+  const convertedAmountInFiat = this.convertToRenderableCurrency(amountInFIAT, currentCurrency)
+  const convertedTotalInFiat = this.convertToRenderableCurrency(totalInFIAT, currentCurrency)
+
   // This is from the latest master
   // It handles some of the errors that we are not currently handling
   // Leaving as comments fo reference
@@ -365,7 +380,7 @@ ConfirmSendEther.prototype.render = function () {
         //   `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
         // ]),
 
-        h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]),
+        h('h3.flex-center.confirm-screen-send-amount', [`${convertedAmountInFiat}`]),
         h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
         h('div.flex-center.confirm-memo-wrapper', [
           h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
@@ -412,7 +427,7 @@ ConfirmSendEther.prototype.render = function () {
             ]),
 
             h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
+              h('div.confirm-screen-row-info', `${convertedTotalInFiat} ${currentCurrency.toUpperCase()}`),
               h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
             ]),
 
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 37130a1cc..656093b3d 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -27,6 +27,8 @@ const {
   calcTokenAmount,
 } = require('../../token-util')
 const classnames = require('classnames')
+const currencyFormatter = require('currency-formatter')
+const currencies = require('currency-formatter/currencies')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
@@ -318,10 +320,12 @@ ConfirmSendToken.prototype.renderHeroAmount = function () {
   const txParams = txMeta.txParams || {}
   const { memo = '' } = txParams
 
+  const convertedAmountInFiat = this.convertToRenderableCurrency(fiatAmount, currentCurrency)
+
   return fiatAmount
     ? (
       h('div.confirm-send-token__hero-amount-wrapper', [
-        h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`),
+        h('h3.flex-center.confirm-screen-send-amount', `${convertedAmountInFiat}`),
         h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency),
         h('div.flex-center.confirm-memo-wrapper', [
           h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
@@ -369,6 +373,9 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
   const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
   const { fiat: fiatGas, token: tokenGas } = this.getGasFee()
 
+  const totalInFIAT = fiatAmount && fiatGas && addCurrencies(fiatAmount, fiatGas)
+  const convertedTotalInFiat = this.convertToRenderableCurrency(totalInFIAT, currentCurrency)
+
   return fiatAmount && fiatGas
     ? (
       h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
@@ -378,7 +385,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
         ]),
 
         h('div.confirm-screen-section-column', [
-          h('div.confirm-screen-row-info', `${addCurrencies(fiatAmount, fiatGas)} ${currentCurrency}`),
+          h('div.confirm-screen-row-info', `${convertedTotalInFiat} ${currentCurrency}`),
           h('div.confirm-screen-row-detail', `${addCurrencies(tokenAmount, tokenGas || '0')} ${symbol}`),
         ]),
       ])
@@ -413,6 +420,16 @@ ConfirmSendToken.prototype.renderErrorMessage = function (message) {
     : null
 }
 
+ConfirmSendToken.prototype.convertToRenderableCurrency = function (value, currencyCode) {
+  const upperCaseCurrencyCode = currencyCode.toUpperCase()
+
+  return currencies.find(currency => currency.code === upperCaseCurrencyCode)
+    ? currencyFormatter.format(Number(value), {
+      code: upperCaseCurrencyCode,
+    })
+    : value
+}
+
 ConfirmSendToken.prototype.render = function () {
   const txMeta = this.gatherTxMeta()
   const {
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 819fee0a0..a7bd5d7ea 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -3,6 +3,8 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const CurrencyInput = require('../currency-input')
 const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
+const currencyFormatter = require('currency-formatter')
+const currencies = require('currency-formatter/currencies')
 
 module.exports = CurrencyDisplay
 
@@ -53,12 +55,32 @@ CurrencyDisplay.prototype.getValueToRender = function () {
     })
 }
 
+CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValue) {
+  const { primaryCurrency, convertedCurrency, conversionRate } = this.props
+
+  let convertedValue = conversionUtil(nonFormattedValue, {
+    fromNumericBase: 'dec',
+    fromCurrency: primaryCurrency,
+    toCurrency: convertedCurrency,
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+  convertedValue = Number(convertedValue).toFixed(2)
+
+  const upperCaseCurrencyCode = convertedCurrency.toUpperCase()
+
+  return currencies.find(currency => currency.code === upperCaseCurrencyCode)
+    ? currencyFormatter.format(Number(convertedValue), {
+      code: upperCaseCurrencyCode,
+    })
+    : convertedValue
+}
+
 CurrencyDisplay.prototype.render = function () {
   const {
     className = 'currency-display',
     primaryBalanceClassName = 'currency-display__input',
     convertedBalanceClassName = 'currency-display__converted-value',
-    conversionRate,
     primaryCurrency,
     convertedCurrency,
     readOnly = false,
@@ -68,14 +90,7 @@ CurrencyDisplay.prototype.render = function () {
 
   const valueToRender = this.getValueToRender()
 
-  let convertedValue = conversionUtil(valueToRender, {
-    fromNumericBase: 'dec',
-    fromCurrency: primaryCurrency,
-    toCurrency: convertedCurrency,
-    numberOfDecimals: 2,
-    conversionRate,
-  })
-  convertedValue = Number(convertedValue).toFixed(2)
+  const convertedValueToRender = this.getConvertedValueToRender(valueToRender)
 
   return h('div', {
     className,
@@ -108,7 +123,7 @@ CurrencyDisplay.prototype.render = function () {
 
     h('div', {
       className: convertedBalanceClassName,
-    }, `${convertedValue} ${convertedCurrency.toUpperCase()}`),
+    }, `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`),
 
   ])