Skip to content

Commit

Permalink
Merge pull request #75 from QuickSwap/issue/app-performance-improvements
Browse files Browse the repository at this point in the history 
farm page performance improvements
  • Loading branch information
@AamirAlam
AamirAlam authored Feb 10, 2022
2 parents 0f1c5c9 + e9dc278 commit 8851b9d
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 103 deletions.
36 changes: 14 additions & 22 deletions src/pages/DragonPage/DragonsSyrup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ import {
SearchInput,
CustomSwitch,
} from 'components';
import { getTokenAPRSyrup, returnFullWidthMobile } from 'utils';
import {
getPageItemsToLoad,
getTokenAPRSyrup,
returnFullWidthMobile,
} from 'utils';
import useDebouncedChangeHandler from 'utils/useDebouncedChangeHandler';
import { useInfiniteLoading } from 'utils/useInfiniteLoading';
import { Skeleton } from '@material-ui/lab';
Expand All @@ -24,12 +28,9 @@ const EARNED_COLUMN = 4;
const DragonsSyrup: React.FC = () => {
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [pageLoading, setPageLoading] = useState(true); //this is used for not loading syrups immediately when user is on dragons page
const [pageLoading, setPageLoading] = useState(false); //this is used for not loading syrups immediately when user is on dragons page
const [isEndedSyrup, setIsEndedSyrup] = useState(false);
const [pageIndex, setPageIndex] = useState(0);
const [syrupInfos, setSyrupInfos] = useState<SyrupInfo[] | undefined>(
undefined,
);
const [sortBy, setSortBy] = useState(0);
const [sortDesc, setSortDesc] = useState(false);

Expand Down Expand Up @@ -130,27 +131,18 @@ const DragonsSyrup: React.FC = () => {
[sortedSyrupInfos],
);

useEffect(() => {
setSyrupInfos(undefined);
setTimeout(() => setPageLoading(false), 500); //load syrups 0.5s after loading page
}, []);

useEffect(() => {
setPageIndex(0);
setSyrupInfos(sortedSyrupInfos.slice(0, LOADSYRUP_COUNT));
return () => setSyrupInfos(undefined);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [syrupRewardAddress]);

useEffect(() => {
const currentSyrupInfos = syrupInfos || [];
const syrupInfosToAdd = sortedSyrupInfos.slice(
currentSyrupInfos.length,
currentSyrupInfos.length + LOADSYRUP_COUNT,
);
setSyrupInfos(currentSyrupInfos.concat(syrupInfosToAdd));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pageIndex]);
const syrupInfos = useMemo(() => {
return sortedSyrupInfos
? sortedSyrupInfos.slice(
0,
getPageItemsToLoad(pageIndex, LOADSYRUP_COUNT),
)
: null;
}, [sortedSyrupInfos, pageIndex]);

const loadNext = () => {
setPageIndex(pageIndex + 1);
Expand Down
132 changes: 51 additions & 81 deletions src/pages/FarmPage/FarmsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,12 @@ import {
CustomSwitch,
} from 'components';
import { GlobalConst } from 'constants/index';
import { getAPYWithFee, getOneYearFee, returnFullWidthMobile } from 'utils';
import {
getAPYWithFee,
getOneYearFee,
getPageItemsToLoad,
returnFullWidthMobile,
} from 'utils';
import useDebouncedChangeHandler from 'utils/useDebouncedChangeHandler';
import { useInfiniteLoading } from 'utils/useInfiniteLoading';

Expand All @@ -42,14 +47,8 @@ const FarmsList: React.FC<FarmsListProps> = ({ bulkPairs, farmIndex }) => {
const lairInfo = useLairInfo();
const isMobile = useMediaQuery(breakpoints.down('xs'));

const [stakingInfos, setStakingInfos] = useState<StakingInfo[] | undefined>(
undefined,
);
const [stakingDualInfos, setStakingDualInfos] = useState<
DualStakingInfo[] | undefined
>(undefined);
const [pageIndex, setPageIndex] = useState(0);
const [pageloading, setPageLoading] = useState(true); //this is used for not loading farms immediately when user is on farms page
const [pageloading, setPageLoading] = useState(false); //this is used for not loading farms immediately when user is on farms page
const [isEndedFarm, setIsEndedFarm] = useState(false);
const [sortBy, setSortBy] = useState(0);
const [sortDesc, setSortDesc] = useState(false);
Expand Down Expand Up @@ -267,67 +266,38 @@ const FarmsList: React.FC<FarmsListProps> = ({ bulkPairs, farmIndex }) => {
.reduce((totStr, str) => totStr + str, '')
: null;

useEffect(() => {
setStakingInfos(undefined);
setStakingDualInfos(undefined);
setTimeout(() => setPageLoading(false), 500); //load farms 0.5s after loading page
}, []);

useEffect(() => {
setPageIndex(0);
if (farmIndex === GlobalConst.farmIndex.LPFARM_INDEX) {
setStakingInfos(sortedLPStakingInfos.slice(0, LOADFARM_COUNT));
} else {
setStakingDualInfos(sortedStakingDualInfos.slice(0, LOADFARM_COUNT));
}
return () => {
setStakingInfos(undefined);
setStakingDualInfos(undefined);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [stakingRewardAddress]);
}, [stakingRewardAddress, farmIndex]);

useEffect(() => {
if (farmIndex === GlobalConst.farmIndex.LPFARM_INDEX) {
const currentStakingInfos = stakingInfos || [];
const stakingInfosToAdd = sortedLPStakingInfos.slice(
currentStakingInfos.length,
currentStakingInfos.length + LOADFARM_COUNT,
);
setStakingInfos(currentStakingInfos.concat(stakingInfosToAdd));
} else if (farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX) {
const currentDualStakingInfos = stakingDualInfos || [];
const stakingDualInfosToAdd = sortedStakingDualInfos.slice(
currentDualStakingInfos.length,
currentDualStakingInfos.length + LOADFARM_COUNT,
);
setStakingDualInfos(
currentDualStakingInfos.concat(stakingDualInfosToAdd),
);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pageIndex]);
const stakingInfos = useMemo(() => {
return sortedLPStakingInfos
? sortedLPStakingInfos.slice(
0,
getPageItemsToLoad(pageIndex, LOADFARM_COUNT),
)
: null;
}, [sortedLPStakingInfos, pageIndex]);

const stakingAPYs = useMemo(() => {
const sortedStakingInfos =
farmIndex === GlobalConst.farmIndex.LPFARM_INDEX
? stakingInfos
: stakingDualInfos;
if (bulkPairs && sortedStakingInfos && sortedStakingInfos.length > 0) {
return sortedStakingInfos.map((info: any) => {
const oneDayVolume = bulkPairs[info.pair]?.oneDayVolumeUSD;
const reserveUSD = bulkPairs[info.pair]?.reserveUSD;
if (oneDayVolume && reserveUSD) {
const oneYearFeeAPY = getOneYearFee(oneDayVolume, reserveUSD);
return oneYearFeeAPY;
} else {
return 0;
}
});
} else {
return [];
const stakingDualInfos = useMemo(() => {
return sortedStakingDualInfos
? sortedStakingDualInfos.slice(
0,
getPageItemsToLoad(pageIndex, LOADFARM_COUNT),
)
: null;
}, [sortedStakingDualInfos, pageIndex]);

const getPoolApy = (pairId: string) => {
if (!pairId || !bulkPairs) {
return 0;
}
}, [bulkPairs, stakingInfos, stakingDualInfos, farmIndex]);

const oneDayVolume = bulkPairs?.[pairId]?.oneDayVolumeUSD;
const reserveUSD = bulkPairs?.[pairId]?.reserveUSD;
const oneYearFeeAPY = getOneYearFee(oneDayVolume, reserveUSD);
return oneYearFeeAPY;
};

const loadNext = () => {
setPageIndex(pageIndex + 1);
Expand Down Expand Up @@ -487,37 +457,37 @@ const FarmsList: React.FC<FarmsListProps> = ({ bulkPairs, farmIndex }) => {
))}
</Box>
)}
{(farmIndex === GlobalConst.farmIndex.LPFARM_INDEX && !stakingInfos) ||
(farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX &&
!stakingDualInfos && (
<>
<Skeleton width='100%' height={100} />
<Skeleton width='100%' height={100} />
<Skeleton width='100%' height={100} />
<Skeleton width='100%' height={100} />
<Skeleton width='100%' height={100} />
</>
))}
{farmIndex === GlobalConst.farmIndex.LPFARM_INDEX &&
stakingInfos &&
!pageloading ? (
stakingInfos &&
stakingInfos.map((info: StakingInfo, index) => (
<FarmLPCard
key={index}
dQuicktoQuick={Number(lairInfo.dQUICKtoQUICK.toSignificant())}
stakingInfo={info}
stakingAPY={stakingAPYs[index]}
stakingAPY={getPoolApy(info?.pair)}
/>
))
) : farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX &&
))}
{farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX &&
stakingDualInfos &&
!pageloading ? (
stakingDualInfos.map((info: DualStakingInfo, index) => (
<FarmDualCard
key={index}
dQuicktoQuick={Number(lairInfo.dQUICKtoQUICK.toSignificant())}
stakingInfo={info}
stakingAPY={stakingAPYs[index]}
stakingAPY={getPoolApy(info?.pair)}
/>
))
) : (
<>
<Skeleton width='100%' height={100} />
<Skeleton width='100%' height={100} />
<Skeleton width='100%' height={100} />
<Skeleton width='100%' height={100} />
<Skeleton width='100%' height={100} />
</>
)}
))}
<div ref={loadMoreRef} />
</>
);
Expand Down
8 changes: 8 additions & 0 deletions src/utils/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1620,6 +1620,10 @@ export function getDaysCurrentYear() {
}

export function getOneYearFee(dayVolume: number, reserveUSD: number) {
if (!dayVolume || !reserveUSD) {
return 0;
}

return (
(dayVolume * GlobalConst.utils.FEEPERCENT * getDaysCurrentYear()) /
reserveUSD
Expand Down Expand Up @@ -2003,3 +2007,7 @@ export function getUSDString(usdValue?: CurrencyAmount) {
export function isSupportedNetwork(ethereum: any) {
return ethereum && Number(ethereum.chainId) === 137;
}

export function getPageItemsToLoad(index: number, countsPerPage: number) {
return index === 0 ? countsPerPage : countsPerPage * index;
}

0 comments on commit 8851b9d

Please sign in to comment.