consistent number formatting based on system locale

src/app/components/Balance.jsx

@@ -1,9 +1,8 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { AppContext } from '../store/createContext'
-import { locale } from '../util/moneyFormatter'
-import { formatCurrency } from '@coingecko/cryptoformat'
 import posed, { PoseGroup } from 'react-pose'
+import { AppContext } from '../store/createContext'
+import { cryptoFormatter } from '../../utils'
 import './Balance.css'
 import { fadeIn } from './Animations'
 
@@ -23,10 +22,7 @@ export default class Balance extends PureComponent {
     return (
       <PoseGroup animateOnMount>
         <Animation key={currency} className="number">
-          {formatCurrency(balance[currency], currency.toUpperCase(), locale)
+          {cryptoFormatter(balance[currency], currency)}
-            .replace(/BTC/, 'Ƀ')
-            .replace(/ETH/, 'Ξ')
-            .replace(/OCEAN/, 'Ọ')}
         </Animation>
       </PoseGroup>
     )

src/app/components/Ticker.jsx

@@ -1,8 +1,7 @@
 import React, { PureComponent } from 'react'
-import { AppContext } from '../store/createContext'
-import { locale } from '../util/moneyFormatter'
-import { formatCurrency } from '@coingecko/cryptoformat'
 import posed, { PoseGroup } from 'react-pose'
+import { AppContext } from '../store/createContext'
+import { cryptoFormatter } from '../../utils'
 import './Ticker.css'
 import { fadeIn } from './Animations'
 
@@ -37,10 +36,7 @@ export default class Ticker extends PureComponent {
                 disabled={needsConfig}
                 style={key === currency && !needsConfig ? activeStyle : {}}
               >
-                {formatCurrency(prices[key], key.toUpperCase(), locale)
+                {cryptoFormatter(prices[key], key)}
-                  .replace(/BTC/, 'Ƀ')
-                  .replace(/ETH/, 'Ξ')
-                  .replace(/OCEAN/, 'Ọ')}
               </button>
             </Item>
           ))}

src/app/components/Touchbar.js

@@ -1,23 +1,20 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { TouchBar, Button } from 'react-touchbar-electron'
-import { locale } from '../util/moneyFormatter'
+import { cryptoFormatter } from '../../utils'
-import { formatCurrency } from '@coingecko/cryptoformat'
 import { AppContext } from '../store/createContext'
 
 const TouchbarItems = ({ prices, currency, toggleCurrencies, accentColor }) => (
   <>
     <Button
-      label={formatCurrency(1, 'OCEAN', locale).replace(/OCEAN/, 'Ọ')}
+      label={cryptoFormatter(1, 'ocean')}
       onClick={() => toggleCurrencies('ocean')}
       backgroundColor={currency === 'ocean' ? accentColor : '#141414'}
     />
     {Object.keys(prices).map(key => (
       <Button
         key={key}
-        label={formatCurrency(prices[key], key.toUpperCase(), locale)
+        label={cryptoFormatter(prices[key], key)}
-          .replace(/BTC/, 'Ƀ')
-          .replace(/ETH/, 'Ξ')}
         onClick={() => toggleCurrencies(key)}
         backgroundColor={
           currency !== 'ocean' && currency === key ? accentColor : '#141414'

src/app/util/moneyFormatter.js

@@ -1,9 +0,0 @@
-export const locale = navigator.language.split('-')[0]
-// export const locale = 'de'
-
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
-export const numberFormatter = number =>
-  new Intl.NumberFormat(locale, {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 4
-  }).format(number)

src/utils.js

@@ -1,4 +1,5 @@
-const { shell } = require('electron')
+const { app, shell } = require('electron')
+const { formatCurrency } = require('@coingecko/cryptoformat')
 
 const openUrl = url => {
   shell.openExternal(url)
@@ -13,4 +14,41 @@ const rgbaToHex = color => {
   return '#' + r + g + b
 }
 
-module.exports = { openUrl, rgbaToHex }
+const locale =
+  typeof navigator !== 'undefined' ? navigator.language : app.getLocale()
+
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
+const numberFormatter = value =>
+  new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 4
+  }).format(value)
+
+const formatOcean = value => {
+  const numberformatted = new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 4,
+    style: 'currency',
+    currency: 'EUR' // fake currency symbol to replace later
+  }).format(value)
+
+  return numberformatted.replace(/EUR/, 'Ọ').replace(/€/, 'Ọ')
+}
+
+const cryptoFormatter = (value, currency) => {
+  if (currency === 'ocean') {
+    return formatOcean(value)
+  } else {
+    return formatCurrency(value, currency.toUpperCase(), locale.split('-')[0])
+      .replace(/BTC/, 'Ƀ')
+      .replace(/ETH/, 'Ξ')
+  }
+}
+
+module.exports = {
+  openUrl,
+  rgbaToHex,
+  locale,
+  numberFormatter,
+  cryptoFormatter
+}