react-icons/fi#FiSend JavaScript Examples

export default function Assets({ tokenList }) {
  const [modalShow, setModalShow] = useState(false);
  const [showSendModal, setShowSendModal] = useState(false);

  const tokenDepositId = `TokenItem_tokenDeposit${tokenList[0].symbol}`;
  const total = tokenList.reduce(
    (acc, curr) =>
      acc + (Number(curr.currencyValue) * Number(curr.l2Balance)) / 10 ** Number(curr.decimals),
    0,
  );

  return (
    <div className="dashboardTopSection">
      <div className="container">
        <div className="containerLeftSide">
          <div className="heading">Polygon Nightfall</div>
          <div className="amount">&#36;{total.toFixed(2)}</div>
          <div className="buttonsWrapper">
            <button type="button" onClick={() => setModalShow(true)}>
              <RiQrCodeLine />
              <span>Receive</span>
            </button>
            <button type="button" icon-name="navbar/send" onClick={() => setShowSendModal(true)}>
              <FiSend />
              <span>Send</span>
            </button>
          </div>
        </div>

        <div className="depositWrapper">
          <a
            className="linkButton"
            href="https://docs.polygon-nightfall.technology/Nightfall/tools/nightfall-wallet/"
            target="_blank"
            rel="noopener noreferrer"
          >
            How it works?
          </a>

          <button type="button" className="linkButton" onClick={() => {}}>
            <Link
              to={{
                pathname: '/bridge',
                tokenState: {
                  tokenAddress: tokenList[0].address,
                  initialTxType: 'deposit',
                },
              }}
              id={tokenDepositId}
            >
              <span>Move funds from Ethereum to Nightfall</span>
            </Link>
          </button>
        </div>
      </div>
      <ReceiveModal show={modalShow} onHide={() => setModalShow(false)} />
      <SendModal
        show={showSendModal}
        onHide={() => setShowSendModal(false)}
        currencyValue={tokenList[0].currencyValue}
        l2Balance={tokenList[0].l2Balance}
        name={tokenList[0].name}
        symbol={tokenList[0].symbol}
        address={tokenList[0].address}
        logoURI={tokenList[0].logoURI}
        decimals={tokenList[0].decimals}
      />
    </div>
  );
}

