utils#getOneYearFee TypeScript Examples

export function getStakingFees(
  stakingInfo: StakingBasic | DualStakingBasic,
  balanceState?: CallState,
  totalSupplyState?: CallState,
) {
  let oneYearFeeAPY = 0;
  let oneDayFee = 0;
  let accountFee = 0;
  if (pairs !== undefined) {
    oneYearFeeAPY = pairs[stakingInfo.pair]?.oneDayVolumeUSD;
    const balanceResult = getCallStateResult(balanceState);
    const totalSupplyResult = getCallStateResult(totalSupplyState);

    if (oneYearFeeAPY && balanceResult && totalSupplyResult) {
      const totalSupply = web3.utils.toWei(
        pairs[stakingInfo.pair]?.totalSupply,
        'ether',
      );
      const ratio = Number(totalSupplyResult) / Number(totalSupply);
      const myRatio = Number(balanceResult) / Number(totalSupplyResult);
      oneDayFee = oneYearFeeAPY * GlobalConst.utils.FEEPERCENT * ratio;
      accountFee = oneDayFee * myRatio;
      oneYearFeeAPY = getOneYearFee(
        oneYearFeeAPY,
        pairs[stakingInfo.pair]?.reserveUSD,
      );
    }
  }
  return { oneYearFeeAPY, oneDayFee, accountFee };
}

RewardSlider: React.FC = () => {
  const classes = useStyles();
  const theme = useTheme();
  const { chainId } = useActiveWeb3React();
  const tabletWindowSize = useMediaQuery(theme.breakpoints.down('md'));
  const mobileWindowSize = useMediaQuery(theme.breakpoints.down('sm'));
  const rewardItems = useStakingInfo(null, 0, 5);
  const [bulkPairs, setBulkPairs] = useState<any>(null);

  useEffect(() => {
    if (chainId) {
      const stakingPairLists =
        returnStakingInfo()
          [chainId]?.slice(0, 5)
          .map((item) => item.pair) ?? [];
      getBulkPairData(stakingPairLists).then((data) => setBulkPairs(data));
    }
  }, [chainId]);

  const stakingAPYs = useMemo(() => {
    if (bulkPairs && rewardItems.length > 0) {
      return rewardItems.map((info: StakingInfo) => {
        const oneDayVolume = bulkPairs[info.pair]?.oneDayVolumeUSD;
        const reserveUSD = bulkPairs[info.pair]?.reserveUSD;
        if (oneDayVolume && reserveUSD) {
          return getOneYearFee(oneDayVolume, reserveUSD);
        } else {
          return 0;
        }
      });
    } else {
      return [];
    }
  }, [bulkPairs, rewardItems]);

  const rewardSliderSettings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: mobileWindowSize ? 1 : tabletWindowSize ? 2 : 3,
    slidesToScroll: 1,
    nextArrow: <ChevronRightIcon />,
    prevArrow: <ChevronLeftIcon />,
  };

  return (
    <Slider {...rewardSliderSettings} className={classes.rewardsSlider}>
      {rewardItems.map((item, index) => (
        <RewardSliderItem
          key={index}
          stakingAPY={stakingAPYs[index]}
          info={item}
        />
      ))}
    </Slider>
  );
}

