Create <LiskAmount val={val} /> React component - Closes #501

src/components/account/accountComponent.js

@@ -2,7 +2,7 @@ import React from 'react';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import styles from './account.css';
 import Address from './address';
-import FormattedNumber from '../formattedNumber';
+import LiskAmount from '../liskAmount';
 import { getAccountStatus } from '../../utils/api/account';
 
 /**
@@ -56,7 +56,7 @@ class AccountComponent extends React.Component {
             <h3 className={styles.title}>Balance</h3>
             <div className={styles['value-wrapper']}>
               <p className="inner primary full hasTip">
-                <FormattedNumber val={this.props.account.balance}></FormattedNumber> Lsk
+                <LiskAmount val={this.props.account.balance} /> LSK
               </p>
               <p className="inner secondary tooltip">
                 Click to send all funds

src/components/formattedNumber/index.js

@@ -1,19 +1,12 @@
 import React from 'react';
-import BigNumber from 'bignumber.js';
 
-/**
- *
- * @param {*} num - it is a number that we want to normalize it
- * @return {string} - normalized version of input number
- */
-const normalize = value => new BigNumber(value || 0).dividedBy(new BigNumber(10).pow(8)).toFixed();
 /**
  *
  * @param {*} num - it is a number that we want to format it as formatted number
  * @return {string} - formatted version of input number
  */
 const formatNumber = (num) => {
-  let normalizeNum = parseFloat(normalize(num));
+  let normalizeNum = parseFloat(num);
   const sign = normalizeNum < 0 ? '-' : '';
   const absVal = String(parseInt(normalizeNum = Math.abs(Number(normalizeNum) || 0), 10));
   let remaining = absVal.length;

src/components/formattedNumber/index.test.js

@@ -4,23 +4,22 @@ import { shallow } from 'enzyme';
 import FormattedNumber from '../formattedNumber/index';
 
 describe('<FormattedNumber />', () => {
-  const normalizeNumber = 100000000;
   it('expect "12932689.645" to be equal "12,932,689.645"', () => {
-    const inputValue = '12932689.645' * normalizeNumber;
+    const inputValue = '12932689.645';
     const expectedValue = '12,932,689.645';
     const wrapper = shallow(<FormattedNumber val={inputValue} />);
     expect(wrapper.find('span').text()).to.be.equal(expectedValue);
   });
 
   it('expect "2500" to be equal "2,500"', () => {
-    const inputValue = '2500' * normalizeNumber;
+    const inputValue = '2500';
     const expectedValue = '2,500';
     const wrapper = shallow(<FormattedNumber val={inputValue} />);
     expect(wrapper.find('span').text()).to.be.equal(expectedValue);
   });
 
   it('expect "-78945" to be equal "-78,945"', () => {
-    const inputValue = '78945' * normalizeNumber;
+    const inputValue = '78945';
     const expectedValue = '78,945';
     const wrapper = shallow(<FormattedNumber val={inputValue} />);
     expect(wrapper.find('span').text()).to.be.equal(expectedValue);
@@ -34,7 +33,7 @@ describe('<FormattedNumber />', () => {
   });
 
   it('expect "500.12345678" to be equal "500.12345678"', () => {
-    const inputValue = '500.12345678' * normalizeNumber;
+    const inputValue = '500.12345678';
     const expectedValue = '500.12345678';
     const wrapper = shallow(<FormattedNumber val={inputValue} />);
     expect(wrapper.find('span').text()).to.be.equal(expectedValue);

src/components/liskAmount/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import BigNumber from 'bignumber.js';
+import FormattedNumber from '../formattedNumber';
+
+/**
+ *
+ * @param {*} num - it is a number that we want to normalize it
+ * @return {string} - normalized version of input number
+ */
+const normalize = value => new BigNumber(value || 0).dividedBy(new BigNumber(10).pow(8)).toFixed();
+
+const LiskValue = props => (<FormattedNumber val={parseFloat(normalize(props.val))} />);
+
+export default LiskValue;
+

src/components/liskAmount/index.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+import LiskAmount from './';
+
+describe('LiskAmount', () => {
+  const normalizeNumber = 100000000;
+  it('should normalize "12932689.645" as "12,932,689.645"', () => {
+    const inputValue = '12932689.645' * normalizeNumber;
+    const expectedValue = '12,932,689.645';
+    const wrapper = mount(<LiskAmount val={inputValue} />);
+    expect(wrapper.text()).to.be.equal(expectedValue);
+  });
+});

src/components/transactions/amount.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import styles from './transactions.css';
-import FormattedNumber from '../formattedNumber';
+import LiskAmount from '../liskAmount';
 import { TooltipWrapper } from '../timestamp';
 
 const Amount = (props) => {
   let template = null;
   let tooltipText = null;
-  const amount = <FormattedNumber val={props.value.amount}></FormattedNumber>;
+  const amount = <LiskAmount val={props.value.amount} />;
   if (props.value.type === 0 &&
     props.value.senderId === props.value.recipientId) {
     template = <span className={styles.grayButton}>{amount}</span>;

src/components/transactions/transactionRow.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import FormattedNumber from '../formattedNumber';
+import LiskAmount from '../liskAmount';
 import { TooltipTime, TooltipWrapper } from '../timestamp';
 import TransactionType from './transactionType';
 import styles from './transactions.css';
@@ -25,7 +25,7 @@ const TransactionRow = props => (
     </td>
     <td className={`${props.tableStyle.rowCell} ${styles.centerText}`}>
       <span className={styles.grayButton}>
-        <FormattedNumber val={props.value.fee}></FormattedNumber>
+        <LiskAmount val={props.value.fee} />
       </span>
     </td>
   </tr>