Fix: comma and dot separators for nums in Dashboard footer and Funding (#587)

* Fix: comma and dot separators for nums in Dashboard footer and Funding

* Chore: remove unnecessary .decimalPlaces

new-lamassu-admin/src/pages/Dashboard/Footer/Footer.js

@@ -62,26 +62,19 @@ const Footer = () => {
 
     const avgOfAskBid = new BigNumber(
       (cashInNoCommission + cashOutNoCommission) / 2
-    )
+    ).toFormat(2)
-      .decimalPlaces(2)
-      .toNumber()
     const cashIn = new BigNumber(
       parseFloat(
         R.path(['cryptoRates', 'withCommissions', key, 'cashIn'])(data)
       )
-    )
+    ).toFormat(2)
-      .decimalPlaces(2)
-      .toNumber()
     const cashOut = new BigNumber(
       parseFloat(
         R.path(['cryptoRates', 'withCommissions', key, 'cashOut'])(data)
       )
-    )
+    ).toFormat(2)
-      .decimalPlaces(2)
-      .toNumber()
 
     const localeFiatCurrency = data.config.locale_fiatCurrency
-    const localeLanguage = data.config.locale_languages[0]
 
     return (
       <Grid key={key} item xs={3}>
@@ -91,23 +84,17 @@ const Footer = () => {
         <div className={classes.headerLabels}>
           <div className={classes.headerLabel}>
             <TxInIcon />
-            <Label2>{` ${cashIn.toLocaleString(
+            <Label2>{` ${cashIn} ${localeFiatCurrency}`}</Label2>
-              localeLanguage
-            )} ${localeFiatCurrency}`}</Label2>
           </div>
           <div className={classnames(classes.headerLabel, classes.txOutMargin)}>
             <TxOutIcon />
-            <Label2>{` ${cashOut.toLocaleString(
+            <Label2>{` ${cashOut} ${localeFiatCurrency}`}</Label2>
-              localeLanguage
-            )} ${localeFiatCurrency}`}</Label2>
           </div>
         </div>
         <Label2
           className={
             classes.tickerLabel
-          }>{`${tickerName}: ${avgOfAskBid.toLocaleString(
+          }>{`${tickerName}: ${avgOfAskBid} ${localeFiatCurrency}`}</Label2>
-          localeLanguage
-        )} ${localeFiatCurrency}`}</Label2>
       </Grid>
     )
   }

new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js

@@ -114,30 +114,28 @@ const SystemPerformance = () => {
   }
 
   const getFiatVolume = () =>