PoolPositionCard: React.FC<{ pair: Pair }> = ({ pair }) => {
  const [bulkPairData, setBulkPairData] = useState<any>(null);
  const { palette, breakpoints } = useTheme();
  const isMobile = useMediaQuery(breakpoints.down('xs'));

  const currency0 = unwrappedToken(pair.token0);
  const currency1 = unwrappedToken(pair.token1);

  const stakingInfos = useStakingInfo(pair);
  const dualStakingInfos = useDualStakingInfo(pair);
  const stakingInfo = useMemo(
    () =>
      stakingInfos && stakingInfos.length > 0
        ? stakingInfos[0]
        : dualStakingInfos && dualStakingInfos.length > 0
        ? dualStakingInfos[0]
        : null,
    [stakingInfos, dualStakingInfos],
  );

  const pairId = pair.liquidityToken.address;

  useEffect(() => {
    const pairLists = [pairId];
    getBulkPairData(pairLists).then((data) => setBulkPairData(data));
    return () => setBulkPairData(null);
  }, [pairId]);

  const [showMore, setShowMore] = useState(false);

  const apyWithFee = useMemo(() => {
    if (stakingInfo && bulkPairData) {
      const dayVolume = bulkPairData[stakingInfo.pair]?.oneDayVolumeUSD;
      const reserveUSD = bulkPairData[stakingInfo.pair]?.reserveUSD;
      const oneYearFee =
        dayVolume && reserveUSD ? getOneYearFee(dayVolume, reserveUSD) : 0;
      return formatAPY(
        getAPYWithFee(stakingInfo.perMonthReturnInRewards ?? 0, oneYearFee),
      );
    }
  }, [stakingInfo, bulkPairData]);

  return (
    <Box
      width={1}
      border={`1px solid ${palette.secondary.dark}`}
      borderRadius={10}
      bgcolor={showMore ? palette.secondary.dark : 'transparent'}
      style={{ overflow: 'hidden' }}
    >
      <Box
        paddingX={isMobile ? 1.5 : 3}
        paddingY={isMobile ? 2 : 3}
        display='flex'
        alignItems='center'
        justifyContent='space-between'
      >
        <Box display='flex' alignItems='center'>
          <DoubleCurrencyLogo
            currency0={currency0}
            currency1={currency1}
            margin={true}
            size={28}
          />
          <Typography
            variant='h6'
            style={{ color: palette.text.primary, marginLeft: 16 }}
          >
            {!currency0 || !currency1
              ? 'Loading'
              : `${currency0.symbol}/${currency1.symbol}`}
          </Typography>
        </Box>

        <Box
          display='flex'
          alignItems='center'
          color={palette.primary.main}
          style={{ cursor: 'pointer' }}
          onClick={() => setShowMore(!showMore)}
        >
          <Typography variant='body1' style={{ marginRight: 8 }}>
            Manage
          </Typography>
          {showMore ? <ChevronUp size='20' /> : <ChevronDown size='20' />}
        </Box>
      </Box>

      {showMore && <PoolPositionCardDetails pair={pair} />}
      {stakingInfo && !stakingInfo.ended && apyWithFee && (
        <Box bgcolor='#404557' paddingY={0.75} paddingX={isMobile ? 2 : 3}>
          <Typography variant='body2'>
            Earn{' '}
            <span style={{ color: palette.success.main }}>
              {apyWithFee}% APY
            </span>{' '}
            by staking your LP tokens in {currency0.symbol?.toUpperCase()} /{' '}
            {currency1.symbol?.toUpperCase()} Farm
          </Typography>
        </Box>
      )}
    </Box>
  );
}

