chore(webapp): format labels

edenia · Aug 8, 2023 · 7eb9569 · 7eb9569
1 parent 94bfd20
commit 7eb9569
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 12 deletions.
diff --git a/webapp/src/components/SimpleDataCard/index.js b/webapp/src/components/SimpleDataCard/index.js
@@ -19,13 +19,14 @@ const SimpleDataCard = ({
   children,
 }) => {
   const classes = useStyles()
+  const isNotLoading = !loading ?? !!value
 
   return (
     <div className={header ? classes.cardHeader : classes.cardGrow}>
       <Card className={classes.cardShadow}>
         <CardContent className={classes.cards}>
           {title && <Typography>{title}</Typography>}
-          {!loading ? (
+          {isNotLoading ? (
             <Typography
               component="p"
               variant="h6"

diff --git a/webapp/src/routes/EVMDashboard/index.js b/webapp/src/routes/EVMDashboard/index.js
@@ -3,6 +3,7 @@ import { useTheme } from '@mui/material/styles'
 import { useTranslation } from 'react-i18next'
 import { makeStyles } from '@mui/styles'
 
+import { formatWithThousandSeparator } from '../../utils'
 import SimpleDataCard from '../../components/SimpleDataCard'
 import { eosConfig, evmConfig } from 'config'
 
@@ -34,12 +35,12 @@ const EVMDashboard = () => {
       <div className={`${classes.container} ${classes.cardsContainer}`}>
         <SimpleDataCard
           title={t('lastBlock')}
-          value={EVMStats?.last_block || 0}
+          value={formatWithThousandSeparator(EVMStats?.last_block) || 0}
           loading={loading}
         />
         <SimpleDataCard
           title={t('totalTxs')}
-          value={EVMStats?.transactions_count || 0}
+          value={formatWithThousandSeparator(EVMStats?.transactions_count) || 0}
           loading={loading}
         />
       </div>
@@ -93,17 +94,23 @@ const EVMDashboard = () => {
         />
         <SimpleDataCard
           title={t('avgTX')}
-          value={EVMStats?.daily_transaction_count || 0}
+          value={
+            formatWithThousandSeparator(EVMStats?.daily_transaction_count) || 0
+          }
           loading={loading}
         />
         <SimpleDataCard
           title={t('totalIncoming').replace('(TOKEN)', eosConfig.tokenSymbol)}
-          value={EVMStats?.incoming_tlos_count || 0}
+          value={
+            formatWithThousandSeparator(EVMStats?.incoming_tlos_count) || 0
+          }
           loading={loading}
         />
         <SimpleDataCard
           title={t('totalOutgoing').replace('(TOKEN)', eosConfig.tokenSymbol)}
-          value={EVMStats?.outgoing_tlos_count || 0}
+          value={
+            formatWithThousandSeparator(EVMStats?.outgoing_tlos_count) || 0
+          }
           loading={loading}
         />
         <SimpleDataCard
@@ -114,17 +121,24 @@ const EVMDashboard = () => {
         />
         <SimpleDataCard
           title={t('totalWallets')}
-          value={EVMStats?.wallets_created_count || 'N/A'}
+          value={
+            formatWithThousandSeparator(EVMStats?.wallets_created_count) ||
+            'N/A'
+          }
           loading={loading}
         />
         <SimpleDataCard
           title={t('gasPrice')}
-          value={EVMStats?.gas_price || 'N/A'}
+          value={
+            EVMStats?.gas_price
+              ? formatWithThousandSeparator(EVMStats?.gas_price, 1) + ' Gwei'
+              : 'N/A'
+          }
           loading={loading}
         />
         <SimpleDataCard
           title={t('avgGasUsage')}
-          value={EVMStats?.avg_gas_used || 0}
+          value={formatWithThousandSeparator(EVMStats?.avg_gas_used) || 0}
           loading={loading}
         />
       </div>

diff --git a/webapp/src/routes/EVMDashboard/useEVMstate.js b/webapp/src/routes/EVMDashboard/useEVMstate.js
@@ -10,7 +10,7 @@ import {
 } from '../../gql'
 import eosApi from '../../utils/eosapi'
 import ethApi from '../../utils/ethapi'
-import { formatWithThousandSeparator, rangeOptions } from '../../utils'
+import { rangeOptions } from '../../utils'
 import { evmConfig } from 'config'
 
 const useEVMState = (theme, t) => {
@@ -158,7 +158,7 @@ const useEVMState = (theme, t) => {
       const lastBlock = await ethApi.getLastBlock()
       const stats = {
         wallets_created_count: amount,
-        gas_price: formatWithThousandSeparator(gasPrice / 10 ** 9, 1) + ' Gwei',
+        gas_price: gasPrice / 10 ** 9,
         last_block: lastBlock,
       }
 

diff --git a/webapp/src/utils/ethapi.js b/webapp/src/utils/ethapi.js
@@ -13,7 +13,7 @@ const queryEthApi = async method => {
       jsonrpc: '2.0',
     })
 
-    return parseInt(result)
+    return parseInt(result) || result
   } catch (error) {}
 }