feat(i18n): use local currency display rules

Use `intl.formattedNumber` to display currency values to ensure that
currencies are displayed using the formatting rules that match the
user's locale.

.eslintrc

@@ -50,6 +50,7 @@
     "camelcase": 0,
     "curly": ["error", "all"],
     "react/require-default-props": 0,
+    "react/style-prop-object": 0,
     "max-len": ["error", { "code": 120, "ignoreUrls": true }],
     "import/no-extraneous-dependencies": 0,
     "no-cond-assign": ["error", "except-parens"],

app/components/Activity/Invoice/Invoice.js

@@ -6,7 +6,7 @@ import Isvg from 'react-inlinesvg'
 import Value from 'components/Value'
 import checkmarkIcon from 'icons/check_circle.svg'
 
-import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedNumber, FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
 import messages from './messages'
 
 import styles from '../Activity.scss'
@@ -61,12 +61,11 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa
         />
         <i> {currencyName}</i>
       </span>
-      <span>
-        <span>
-          {currentTicker[ticker.fiatTicker].symbol}
-          {btc.convert('sats', 'fiat', invoice.value, currentTicker[ticker.fiatTicker].last)}
-        </span>
-      </span>
+      <FormattedNumber
+        currency={ticker.fiatTicker}
+        style="currency"
+        value={btc.convert('sats', 'fiat', invoice.value, currentTicker[ticker.fiatTicker].last)}
+      />
     </div>
   </div>
 )

app/components/Activity/Payment/Payment.js

@@ -6,7 +6,7 @@ import zap from 'icons/zap.svg'
 import { btc } from 'lib/utils'
 import Value from 'components/Value'
 
-import { FormattedTime, injectIntl } from 'react-intl'
+import { FormattedNumber, FormattedTime, injectIntl } from 'react-intl'
 import messages from './messages'
 
 import styles from '../Activity.scss'