FarmsList: React.FC<FarmsListProps> = ({ bulkPairs, farmIndex }) => {
  const { palette, breakpoints } = useTheme();
  const isMobile = useMediaQuery(breakpoints.down('xs'));

  const [pageIndex, setPageIndex] = useState(0);
  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);
  const [stakedOnly, setStakeOnly] = useState(false);
  const [farmSearch, setFarmSearch] = useState('');
  const [farmSearchInput, setFarmSearchInput] = useDebouncedChangeHandler(
    farmSearch,
    setFarmSearch,
  );

  const addedLPStakingInfos = useStakingInfo(
    null,
    pageloading ||
      farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX ||
      isEndedFarm
      ? 0
      : undefined,
    pageloading ||
      farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX ||
      isEndedFarm
      ? 0
      : undefined,
    { search: farmSearch, isStaked: stakedOnly },
  );
  const addedLPStakingOldInfos = useOldStakingInfo(
    null,
    pageloading ||
      farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX ||
      !isEndedFarm
      ? 0
      : undefined,
    pageloading ||
      farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX ||
      !isEndedFarm
      ? 0
      : undefined,
    { search: farmSearch, isStaked: stakedOnly },
  );
  const addedDualStakingInfos = useDualStakingInfo(
    null,
    pageloading || farmIndex === GlobalConst.farmIndex.LPFARM_INDEX
      ? 0
      : undefined,
    pageloading || farmIndex === GlobalConst.farmIndex.LPFARM_INDEX
      ? 0
      : undefined,
    { search: farmSearch, isStaked: stakedOnly },
  );

  const sortIndex = sortDesc ? 1 : -1;

  const sortByToken = useCallback(
    (a: CommonStakingInfo, b: CommonStakingInfo) => {
      const tokenStrA = a.tokens[0].symbol + '/' + a.tokens[1].symbol;
      const tokenStrB = b.tokens[0].symbol + '/' + b.tokens[1].symbol;
      return (tokenStrA > tokenStrB ? -1 : 1) * sortIndex;
    },
    [sortIndex],
  );

  const sortByTVL = useCallback(
    (a: CommonStakingInfo, b: CommonStakingInfo) => {
      return (Number(a.tvl ?? 0) > Number(b.tvl ?? 0) ? -1 : 1) * sortIndex;
    },
    [sortIndex],
  );

  const sortByRewardLP = useCallback(
    (a: StakingInfo, b: StakingInfo) => {
      return (
        (getExactTokenAmount(a.totalRewardRate) >
        getExactTokenAmount(b.totalRewardRate)
          ? -1
          : 1) * sortIndex
      );
    },
    [sortIndex],
  );

  const sortByRewardDual = useCallback(
    (a: DualStakingInfo, b: DualStakingInfo) => {
      const aRewards =
        a.rateA * a.rewardTokenAPrice + a.rateB * a.rewardTokenBPrice;
      const bRewards =
        b.rateA * b.rewardTokenAPrice + b.rateB * b.rewardTokenBPrice;
      return (aRewards > bRewards ? -1 : 1) * sortIndex;
    },
    [sortIndex],
  );

  const sortByAPY = useCallback(
    (a: CommonStakingInfo, b: CommonStakingInfo) => {
      let aYearFee = 0;
      let bYearFee = 0;
      if (bulkPairs) {
        const aDayVolume = bulkPairs[a.pair]?.oneDayVolumeUSD;
        const aReserveUSD = bulkPairs[a.pair]?.reserveUSD;
        const bDayVolume = bulkPairs[b.pair]?.oneDayVolumeUSD;
        const bReserveUSD = bulkPairs[b.pair]?.reserveUSD;
        if (aDayVolume && aReserveUSD) {
          aYearFee = getOneYearFee(aDayVolume, aReserveUSD);
        }
        if (bDayVolume && bReserveUSD) {
          bYearFee = getOneYearFee(bDayVolume, bReserveUSD);
        }
      }
      const aAPYwithFee = getAPYWithFee(
        a.perMonthReturnInRewards ?? 0,
        aYearFee,
      );
      const bAPYwithFee = getAPYWithFee(
        b.perMonthReturnInRewards ?? 0,
        bYearFee,
      );
      return (aAPYwithFee > bAPYwithFee ? -1 : 1) * sortIndex;
    },
    [sortIndex, bulkPairs],
  );

  const sortByEarnedLP = useCallback(
    (a: StakingInfo, b: StakingInfo) => {
      return (
        (getExactTokenAmount(a.earnedAmount) >
        getExactTokenAmount(b.earnedAmount)
          ? -1
          : 1) * sortIndex
      );
    },
    [sortIndex],
  );

  const sortByEarnedDual = useCallback(
    (a: DualStakingInfo, b: DualStakingInfo) => {
      const earnedA =
        getExactTokenAmount(a.earnedAmountA) * a.rewardTokenAPrice +
        getExactTokenAmount(a.earnedAmountB) * a.rewardTokenBPrice;
      const earnedB =
        getExactTokenAmount(b.earnedAmountA) * b.rewardTokenAPrice +
        getExactTokenAmount(b.earnedAmountB) * b.rewardTokenBPrice;
      return (earnedA > earnedB ? -1 : 1) * sortIndex;
    },
    [sortIndex],
  );

  const sortedLPStakingInfos = useMemo(() => {
    const lpStakingInfos = isEndedFarm
      ? addedLPStakingOldInfos
      : addedLPStakingInfos;
    return lpStakingInfos.sort((a, b) => {
      if (sortBy === POOL_COLUMN) {
        return sortByToken(a, b);
      } else if (sortBy === TVL_COLUMN) {
        return sortByTVL(a, b);
      } else if (sortBy === REWARDS_COLUMN) {
        return sortByRewardLP(a, b);
      } else if (sortBy === APY_COLUMN) {
        return sortByAPY(a, b);
      } else if (sortBy === EARNED_COLUMN) {
        return sortByEarnedLP(a, b);
      }
      return 1;
    });
  }, [
    sortBy,
    addedLPStakingOldInfos,
    addedLPStakingInfos,
    isEndedFarm,
    sortByToken,
    sortByTVL,
    sortByRewardLP,
    sortByAPY,
    sortByEarnedLP,
  ]);

  const sortedStakingDualInfos = useMemo(() => {
    const dualStakingInfos = addedDualStakingInfos.filter(
      (info) => info.ended === isEndedFarm,
    );
    return dualStakingInfos.sort((a, b) => {
      if (sortBy === POOL_COLUMN) {
        return sortByToken(a, b);
      } else if (sortBy === TVL_COLUMN) {
        return sortByTVL(a, b);
      } else if (sortBy === REWARDS_COLUMN) {
        return sortByRewardDual(a, b);
      } else if (sortBy === APY_COLUMN) {
        return sortByAPY(a, b);
      } else if (sortBy === EARNED_COLUMN) {
        return sortByEarnedDual(a, b);
      }
      return 1;
    });
  }, [
    addedDualStakingInfos,
    isEndedFarm,
    sortBy,
    sortByToken,
    sortByTVL,
    sortByRewardDual,
    sortByAPY,
    sortByEarnedDual,
  ]);

  const addedStakingInfos = useMemo(
    () =>
      farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX
        ? sortedStakingDualInfos
        : sortedLPStakingInfos,
    [farmIndex, sortedStakingDualInfos, sortedLPStakingInfos],
  );

  const stakingRewardAddress = addedStakingInfos
    ? addedStakingInfos
        .map((stakingInfo) => stakingInfo.stakingRewardAddress.toLowerCase())
        .reduce((totStr, str) => totStr + str, '')
    : null;

  useEffect(() => {
    setPageIndex(0);
  }, [stakingRewardAddress, farmIndex]);

  const stakingInfos = useMemo(() => {
    return sortedLPStakingInfos
      ? sortedLPStakingInfos.slice(
          0,
          getPageItemsToLoad(pageIndex, LOADFARM_COUNT),
        )
      : null;
  }, [sortedLPStakingInfos, pageIndex]);

  const stakingDualInfos = useMemo(() => {
    return sortedStakingDualInfos
      ? sortedStakingDualInfos.slice(
          0,
          getPageItemsToLoad(pageIndex, LOADFARM_COUNT),
        )
      : null;
  }, [sortedStakingDualInfos, pageIndex]);

  const getPoolApy = (pairId: string) => {
    if (!pairId || !bulkPairs) {
      return 0;
    }

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

  const loadNext = () => {
    setPageIndex(pageIndex + 1);
  };

  const { loadMoreRef } = useInfiniteLoading(loadNext);

  const sortColumns = [
    { text: 'Pool', index: POOL_COLUMN, width: 0.3, justify: 'flex-start' },
    { text: 'TVL', index: TVL_COLUMN, width: 0.2, justify: 'center' },
    { text: 'Rewards', index: REWARDS_COLUMN, width: 0.25, justify: 'center' },
    { text: 'APY', index: APY_COLUMN, width: 0.15, justify: 'center' },
    { text: 'Earned', index: EARNED_COLUMN, width: 0.2, justify: 'flex-end' },
  ];

  const sortByDesktopItems = sortColumns.map((item) => {
    return {
      ...item,
      onClick: () => {
        if (sortBy === item.index) {
          setSortDesc(!sortDesc);
        } else {
          setSortBy(item.index);
          setSortDesc(false);
        }
      },
    };
  });

  const sortByMobileItems = sortColumns.map((item) => {
    return { text: item.text, onClick: () => setSortBy(item.index) };
  });

  const renderStakedOnly = () => (
    <Box display='flex' alignItems='center'>
      <Typography
        variant='body2'
        style={{ color: palette.text.disabled, marginRight: 8 }}
      >
        Staked Only
      </Typography>
      <ToggleSwitch
        toggled={stakedOnly}
        onToggle={() => setStakeOnly(!stakedOnly)}
      />
    </Box>
  );

  const farmStatusItems = [
    {
      text: 'Active',
      onClick: () => setIsEndedFarm(false),
      condition: !isEndedFarm,
    },
    {
      text: 'Ended',
      onClick: () => setIsEndedFarm(true),
      condition: isEndedFarm,
    },
  ];

  return (
    <>
      <Box
        display='flex'
        flexWrap='wrap'
        justifyContent='space-between'
        alignItems='center'
        mb={3.5}
      >
        <Box>
          <Typography variant='h5'>Earn dQuick</Typography>
          <Typography variant='body2'>
            Stake LP Tokens to earn{' '}
            {farmIndex === GlobalConst.farmIndex.LPFARM_INDEX
              ? 'dQUICK + Pool Fees'
              : 'dQUICK + WMATIC rewards'}
          </Typography>
        </Box>
        <Box display='flex' flexWrap='wrap'>
          <Box
            display='flex'
            justifyContent='space-between'
            width={returnFullWidthMobile(isMobile)}
          >
            <Box width={isMobile ? 'calc(100% - 150px)' : 1} mr={2} my={2}>
              <SearchInput
                placeholder={
                  isMobile ? 'Search' : 'Search name, symbol or paste address'
                }
                value={farmSearchInput}
                setValue={setFarmSearchInput}
              />
            </Box>
            {isMobile && renderStakedOnly()}
          </Box>
          <Box
            width={returnFullWidthMobile(isMobile)}
            display='flex'
            flexWrap='wrap'
            alignItems='center'
          >
            <Box mr={2}>
              <CustomSwitch width={160} height={40} items={farmStatusItems} />
            </Box>
            {isMobile ? (
              <>
                <Box height={40} flex={1}>
                  <CustomMenu title='Sort By' menuItems={sortByMobileItems} />
                </Box>
                <Box mt={2} width={1} display='flex' alignItems='center'>
                  <Typography
                    variant='body2'
                    style={{ color: palette.text.disabled, marginRight: 8 }}
                  >
                    Sort {sortDesc ? 'Desc' : 'Asc'}
                  </Typography>
                  <ToggleSwitch
                    toggled={sortDesc}
                    onToggle={() => setSortDesc(!sortDesc)}
                  />
                </Box>
              </>
            ) : (
              renderStakedOnly()
            )}
          </Box>
        </Box>
      </Box>
      <Divider />
      {!isMobile && (
        <Box mt={2.5} display='flex' paddingX={2}>
          {sortByDesktopItems.map((item) => (
            <Box
              key={item.index}
              display='flex'
              alignItems='center'
              width={item.width}
              style={{ cursor: 'pointer' }}
              justifyContent={item.justify}
              onClick={item.onClick}
              color={
                sortBy === item.index
                  ? palette.text.primary
                  : palette.text.secondary
              }
            >
              <Typography variant='body2'>{item.text}</Typography>
              <Box display='flex' ml={0.5}>
                {sortBy === item.index && sortDesc ? (
                  <ArrowDown size={20} />
                ) : (
                  <ArrowUp size={20} />
                )}
              </Box>
            </Box>
          ))}
        </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 &&
        stakingInfos.map((info: StakingInfo, index) => (
          <FarmCard
            key={index}
            stakingInfo={info}
            stakingAPY={getPoolApy(info?.pair)}
            isLPFarm={true}
          />
        ))}
      {farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX &&
        stakingDualInfos &&
        stakingDualInfos.map((info: DualStakingInfo, index) => (
          <FarmCard
            key={index}
            stakingInfo={info}
            stakingAPY={getPoolApy(info?.pair)}
          />
        ))}
      <div ref={loadMoreRef} />
    </>
  );
}