@chakra-ui/icons#WarningTwoIcon TypeScript Examples

The following examples show how to use @chakra-ui/icons#WarningTwoIcon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: FuseStatsBar.tsx    From rari-dApp with GNU Affero General Public License v3.0 6 votes vote down vote up 
WhitelistedIcon = ({
  isWhitelisted,
  ...boxProps
}: {
  isWhitelisted: boolean;
  [x: string]: any;
}) => {
  return (
    <>
      <SimpleTooltip
        label={
          isWhitelisted
            ? "This pool is from a Whitelisted Admin"
            : "This pool is not from a whitelisted admin. Use with caution!"
        }
        placement="bottom-end"
      >
        {isWhitelisted ? (
          <CheckCircleIcon boxSize="20px" mr={3} {...boxProps} />
        ) : (
          <WarningTwoIcon
            boxSize="20px"
            mr={3}
            color="orange.300"
            {...boxProps}
          />
        )}
      </SimpleTooltip>
    </>
  );
}
Example #2
Source File: index.tsx    From nextjs-hasura-boilerplate with MIT License 6 votes vote down vote up 
AccessDeniedIndicator: FC<IProps> = ({
  message = "You need to Sign In to view this content!",
}) => {
  const iconNode = () => {
    return <WarningTwoIcon color="purple" boxSize="50px" />;
  };

  const signInButtonNode = () => {
    return (
      <Link href="/api/auth/signin">
        <Button
          onClick={(e) => {
            e.preventDefault();
            signIn();
          }}
        >
          {message}
        </Button>
      </Link>
    );
  };

  return (
    <Flex justifyContent="center" alignItems="center" h="200px">
      <Stack spacing={4} align="center">
        <Box>{iconNode()}</Box>
        <Box>{signInButtonNode()}</Box>
      </Stack>
    </Flex>
  );
}
Example #3
Source File: TranchesPage.tsx    From rari-dApp with GNU Affero General Public License v3.0 4 votes vote down vote up 
TranchePage = () => {
  const { isAuthed } = useRari();
  const { t } = useTranslation();
  const isMobile = useIsSmallScreen();

  return (
    <>
      <Column
        mainAxisAlignment="flex-start"
        crossAxisAlignment="center"
        color="#FFFFFF"
        mx="auto"
        width={isMobile ? "100%" : "1000px"}
        px={isMobile ? 4 : 0}
      >
        <Header isAuthed={isAuthed} />

        <RowOrColumn
          width="100%"
          isRow={!isMobile}
          mainAxisAlignment="flex-start"
          crossAxisAlignment="flex-start"
        >
          <Column
            width={isMobile ? "100%" : "75%"}
            mainAxisAlignment="flex-start"
            crossAxisAlignment="center"
            mr={4}
          >
            {/* Header */}
            <DashboardBox height={isMobile ? "110px" : "95px"} width="100%">
              <Column
                expand
                mainAxisAlignment="center"
                crossAxisAlignment={isMobile ? "center" : "flex-start"}
                textAlign="center"
                px={4}
              >
                <Row mainAxisAlignment="flex-start" crossAxisAlignment="center">
                  <Heading size="lg">{t("Tranches")}</Heading>

                  <SimpleTooltip
                    placement="bottom"
                    label={t(
                      "Saffron Finance has not been fully audited. Take caution when entering these tranches and do not deposit more than you are comfortable losing."
                    )}
                  >
                    <Link
                      isExternal
                      href="https://defisafety.com/2020/12/28/saffron-finance/"
                    >
                      <WarningTwoIcon ml={2} boxSize="25px" color="#C34535" />
                    </Link>
                  </SimpleTooltip>
                </Row>

                {t(
                  "Access Saffron Finance tranches through the Rari Capital interface!"
                )}
              </Column>
            </DashboardBox>

            {/* Information ab. Tranche Ratings */}
            <DashboardBox
              mt={4}
              height={isMobile ? "auto" : "200px"}
              width="100%"
            >
              <TranchesRatingInfo />
            </DashboardBox>

            {/* Dai Pool */}
            <DashboardBox
              mt={4}
              height={isMobile ? "auto" : "200px"}
              width="100%"
            >
              <TranchePoolInfo tranchePool={TranchePool.DAI} />
            </DashboardBox>

            {/* USDC Pool */}
            {isMobile ? null : (
              <DashboardBox
                mt={4}
                height="200px"
                width="100%"
                style={{ filter: "blur(3px)", pointerEvents: "none" }}
              >
                <TranchePoolInfo tranchePool={TranchePool.USDC} />
              </DashboardBox>
            )}
          </Column>

          {/* Other Metrics */}
          <Column
            mt={isMobile ? 4 : 0}
            width={isMobile ? "100%" : "25%"}
            mainAxisAlignment="flex-start"
            crossAxisAlignment="center"
          >
            <DashboardBox height="95px" width="100%">
              <RedemptionDate />
            </DashboardBox>

            <DashboardBox mt={4} height="200px" width="100%">
              <PrincipalAmount />
            </DashboardBox>

            <DashboardBox mt={4} height="200px" width="100%">
              <SFIPrice />
            </DashboardBox>

            <DashboardBox mt={4} height="200px" width="100%" p={4}>
              <SFIDistributions />
            </DashboardBox>
          </Column>
        </RowOrColumn>
        <Footer />
      </Column>
    </>
  );
}