From 49ba5bb1cca2a78bdbb08af25c51bdc9d9ccf6c3 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 21 Aug 2017 15:56:49 +0200
Subject: [PATCH] Update forging tab to show LSK with max 2 decimal places

---
 src/components/forging/forgedBlocks.js      |  4 ++--
 src/components/forging/forgingStats.js      |  1 +
 src/components/forging/forgingStats.test.js |  8 ++++----
 src/components/forging/forgingTitle.js      |  2 +-
 src/components/liskAmount/index.js          | 13 +++++++++++--
 src/components/liskAmount/index.test.js     |  7 +++++++
 6 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/forging/forgedBlocks.js b/src/components/forging/forgedBlocks.js
index b752e994b..bff71f4b7 100644
--- a/src/components/forging/forgedBlocks.js
+++ b/src/components/forging/forgedBlocks.js
@@ -27,8 +27,8 @@ const ForgedBlocks = props => (
             <TableCell><FormattedNumber val={block.height} /></TableCell>
             <TableCell>{block.id}</TableCell>
             <TableCell><TooltipTime label={block.timestamp} /></TableCell>
-            <TableCell><LiskAmount val={block.totalFee} /></TableCell>
-            <TableCell><LiskAmount val={block.reward} /></TableCell>
+            <TableCell><LiskAmount val={block.totalFee} roundTo={2} /></TableCell>
+            <TableCell><LiskAmount val={block.reward} roundTo={2} /></TableCell>
           </TableRow>
         ))}
       </Table>
diff --git a/src/components/forging/forgingStats.js b/src/components/forging/forgingStats.js
index 2e90dda21..6d9f67168 100644
--- a/src/components/forging/forgingStats.js
+++ b/src/components/forging/forgingStats.js
@@ -44,6 +44,7 @@ class ForgingStats extends React.Component {
                   <span className='title'> {cardObj.label} </span>
                   <span>
                     <LiskAmount val={this.props.statistics[cardObj.key]}
+                      roundTo={2}
                       /> LSK
                   </span>
                 </div>
diff --git a/src/components/forging/forgingStats.test.js b/src/components/forging/forgingStats.test.js
index 900922af6..f7194fb66 100644
--- a/src/components/forging/forgingStats.test.js
+++ b/src/components/forging/forgingStats.test.js
@@ -35,18 +35,18 @@ describe('ForgingStats', () => {
   });
 
   it('should render Card component for Last 24 hours', () => {
-    expect(wrapper.find('Card').at(0).text().trim()).to.equal('Last 24 hours 0.00321317 LSK');
+    expect(wrapper.find('Card').at(0).text().trim()).to.equal('Last 24 hours 0 LSK');
   });
 
   it('should render Card component for Last 7 days', () => {
-    expect(wrapper.find('Card').at(1).text().trim()).to.equal('Last 7 days 32.13179124 LSK');
+    expect(wrapper.find('Card').at(1).text().trim()).to.equal('Last 7 days 32.13 LSK');
   });
 
   it('should render Card component for Last 30 days', () => {
-    expect(wrapper.find('Card').at(2).text().trim()).to.equal('Last 30 days 3,213.17912423 LSK');
+    expect(wrapper.find('Card').at(2).text().trim()).to.equal('Last 30 days 3,213.18 LSK');
   });
 
   it('should render Card component for Last 365 days', () => {
-    expect(wrapper.find('Card').at(3).text().trim()).to.equal('Last 365 days 321,317.91242342 LSK');
+    expect(wrapper.find('Card').at(3).text().trim()).to.equal('Last 365 days 321,317.91 LSK');
   });
 });
diff --git a/src/components/forging/forgingTitle.js b/src/components/forging/forgingTitle.js
index a8de24a59..4c4ac38a9 100644
--- a/src/components/forging/forgingTitle.js
+++ b/src/components/forging/forgingTitle.js
@@ -21,7 +21,7 @@ class ForgingTitle extends React.Component {
               {this.props.account.delegate.username}
             </h2>
             <span>
-              <LiskAmount val={this.props.statistics.total} /> LSK Earned
+              <LiskAmount val={this.props.statistics.total} roundTo={2} /> LSK Earned
             </span>
           </div>
         </CardText>
diff --git a/src/components/liskAmount/index.js b/src/components/liskAmount/index.js
index c1fc1d340..2ceb9add7 100644
--- a/src/components/liskAmount/index.js
+++ b/src/components/liskAmount/index.js
@@ -2,7 +2,16 @@ import React from 'react';
 import { fromRawLsk } from '../../utils/lsk';
 import FormattedNumber from '../formattedNumber';
 
-const LiskValue = props => (<FormattedNumber val={parseFloat(fromRawLsk(props.val))} />);
+const roundTo = (value, places) => {
+  if (!places) {
+    return value;
+  }
+  const x = Math.pow(10, places);
+  return Math.round(value * x) / x;
+};
 
-export default LiskValue;
+const LiskAmount = props => (<FormattedNumber val={
+  roundTo(parseFloat(fromRawLsk(props.val)), props.roundTo)} />);
+
+export default LiskAmount;
 
diff --git a/src/components/liskAmount/index.test.js b/src/components/liskAmount/index.test.js
index caf0c0f75..cea1cb38f 100644
--- a/src/components/liskAmount/index.test.js
+++ b/src/components/liskAmount/index.test.js
@@ -11,4 +11,11 @@ describe('LiskAmount', () => {
     const wrapper = mount(<LiskAmount val={inputValue} />);
     expect(wrapper.text()).to.be.equal(expectedValue);
   });
+
+  it('should round to props.roundTo decimal places', () => {
+    const inputValue = '12932689.64321' * normalizeNumber;
+    const expectedValue = '12,932,689.64';
+    const wrapper = mount(<LiskAmount val={inputValue} roundTo={2} />);
+    expect(wrapper.text()).to.be.equal(expectedValue);
+  });
 });