Merge pull request #10 from QuickSwap/feature/infinite-scroll

Add infinite scroll to farm and dragon page
QuickSwap · Dec 13, 2021 · f623f3d · f623f3d
2 parents 108c0ac + 6ff05a6
commit f623f3d
Show file tree

Hide file tree

Showing 6 changed files with 188 additions and 288 deletions.
diff --git a/package.json b/package.json
@@ -126,6 +126,7 @@
     "@material-ui/lab": "^4.0.0-alpha.60",
     "moment": "^2.29.1",
     "react-apexcharts": "^1.3.9",
+    "react-cool-inview": "^2.0.8",
     "react-ga": "^3.3.0",
     "react-slick": "^0.28.1",
     "slick-carousel": "^1.8.1",

diff --git a/src/components/FarmCard/FarmCard.tsx b/src/components/FarmCard/FarmCard.tsx
@@ -102,7 +102,8 @@ const FarmCard: React.FC<{
   const isMobile = useMediaQuery(breakpoints.down('xs'));
   const [isExpandCard, setExpandCard] = useState(false);
   const [stakeAmount, setStakeAmount] = useState('');
-  const [attempting, setAttempting] = useState(false);
+  const [attemptStaking, setAttemptStaking] = useState(false);
+  const [attemptUnstaking, setAttemptUnstaking] = useState(false);
   // const [hash, setHash] = useState<string | undefined>();
   const [unstakeAmount, setUnStakeAmount] = useState('');
 
@@ -238,25 +239,25 @@ const FarmCard: React.FC<{
 
   const onWithdraw = async () => {
     if (stakingContract && stakingInfo.stakedAmount) {
-      setAttempting(true);
+      setAttemptUnstaking(true);
       await stakingContract
         .exit({ gasLimit: 300000 })
         .then((response: TransactionResponse) => {
           addTransaction(response, {
             summary: `Withdraw deposited liquidity`,
           });
+          setAttemptUnstaking(false);
           // setHash(response.hash);
         })
         .catch((error: any) => {
-          setAttempting(false);
+          setAttemptUnstaking(false);
           console.log(error);
         });
     }
   };
 
   const onClaimReward = async () => {
     if (stakingContract && stakingInfo.stakedAmount) {
-      setAttempting(true);
       await stakingContract
         .getReward({ gasLimit: 350000 })
         .then((response: TransactionResponse) => {
@@ -266,7 +267,6 @@ const FarmCard: React.FC<{
           // setHash(response.hash);
         })
         .catch((error: any) => {
-          setAttempting(false);
           console.log(error);
         });
     }
@@ -301,7 +301,7 @@ const FarmCard: React.FC<{
   );
 
   const onStake = async () => {
-    setAttempting(true);
+    setAttemptStaking(true);
     if (stakingContract && parsedAmount && deadline) {
       if (approval === ApprovalState.APPROVED) {
         await stakingContract.stake(`0x${parsedAmount.raw.toString(16)}`, {
@@ -324,11 +324,11 @@ const FarmCard: React.FC<{
             // setHash(response.hash);
           })
           .catch((error: any) => {
-            setAttempting(false);
+            setAttemptStaking(false);
             console.log(error);
           });
       } else {
-        setAttempting(false);
+        setAttemptStaking(false);
         throw new Error(
           'Attempting to stake without approval or a signature. Please contact support.',
         );
@@ -586,6 +586,8 @@ const FarmCard: React.FC<{
                     userLiquidityUnstaked.greaterThan('0')
                   ) {
                     setStakeAmount(userLiquidityUnstaked.toSignificant());
+                  } else {
+                    setStakeAmount('');
                   }
                 }}
               >
@@ -594,7 +596,7 @@ const FarmCard: React.FC<{
             </Box>
             <Box
               className={
-                Number(!attempting && stakeAmount) > 0 &&
+                Number(!attemptStaking && stakeAmount) > 0 &&
                 Number(stakeAmount) <=
                   Number(userLiquidityUnstaked?.toSignificant())
                   ? classes.buttonClaim
@@ -605,7 +607,7 @@ const FarmCard: React.FC<{
               p={2}
               onClick={() => {
                 if (
-                  !attempting &&
+                  !attemptStaking &&
                   Number(stakeAmount) > 0 &&
                   Number(stakeAmount) <=
                     Number(userLiquidityUnstaked?.toSignificant())
@@ -622,7 +624,7 @@ const FarmCard: React.FC<{
               }}
             >
               <Typography variant='body1'>
-                {attempting
+                {attemptStaking
                   ? 'Staking LP Tokens...'
                   : approval === ApprovalState.APPROVED ||
                     signatureData !== null
@@ -672,6 +674,8 @@ const FarmCard: React.FC<{
                     stakingInfo.stakedAmount.greaterThan('0')
                   ) {
                     setUnStakeAmount(stakingInfo.stakedAmount.toSignificant());
+                  } else {
+                    setUnStakeAmount('');
                   }
                 }}
               >
@@ -680,7 +684,7 @@ const FarmCard: React.FC<{
             </Box>
             <Box
               className={
-                !attempting &&
+                !attemptUnstaking &&
                 Number(unstakeAmount) > 0 &&
                 Number(unstakeAmount) <=
                   Number(stakingInfo.stakedAmount.toSignificant())
@@ -692,7 +696,7 @@ const FarmCard: React.FC<{
               p={2}
               onClick={() => {
                 if (
-                  !attempting &&
+                  !attemptUnstaking &&
                   Number(unstakeAmount) > 0 &&
                   Number(unstakeAmount) <=
                     Number(stakingInfo.stakedAmount.toSignificant())
@@ -702,7 +706,9 @@ const FarmCard: React.FC<{
               }}
             >
               <Typography variant='body1'>
-                {attempting ? 'Unstaking LP Tokens...' : 'Unstake LP Tokens'}
+                {attemptUnstaking
+                  ? 'Unstaking LP Tokens...'
+                  : 'Unstake LP Tokens'}
               </Typography>
             </Box>
           </Box>

diff --git a/src/pages/DragonPage/DragonPage.tsx b/src/pages/DragonPage/DragonPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import {
   Box,
@@ -7,7 +7,12 @@ import {
   Divider,
   useMediaQuery,
 } from '@material-ui/core';
-import { useLairInfo, useSyrupInfo } from 'state/stake/hooks';
+import {
+  SyrupInfo,
+  useLairInfo,
+  useSyrupInfo,
+  SYRUP_REWARDS_INFO,
+} from 'state/stake/hooks';
 import { QUICK } from 'constants/index';
 import {
   CurrencyLogo,
@@ -17,12 +22,14 @@ import {
   UnstakeQuickModal,
 } from 'components';
 import { useGlobalData } from 'state/application/hooks';
+import { useInfiniteLoading } from 'utils/useInfiniteLoading';
 import { ReactComponent as HelpIcon } from 'assets/images/HelpIcon1.svg';
 import DragonBg1 from 'assets/images/DragonBg1.svg';
 import DragonBg2 from 'assets/images/DragonBg2.svg';
 import DragonLairMask from 'assets/images/DragonLairMask.svg';
 import { ReactComponent as PriceExchangeIcon } from 'assets/images/PriceExchangeIcon.svg';
 import { ReactComponent as SearchIcon } from 'assets/images/SearchIcon.svg';
+import { useActiveWeb3React } from 'hooks';
 
 const useStyles = makeStyles(({ breakpoints }) => ({
   helpWrapper: {
@@ -116,13 +123,14 @@ const useStyles = makeStyles(({ breakpoints }) => ({
 
 const DragonPage: React.FC = () => {
   const classes = useStyles();
+  const { chainId } = useActiveWeb3React();
   const { breakpoints } = useTheme();
   const isMobile = useMediaQuery(breakpoints.down('xs'));
   const [isQUICKRate, setIsQUICKRate] = useState(false);
   const [openStakeModal, setOpenStakeModal] = useState(false);
   const [openUnstakeModal, setOpenUnstakeModal] = useState(false);
   const lairInfo = useLairInfo();
-  const syrupInfos = useSyrupInfo();
+  const [syrupInfos, setSyrupInfos] = useState<SyrupInfo[]>([]);
   const { globalData } = useGlobalData();
   const APR =
     (((Number(lairInfo?.oneDayVol) * 0.04 * 0.01) /
@@ -133,6 +141,21 @@ const DragonPage: React.FC = () => {
   const APY = APR ? ((Math.pow(1 + APR / 365, 365) - 1) * 100).toFixed(2) : 0;
   const [stakedOnly, setStakeOnly] = useState(false);
   const [syrupSearch, setSyrupSearch] = useState('');
+  const [pageIndex, setPageIndex] = useState(0);
+
+  const addedSyrupInfos = useSyrupInfo(null, pageIndex * 5 - 5, pageIndex * 5);
+
+  const syrupRewardAddress = addedSyrupInfos
+    .map((syrupInfo) => syrupInfo.stakingRewardAddress.toLowerCase())
+    .reduce((totStr, str) => totStr + str, '');
+
+  const lastSyrupAddress =
+    syrupInfos[syrupInfos.length - 1]?.stakingRewardAddress;
+
+  useEffect(() => {
+    setSyrupInfos(syrupInfos.concat(addedSyrupInfos));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [syrupRewardAddress]);
 
   const filteredSyrupInfos = useMemo(() => {
     if (syrupInfos && syrupInfos.length > 0) {
@@ -154,6 +177,28 @@ const DragonPage: React.FC = () => {
     }
   }, [syrupInfos, stakedOnly, syrupSearch]);
 
+  const loadNext = () => {
+    if (chainId && SYRUP_REWARDS_INFO[chainId]) {
+      if (
+        syrupInfos.length < (SYRUP_REWARDS_INFO[chainId]?.length ?? 0) &&
+        pageIndex * 5 > syrupInfos.length
+      ) {
+        setPageIndex(syrupInfos.length / 5 + 1);
+      }
+      if (
+        !lastSyrupAddress ||
+        (SYRUP_REWARDS_INFO[chainId]?.[pageIndex * 5 - 1] &&
+          lastSyrupAddress ===
+            SYRUP_REWARDS_INFO[chainId]?.[pageIndex * 5 - 1]
+              .stakingRewardAddress)
+      ) {
+        setPageIndex(pageIndex + 1);
+      }
+    }
+  };
+
+  const { loadMoreRef } = useInfiniteLoading(loadNext);
+
   return (
     <Box width='100%' mb={3}>
       {openStakeModal && (
@@ -377,6 +422,7 @@ const DragonPage: React.FC = () => {
           </Box>
         </Grid>
       </Grid>
+      <div ref={loadMoreRef} />
     </Box>
   );
 };