Merge pull request #297 from invariant-labs/dev

Update staging env

src/components/Pagination/Pagination.tsx

@@ -24,7 +24,10 @@ export const PaginationList: React.FC<IPaginationList> = ({
   return (
     <div
       className={classes.root}
-      style={{ justifyContent: position ? 'center' : `${variant}`, alignItems: 'center' }}>
+      style={{
+        justifyContent: position ? 'center' : `${variant}`,
+        alignItems: 'center'
+      }}>
       <Pagination
         count={pages}
         shape='rounded'

src/components/Stats/TokenListItem/TokenListItem.tsx

@@ -51,9 +51,8 @@ const TokenListItem: React.FC<IProps> = ({
 }) => {
   const { classes } = useStyles()
   // const isNegative = priceChange < 0
-
   const isSm = useMediaQuery(theme.breakpoints.down('sm'))
-  const hideName = useMediaQuery(theme.breakpoints.down('xs'))
+  const isXs = useMediaQuery(theme.breakpoints.down('xs'))
 
   const networkUrl = useMemo(() => {
     switch (network) {
@@ -81,6 +80,7 @@ const TokenListItem: React.FC<IProps> = ({
         copyAddressHandler('Failed to copy token address to Clipboard', 'error')
       })
   }
+  const shouldShowText = icon === icons.unknownToken || !isSm
 
   return (
     <Grid>
@@ -89,27 +89,27 @@ const TokenListItem: React.FC<IProps> = ({
           container
           classes={{ container: classes.container, root: classes.tokenList }}
           style={hideBottomLine ? { border: 'none' } : undefined}>
-          {!hideName && !isSm && <Typography component='p'>{itemNumber}</Typography>}
+          {!isXs && !isSm && <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
-                  }}
-                />
-                {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
+                }}
+              />
+              {isUnknown && <img className={classes.warningIcon} src={icons.warningIcon} />}
+            </Box>
+            {shouldShowText && (
+              <Typography>
+                {isXs ? shortenAddress(symbol) : name}
+                {!isXs && (
+                  <span className={classes.tokenSymbol}>{` (${shortenAddress(symbol)})`}</span>
+                )}
+              </Typography>
             )}
-            <Typography>
-              {hideName ? shortenAddress(symbol) : name}
-              {!hideName && (
-                <span className={classes.tokenSymbol}>{` (${shortenAddress(symbol)})`}</span>
-              )}
-            </Typography>
             <TooltipHover text='Copy token address'>
               <FileCopyOutlinedIcon
                 onClick={copyToClipboard}
@@ -149,7 +149,7 @@ const TokenListItem: React.FC<IProps> = ({
           container
           style={{ color: colors.invariant.textGrey, fontWeight: 400 }}
           classes={{ container: classes.container, root: classes.header }}>
-          {!hideName && !isSm && (
+          {!isXs && !isSm && (
             <Typography style={{ lineHeight: '12px' }}>
               N<sup>o</sup>
             </Typography>

src/pages/LeaderboardPage/LeaderboardPage.tsx

@@ -22,7 +22,7 @@ export const LeaderBoardPage: React.FC = () => {
         </Grid>
       </Grid>
       {alignment === 'leaderboard' ? <InfoComponent /> : null}
-      {alignment === 'rewards' ? <Rewards /> : null}
+      {alignment === 'claim' ? <Rewards /> : null}
     </>
   )
 }

src/pages/LeaderboardPage/components/Faq/Faq.tsx

@@ -51,10 +51,6 @@ The algorithm takes into account factors such as the size of the position (TVL),
 As the number of positions increases, the number of points received by each one decreases, so it pays off to be early.
 One dollar in a position now might be worth as much as 30 dollars in the future.`
     },
-    {
-      question: 'What are the rewards, and when will we receive them?',
-      answer: `There will be at least a few airdrops, and the allocation for each will depend on the number of points you've accrued. Airdrops will be unannounced and distributed at different times, so it’s worth staying as high in the rankings as possible at all times.`
-    },
     {
       question: `If I'm not a whale, do I still have a chance at being competitive points? `,
       answer:

src/pages/LeaderboardPage/components/InfoComponent/InfoComponent.tsx

@@ -16,10 +16,10 @@ export const InfoComponent = () => {
         <Typography className={classes.header}>What are Invariant Points?</Typography>
 
         <Typography className={classes.description}>
-          Invariant Points are a rewards program designed to incentivize liquidity providers on
-          Invariant. Earn points by providing liquidity and participating in community activities.
-          Develop your own liquidity provision strategy and climb to the top of the leaderboard.
-          Accumulated points can be used for future exclusive benefits.
+          Invariant Points program is designed to incentivize liquidity providers on Invariant. Earn
+          points by providing liquidity and participating in community activities. Develop your own
+          liquidity provision strategy and climb to the top of the leaderboard. Accumulated points
+          can be used for future exclusive benefits.
         </Typography>
         <Box className={classes.linkButtonContainer}>
           <Link

src/pages/LeaderboardPage/components/LeaderboardList/LeaderboardList.tsx

@@ -122,8 +122,7 @@ const LeaderboardList: React.FC<LeaderboardListProps> = ({ data, isLoading = fal
       {totalPages >= 1 && (
         <Box
           sx={{
-            paddingLeft: '24px',
-            paddingRight: '24px',
+            [theme.breakpoints.up('md')]: { paddingLeft: '24px', paddingRight: '24px' },
             maxWidth: '100%',
             display: 'flex',
             justifyContent: 'center',
@@ -146,7 +145,7 @@ const LeaderboardList: React.FC<LeaderboardListProps> = ({ data, isLoading = fal
                 display: 'flex',
                 justifyContent: 'center'
               }}>
-              <Box sx={{ width: '80%' }}>
+              <Box sx={{ width: '80%', [theme.breakpoints.down('md')]: { width: '90%' } }}>
                 <PaginationList
                   pages={totalPages}
                   defaultPage={currentPage}

src/pages/LeaderboardPage/components/LeaderboardWrapper.tsx

@@ -102,8 +102,8 @@ export const LeaderboardWrapper: React.FC<LeaderboardWrapperProps> = ({
                   return 'Point Leaderboard'
                 case 'faq':
                   return 'Frequent questions'
-                case 'rewards':
-                  return 'Rewards'
+                case 'claim':
+                  return 'Claim'
                 default:
                   return 0
               }

src/pages/LeaderboardPage/components/Rewards/Rewards.tsx

@@ -24,12 +24,12 @@ export const Rewards = () => {
   return (
     <Box className={classes.infoContainer}>
       <Box style={{ width: 'auto' }}>
-        <Typography className={classes.header}>Rewards</Typography>
+        <Typography className={classes.header}>Claim</Typography>
         <>
           <Typography className={classes.description}>
-            Invariant Points are a rewards program designed to incentivize liquidity providers on
-            Invariant. Earn points by providing liquidity and participating in community activities.
-            Develop your own liquidity provision strategy and climb to the top of the leaderboard.
+            Invariant Points program is designed to incentivize liquidity providers on Invariant.
+            Earn points by providing liquidity and participating in community activities. Develop
+            your own liquidity provision strategy and climb to the top of the leaderboard.
             Accumulated points can be used for future exclusive benefits.
           </Typography>
           <Box sx={{ marginTop: '32px' }}>
@@ -92,7 +92,7 @@ export const Rewards = () => {
               flexDirection: 'column',
               marginTop: '32px'
             }}>
-            If you want to learn more about rewards and points distribution, check out our docs.
+            If you want to learn more about points distribution, check out our docs.
             <Link
               to='https://docs.invariant.app/docs/invariant_points/mechanism'
               target='_blank'

src/pages/LeaderboardPage/components/Switcher/Switcher.tsx

@@ -40,11 +40,11 @@ export const Switcher: React.FC<ISwitcherProps> = ({ alignment, setAlignment })
           FAQ
         </ToggleButton>
         <ToggleButton
-          value='rewards'
+          value='claim'
           disableRipple
           className={classes.switchPoolsButton}
-          style={{ fontWeight: alignment === 'rewards' ? 700 : 400 }}>
-          Rewards
+          style={{ fontWeight: alignment === 'claim' ? 700 : 400 }}>
+          Claim
         </ToggleButton>
       </ToggleButtonGroup>
     </Box>

src/pages/LeaderboardPage/components/Switcher/styles.ts

@@ -13,7 +13,7 @@ const useStyles = makeStyles<StyleProps>()((theme, { alignment }) => {
         return '0'
       case 'faq':
         return '100%'
-      case 'rewards':
+      case 'claim':
         return '200%'
       default:
         return '0'