change numbers formatting on stats

Author: p6te

src/components/Stats/Liquidity/Liquidity.tsx

@@ -6,7 +6,7 @@ import { colors, typography } from '@static/theme'
 import { useStyles } from './style'
 import { TimeData } from '@store/reducers/stats'
 import { Grid, Typography } from '@mui/material'
-import { formatNumber, formatNumbers, showPrefix } from '@utils/utils'
+import { formatNumber } from '@utils/utils'
 
 interface LiquidityInterface {
   liquidityPercent: number
@@ -31,8 +31,7 @@ const Liquidity: React.FC<LiquidityInterface> = ({
         <Typography className={classes.liquidityHeader}>Liquidity</Typography>
         <Grid className={classes.volumePercentHeader}>
           <Typography className={classes.volumeLiquidityHeader}>
-            ${formatNumbers()(liquidityVolume.toString())}
-            {showPrefix(liquidityVolume)}
+            ${formatNumber(liquidityVolume)}
           </Typography>
           <Grid className={classes.volumeStatusContainer}>
             <Grid

src/components/Stats/PoolListItem/PoolListItem.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { theme } from '@static/theme'
 import { useStyles } from './style'
 import { Box, Grid, Typography, useMediaQuery } from '@mui/material'
-import { addressToTicker, formatNumbers, parseFeeToPathFee, showPrefix } from '@utils/utils'
+import { addressToTicker, formatNumber, parseFeeToPathFee } from '@utils/utils'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
 import { useNavigate } from 'react-router-dom'
@@ -137,8 +137,8 @@ const PoolListItem: React.FC<IProps> = ({
             </Typography>
           ) : null} */}
           <Typography>{fee}%</Typography>
-          <Typography>{`$${formatNumbers()(volume.toString())}${showPrefix(volume)}`}</Typography>
-          <Typography>{`$${formatNumbers()(TVL.toString())}${showPrefix(TVL)}`}</Typography>
+          <Typography>{`$${formatNumber(volume)}`}</Typography>
+          <Typography>{`$${formatNumber(TVL)}`}</Typography>
           {!isSm && (
             <Box className={classes.action}>
               <TooltipHover text='Exchange'>

src/components/Stats/TokenListItem/TokenListItem.tsx

@@ -4,7 +4,7 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
 import { useStyles } from './style'
 import { Grid, Typography, useMediaQuery } from '@mui/material'
-import { formatNumbers, showPrefix } from '@utils/utils'
+import { formatNumber } from '@utils/utils'
 import { SortTypeTokenList } from '@store/consts/static'
 
 interface IProps {
@@ -57,14 +57,15 @@ const TokenListItem: React.FC<IProps> = ({
               {!hideName && <span className={classes.tokenSymbol}>{` (${symbol})`}</span>}
             </Typography>
           </Grid>
-          <Typography>{`~$${formatNumbers()(price.toString())}${showPrefix(price)}`}</Typography>
+          <Typography>{`~$${formatNumber(price)}`}</Typography>
+
           {/* {!hideName && (
             <Typography style={{ color: isNegative ? colors.invariant.Error : colors.green.main }}>
               {isNegative ? `${priceChange.toFixed(2)}%` : `+${priceChange.toFixed(2)}%`}
             </Typography>
           )} */}
-          <Typography>{`$${formatNumbers()(volume.toString())}${showPrefix(volume)}`}</Typography>
-          <Typography>{`$${formatNumbers()(TVL.toString())}${showPrefix(TVL)}`}</Typography>
+          <Typography>{`$${formatNumber(volume)}`}</Typography>
+          <Typography>{`$${formatNumber(TVL)}`}</Typography>
         </Grid>
       ) : (
         <Grid

src/components/Stats/Volume/Volume.tsx

@@ -7,7 +7,7 @@ import { useStyles } from './style'
 import { TimeData } from '@store/reducers/stats'
 import { Grid, Typography, useMediaQuery } from '@mui/material'
 import { Box } from '@mui/system'
-import { formatNumber, formatNumbers, showPrefix } from '@utils/utils'
+import { formatNumber } from '@utils/utils'
 
 interface StatsInterface {
   percentVolume: number
@@ -38,10 +38,7 @@ const Volume: React.FC<StatsInterface> = ({ percentVolume, volume, data, classNa
       <Box className={classes.volumeContainer}>
         <Typography className={classes.volumeHeader}>Volume</Typography>
         <div className={classes.volumePercentContainer}>
-          <Typography className={classes.volumePercentHeader}>
-            ${formatNumbers()(volume.toString())}
-            {showPrefix(volume)}
-          </Typography>
+          <Typography className={classes.volumePercentHeader}>${formatNumber(volume)}</Typography>
           <Box className={classes.volumeStatusContainer}>
             <Box
               className={classNames(

src/components/Stats/volumeBar/VolumeBar.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import { theme } from '@static/theme'
 import { useStyles } from './style'
 import { Box, Grid, Typography, useMediaQuery } from '@mui/material'
-import { formatNumbers, showPrefix } from '@utils/utils'
+import { formatNumber } from '@utils/utils'
 
 interface Iprops {
   percentVolume: number
@@ -30,10 +30,7 @@ const VolumeBar: React.FC<Iprops> = ({
     <Grid container classes={{ container: classes.container }}>
       <Box className={classes.tokenName}>
         <Typography className={classes.tokenHeader}>Volume 24H:</Typography>
-        <Typography className={classes.tokenContent}>
-          ${formatNumbers()(volume.toString())}
-          {showPrefix(volume)}
-        </Typography>
+        <Typography className={classes.tokenContent}>${formatNumber(volume)}</Typography>
         {!isXDown && (
           <Typography
             className={classNames(
@@ -48,10 +45,7 @@ const VolumeBar: React.FC<Iprops> = ({
       </Box>
       <Box className={classes.tokenName}>
         <Typography className={classes.tokenHeader}>TVL 24H:</Typography>
-        <Typography className={classes.tokenContent}>
-          ${formatNumbers()(tvlVolume.toString())}
-          {showPrefix(tvlVolume)}
-        </Typography>
+        <Typography className={classes.tokenContent}>${formatNumber(tvlVolume)}</Typography>
         {!isXDown && (
           <Typography
             className={classNames(
@@ -64,10 +58,7 @@ const VolumeBar: React.FC<Iprops> = ({
       </Box>
       <Box className={classes.tokenName}>
         <Typography className={classes.tokenHeader}>Fees 24H:</Typography>
-        <Typography className={classes.tokenContent}>
-          ${formatNumbers()(feesVolume.toString())}
-          {showPrefix(feesVolume)}
-        </Typography>
+        <Typography className={classes.tokenContent}>${formatNumber(feesVolume)}</Typography>
         {!isXDown && (
           <Typography
             className={classNames(