Create toFixedIfLarger function, unit test, and use in app.

common/containers/Tabs/Swap/components/currentRates.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import translate from 'translations';
 import PropTypes from 'prop-types';
+import { toFixedIfLarger } from 'utils/formatters';
 
 export default class CurrentRates extends Component {
   constructor(props) {
@@ -48,7 +49,9 @@ export default class CurrentRates extends Component {
                 name="ETHBTCAmount"
               />
               <span>
-                ETH = {(this.state.ETHBTCAmount * this.props.ETHBTC).toFixed(
+                ETH ={' '}
+                {toFixedIfLarger(
+                  this.state.ETHBTCAmount * this.props.ETHBTC,
                   6
                 )}{' '}
                 BTC
@@ -62,7 +65,9 @@ export default class CurrentRates extends Component {
                 name="ETHREPAmount"
               />
               <span>
-                ETH = {(this.state.ETHREPAmount * this.props.ETHREP).toFixed(
+                ETH ={' '}
+                {toFixedIfLarger(
+                  this.state.ETHREPAmount * this.props.ETHREP,
                   6
                 )}{' '}
                 REP
@@ -78,7 +83,9 @@ export default class CurrentRates extends Component {
                 name="BTCETHAmount"
               />
               <span>
-                BTC = {(this.state.BTCETHAmount * this.props.BTCETH).toFixed(
+                BTC ={' '}
+                {toFixedIfLarger(
+                  this.state.BTCETHAmount * this.props.BTCETH,
                   6
                 )}{' '}
                 ETH
@@ -92,7 +99,9 @@ export default class CurrentRates extends Component {
                 name="BTCREPAmount"
               />
               <span>
-                BTC = {(this.state.BTCREPAmount * this.props.BTCREP).toFixed(
+                BTC ={' '}
+                {toFixedIfLarger(
+                  this.state.BTCREPAmount * this.props.BTCREP,
                   6
                 )}{' '}
                 REP

common/containers/Tabs/Swap/components/yourInformation.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { toFixedIfLarger } from 'utils/formatters';
 
 export default class YourInformation extends Component {
   constructor(props) {
@@ -49,19 +50,19 @@ export default class YourInformation extends Component {
         <section className="order-info-wrap row">
           <div className="col-sm-4 order-info">
             <h4>
-              {' '}{originAmount.toFixedIfLarger(6)} {originKind}{' '}
+              {' '}{toFixedIfLarger(originAmount, 6)} {originKind}{' '}
             </h4>
             <p>Amount to send</p>
           </div>
           <div className="col-sm-4 order-info">
             <h4>
-              {' '}{destinationAmount.toFixedIfLarger(6)} {destinationKind}{' '}
+              {' '}{toFixedIfLarger(destinationAmount, 6)} {destinationKind}{' '}
             </h4>
             <p>Amount to receive</p>
           </div>
           <div className="col-sm-4 order-info">
             <h4>
-              {' '}{this.computedOriginDestinationRatio().toFixedIfLarger(6)}{' '}
+              {' '}{toFixedIfLarger(this.computedOriginDestinationRatio(), 6)}{' '}
               {originKind}/{destinationKind}{' '}
             </h4>
             <p>Your rate</p>

common/index.jsx

@@ -56,11 +56,3 @@ renderRoot(Root);
 if (module.hot) {
   module.hot.accept();
 }
-
-Number.prototype.toFixedIfLarger = function(fixedAmount: number) {
-  if (this > fixedAmount) {
-    return this.toFixed(fixedAmount);
-  } else {
-    return this;
-  }
-};

common/utils/formatters.js

@@ -0,0 +1,27 @@
+//flow
+
+// https://stackoverflow.com/questions/9539513/is-there-a-reliable-way-in-javascript-to-obtain-the-number-of-decimal-places-of
+const decimalPlaces = (function() {
+  function isInt(n) {
+    return (
+      typeof n === 'number' && parseFloat(n) == parseInt(n, 10) && !isNaN(n)
+    );
+  }
+  return function(n) {
+    let a = Math.abs(n);
+    let c = a,
+      count = 1;
+    while (!isInt(c) && isFinite(c)) {
+      c = a * Math.pow(10, count++);
+    }
+    return count - 1;
+  };
+})();
+
+export function toFixedIfLarger(number: number, fixedSize: number = 6): string {
+  if (decimalPlaces(number) > fixedSize) {
+    return number.toFixed(fixedSize);
+  } else {
+    return String(number);
+  }
+}

spec/extensions.spec.js

@@ -1,10 +0,0 @@
-describe('Number.prototype.toFixedIfLarger', () => {
-  it('true', () => {
-    expect(true);
-  });
-  // TODO - figure out why toFixedIfLarger is not in scope
-  //   it('should fix number to decimal place because number decimal is larger than input', () => {
-  //   const exNumber = 0.0123;
-  //   expect(exNumber.toFixedIfLarger(2) === 0.01);
-  // });
-});

spec/utils/formatters.spec.js

@@ -0,0 +1,17 @@
+import { toFixedIfLarger } from '../../common/utils/formatters';
+
+describe('toFixedIfLarger', () => {
+  it('should return same value if decimal isnt longer than default', () => {
+    const numExample = 7.002;
+    expect(toFixedIfLarger(numExample)).toEqual(String(numExample));
+  });
+
+  it('should return shortened value rounded up if decimal is longer than default', () => {
+    const numExample = 7.1234567;
+    expect(toFixedIfLarger(numExample)).toEqual(String(7.123457));
+  });
+  it('should return shortened value if decimal is longer than passed fixedSize', () => {
+    const numExample = 7.12345678;
+    expect(toFixedIfLarger(numExample, 2)).toEqual(String(7.12));
+  });
+});