Merge pull request #13 from QuickSwap/feature/update-farm-syrup-landing

update farm, syrup and landing pages
QuickSwap · Dec 19, 2021 · 5979e17 · 5979e17
2 parents f37dc70 + d915cd2
commit 5979e17
Show file tree

Hide file tree

Showing 11 changed files with 388 additions and 188 deletions.
diff --git a/src/components/CurrencyLogo/CurrencyLogo.tsx b/src/components/CurrencyLogo/CurrencyLogo.tsx
@@ -48,6 +48,14 @@ export const getTokenLogoURL = (address: string) => {
       'https://raw.githubusercontent.com/sameepsi/quickswap-interface/master/assets/easyfi-token.png';
   }
 
+  if (
+    address?.toLowerCase() ===
+    '0x2c92a8A41f4b806a6f6F1F7C9D9DEc78DCd8c18e'.toLowerCase()
+  ) {
+    uri =
+      'https://assets.coingecko.com/coins/images/21467/small/n1fqEYRI_400x400.png?1639345175';
+  }
+
   if (address?.toLowerCase() === '0xa1c09c8f4f5d03fcc27b456475d53d988e98d7c5') {
     uri =
       'https://raw.githubusercontent.com/sameepsi/quickswap-interface/master/assets/easyfi-token.png';

diff --git a/src/components/RewardSlider/RewardSliderItem.tsx b/src/components/RewardSlider/RewardSliderItem.tsx
@@ -56,6 +56,8 @@ const useStyles = makeStyles(({ palette }) => ({
       height: 40,
       fontSize: 16,
       marginTop: 12,
+      background: palette.primary.main,
+      borderRadius: 20,
     },
   },
 }));
