diff --git a/package-lock.json b/package-lock.json index 1029c507f..278d4028c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -344,6 +344,11 @@ "negotiator": "0.6.1" } }, + "accounting": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/accounting/-/accounting-0.4.1.tgz", + "integrity": "sha1-h91BA+/39EYPHhhvXGd+1s9WaIM=" + }, "acorn": { "version": "4.0.13", "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz", @@ -4073,6 +4078,16 @@ "cssom": "0.3.2" } }, + "currency-formatter": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/currency-formatter/-/currency-formatter-1.4.2.tgz", + "integrity": "sha512-rQ5HB3DenCZwfVPdpVTuVcAORodVO0VoqIbjhdUSuy0sE2b9jBdCaVKbA355NUc2KhPbu5ojHs3WypuEwPLfNg==", + "requires": { + "accounting": "0.4.1", + "locale-currency": "0.0.1", + "object-assign": "4.1.1" + } + }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -13074,6 +13089,11 @@ "object-assign": "4.1.1" } }, + "locale-currency": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/locale-currency/-/locale-currency-0.0.1.tgz", + "integrity": "sha1-yeFaIv9XW0tLuUekv5KsI2vR/ps=" + }, "locate-path": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", diff --git a/package.json b/package.json index 1227b82b7..441ccbc6e 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "classnames": "^2.2.5", "clone": "^2.1.1", "copy-to-clipboard": "^3.0.8", + "currency-formatter": "^1.4.2", "debounce": "^1.0.0", "debounce-stream": "^2.0.0", "deep-extend": "^0.5.0", diff --git a/test/unit/balance-formatter-test.js b/test/unit/balance-formatter-test.js new file mode 100644 index 000000000..0fdb7f618 --- /dev/null +++ b/test/unit/balance-formatter-test.js @@ -0,0 +1,17 @@ +const assert = require('assert') +const currencyFormatter = require('currency-formatter') +const infuraConversion = require('../../ui/app/infura-conversion.json') + +describe.only('currencyFormatting', function () { + it('be able to format any infura currency', function (done) { + const number = 10000 + + infuraConversion.objects.forEach((conversion) => { + const code = conversion.quote.code.toUpperCase() + const result = currencyFormatter.format(number, { code }) + assert.ok(result, `Currency ${code} formatted as ${result}`) + }) + + done() + }) +}) diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js index d591ab455..f6ca6dd26 100644 --- a/ui/app/components/balance-component.js +++ b/ui/app/components/balance-component.js @@ -4,6 +4,7 @@ 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 { formatBalance, generateBalanceObject } = require('../util') @@ -97,9 +98,13 @@ BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatS const shouldNotRenderFiat = fiatDisplayNumber === 'N/A' || Number(fiatDisplayNumber) === 0 if (shouldNotRenderFiat) return null + const display = currencyFormatter.format(Number(fiatDisplayNumber), { + code: fiatSuffix.toUpperCase() + }) + return h('div.fiat-amount', { style: {}, - }, `${fiatPrefix}${fiatDisplayNumber} ${fiatSuffix}`) + }, display) } BalanceComponent.prototype.getTokenBalance = function (formattedBalance, shorten) {