invariant-labs · wojciech-cichocki · Oct 4, 2024 · Oct 4, 2024 · Oct 4, 2024
diff --git a/src/components/Stats/Liquidity/Liquidity.tsx b/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

diff --git a/src/components/Stats/PoolListItem/PoolListItem.tsx b/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'
@@ -62,7 +62,7 @@ const PoolListItem: React.FC<IProps> = ({
   const { classes } = useStyles()
 
   const navigate = useNavigate()
-  const isXs = useMediaQuery(theme.breakpoints.down('xs'))
+  const isSm = useMediaQuery(theme.breakpoints.down('sm'))
 
   const handleOpenPosition = () => {
     navigate(
@@ -82,9 +82,9 @@ const PoolListItem: React.FC<IProps> = ({
           container
           classes={{ container: classes.container }}
           style={hideBottomLine ? { border: 'none' } : undefined}>
-          {!isXs ? <Typography>{tokenIndex}</Typography> : null}
+          {!isSm ? <Typography>{tokenIndex}</Typography> : null}
           <Grid className={classes.imageContainer}>
-            {!isXs && (
+            {!isSm && (
               <Box className={classes.iconsWrapper}>
                 <img src={iconFrom} alt='Token from' />
                 <img src={iconTo} alt='Token to' />
@@ -96,7 +96,7 @@ const PoolListItem: React.FC<IProps> = ({
               </Typography>
             </Grid>
           </Grid>
-          {/* {!isXs ? (
+          {/* {!isSm ? (
             <Typography>
               {`${apy > 1000 ? '>1000' : apy.toFixed(2)}%`}
               <Tooltip
@@ -137,24 +137,26 @@ const PoolListItem: React.FC<IProps> = ({
             </Typography>
           ) : null} */}
           <Typography>{fee}%</Typography>
-          <Typography>{`$${formatNumbers()(volume.toString())}${showPrefix(volume)}`}</Typography>
-          <Typography>{`$${formatNumbers()(TVL.toString())}${showPrefix(TVL)}`}</Typography>
-          <Box className={classes.action}>
-            <TooltipHover text='Exchange'>
-              <button className={classes.actionButton} onClick={handleOpenSwap}>
-                <img width={32} height={32} src={icons.horizontalSwapIcon} alt={'Exchange'} />
-              </button>
-            </TooltipHover>
-            <TooltipHover text='Add position'>
-              <button className={classes.actionButton} onClick={handleOpenPosition}>
-                <img width={32} height={32} src={icons.plusIcon} alt={'Open'} />
-              </button>
-            </TooltipHover>
-          </Box>
+          <Typography>{`$${formatNumber(volume)}`}</Typography>
+          <Typography>{`$${formatNumber(TVL)}`}</Typography>
+          {!isSm && (
+            <Box className={classes.action}>
+              <TooltipHover text='Exchange'>
+                <button className={classes.actionButton} onClick={handleOpenSwap}>
+                  <img width={32} height={32} src={icons.horizontalSwapIcon} alt={'Exchange'} />
+                </button>
+              </TooltipHover>
+              <TooltipHover text='Add position'>
+                <button className={classes.actionButton} onClick={handleOpenPosition}>
+                  <img width={32} height={32} src={icons.plusIcon} alt={'Open'} />
+                </button>
+              </TooltipHover>
+            </Box>
+          )}
         </Grid>
       ) : (
         <Grid container classes={{ container: classes.container, root: classes.header }}>
-          {!isXs && (
+          {!isSm && (
             <Typography style={{ lineHeight: '11px' }}>
               N<sup>o</sup>
             </Typography>
@@ -241,7 +243,7 @@ const PoolListItem: React.FC<IProps> = ({
               <ArrowDropDownIcon className={classes.icon} />
             ) : null}
           </Typography>
-          <Typography align='right'>Action</Typography>
+          {!isSm && <Typography align='right'>Action</Typography>}
         </Grid>
       )}
     </Grid>

diff --git a/src/components/Stats/PoolListItem/style.ts b/src/components/Stats/PoolListItem/style.ts
@@ -23,13 +23,12 @@ export const useStyles = makeStyles()(() => ({
     },
 
     [theme.breakpoints.down('sm')]: {
+      gridTemplateColumns: '32.5% 17.5% 35% 15% ',
+
       '& p': {
+        justifyContent: 'flex-start',
         ...typography.caption1
       }
-    },
-
-    [theme.breakpoints.down('xs')]: {
-      gridTemplateColumns: '28% 15% 30% 25%'
     }
   },
 
@@ -72,8 +71,9 @@ export const useStyles = makeStyles()(() => ({
       display: 'block'
     },
 
-    [theme.breakpoints.down('xs')]: {
-      marginLeft: 0
+    [theme.breakpoints.down('sm')]: {
+      marginLeft: 0,
+      justifyContent: 'flex-start'
     }
   },
   icon: {

diff --git a/src/components/Stats/TokenListItem/TokenListItem.tsx b/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 {
@@ -39,7 +39,7 @@ const TokenListItem: React.FC<IProps> = ({
   const { classes } = useStyles()
   // const isNegative = priceChange < 0
 
-  const isXDown = useMediaQuery(theme.breakpoints.down('sm'))
+  const isSm = useMediaQuery(theme.breakpoints.down('sm'))
   const hideName = useMediaQuery(theme.breakpoints.down('xs'))
 
   return (
@@ -49,29 +49,30 @@ const TokenListItem: React.FC<IProps> = ({
           container
           classes={{ container: classes.container, root: classes.tokenList }}
           style={hideBottomLine ? { border: 'none' } : undefined}>
-          {!hideName && <Typography component='p'>{itemNumber}</Typography>}
+          {!hideName && !isSm && <Typography component='p'>{itemNumber}</Typography>}
           <Grid className={classes.tokenName}>
-            {!isXDown && <img src={icon} alt='Token icon'></img>}
+            {!isSm && <img src={icon} alt='Token icon'></img>}
             <Typography>
               {hideName ? symbol : name}
               {!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
           container
           style={{ color: colors.invariant.textGrey, fontWeight: 400 }}
           classes={{ container: classes.container, root: classes.header }}>
-          {!hideName && (
+          {!hideName && !isSm && (
             <Typography style={{ lineHeight: '12px' }}>
               N<sup>o</sup>
             </Typography>

diff --git a/src/components/Stats/TokenListItem/style.ts b/src/components/Stats/TokenListItem/style.ts
@@ -12,14 +12,10 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     whiteSpace: 'nowrap',
 
     [theme.breakpoints.down('sm')]: {
-      gridTemplateColumns: '5% 35% 15% 17.5% 16.5% 15%',
+      gridTemplateColumns: '30% 22.5% 32.5% 15%',
       '& p': {
-        ...typography.caption2
+        ...typography.caption1
       }
-    },
-
-    [theme.breakpoints.down('xs')]: {
-      gridTemplateColumns: '15% 25% 35% 25%'
     }
   },
 

diff --git a/src/components/Stats/Volume/Volume.tsx b/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(

diff --git a/src/components/Stats/volumeBar/VolumeBar.tsx b/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(