@chakra-ui/icons#ChevronDownIcon TypeScript Examples

DropdownIndicator = <OptionType, IsMulti extends boolean = false>(
  props: IndicatorProps<OptionType, IsMulti>
): JSX.Element => {
  const { dropdownIndicator } = useStyles()
  return (
    <selectComponents.DropdownIndicator {...props}>
      <ChevronDownIcon sx={dropdownIndicator} />
    </selectComponents.DropdownIndicator>
  )
}

function TextTool() {
  const { activeObject } = useCanvasContext()
  const { setProperty } = useCoreHandler()
  const [options, setOptions] = useState({
    fontFamily: 'Lexend',
    fontSize: 1,
    fontWeight: 2,
    textAlign: 'center',
    textDecoration: 'none',
  })

  useEffect(() => {
    if (activeObject) {
      const updatedOptions = {
        fontFamily: activeObject.fontFamily,
        fontSize: activeObject.fontSize,
        fontWeight: activeObject.fontWeight,
        textAlign: activeObject.textAlign,
      }
      setOptions({ ...options, ...updatedOptions })
    }
  }, [activeObject])

  const onChangeFontFamily = fontFamily => {
    setProperty('fontFamily', fontFamily)
    setOptions({ ...options, fontFamily })
  }

  return (
    <div className="editor-toolbox-container">
      <div className="editor-toolbox text">
        <div>
          <Popover placement="bottom-start" matchWidth={true}>
            <PopoverTrigger>
              <div className="font-family-selector">
                <div>{options.fontFamily}</div>
                <ChevronDownIcon />
              </div>
            </PopoverTrigger>
            <PopoverContent style={{ width: '240px' }}>
              <PopoverBody>
                {fontsList.map(fontItem => (
                  <div
                    onClick={() => onChangeFontFamily(fontItem)}
                    style={{ fontFamily: fontItem }}
                    className="list-item"
                    key={fontItem}
                  >
                    {fontItem}
                  </div>
                ))}
              </PopoverBody>
            </PopoverContent>
          </Popover>
        </div>
        <div className="section-two">
          <OpacityIcon />
          <DeleteIcon />
        </div>
      </div>
    </div>
  )
}

HeaderMenu = () => {
  return (
    <Menu placement="bottom">
      <CustomMenuButton
        rightIcon={<ChevronDownIcon path="" />}
        size="xs"
        variant="ghost"
        colorScheme="gray"
      >
        Editor
      </CustomMenuButton>
      <Portal>
        <LightMode>
          <MenuList bg="white" zIndex={999}>
            {process.env.NEXT_PUBLIC_IS_V1 && (
              <MenuItemLink isExternal href="https://v0.openchakra.app">
                <Box mr={2} as={GoArchive} />
                Chakra v0 Editor
              </MenuItemLink>
            )}
            <ExportMenuItem />
            <ImportMenuItem />

            <MenuDivider />

            <MenuItemLink
              isExternal
              href="https://chakra-ui.com/getting-started"
            >
              <Box mr={2} as={GoRepo} />
              Chakra UI Docs
            </MenuItemLink>
            <MenuItemLink href="https://github.com/premieroctet/openchakra/issues">
              <Box mr={2} as={FaBomb} />
              Report issue
            </MenuItemLink>
          </MenuList>
        </LightMode>
      </Portal>
    </Menu>
  )
}

TokenNameAndMaxButton = ({
  openCoinSelect,
  selectedToken,
  updateAmount,
  mode,
}: {
  selectedToken: string;
  openCoinSelect: () => any;
  updateAmount: (newAmount: string) => any;
  mode: Mode;
}) => {
  const token = tokens[selectedToken];

  const { rari, address } = useRari();

  const poolType = usePoolType();

  const [isMaxLoading, setIsMaxLoading] = useState(false);

  const setToMax = async () => {
    setIsMaxLoading(true);
    let maxBN: BN;

    if (mode === Mode.DEPOSIT) {
      const balance = await fetchTokenBalance(
        token.address,
        rari.web3,
        address
      );

      if (token.symbol === "ETH") {
        // Subtract gas from ETH max

        // Ex: 100 (in GWEI)
        const { standard } = await fetch("https://gasprice.poa.network").then(
          (res) => res.json()
        );

        const gasPrice = rari.web3.utils.toBN(
          // @ts-ignore For some reason it's returning a string not a BN
          rari.web3.utils.toWei(standard.toString(), "gwei")
        );

        const gasWEI = rari.web3.utils.toBN(500000).mul(gasPrice);

        // Subtract the ETH that is needed for gas.
        maxBN = balance.sub(gasWEI);
      } else {
        maxBN = balance;
      }
    } else {
      const max = await fetchMaxWithdraw({
        rari,
        address,
        poolType,
        symbol: token.symbol,
      });

      maxBN = max;
    }

    if (maxBN.isNeg() || maxBN.isZero()) {
      updateAmount("");
    } else {
      const str = new BigNumber(maxBN.toString())
        .div(10 ** token.decimals)
        .toFixed(18)
        // Remove trailing zeroes
        .replace(/\.?0+$/, "");

      if (str.startsWith("0.000000")) {
        updateAmount("");
      } else {
        updateAmount(str);
      }
    }

    setIsMaxLoading(false);
  };

  const { t } = useTranslation();

  return (
    <Row mainAxisAlignment="flex-start" crossAxisAlignment="center">
      <Row
        mainAxisAlignment="flex-start"
        crossAxisAlignment="center"
        as="button"
        onClick={openCoinSelect}
      >
        <Box height="25px" width="25px" mr={2}>
          <Image
            width="100%"
            height="100%"
            borderRadius="50%"
            backgroundImage={`url(${SmallWhiteCircle})`}
            src={token.logoURL}
            alt=""
          />
        </Box>
        <Heading fontSize="24px">{selectedToken}</Heading>
        <ChevronDownIcon boxSize="32px" />
      </Row>

      <Button
        ml={1}
        height="28px"
        width="58px"
        bg="transparent"
        border="2px"
        borderRadius="8px"
        borderColor="#272727"
        fontSize="sm"
        fontWeight="extrabold"
        _hover={{}}
        _active={{}}
        onClick={setToMax}
        isLoading={isMaxLoading}
      >
        {t("MAX")}
      </Button>
    </Row>
  );
}

