♻️ Make fees be formatted based on locale

LiskHQ · Aug 15, 2019 · 6614ce1 · 6614ce1
1 parent 0be3922
commit 6614ce1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/src/components/send/form/form.js b/src/components/send/form/form.js
@@ -14,7 +14,7 @@ import AutoSuggest from '../autoSuggest';
 import Spinner from '../../spinner/spinner';
 import Tooltip from '../../toolbox/tooltip/tooltip';
 import links from '../../../constants/externalLinks';
-import { fromRawLsk, toRawLsk } from '../../../utils/lsk';
+import { fromRawLsk, toRawLsk, formatBasedOnLocale } from '../../../utils/lsk';
 import fees from '../../../constants/fees';
 import Feedback from '../../toolbox/feedback/feedback';
 import CircularProgress from '../../toolbox/circularProgress/circularProgress';
@@ -26,6 +26,7 @@ import { tokenMap } from '../../../constants/tokens';
 import * as btcTransactionsAPI from '../../../utils/api/btc/transactions';
 import Icon from '../../toolbox/icon';
 import Box from '../../toolbox/box';
+import i18n from '../../../i18n';
 
 class Form extends React.Component {
   // eslint-disable-next-line max-statements
@@ -449,10 +450,15 @@ class Form extends React.Component {
         </span>
       );
     }
+    const fee = formatBasedOnLocale({
+      value: fromRawLsk(fields.processingSpeed.txFee),
+      locale: i18n.language,
+    });
+
     return (
       <span>
         {!this.validateAmountField(value)
-          ? `${fromRawLsk(fields.processingSpeed.txFee)} ${token}`
+          ? `${fee} ${token}`
           : t('Invalid amount')}
       </span>
     );
@@ -522,7 +528,12 @@ class Form extends React.Component {
 
             { token !== 'BTC' ? (
               <span className={styles.amountHint}>
-                {t('+ Transaction fee {{fee}} LSK', { fee: fromRawLsk(fees.send) })}
+                {t('+ Transaction fee {{fee}} LSK', {
+                  fee: formatBasedOnLocale({
+                    value: fromRawLsk(fees.send),
+                    locale: i18n.language,
+                  }),
+                })}
                 <Tooltip
                   className="showOnTop"
                   title={t('Transaction fee')}

diff --git a/src/utils/lsk.js b/src/utils/lsk.js
@@ -1,4 +1,6 @@
 import BigNumber from 'bignumber.js';
+import numeral from 'numeral';
+import 'numeral/locales';
 
 BigNumber.config({ ERRORS: false });
 
@@ -9,3 +11,12 @@ export const fromRawLsk = value => (
 export const toRawLsk = value => (
   new BigNumber(value * new BigNumber(10).pow(8)).decimalPlaces(0).toNumber()
 );
+
+export const formatBasedOnLocale = ({
+  value,
+  locale = 'en',
+  format = '0,0.[0000000000000000]',
+}) => {
+  numeral.locale(locale);
+  return numeral(parseFloat(value, 10)).format(format);
+};
diff --git a/src/utils/lsk.test.js b/src/utils/lsk.test.js
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import { fromRawLsk, toRawLsk } from './lsk';
+import { fromRawLsk, toRawLsk, formatBasedOnLocale } from './lsk';
 
 describe('lsk', () => {
   describe('fromRawLsk', () => {
@@ -21,4 +21,19 @@ describe('lsk', () => {
       expect(toRawLsk(0)).to.be.equal(0);
     });
   });
+
+  describe('formatBasedOnLocale', () => {
+    it('should format to EN by default', () => {
+      const data = { value: 1.23 };
+      expect(formatBasedOnLocale(data)).to.be.equal('1.23');
+    });
+
+    it('should format correctly to DE', () => {
+      const data = {
+        value: 1.23,
+        locale: 'de',
+      };
+      expect(formatBasedOnLocale(data)).to.be.equal('1,23');
+    });
+  });
 });