@@ -175,7 +177,6 @@ const RewardSliderItem: React.FC<RewardSliderItemProps> = ({ info }) => {
       </Box>
       <Button
         fullWidth
-        color='primary'
         style={{ marginTop: '30px' }}
         onClick={() => {
           history.push(

diff --git a/src/components/SyrupCard/SyrupCard.tsx b/src/components/SyrupCard/SyrupCard.tsx
@@ -386,7 +386,7 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo }> = ({ syrup }) => {
               alignItems='center'
               justifyContent='space-between'
             >
-              {Number.isFinite(timeRemaining) && (
+              {!syrup.ended && Number.isFinite(timeRemaining) && (
                 <Box
                   display={isMobile ? 'flex' : 'unset'}
                   flexWrap='wrap'
@@ -413,36 +413,45 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo }> = ({ syrup }) => {
                   </Typography>
                 </Box>
               )}
+              {syrup.ended && (
+                <Typography variant='body2' color='textSecondary'>
+                  Rewards Ended
+                </Typography>
+              )}
               <Box
                 width={isMobile ? 1 : 'unset'}
                 display='flex'
                 flexWrap='wrap'
               >
-                <Box
-                  mt={isMobile ? 1.5 : 0}
-                  className={classes.syrupButton}
-                  onClick={() => setOpenStakeModal(true)}
-                >
-                  <Typography variant='body2'>Stake</Typography>
-                </Box>
-                {syrup.stakedAmount.greaterThan('0') && (
-                  <Box
-                    className={classes.syrupButton}
-                    mt={isMobile ? 1.5 : 0}
-                    ml={isMobile ? 0 : 1.5}
-                    style={{ opacity: attemptingUnstake ? 0.6 : 1 }}
-                    onClick={() => {
-                      if (!attemptingUnstake) {
-                        onWithdraw();
-                      }
-                    }}
-                  >
-                    <Typography variant='body2'>
-                      {attemptingUnstake && !hashUnstake
-                        ? 'Unstaking...'
-                        : 'Unstake'}
-                    </Typography>
-                  </Box>
+                {!syrup.ended && (
+                  <>
+                    <Box
+                      mt={isMobile ? 1.5 : 0}
+                      className={classes.syrupButton}
+                      onClick={() => setOpenStakeModal(true)}
+                    >
+                      <Typography variant='body2'>Stake</Typography>
+                    </Box>
+                    {syrup.stakedAmount.greaterThan('0') && (
+                      <Box
+                        className={classes.syrupButton}
+                        mt={isMobile ? 1.5 : 0}
+                        ml={isMobile ? 0 : 1.5}
+                        style={{ opacity: attemptingUnstake ? 0.6 : 1 }}
+                        onClick={() => {
+                          if (!attemptingUnstake) {
+                            onWithdraw();
+                          }
+                        }}
+                      >
+                        <Typography variant='body2'>
+                          {attemptingUnstake && !hashUnstake
+                            ? 'Unstaking...'
+                            : 'Unstake'}
+                        </Typography>
+                      </Box>
+                    )}
+                  </>
                 )}
                 {syrup.earnedAmount.greaterThan('0') && (
                   <Box

diff --git a/src/components/ToggleSwitch/ToggleSwitch.tsx b/src/components/ToggleSwitch/ToggleSwitch.tsx
@@ -1,20 +1,24 @@
 import React from 'react';
 import { Box } from '@material-ui/core';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(({ palette }) => ({
   wrapper: {
     width: 40,
     height: 20,
     position: 'relative',
     borderRadius: 10,
-    border: `1px solid ${palette.secondary.dark}`,
+    border: (props: any) =>
+      props.toggled
+        ? '1px solid transparent'
+        : `1px solid ${palette.text.disabled}`,
   },
   innerCircle: {
     width: 14,
     height: 14,
     borderRadius: 8,
-    backgroundColor: palette.text.secondary,
+    backgroundColor: (props: any) =>
+      props.toggled ? palette.success.main : palette.text.disabled,
     position: 'absolute',
     top: 2,
   },
@@ -24,12 +28,11 @@ const ToggleSwitch: React.FC<{ toggled: boolean; onToggle: () => void }> = ({
   toggled,
   onToggle,
 }) => {
-  const classes = useStyles();
-  const { palette } = useTheme();
+  const classes = useStyles({ toggled });
   return (
     <Box
       className={classes.wrapper}
-      bgcolor={toggled ? palette.secondary.dark : 'transparent'}
+      bgcolor={toggled ? 'rgba(15, 198, 121, 0.2)' : 'transparent'}
       onClick={onToggle}
     >
       <Box

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1816,4 +1816,4 @@ export const BETTER_TRADE_LINK_THRESHOLD = new Percent(
 
 // the Uniswap Default token list lives here
 export const DEFAULT_TOKEN_LIST_URL =
-  'https://unpkg.com/[email protected].11/build/quickswap-default.tokenlist.json';
+  'https://unpkg.com/[email protected].15/build/quickswap-default.tokenlist.json';
diff --git a/src/constants/lists.ts b/src/constants/lists.ts
@@ -1,5 +1,5 @@
 // the Quickswap Default token list lives here
 export const DEFAULT_TOKEN_LIST_URL =
-  'https://unpkg.com/[email protected].11/build/quickswap-default.tokenlist.json';
+  'https://unpkg.com/[email protected].15/build/quickswap-default.tokenlist.json';
 
 export const DEFAULT_LIST_OF_LISTS: string[] = [DEFAULT_TOKEN_LIST_URL];
diff --git a/src/pages/DragonPage/DragonPage.tsx b/src/pages/DragonPage/DragonPage.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
+import cx from 'classnames';
 import {
   Box,
   Typography,
@@ -11,7 +12,9 @@ import {
   SyrupInfo,
   useLairInfo,
   useSyrupInfo,
+  useOldSyrupInfo,
   SYRUP_REWARDS_INFO,
+  OLD_SYRUP_REWARDS_INFO,
 } from 'state/stake/hooks';
 import { QUICK } from 'constants/index';
 import {
@@ -101,12 +104,13 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     cursor: 'pointer',
   },
   searchInput: {
-    height: 50,
-    background: palette.secondary.contrastText,
+    height: 40,
+    border: `1px solid ${palette.secondary.dark}`,
     borderRadius: 10,
+    minWidth: 250,
     display: 'flex',
     alignItems: 'center',
-    padding: '0 16px',
+    padding: '0 10px',
     '& input': {
       background: 'transparent',
       border: 'none',
@@ -119,6 +123,25 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
       flex: 1,
     },
   },
+  syrupSwitch: {
+    width: '50%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    background: palette.background.paper,
+    border: `1px solid ${palette.secondary.dark}`,
+    '& p': {
+      color: palette.text.secondary,
+    },
+  },
+  activeSyrupSwitch: {
+    background: palette.secondary.dark,
+    '& p': {
+      color: palette.text.primary,
+    },
+  },
 }));
 
 const DragonPage: React.FC = () => {
@@ -129,8 +152,10 @@ const DragonPage: React.FC = () => {
   const [isQUICKRate, setIsQUICKRate] = useState(false);
   const [openStakeModal, setOpenStakeModal] = useState(false);
   const [openUnstakeModal, setOpenUnstakeModal] = useState(false);
+  const [isEndedSyrup, setIsEndedSyrup] = useState(false);
   const lairInfo = useLairInfo();
   const [syrupInfos, setSyrupInfos] = useState<SyrupInfo[]>([]);
+  const [syrupOldInfos, setSyrupOldInfos] = useState<SyrupInfo[]>([]);
   const { globalData } = useGlobalData();
   const APR =
     (((Number(lairInfo?.oneDayVol) * 0.04 * 0.01) /
@@ -142,24 +167,43 @@ const DragonPage: React.FC = () => {
   const [stakedOnly, setStakeOnly] = useState(false);
   const [syrupSearch, setSyrupSearch] = useState('');
   const [pageIndex, setPageIndex] = useState(0);
+  const [pageOldIndex, setPageOldIndex] = useState(0);
 
   const addedSyrupInfos = useSyrupInfo(null, pageIndex * 5 - 5, pageIndex * 5);
+  const addedOldSyrupInfos = useOldSyrupInfo(
+    null,
+    pageOldIndex * 5 - 5,
+    pageOldIndex * 5,
+  );
 
   const syrupRewardAddress = addedSyrupInfos
     .map((syrupInfo) => syrupInfo.stakingRewardAddress.toLowerCase())
     .reduce((totStr, str) => totStr + str, '');
 
+  const syrupRewardOldAddress = addedOldSyrupInfos
+    .map((syrupInfo) => syrupInfo.stakingRewardAddress.toLowerCase())
+    .reduce((totStr, str) => totStr + str, '');
+
   const lastSyrupAddress =
     syrupInfos[syrupInfos.length - 1]?.stakingRewardAddress;
 
+  const lastOldSyrupAddress =
+    syrupOldInfos[syrupOldInfos.length - 1]?.stakingRewardAddress;
+
   useEffect(() => {
     setSyrupInfos(syrupInfos.concat(addedSyrupInfos));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [syrupRewardAddress]);
 
+  useEffect(() => {
+    setSyrupOldInfos(syrupOldInfos.concat(addedOldSyrupInfos));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [syrupRewardOldAddress]);
+
   const filteredSyrupInfos = useMemo(() => {
-    if (syrupInfos && syrupInfos.length > 0) {
-      return syrupInfos.filter((syrupInfo) => {
+    const syrupListInfos = isEndedSyrup ? syrupOldInfos : syrupInfos;
+    if (syrupListInfos && syrupListInfos.length > 0) {
+      return syrupListInfos.filter((syrupInfo) => {
         return (
           (stakedOnly
             ? Boolean(syrupInfo.stakedAmount.greaterThan('0'))
@@ -175,24 +219,38 @@ const DragonPage: React.FC = () => {
     } else {
       return [];
     }
-  }, [syrupInfos, stakedOnly, syrupSearch]);
+  }, [syrupInfos, stakedOnly, syrupSearch, isEndedSyrup, syrupOldInfos]);
 
   const loadNext = () => {
-    if (chainId && SYRUP_REWARDS_INFO[chainId]) {
+    const REWARDS_INFO = isEndedSyrup
+      ? OLD_SYRUP_REWARDS_INFO
+      : SYRUP_REWARDS_INFO;
+    const syrupPageIndex = isEndedSyrup ? pageOldIndex : pageIndex;
+    const syrupListInfos = isEndedSyrup ? syrupOldInfos : syrupInfos;
+    const lastAddress = isEndedSyrup ? lastOldSyrupAddress : lastSyrupAddress;
+    if (chainId && REWARDS_INFO[chainId]) {
       if (
-        syrupInfos.length < (SYRUP_REWARDS_INFO[chainId]?.length ?? 0) &&
-        pageIndex * 5 > syrupInfos.length
+        syrupListInfos.length < (REWARDS_INFO[chainId]?.length ?? 0) &&
+        syrupPageIndex * 5 > syrupListInfos.length
       ) {
-        setPageIndex(syrupInfos.length / 5 + 1);
+        if (isEndedSyrup) {
+          setPageOldIndex(syrupListInfos.length / 5 + 1);
+        } else {
+          setPageIndex(syrupListInfos.length / 5 + 1);
+        }
       }
       if (
-        !lastSyrupAddress ||
-        (SYRUP_REWARDS_INFO[chainId]?.[pageIndex * 5 - 1] &&
-          lastSyrupAddress ===
-            SYRUP_REWARDS_INFO[chainId]?.[pageIndex * 5 - 1]
+        !lastAddress ||
+        (REWARDS_INFO[chainId]?.[syrupPageIndex * 5 - 1] &&
+          lastAddress ===
+            REWARDS_INFO[chainId]?.[syrupPageIndex * 5 - 1]
               .stakingRewardAddress)
       ) {
-        setPageIndex(pageIndex + 1);
+        if (isEndedSyrup) {
+          setPageOldIndex(pageOldIndex + 1);
+        } else {
+          setPageIndex(pageIndex + 1);
+        }
       }
     }
   };
@@ -382,12 +440,36 @@ const DragonPage: React.FC = () => {
                   onChange={(evt: any) => setSyrupSearch(evt.target.value)}
                 />
               </Box>
-              <Box
-                display='flex'
-                alignItems='center'
-                ml={isMobile ? 2 : 4}
-                mt={isMobile ? 2 : 0}
-              >
+              <Box width={160} height={40} display='flex' mx={2}>
+                <Box
+                  className={cx(
+                    classes.syrupSwitch,
+                    !isEndedSyrup && classes.activeSyrupSwitch,
+                  )}
+                  style={{ borderTopLeftRadius: 8, borderBottomLeftRadius: 8 }}
+                  onClick={() => {
+                    setIsEndedSyrup(false);
+                  }}
+                >
+                  <Typography variant='body2'>Active</Typography>
+                </Box>
+                <Box
+                  className={cx(
+                    classes.syrupSwitch,
+                    isEndedSyrup && classes.activeSyrupSwitch,
+                  )}
+                  style={{
+                    borderTopRightRadius: 8,
+                    borderBottomRightRadius: 8,
+                  }}
+                  onClick={() => {
+                    setIsEndedSyrup(true);
+                  }}
+                >
+                  <Typography variant='body2'>Ended</Typography>
+                </Box>
+              </Box>
+              <Box display='flex' alignItems='center' mt={isMobile ? 2 : 0}>
                 <Typography
                   variant='body2'
                   style={{ color: palette.text.disabled, marginRight: 8 }}