Update staging env

src/components/Header/Header.tsx

@@ -72,9 +72,9 @@ export const Header: React.FC<IHeader> = ({
   const navigate = useNavigate()
 
   const isMdDown = useMediaQuery(theme.breakpoints.down('md'))
+  const showRPCBelowBreakpoint = useMediaQuery('@media (max-width:1050px)')
 
   const routes = ['exchange', 'liquidity', 'portfolio', 'statistics']
-
   const otherRoutesToHighlight: Record<string, RegExp[]> = {
     liquidity: [/^liquidity\/*/],
     exchange: [/^exchange\/*/],
@@ -179,7 +179,13 @@ export const Header: React.FC<IHeader> = ({
           item
           className={classes.routers}
           wrap='nowrap'
-          sx={{ display: { xs: 'none', lg: 'block' } }}>
+          sx={{
+            display: { lg: 'block' },
+
+            '@media (max-width: 1450px)': {
+              display: 'none'
+            }
+          }}>
           {routes.map(path => (
             <Link key={`path-${path}`} to={`/${path}`} className={classes.link}>
               <NavbarButton
@@ -217,7 +223,14 @@ export const Header: React.FC<IHeader> = ({
                 />
               ) : null}
             </Box>
-            <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+            <Box
+              sx={{
+                display: { md: 'block' },
+
+                '@media (max-width: 1050px)': {
+                  display: 'none'
+                }
+              }}>
               <SelectRPCButton
                 rpc={rpc}
                 networks={networks}
@@ -251,7 +264,16 @@ export const Header: React.FC<IHeader> = ({
               ]}
               onSelect={onNetworkSelect}
             />
-            <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+            <Box
+              sx={{
+                display: {
+                  md: 'block',
+
+                  '@media (max-width: 1050px)': {
+                    display: 'none'
+                  }
+                }
+              }}>
               <SelectChainButton
                 activeChain={activeChain}
                 chains={CHAINS}
@@ -286,7 +308,16 @@ export const Header: React.FC<IHeader> = ({
           />
         </Grid>
 
-        <Grid sx={{ display: { xs: 'block', lg: 'none' } }}>
+        <Grid
+          sx={{
+            display: {
+              md: 'block',
+
+              '@media (min-width: 1450px)': {
+                display: 'none'
+              }
+            }
+          }}>
           <IconButton
             className={classes.menuButton}
             onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
@@ -312,7 +343,7 @@ export const Header: React.FC<IHeader> = ({
             }}
             onFaucet={isMdDown && typeOfNetwork === NetworkType.Testnet ? onFaucet : undefined}
             onRPC={
-              isMdDown
+              showRPCBelowBreakpoint
                 ? () => {
                     setRoutesModalOpen(false)
                     setRpcsModalOpen(true)

src/components/Header/HeaderButton/SelectNetworkButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import useStyles from './style'
 import { blurContent, unblurContent } from '@utils/uiUtils'
-import { Button } from '@mui/material'
+import { Button, useMediaQuery } from '@mui/material'
 import SelectNetwork from '@components/Modals/SelectNetwork/SelectNetwork'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import { ISelectNetwork } from '@store/consts/types'
@@ -22,6 +22,7 @@ export const SelectNetworkButton: React.FC<IProps> = ({
   const { classes } = useStyles()
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
   const [openNetworks, setOpenNetworks] = React.useState<boolean>(false)
+  const hideArrow = useMediaQuery('@media (max-width:400px)')
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget)
@@ -41,7 +42,7 @@ export const SelectNetworkButton: React.FC<IProps> = ({
         variant='contained'
         classes={{ disabled: classes.disabled }}
         disabled={disabled}
-        endIcon={<KeyboardArrowDownIcon id='downIcon' />}
+        endIcon={!hideArrow ? <KeyboardArrowDownIcon id='downIcon' /> : null}
         onClick={handleClick}>
         {name}
       </Button>

src/components/Header/style.ts

@@ -45,9 +45,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       backgroundColor: colors.invariant.black,
       borderRadius: '10px',
       transition: 'left 300ms',
-      width: 'fit-content',
-      margin: '0 12px',
-      textWrap: 'nowrap'
+      width: 'fit-content'
     },
     connectedWalletIcon: {
       minWidth: 21,
@@ -65,9 +63,6 @@ const useStyles = makeStyles()((theme: Theme) => {
       gap: 8,
       flexWrap: 'nowrap',
       alignItems: 'center',
-      [theme.breakpoints.up(1800)]: {
-        flex: '1 1 0%'
-      },
 
       [theme.breakpoints.up('lg')]: {
         minWidth: 350
@@ -78,8 +73,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       },
 
       [theme.breakpoints.down('md')]: {
-        marginLeft: 0,
-        justifyContent: 'center'
+        marginLeft: 0
       },
 
       [theme.breakpoints.down('sm')]: {
@@ -94,10 +88,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       backgroundColor: colors.invariant.component,
       borderRadius: 14,
       width: 'auto',
-      padding: 4,
-      [theme.breakpoints.down('lg')]: {
-        marginLeft: 12
-      }
+      padding: 4
     },
     buttonsLgConnected: {
       [theme.breakpoints.up('lg')]: {
@@ -135,11 +126,11 @@ const useStyles = makeStyles()((theme: Theme) => {
       }
     },
     leftSide: {
-      width: 'auto',
+      width: 'auto'
 
-      [theme.breakpoints.up(1800)]: {
-        flex: '1 1 0%'
-      }
+      // [theme.breakpoints.up(1800)]: {
+      //   flex: '1 1 0%'
+      // }
     }
   }
 })

src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx

@@ -199,9 +199,7 @@ export const ExchangeAmountInput: React.FC<IProps> = ({
         <Grid
           className={classNames(classes.balanceContainer, {
             [classes.showMaxButton]: showMaxButton
-          })}
-          // onClick={showMaxButton && !hideBalance ? onMaxClick : () => {}}>
-        >
+          })}>
           <Typography
             className={classes.BalanceTypography}
             onClick={() => actionButtons[0].onClick()}>

src/components/PopularPools/Card/Card.tsx

@@ -129,7 +129,7 @@ const Card: React.FC<ICard> = ({
                 {apy !== undefined && showAPY && (
                   <StatsLabel
                     title='APY'
-                    value={`${apy > 1000 ? '>1000%' : apy === 0 ? '-' : apy.toFixed(2) + '%'}`}
+                    value={`${apy > 1000 ? '>1000%' : apy === 0 ? '-' : Math.abs(apy).toFixed(2) + '%'}`}
                   />
                 )}
                 <StatsLabel title='Fee' value={fee + '%'} />

src/components/Stats/PoolListItem/PoolListItem.tsx

@@ -179,11 +179,11 @@ const PoolListItem: React.FC<IProps> = ({
           </Grid>
           {!isSmd && showAPY ? (
             <Typography className={classes.row}>
-              {`${apr > 1000 ? '>1000%' : apr === 0 ? '-' : apr.toFixed(2) + '%'}`}
+              {`${apr > 1000 ? '>1000%' : apr === 0 ? '-' : Math.abs(apr).toFixed(2) + '%'}`}
               <span
                 className={
                   classes.apy
-                }>{`${apy > 1000 ? '>1000%' : apy === 0 ? '' : apy.toFixed(2) + '%'}`}</span>
+                }>{`${apy > 1000 ? '>1000%' : apy === 0 ? '' : Math.abs(apy).toFixed(2) + '%'}`}</span>
             </Typography>
           ) : null}
           <Typography>{fee}%</Typography>

src/components/Stats/volumeBar/style.ts

@@ -1,52 +1,115 @@
 import { alpha } from '@mui/material'
 import { colors, typography, theme } from '@static/theme'
 import { makeStyles } from 'tss-react/mui'
-
 export const useStyles = makeStyles()(() => ({
   container: {
     maxWidth: 1072,
     width: '100%',
     backgroundColor: colors.invariant.component,
     borderRadius: 22,
-    padding: 20,
+    padding: '20px 24px',
     display: 'flex',
-    whiteSpace: 'nowrap',
-    justifyContent: 'space-between'
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    justifyContent: 'space-between',
+
+    [theme.breakpoints.down('sm')]: {
+      padding: '12px 24px',
+      gap: 8,
+      flexDirection: 'column'
+    }
   },
 
   tokenName: {
     display: 'flex',
-    whiteSpace: 'nowrap',
+    alignItems: 'center',
+    minWidth: 'auto',
+    flex: '1 1 auto',
+    gap: 4,
 
     [theme.breakpoints.down('sm')]: {
+      justifyContent: 'space-between',
+
       '& p': {
-        ...typography.caption2
+        ...typography.body2,
+        whiteSpace: 'nowrap'
       }
     },
 
     [theme.breakpoints.down('xs')]: {
       '& p': {
-        ...typography.caption4
+        whiteSpace: 'nowrap'
+      },
+      flex: '0 0 auto',
+      width: '100%',
+      justifyContent: 'center'
+    },
+
+    '&:nth-of-type(3)': {
+      [theme.breakpoints.down('md')]: {
+        width: '100%',
+        justifyContent: 'center'
+      },
+      [theme.breakpoints.down('sm')]: {
+        justifyContent: 'space-between'
+      },
+      [theme.breakpoints.up('md')]: {
+        justifyContent: 'flex-end'
+      }
+    },
+
+    '&:nth-of-type(2)': {
+      justifyContent: 'center',
+      textAlign: 'center'
+    },
+    '&:nth-of-type(1), &:nth-of-type(2)': {
+      [theme.breakpoints.down('md')]: {
+        justifyContent: 'center',
+        textAlign: 'center'
+      },
+
+      ' &:nth-of-type(3), &:nth-of-type(1), &:nth-of-type(2)': {
+        [theme.breakpoints.down('sm')]: {
+          justifyContent: 'space-between'
+        }
       }
     }
   },
 
   tokenHeader: {
     ...typography.heading4,
-    color: colors.invariant.textGrey
+    color: colors.invariant.textGrey,
+    whiteSpace: 'nowrap',
+
+    [theme.breakpoints.down('sm')]: {
+      display: 'flex',
+      flex: 1,
+      alignItems: 'center'
+    }
   },
 
   tokenContent: {
     ...typography.heading4,
     color: colors.white.main,
-    padding: '0 0 0 5px'
+    whiteSpace: 'nowrap',
+    [theme.breakpoints.down('sm')]: {
+      display: 'flex',
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+
+      '&:nth-of-type(3)': {
+        justifyContent: 'flex-end',
+        textAlign: 'center'
+      }
+    }
   },
 
   tokenLow: {
     color: colors.invariant.Error,
     fontWeight: 400
   },
-
   tokenUp: {
     color: colors.invariant.green,
     fontWeight: 400