MailboxList = () => {
  const { getMessages, setCurrentLabel } = useContext(EmailContext);
  const [active, setActive] = useState("INBOX");

  const handleClick = (e) => {
    const categoryId = e.target.id;
    setActive(categoryId);
    setCurrentLabel(categoryId);

    // Get Messages using clicked category
    getMessages(categoryId);
  };

  return (
    <Box
      w='16%'
      h='100%'
      bg='white'
      border='1px'
      borderColor='gray.200'
      borderTopLeftRadius='md'
      borderBottomLeftRadius='md'
    >
      <List>
        {/* Send Model */}
        <ListItem p='0.5rem 1rem 1rem'>
          <SendModel />
        </ListItem>

        {/* Labels Buttons */}
        <ListItem>
          <Button
            id='INBOX'
            w='100%'
            h='45px'
            py={2}
            pl={8}
            leftIcon={MdInbox}
            variantColor='blue'
            variant={active === "INBOX" ? "solid" : "ghost"}
            justifyContent='flex-start'
            onClick={handleClick}
          >
            Inbox
          </Button>
        </ListItem>
        <ListItem>
          <Button
            id='STARRED'
            w='100%'
            h='45px'
            py={2}
            pl={8}
            leftIcon={MdStar}
            variantColor='blue'
            variant={active === "STARRED" ? "solid" : "ghost"}
            justifyContent='flex-start'
            onClick={handleClick}
          >
            Starred
          </Button>
        </ListItem>
        <ListItem>
          <Button
            id='IMPORTANT'
            w='100%'
            h='45px'
            py={2}
            pl={8}
            leftIcon={MdLabel}
            variantColor='blue'
            variant={active === "IMPORTANT" ? "solid" : "ghost"}
            justifyContent='flex-start'
            onClick={handleClick}
          >
            Important
          </Button>
        </ListItem>
        <ListItem>
          <Button
            id='SENT'
            w='100%'
            h='45px'
            py={2}
            pl={8}
            leftIcon={FiSend}
            variantColor='blue'
            variant={active === "SENT" ? "solid" : "ghost"}
            justifyContent='flex-start'
            onClick={handleClick}
          >
            Sent
          </Button>
        </ListItem>
        <ListItem>
          <Button
            id='DRAFT'
            w='100%'
            h='45px'
            py={2}
            pl={8}
            leftIcon={FiFile}
            variantColor='blue'
            variant={active === "DRAFT" ? "solid" : "ghost"}
            justifyContent='flex-start'
            onClick={handleClick}
          >
            Drafts
          </Button>
        </ListItem>
        <ListItem>
          <Button
            id='TRASH'
            w='100%'
            h='45px'
            py={2}
            pl={8}
            leftIcon='delete'
            variantColor='blue'
            variant={active === "TRASH" ? "solid" : "ghost"}
            justifyContent='flxex-start'
            onClick={handleClick}
          >
            Trash
          </Button>
        </ListItem>
        <ListItem>
          <Button
            id='CATEGORY_SOCIAL'
            w='100%'
            h='45px'
            py={2}
            pl={8}
            leftIcon={MdPeople}
            variantColor='blue'
            variant={active === "CATEGORY_SOCIAL" ? "solid" : "ghost"}
            justifyContent='flxex-start'
            onClick={handleClick}
          >
            Social
          </Button>
        </ListItem>
        <ListItem>
          <Button
            id='CATEGORY_PROMOTIONS'
            w='100%'
            h='45px'
            py={2}
            pl={8}
            leftIcon={MdLoyalty}
            variantColor='blue'
            variant={active === "CATEGORY_PROMOTIONS" ? "solid" : "ghost"}
            justifyContent='flxex-start'
            onClick={handleClick}
          >
            Promotions
          </Button>
        </ListItem>
      </List>
    </Box>
  );
}

FAQ = () => {
	const form = useForm();
	const { technology } = useTechnology();
	const { user } = useAuth();
	const isLoggedIn = !!user?.email;
	const [itemsCount, setItemsCount] = useState(5);

	const {
		data: { questions, totalItems },
		isValidating,
		mutate,
	} = useSWR(
		['get-technology-answered-questions', technology.id, itemsCount],
		(_, id, perPage) =>
			getTechnologyQuestions(id, {
				perPage,
				page: 1,
			}),
		{
			initialData: [],
			revalidateOnMount: true,
		},
	);

	const onSubmit = async ({ question }) => {
		const response = await createTechnologyQuestion({
			technology: technology.id,
			question,
		});

		if (response) {
			toast.success('Pergunta enviada com sucesso');
		} else {
			toast.error('Houve um erro ao enviar sua pergunta');
		}

		form.reset();
	};

	const loadMoreQuestions = () => {
		setItemsCount(itemsCount + 5);
		mutate();
	};

	return (
		<Layout.Cell>
			<Section title="Perguntas e Respostas" hideWhenIsEmpty={false}>
				{isLoggedIn && (
					<S.Form onSubmit={form.handleSubmit(onSubmit)} noValidate>
						<InputField
							form={form}
							name="question"
							label="Pergunte ao pesquisador"
							variant="gray"
						/>
						<S.SubmitButton type="submit">
							<FiSend /> Enviar Pergunta
						</S.SubmitButton>
					</S.Form>
				)}

				{questions?.length ? (
					<Loading loading={isValidating}>
						<S.LastQuestions>
							<S.LastQuestionsTitle>Últimas realizadas</S.LastQuestionsTitle>
							{questions?.map((question) => (
								<Question key={question.id} question={question} />
							))}
							<S.LoadMoreButton
								onClick={loadMoreQuestions}
								disabled={totalItems <= itemsCount}
							>
								Ver mais perguntas
							</S.LoadMoreButton>
						</S.LastQuestions>
					</Loading>
				) : (
					<S.NoQuestions>Nenhuma pergunta foi feita até o momento.</S.NoQuestions>
				)}
			</Section>
		</Layout.Cell>
	);
}