@chakra-ui/icons#InfoIcon TypeScript Examples

InterestEarned = () => {
  const interestEarned = usePoolInterestEarned();

  const { data: yieldPoolBalance } = usePoolBalance(Pool.YIELD);

  const isSufferingDivergenceLoss = (() => {
    if (interestEarned && yieldPoolBalance) {
      if (
        interestEarned.yieldPoolInterestEarned.isZero() &&
        new BigNumber(yieldPoolBalance.toString()).div(1e18).gt(20)
      ) {
        return true;
      } else {
        return false;
      }
    }
  })();

  const { t } = useTranslation();

  return (
    <Column mainAxisAlignment="center" crossAxisAlignment="center">
      <Heading fontSize="3xl">
        {interestEarned?.totalFormattedEarnings ?? "$?"}
      </Heading>

      {isSufferingDivergenceLoss ? (
        <SimpleTooltip
          label={t(
            "You may experience divergence loss when depositing stablecoins into the Yield Pool that are above their peg at the time of deposit. The Yield Pool is composed of various stablecoins which shift in value, causing your balance to fluctuate."
          )}
        >
          <Text
            textTransform="uppercase"
            letterSpacing="wide"
            color="#858585"
            fontSize="xs"
            textAlign="center"
          >
            {t("Interest Earned")}

            <InfoIcon ml="5px" boxSize="10px" mb="3px" />
          </Text>
        </SimpleTooltip>
      ) : (
        <Text
          textTransform="uppercase"
          letterSpacing="wide"
          color="#858585"
          fontSize="xs"
          textAlign="center"
        >
          {t("Interest Earned")}
        </Text>
      )}
    </Column>
  );
}

PoolsPerformanceChart = ({ size }: { size: number }) => {
  const {
    childSizes: [topPadding, statsSize, chartSize],
  } = useSpacedLayout({
    parentHeight: size,
    spacing: 0,
    childSizes: [
      new PixelSize(15),
      new ResponsivePixelSize({
        desktop: 20,
        mobile: 30,
      }),
      new PercentageSize(1),
      // This accounts for 10px of bottom padding
      new PixelSize(10),
    ],
  });

  const { t } = useTranslation();

  const ethAPY = usePoolAPY(Pool.ETH);
  const stableAPY = usePoolAPY(Pool.USDC);
  const daiAPY = usePoolAPY(Pool.DAI);
  const yieldAPY = usePoolAPY(Pool.YIELD);

  const points = useMemo(() => {
    if (ethAPY && stableAPY && yieldAPY && daiAPY) {
      const ethAPYPercentPerDay = parseFloat(ethAPY) / 100 / 365;
      const stableAPYPercentPerDay = parseFloat(stableAPY) / 100 / 365;
      const yieldAPYPercentPerDay = parseFloat(yieldAPY) / 100 / 365;
      const daiAPYPercentPerDay = parseFloat(daiAPY) / 100 / 365;

      let now = new Date();

      let ethBalance = 10000;
      let stableBalance = 10000;
      let yieldBalance = 10000;
      let daiBalance = 10000;

      let stablePoints = [];
      let yieldPoints = [];
      let ethPoints = [];
      let daiPoints = [];

      let i = 1;

      const dayInterval = 5;

      while (i < 365) {
        ethBalance =
          ethBalance +
          ethBalance *
            (ethAPYPercentPerDay * dayInterval) *
            (Math.random() * 2);
        stableBalance =
          stableBalance +
          stableBalance *
            (stableAPYPercentPerDay * dayInterval) *
            (Math.random() * 2);
        yieldBalance =
          yieldBalance +
          yieldBalance *
            (yieldAPYPercentPerDay * dayInterval) *
            (Math.random() * 2);
        daiBalance =
          daiBalance +
          daiBalance *
            (daiAPYPercentPerDay * dayInterval) *
            (Math.random() * 2);

        now.setDate(now.getDate() + dayInterval);

        const formattedDate =
          now.getMonth() + 1 + "/" + now.getDate() + "/" + now.getFullYear();

        stablePoints.push({
          x: formattedDate,

          y: stableBalance,
        });

        yieldPoints.push({
          x: formattedDate,

          y: yieldBalance,
        });

        ethPoints.push({
          x: formattedDate,

          y: ethBalance,
        });

        daiPoints.push({
          x: formattedDate,

          y: daiBalance,
        });

        i += dayInterval;
      }

      return [
        {
          name: "Yield Pool",
          data: yieldPoints,
        },
        {
          name: "Stable Pool",
          data: stablePoints,
        },
        {
          name: "DAI Pool",
          data: daiPoints,
        },
        {
          name: "ETH Pool",
          data: ethPoints,
        },
      ];
    } else {
      return null;
    }
  }, [yieldAPY, stableAPY, ethAPY, daiAPY]);

  return (
    <>
      <Row
        color="#FFFFFF"
        mainAxisAlignment={{ md: "flex-start", base: "center" }}
        crossAxisAlignment="center"
        px={4}
        mt={topPadding.asPxString()}
        height={statsSize.asPxString()}
        width="100%"
      >
        <SimpleTooltip
          label={t(
            "This chart is generated using the APYs of each pool (shown at the bottom of this page). It introduces a random variance in the APY each day, with a max of 2x the current pool APY, and a minimum of 0% APY. It does not account for large changes in APY (greater than 2x), divergence loss in the Yield Pool, or take into account ETH price. The ETH Pool simulation is not denominated in ETH, instead it simulates returns on USD using the current APY of the ETH Pool. In the ETH pool you are exposed to the price movements of ETH (which is not shown or accounted for in this simulation)."
          )}
        >
          <Text
            fontSize="xs"
            textAlign="center"
            textTransform="uppercase"
            letterSpacing="wide"
            color="#858585"
          >
            {t("1 Year of Returns Simulated Using Current Yields")}
            <InfoIcon name="info" ml="5px" boxSize="9px" mb="3px" />
          </Text>
        </SimpleTooltip>
      </Row>

      <Box height={chartSize.asPxString()} overflow="hidden">
        {!points ? (
          <Center expand>
            <PropagateLoader size={20} color="#FFFFFF" loading />
          </Center>
        ) : (
          <Chart
            options={PoolReturnChartOptions}
            type="line"
            width="100%"
            height="100%"
            series={points}
          />
        )}
      </Box>
    </>
  );
}