@@ -63,10 +63,11 @@ const Payment = ({
           />
           <i> {currencyName}</i>
         </span>
-        <span className="hint--bottom" data-hint={intl.formatMessage({ ...messages.fee })}>
-          {currentTicker[ticker.fiatTicker].symbol}
-          {btc.convert('sats', 'fiat', payment.value, currentTicker[ticker.fiatTicker].last)}
-        </span>
+        <FormattedNumber
+          currency={ticker.fiatTicker}
+          style="currency"
+          value={btc.convert('sats', 'fiat', payment.value, currentTicker[ticker.fiatTicker].last)}
+        />
       </div>
     </div>
   )

app/components/Activity/Transaction/Transaction.js

@@ -6,7 +6,7 @@ import link from 'icons/link.svg'
 import { btc } from 'lib/utils'
 import Value from 'components/Value'
 
-import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedNumber, FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
 import messages from './messages'
 
 import styles from '../Activity.scss'
@@ -61,10 +61,16 @@ const Transaction = ({
         />
         <i> {currencyName}</i>
       </span>
-      <span className="hint--bottom" data-hint={intl.formatMessage({ ...messages.fee })}>
-        {currentTicker[ticker.fiatTicker].symbol}
-        {btc.convert('sats', 'fiat', transaction.amount, currentTicker[ticker.fiatTicker].last)}
-      </span>
+      <FormattedNumber
+        currency={ticker.fiatTicker}
+        style="currency"
+        value={btc.convert(
+          'sats',
+          'fiat',
+          transaction.amount,
+          currentTicker[ticker.fiatTicker].last
+        )}
+      />
     </div>
   </div>
 )

app/components/Contacts/Network/Network.js

@@ -11,7 +11,7 @@ import search from 'icons/search.svg'
 
 import Value from 'components/Value'
 
-import { FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl'
 import messages from './messages'
 
 import SuggestedNodes from '../SuggestedNodes'
@@ -179,9 +179,16 @@ class Network extends Component {
                 currentTicker={currentTicker}
                 fiatTicker={ticker.fiatTicker}
               />
-              {` ≈ ${currentTicker[ticker.fiatTicker].symbol}${
-                fiatAmount ? fiatAmount.toLocaleString() : ''
-              }`}
+              {Boolean(fiatAmount) && (
+                <span>
+                  {'≈ '}
+                  <FormattedNumber
+                    currency={ticker.fiatTicker}
+                    style="currency"
+                    value={fiatAmount}
+                  />
+                </span>
+              )}
             </span>
           </section>
           <section

app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js

@@ -6,7 +6,7 @@ import FaExclamationCircle from 'react-icons/lib/fa/exclamation-circle'
 
 import AmountInput from 'components/AmountInput'
 
-import { FormattedMessage } from 'react-intl'
+import { FormattedNumber, FormattedMessage } from 'react-intl'
 import messages from './messages'
 
 import styles from './SubmitChannelForm.scss'
@@ -145,8 +145,14 @@ class SubmitChannelForm extends React.Component {
               </ul>
             </div>
           </div>
-
-          <div className={styles.fiatAmount}>{`≈ ${contactFormFiatAmount || 0} ${fiatTicker}`}</div>
+          <div className={styles.fiatAmount}>
+            {'≈ '}
+            <FormattedNumber
+              currency={fiatTicker}
+              style="currency"
+              value={contactFormFiatAmount || 0}
+            />
+          </div>
         </section>
 
         <section className={styles.submit}>

app/components/Form/Pay/Pay.js

@@ -9,7 +9,7 @@ import FaAngleDown from 'react-icons/lib/fa/angle-down'
 import { btc } from 'lib/utils'
 import AmountInput from 'components/AmountInput'
 
-import { FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl'
 import messages from './messages'
 
 import styles from './Pay.scss'
@@ -184,7 +184,14 @@ class Pay extends Component {
               </div>
             </div>
 
-            <div className={styles.fiatAmount}>{`≈ ${fiatAmount || 0} ${ticker.fiatTicker}`}</div>
+            <div className={styles.fiatAmount}>
+              {'≈ '}
+              <FormattedNumber
+                currency={ticker.fiatTicker}
+                style="currency"
+                value={fiatAmount || 0}
+              />
+            </div>
 
             <section
               className={`${styles.errorMessage} ${styles.amount} ${

app/components/Form/Request/Request.js

@@ -8,7 +8,7 @@ import FaAngleDown from 'react-icons/lib/fa/angle-down'
 import { btc } from 'lib/utils'
 import AmountInput from 'components/AmountInput'
 
-import { FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl'
 import messages from './messages'
 
 import styles from './Request.scss'
@@ -81,9 +81,14 @@ const Request = ({
             </div>
           </div>
 
-          <div className={styles.fiatAmount}>{`≈ ${requestFiatAmount || 0} ${
-            ticker.fiatTicker
-          }`}</div>
+          <div className={styles.fiatAmount}>
+            {'≈ '}
+            <FormattedNumber
+              currency={ticker.fiatTicker}
+              style="currency"
+              value={requestFiatAmount}
+            />
+          </div>
         </section>
 
         <section className={styles.memo}>

app/components/Wallet/Wallet.js

@@ -12,7 +12,7 @@ import Settings from 'components/Settings'
 import zapLogo from 'icons/zap_logo.svg'
 import qrCode from 'icons/qrcode.svg'
 
-import { FormattedMessage } from 'react-intl'
+import { FormattedNumber, FormattedMessage } from 'react-intl'
 import messages from './messages'
 
 import styles from './Wallet.scss'
@@ -98,10 +98,16 @@ const Wallet = ({
                   </section>
                 </span>
               </h1>
-              <span className={styles.usdValue}>
-                ≈ {currentTicker[ticker.fiatTicker].symbol}
-                {fiatAmount ? fiatAmount.toLocaleString() : ''}
-              </span>
+              {Boolean(fiatAmount) && (
+                <span>
+                  {'≈ '}
+                  <FormattedNumber
+                    currency={ticker.fiatTicker}
+                    style="currency"
+                    value={fiatAmount}
+                  />
+                </span>
+              )}
             </div>
           </div>
         </div>

test/unit/components/Form/Pay.spec.js

@@ -19,7 +19,8 @@ const defaultProps = {
   crypto: '',
   nodes: [],
   ticker: {
-    currency: 'btc'
+    currency: 'btc',
+    fiatTicker: 'USD'
   },
 
   isOnchain: false,

test/unit/components/Form/Request.spec.js

@@ -11,7 +11,8 @@ configure({ adapter: new Adapter() })
 const defaultProps = {
   requestform: {},
   ticker: {
-    currency: 'btc'
+    currency: 'btc',
+    fiatTicker: 'USD'
   },
 
   currentCurrencyFilters: [],