StateTree: view = ({
  data,
  path,
  _viewId,
  isBodyVisible = observe.views[prop._viewId].data.isBodyVisible,
  updateIsBodyVisible = update.views[prop._viewId].data.isBodyVisible,
}) => {
  if (!data) {
    return null;
  }
  let isRoot = false;
  if (path === undefined) {
    path = "";
    isRoot = true;
  } else {
    if (path === "") {
      path = `${data.name}`;
    } else {
      path = `${path}.${data.name}`;
    }
  }
  const hasChildren = data.children && Object.keys(data.children).length > 0;
  const hasElements =
    (data.elements?.view?.length || 0) +
      (data.elements?.producer?.length || 0) >
    0;
  return (
    <ListItem ml="0" key={_viewId}>
      {!isRoot && hasChildren && (
        <Flex mb="2">
          <Tag
            variant={isBodyVisible ? "solid" : "subtle"}
            cursor="pointer"
            size="sm"
            userSelect="none"
            onClick={() => updateIsBodyVisible.set(!isBodyVisible)}
          >
            <TagLeftIcon>
              {!isBodyVisible && <ChevronDownIcon />}
              {isBodyVisible && <ChevronUpIcon />}
            </TagLeftIcon>
            <TagLabel>{data.name}</TagLabel>
          </Tag>
          {hasElements && (
            <ElementsSummary parentId={_viewId} elements={data.elements} />
          )}
          {path.split(".").length > 1 && (
            <Text fontSize="sm" ml="4" color="gray.500">
              {path}
            </Text>
          )}
        </Flex>
      )}
      {!isRoot && !hasChildren && (
        <Flex mb="2">
          <Flex>
            <Text fontSize="sm">{data.name}</Text>
            {hasElements && (
              <ElementsSummary parentId={_viewId} elements={data.elements} />
            )}
          </Flex>
          {path.split(".").length > 1 && (
            <Text fontSize="sm" ml="4" color="gray.500">
              {path}
            </Text>
          )}
        </Flex>
      )}
      {isRoot && (
        <Text color="gray.500" fontWeight="bold">
          Root
        </Text>
      )}

      <ElementsList
        elements={data.elements}
        parentId={_viewId}
        path={path}
      ></ElementsList>
      {(isBodyVisible || isRoot) && (
        <Children data={data.children} path={path} />
      )}
    </ListItem>
  );
}

PaddingPanel = ({ type }: PaddingPanelPropsType) => {
  const { setValueFromEvent } = useForm()

  const all = usePropsSelector(ATTRIBUTES[type].all)
  const left = usePropsSelector(ATTRIBUTES[type].left)
  const right = usePropsSelector(ATTRIBUTES[type].right)
  const bottom = usePropsSelector(ATTRIBUTES[type].bottom)
  const top = usePropsSelector(ATTRIBUTES[type].top)

  return (
    <Box mb={4}>
      <FormControl>
        <FormLabel fontSize="xs" htmlFor="width" textTransform="capitalize">
          {type}
        </FormLabel>

        <InputGroup size="sm">
          <Input
            mb={1}
            placeholder="All"
            size="sm"
            type="text"
            name={ATTRIBUTES[type].all}
            value={all || ''}
            onChange={setValueFromEvent}
          />
        </InputGroup>

        <SimpleGrid columns={2} spacing={1}>
          <InputGroup size="sm">
            <InputLeftElement
              children={
                <ArrowBackIcon path="" fontSize="md" color="gray.300" />
              }
            />
            <Input
              placeholder="left"
              size="sm"
              type="text"
              name={ATTRIBUTES[type].left}
              value={left || ''}
              onChange={setValueFromEvent}
              autoComplete="off"
            />
          </InputGroup>

          <InputGroup size="sm">
            <InputLeftElement
              children={
                <ArrowForwardIcon path="" fontSize="md" color="gray.300" />
              }
            />
            <Input
              placeholder="right"
              size="sm"
              type="text"
              value={right || ''}
              name={ATTRIBUTES[type].right}
              onChange={setValueFromEvent}
              autoComplete="off"
            />
          </InputGroup>

          <InputGroup size="sm">
            <InputLeftElement
              children={<ArrowUpIcon path="" fontSize="md" color="gray.300" />}
            />
            <Input
              placeholder="top"
              size="sm"
              type="text"
              value={top || ''}
              name={ATTRIBUTES[type].top}
              onChange={setValueFromEvent}
              autoComplete="off"
            />
          </InputGroup>

          <InputGroup size="sm">
            <InputLeftElement
              children={
                <ChevronDownIcon path="" fontSize="md" color="gray.300" />
              }
            />
            <Input
              placeholder="bottom"
              size="sm"
              type="text"
              value={bottom || ''}
              name={ATTRIBUTES[type].bottom}
              onChange={setValueFromEvent}
              autoComplete="off"
            />
          </InputGroup>
        </SimpleGrid>
      </FormControl>
    </Box>
  )
}