-    new BigNumber(R.sum(getFiats(transactionsToShow)))
+    new BigNumber(R.sum(getFiats(transactionsToShow))).toFormat(2)
-      .decimalPlaces(2)
-      .toNumber()
 
   const getProfit = transactions => {
     const cashInFees = R.sum(mapToFee(transactions))
     const commissionFees = R.reduce(reducer, 0, transactions)
 
     return new BigNumber(commissionFees + cashInFees)
-      .decimalPlaces(2)
-      .toNumber()
   }
 
   const getPercentChange = () => {
-    const thisTimePeriodProfit = getProfit(transactionsToShow)
+    const thisTimePeriodProfit = getProfit(transactionsToShow).toNumber()
-    const previousTimePeriodProfit = getProfit(transactionsLastTimePeriod)
+    const previousTimePeriodProfit = getProfit(
+      transactionsLastTimePeriod
+    ).toNumber()
 
     if (thisTimePeriodProfit === previousTimePeriodProfit) return 0
     if (previousTimePeriodProfit === 0) return 100
 
-    return Math.round(
+    return new BigNumber(
-      (100 * (thisTimePeriodProfit - previousTimePeriodProfit)) /
+      ((thisTimePeriodProfit - previousTimePeriodProfit) * 100) /
-        Math.abs(previousTimePeriodProfit)
+        previousTimePeriodProfit
-    )
+    ).toFormat(2)
   }
 
   const getDirectionPercent = () => {
@@ -207,7 +205,7 @@ const SystemPerformance = () => {
               </Label2>
               <div className={classes.profitContainer}>
                 <div className={classes.profitLabel}>
-                  {`${getProfit(transactionsToShow)} ${
+                  {`${getProfit(transactionsToShow).toFormat(2)} ${
                     data?.config.locale_fiatCurrency
                   }`}
                 </div>

new-lamassu-admin/src/pages/Funding.js

@@ -5,6 +5,7 @@ import classnames from 'classnames'
 import gql from 'graphql-tag'
 import moment from 'moment'
 import QRCode from 'qrcode.react'
+import * as R from 'ramda'
 import React, { useState } from 'react'
 
 import TableLabel from 'src/components/TableLabel'
@@ -16,7 +17,6 @@ import {
   Info1,
   Info2,
   Info3,
-  Mono,
   Label1,
   Label3
 } from 'src/components/typography'
@@ -108,9 +108,10 @@ const Funding = () => {
   }
 
   const { data: fundingResponse } = useQuery(GET_FUNDING)
+  const funding = R.path(['funding'])(fundingResponse) ?? []
 
-  if (fundingResponse?.funding?.length && !selected) {
+  if (funding.length && !selected) {
-    setSelected(fundingResponse?.funding[0])
+    setSelected(funding[0])
   }
 
   const itemRender = (it, active) => {
@@ -129,7 +130,7 @@ const Funding = () => {
         {!it.errorMsg && (
           <>
             <div className={classnames(itemClass)}>
-              {it.fiatConfirmedBalance} {it.fiatCode}
+              {formatNumber(it.fiatConfirmedBalance)} {it.fiatCode}
             </div>
             <div className={classnames(itemClass)}>
               {it.confirmedBalance} {it.cryptoCode}
@@ -140,7 +141,7 @@ const Funding = () => {
     )
   }
 
-  const pendingTotal = getPendingTotal(fundingResponse?.funding || [])
+  const pendingTotal = getPendingTotal(funding)
   const signIfPositive = num => (num >= 0 ? '+' : '')
 
   return (
@@ -151,19 +152,19 @@ const Funding = () => {
       </div>
       <div className={classes.wrapper}>
         <Sidebar
-          data={fundingResponse?.funding}
+          data={funding}
           isSelected={isSelected}
           onClick={setSelected}
           displayName={it => it.display}
           itemRender={itemRender}>
-          {fundingResponse?.funding && fundingResponse?.funding?.length && (
+          {funding.length && (
             <div className={classes.total}>
               <Label1 className={classes.totalTitle}>
                 Total Crypto Balance
               </Label1>
               <Info1 noMargin>
-                {getConfirmedTotal(fundingResponse.funding)}
+                {getConfirmedTotal(funding)}
-                {fundingResponse.funding[0].fiatCode}
+                {funding[0].fiatCode}
               </Info1>
               <Label1 className={classes.totalPending}>
                 ({signIfPositive(pendingTotal)} {pendingTotal} pending)
@@ -208,7 +209,7 @@ const Funding = () => {
 
               <H3 className={classes.topSpacer}>Address</H3>
               <div className={classes.addressWrapper}>
-                <Mono className={classes.address}>
+                <div className={classes.mono}>
                   <strong>
                     <CopyToClipboard buttonClassname={classes.copyToClipboard}>
                       {formatAddress(
@@ -217,7 +218,7 @@ const Funding = () => {
                       )}
                     </CopyToClipboard>
                   </strong>
-                </Mono>
+                </div>
               </div>
             </div>
 

new-lamassu-admin/src/pages/Funding.styles.js

@@ -8,7 +8,7 @@ import {
   comet
 } from 'src/styling/variables'
 
-const { label1 } = typographyStyles
+const { label1, mono } = typographyStyles
 
 export default {
   wrapper: {
@@ -91,5 +91,10 @@ export default {
     paddingTop: 6,
     paddingLeft: 15,
     marginRight: -11
+  },
+  mono: {
+    extend: mono,
+    width: 375,
+    margin: `${spacer * 1.5}px ${spacer * 3}px`
   }
 }