Merge pull request #817 from invariant-labs/bug-fixes-2

fix various bugs
invariant-labs · Dec 18, 2024 · 3f2d80b · 3f2d80b
2 parents a02cdf2 + e644555
commit 3f2d80b
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 131 deletions.
diff --git a/src/components/PopularPools/Card/StatsLabel/style.ts b/src/components/PopularPools/Card/StatsLabel/style.ts
@@ -20,7 +20,7 @@ export const useStyles = makeStyles()(() => ({
     ...typography.caption4,
     color: colors.invariant.green,
     textShadow: '0px 0px 5px rgba(46, 224, 154, 1)',
-    fontWeight: 700,
+    fontWeight: 500,
     fontSize: 20
   }
 }))
diff --git a/src/components/Stats/PoolList/PoolList.tsx b/src/components/Stats/PoolList/PoolList.tsx
@@ -131,61 +131,63 @@ const PoolList: React.FC<PoolListInterface> = ({
   const pages = Math.ceil(data.length / 10)
 
   return (
-    <div className={classNames({ [classes.loadingOverlay]: isLoading })}>
-      <Grid container direction='column' classes={{ root: classes.container }}>
-        <>
-          <PoolListItem
-            displayType='header'
-            onSort={setSortType}
-            sortType={sortType}
-            network={network}
-          />
-          {data.length > 0 || isLoading ? (
-            paginator(page).map((element, index) => (
-              <PoolListItem
-                displayType='token'
-                tokenIndex={index + 1 + (page - 1) * 10}
-                symbolFrom={element.symbolFrom}
-                symbolTo={element.symbolTo}
-                iconFrom={element.iconFrom}
-                iconTo={element.iconTo}
-                volume={element.volume}
-                TVL={element.TVL}
-                // lockedX={element.lockedX}
-                // lockedY={element.lockedY}
-                // liquidityX={element.liquidityX}
-                // liquidityY={element.liquidityY}
-                // isLocked={element.lockedX > 0 || element.lockedY > 0}
-                fee={element.fee}
-                apy={element.apy}
-                hideBottomLine={pages === 1 && index + 1 === data.length}
-                apyData={element.apyData}
-                key={index}
-                addressFrom={element.addressFrom}
-                addressTo={element.addressTo}
-                network={network}
-                isUnknownFrom={element.isUnknownFrom}
-                isUnknownTo={element.isUnknownTo}
-                poolAddress={element.poolAddress}
-                copyAddressHandler={copyAddressHandler}
-              />
-            ))
-          ) : (
-            <NotFoundPlaceholder title='No pools found...' />
-          )}
-          {pages > 1 ? (
-            <Grid className={classes.pagination}>
-              <PaginationList
-                pages={pages}
-                defaultPage={1}
-                handleChangePage={handleChangePagination}
-                variant='flex-end'
-              />
-            </Grid>
-          ) : null}
-        </>
-      </Grid>
-    </div>
+    <Grid
+      container
+      direction='column'
+      classes={{ root: classes.container }}
+      className={classNames({ [classes.loadingOverlay]: isLoading })}>
+      <>
+        <PoolListItem
+          displayType='header'
+          onSort={setSortType}
+          sortType={sortType}
+          network={network}
+        />
+        {data.length > 0 || isLoading ? (
+          paginator(page).map((element, index) => (
+            <PoolListItem
+              displayType='token'
+              tokenIndex={index + 1 + (page - 1) * 10}
+              symbolFrom={element.symbolFrom}
+              symbolTo={element.symbolTo}
+              iconFrom={element.iconFrom}
+              iconTo={element.iconTo}
+              volume={element.volume}
+              TVL={element.TVL}
+              // lockedX={element.lockedX}
+              // lockedY={element.lockedY}
+              // liquidityX={element.liquidityX}
+              // liquidityY={element.liquidityY}
+              // isLocked={element.lockedX > 0 || element.lockedY > 0}
+              fee={element.fee}
+              apy={element.apy}
+              hideBottomLine={pages === 1 && index + 1 === data.length}
+              apyData={element.apyData}
+              key={index}
+              addressFrom={element.addressFrom}
+              addressTo={element.addressTo}
+              network={network}
+              isUnknownFrom={element.isUnknownFrom}
+              isUnknownTo={element.isUnknownTo}
+              poolAddress={element.poolAddress}
+              copyAddressHandler={copyAddressHandler}
+            />
+          ))
+        ) : (
+          <NotFoundPlaceholder title='No pools found...' />
+        )}
+        {pages > 1 ? (
+          <Grid className={classes.pagination}>
+            <PaginationList
+              pages={pages}
+              defaultPage={1}
+              handleChangePage={handleChangePagination}
+              variant='flex-end'
+            />
+          </Grid>
+        ) : null}
+      </>
+    </Grid>
   )
 }
 export default PoolList
diff --git a/src/components/Stats/PoolListItem/PoolListItem.tsx b/src/components/Stats/PoolListItem/PoolListItem.tsx
@@ -69,7 +69,7 @@ const PoolListItem: React.FC<IProps> = ({
   const { classes } = useStyles()
 
   const navigate = useNavigate()
-  const isSm = useMediaQuery(theme.breakpoints.down('sm'))
+  const isSmd = useMediaQuery('(max-width:780px)')
   const isMd = useMediaQuery(theme.breakpoints.down('md'))
 
   const handleOpenPosition = () => {
@@ -124,32 +124,30 @@ const PoolListItem: React.FC<IProps> = ({
           style={hideBottomLine ? { border: 'none' } : undefined}>
           {!isMd ? <Typography>{tokenIndex}</Typography> : null}
           <Grid className={classes.imageContainer}>
-            {!isSm && (
-              <Box className={classes.iconsWrapper}>
-                <Box className={classes.iconContainer}>
-                  <img
-                    className={classes.tokenIcon}
-                    src={iconFrom}
-                    alt='Token from'
-                    onError={e => {
-                      e.currentTarget.src = icons.unknownToken
-                    }}
-                  />
-                  {isUnknownFrom && <img className={classes.warningIcon} src={icons.warningIcon} />}
-                </Box>
-                <Box className={classes.iconContainer}>
-                  <img
-                    className={classes.tokenIcon}
-                    src={iconTo}
-                    alt='Token to'
-                    onError={e => {
-                      e.currentTarget.src = icons.unknownToken
-                    }}
-                  />
-                  {isUnknownTo && <img className={classes.warningIcon} src={icons.warningIcon} />}
-                </Box>
+            <Box className={classes.iconsWrapper}>
+              <Box className={classes.iconContainer}>
+                <img
+                  className={classes.tokenIcon}
+                  src={iconFrom}
+                  alt='Token from'
+                  onError={e => {
+                    e.currentTarget.src = icons.unknownToken
+                  }}
+                />
+                {isUnknownFrom && <img className={classes.warningIcon} src={icons.warningIcon} />}
+              </Box>
+              <Box className={classes.iconContainer}>
+                <img
+                  className={classes.tokenIcon}
+                  src={iconTo}
+                  alt='Token to'
+                  onError={e => {
+                    e.currentTarget.src = icons.unknownToken
+                  }}
+                />
+                {isUnknownTo && <img className={classes.warningIcon} src={icons.warningIcon} />}
               </Box>
-            )}
+            </Box>
             <Grid className={classes.symbolsContainer}>
               <Typography>
                 {shortenAddress(symbolFrom ?? '')}/{shortenAddress(symbolTo ?? '')}
@@ -162,7 +160,7 @@ const PoolListItem: React.FC<IProps> = ({
               </TooltipHover>
             </Grid>
           </Grid>
-          {!isSm ? (
+          {!isSmd ? (
             <Typography className={classes.row}>
               {`${apr > 1000 ? '>1000%' : apr === 0 ? '-' : apr.toFixed(2) + '%'}`}
               <span
@@ -174,7 +172,7 @@ const PoolListItem: React.FC<IProps> = ({
           <Typography>{fee}%</Typography>
           <Typography>{`$${formatNumber(volume)}`}</Typography>
           <Typography>{`$${formatNumber(TVL)}`}</Typography>
-          {!isSm && (
+          {!isMd && (
             <Box className={classes.action}>
               <TooltipHover text='Exchange'>
                 <button className={classes.actionButton} onClick={handleOpenSwap}>
@@ -225,7 +223,7 @@ const PoolListItem: React.FC<IProps> = ({
               <ArrowDropDownIcon className={classes.icon} />
             ) : null}
           </Typography>
-          {!isSm ? (
+          {!isSmd ? (
             <Typography
               className={classes.row}
               style={{ cursor: 'pointer' }}
@@ -292,7 +290,7 @@ const PoolListItem: React.FC<IProps> = ({
               <ArrowDropDownIcon className={classes.icon} />
             ) : null}
           </Typography>
-          {!isSm && <Typography align='right'>Action</Typography>}
+          {!isMd && <Typography align='right'>Action</Typography>}
         </Grid>
       )}
     </Grid>

diff --git a/src/components/Stats/PoolListItem/style.ts b/src/components/Stats/PoolListItem/style.ts
@@ -5,12 +5,11 @@ export const useStyles = makeStyles()(() => ({
   container: {
     color: colors.white.main,
     display: 'grid',
-    gridTemplateColumns: '5% auto 15% 15% 15%  12.5% 120px',
+    gridTemplateColumns: '30px auto 160px 80px 140px 100px 120px',
     padding: '18px 0',
     backgroundColor: colors.invariant.component,
     borderBottom: `1px solid ${colors.invariant.light}`,
     whiteSpace: 'nowrap',
-    maxWidth: '100%',
 
     '& p': {
       ...typography.heading4,
@@ -23,11 +22,15 @@ export const useStyles = makeStyles()(() => ({
     },
 
     [theme.breakpoints.down('md')]: {
-      gridTemplateColumns: 'auto 15% 15% 15%  12.5%120px'
+      gridTemplateColumns: 'auto 140px 100px 80px 120px'
+    },
+
+    '@media (max-width: 780px)': {
+      gridTemplateColumns: 'auto 100px 140px 80px'
     },
 
     [theme.breakpoints.down('sm')]: {
-      gridTemplateColumns: '32.5% 17.5% 35% 15% ',
+      gridTemplateColumns: 'auto 80px 80px 60px',
 
       '& p': {
         justifyContent: 'flex-start',
@@ -141,16 +144,16 @@ export const useStyles = makeStyles()(() => ({
     }
   },
   iconContainer: {
-    minWidth: 28,
-    maxWidth: 28,
-    height: 28,
+    minWidth: 24,
+    maxWidth: 24,
+    height: 24,
     marginRight: 3,
     position: 'relative'
   },
   tokenIcon: {
-    minWidth: 28,
-    maxWidth: 28,
-    height: 28,
+    minWidth: 24,
+    maxWidth: 24,
+    height: 24,
     marginRight: 3,
     borderRadius: '50%'
   },

diff --git a/src/components/Stats/TokenListItem/TokenListItem.tsx b/src/components/Stats/TokenListItem/TokenListItem.tsx
@@ -52,7 +52,7 @@ const TokenListItem: React.FC<IProps> = ({
   // const isNegative = priceChange < 0
 
   const isSm = useMediaQuery(theme.breakpoints.down('sm'))
-  const hideName = useMediaQuery(theme.breakpoints.down('xs'))
+  const isMd = useMediaQuery(theme.breakpoints.down('md'))
 
   const networkUrl = useMemo(() => {
     switch (network) {
@@ -81,31 +81,35 @@ const TokenListItem: React.FC<IProps> = ({
       })
   }
 
+  console.log(isSm)
+
   return (
     <Grid>
       {displayType === 'tokens' ? (
         <Grid
           container
           classes={{ container: classes.container, root: classes.tokenList }}
           style={hideBottomLine ? { border: 'none' } : undefined}>
-          {!hideName && !isSm && <Typography component='p'>{itemNumber}</Typography>}
+          {!isMd && <Typography component='p'>{itemNumber}</Typography>}
           <Grid className={classes.tokenName}>
-            {!isSm && (
-              <Box className={classes.imageContainer}>
-                <img
-                  className={classes.tokenIcon}
-                  src={icon}
-                  alt='Token icon'
-                  onError={e => {
-                    e.currentTarget.src = icons.unknownToken
-                  }}></img>
-                {isUnknown && <img className={classes.warningIcon} src={icons.warningIcon} />}
-              </Box>
-            )}
+            <Box className={classes.imageContainer}>
+              <img
+                className={classes.tokenIcon}
+                src={icon}
+                alt='Token icon'
+                onError={e => {
+                  e.currentTarget.src = icons.unknownToken
+                }}></img>
+              {isUnknown && <img className={classes.warningIcon} src={icons.warningIcon} />}
+            </Box>
             <Typography>
-              {hideName ? shortenAddress(symbol) : name}
-              {!hideName && (
-                <span className={classes.tokenSymbol}>{` (${shortenAddress(symbol)})`}</span>
+              {!isMd ? (
+                <>
+                  <span className={classes.tokenName}>{name}</span>
+                  <span className={classes.tokenSymbol}>({shortenAddress(symbol)})</span>
+                </>
+              ) : (
+                shortenAddress(symbol)
               )}
             </Typography>
             <TooltipHover text='Copy token address'>
@@ -124,7 +128,7 @@ const TokenListItem: React.FC<IProps> = ({
           )} */}
           <Typography>{`$${formatNumber(volume)}`}</Typography>
           <Typography>{`$${formatNumber(TVL)}`}</Typography>
-          {!isSm && (
+          {!isMd && (
             <Box className={classes.action}>
               <TooltipHover text='Open in explorer'>
                 <button
@@ -147,7 +151,7 @@ const TokenListItem: React.FC<IProps> = ({
           container
           style={{ color: colors.invariant.textGrey, fontWeight: 400 }}
           classes={{ container: classes.container, root: classes.header }}>
-          {!hideName && !isSm && (
+          {!isMd && (
             <Typography style={{ lineHeight: '12px' }}>
               N<sup>o</sup>
             </Typography>
@@ -234,7 +238,7 @@ const TokenListItem: React.FC<IProps> = ({
               <ArrowDropDownIcon className={classes.icon} />
             ) : null}
           </Typography>
-          {!isSm && <Typography align='right'>Action</Typography>}
+          {!isMd && <Typography align='right'>Action</Typography>}
         </Grid>
       )}
     </Grid>