1 files changed, 33 insertions, 17 deletions
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 819fee0a0..90fb2b66c 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,
@@ -67,37 +89,31 @@ CurrencyDisplay.prototype.render = function () {
   } = this.props
 
   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,
     style: {
       borderColor: inError ? 'red' : null,
     },
-    onClick: () => this.currencyInput.focus(),
+    onClick: () => this.currencyInput && this.currencyInput.focus(),
   }, [
 
     h('div.currency-display__primary-row', [
 
       h('div.currency-display__input-wrapper', [
 
-        h(CurrencyInput, {
+        h(readOnly ? 'input' : CurrencyInput, {
           className: primaryBalanceClassName,
           value: `${valueToRender}`,
           placeholder: '0',
           readOnly,
-          onInputChange: newValue => {
-            handleChange(this.getAmount(newValue))
-          },
-          inputRef: input => { this.currencyInput = input },
+          ...(!readOnly ? {
+            onInputChange: newValue => {
+              handleChange(this.getAmount(newValue))
+            },
+            inputRef: input => { this.currencyInput = input },
+          } : {}),
         }),
 
         h('span.currency-display__currency-symbol', primaryCurrency),
@@ -108,7 +124,7 @@ CurrencyDisplay.prototype.render = function () {
 
     h('div', {
       className: convertedBalanceClassName,
-    }, `${convertedValue} ${convertedCurrency.toUpperCase()}`),
+    }, `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`),
 
   ])