From ad57010354d2f6e79eb795fd9129b05b300c062d Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Fri, 21 Jul 2017 11:51:20 +0200
Subject: [PATCH] Create <LiskAmount val={val} /> React component - Closes #501

---
 src/components/account/accountComponent.js    |  4 ++--
 src/components/formattedNumber/index.js       |  9 +--------
 src/components/formattedNumber/index.test.js  |  9 ++++-----
 src/components/liskAmount/index.js            | 15 +++++++++++++++
 src/components/liskAmount/index.test.js       | 14 ++++++++++++++
 src/components/transactions/amount.js         |  4 ++--
 src/components/transactions/transactionRow.js |  4 ++--
 7 files changed, 40 insertions(+), 19 deletions(-)
 create mode 100644 src/components/liskAmount/index.js
 create mode 100644 src/components/liskAmount/index.test.js

diff --git a/src/components/account/accountComponent.js b/src/components/account/accountComponent.js
index 303c363c1..b7c99db20 100644
--- a/src/components/account/accountComponent.js
+++ b/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.balance}></FormattedNumber> Lsk
+                <LiskAmount val={this.props.balance} /> LSK
               </p>
               <p className="inner secondary tooltip">
                 Click to send all funds
diff --git a/src/components/formattedNumber/index.js b/src/components/formattedNumber/index.js
index ff53370b9..fdf55dfe8 100644
--- a/src/components/formattedNumber/index.js
+++ b/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;
diff --git a/src/components/formattedNumber/index.test.js b/src/components/formattedNumber/index.test.js
index fd1f6e1f5..5f5bf1f3e 100644
--- a/src/components/formattedNumber/index.test.js
+++ b/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);
diff --git a/src/components/liskAmount/index.js b/src/components/liskAmount/index.js
new file mode 100644
index 000000000..eaaa4cd4d
--- /dev/null
+++ b/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;
+
diff --git a/src/components/liskAmount/index.test.js b/src/components/liskAmount/index.test.js
new file mode 100644
index 000000000..c93bac2b3
--- /dev/null
+++ b/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 render "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);
+  });
+});
diff --git a/src/components/transactions/amount.js b/src/components/transactions/amount.js
index 98eab6c11..b6f82793a 100644
--- a/src/components/transactions/amount.js
+++ b/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>;
diff --git a/src/components/transactions/transactionRow.js b/src/components/transactions/transactionRow.js
index adada99ff..0cdde1837 100644
--- a/src/components/transactions/transactionRow.js
+++ b/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>