@material-ui/icons#ThumbDownOutlined TypeScript Examples

The following examples show how to use @material-ui/icons#ThumbDownOutlined. 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: usePollVoteDialog.tsx    From anchor-web-app with Apache License 2.0 4 votes vote down vote up
function ComponentBase({
  className,
  closeDialog,
  pollId,
}: DialogProps<FormParams, FormReturn>) {
  const [vote, voteResult] = useGovVoteTx();

  const { connected } = useAccount();

  const fixedFee = useFixedFee();

  const bank = useAnchorBank();

  const { data: { userGovStakingInfo } = {} } =
    useRewardsAncGovernanceRewardsQuery();

  const canIVote = useGovVoteAvailableQuery(pollId);

  const [voteFor, setVoteFor] = useState<null | 'yes' | 'no'>(null);
  const [amount, setAmount] = useState<ANC>('' as ANC);

  const maxVote = useMemo(() => {
    if (!userGovStakingInfo) {
      return undefined;
    }

    return big(userGovStakingInfo.balance) as u<ANC<Big>>;
  }, [userGovStakingInfo]);

  const invalidTxFee = useMemo(
    () => connected && validateTxFee(bank.tokenBalances.uUST, fixedFee),
    [bank, fixedFee, connected],
  );

  const invalidAmount = useMemo(() => {
    if (amount.length === 0 || !connected) return undefined;

    const uanc = microfy(amount);

    return maxVote && uanc.gt(maxVote) ? 'Not enough assets' : undefined;
  }, [amount, maxVote, connected]);

  const txFee = fixedFee;

  const submit = useCallback(
    (voteFor: 'yes' | 'no', amount: ANC) => {
      if (!connected || !vote) {
        return;
      }

      vote({
        pollId,
        voteFor,
        amount,
      });
    },
    [connected, pollId, vote],
  );

  if (
    voteResult?.status === StreamStatus.IN_PROGRESS ||
    voteResult?.status === StreamStatus.DONE
  ) {
    return (
      <Modal open disableBackdropClick disableEnforceFocus>
        <Dialog className={className}>
          <TxResultRenderer
            resultRendering={voteResult.value}
            onExit={closeDialog}
          />
        </Dialog>
      </Modal>
    );
  }

  return (
    <Modal open onClose={() => closeDialog()}>
      <Dialog className={className} onClose={() => closeDialog()}>
        <h1>Vote</h1>

        <MessageBox
          level="info"
          hide={{ id: 'vote', period: 1000 * 60 * 60 * 24 * 7 }}
        >
          Vote cannot be changed after submission. Staked ANC used to vote in
          polls are locked and cannot be withdrawn until the poll finishes.
        </MessageBox>

        {!!invalidTxFee && <MessageBox>{invalidTxFee}</MessageBox>}

        <ul className="vote">
          <li
            data-vote="yes"
            data-selected={voteFor === 'yes'}
            onClick={() => setVoteFor('yes')}
          >
            <i>
              <ThumbUpOutlined />
            </i>
            <span>YES</span>
          </li>
          <li
            data-vote="no"
            data-selected={voteFor === 'no'}
            onClick={() => setVoteFor('no')}
          >
            <i>
              <ThumbDownOutlined />
            </i>
            <span>NO</span>
          </li>
        </ul>

        <NumberInput
          className="amount"
          value={amount}
          maxIntegerPoinsts={ANC_INPUT_MAXIMUM_INTEGER_POINTS}
          maxDecimalPoints={ANC_INPUT_MAXIMUM_DECIMAL_POINTS}
          label="AMOUNT"
          onChange={({ target }: ChangeEvent<HTMLInputElement>) =>
            setAmount(target.value as ANC)
          }
          InputProps={{
            endAdornment: <InputAdornment position="end">ANC</InputAdornment>,
          }}
        />

        <div className="wallet" aria-invalid={!!invalidAmount}>
          <span>{invalidAmount}</span>
          <span>
            Balance:{' '}
            <span
              style={{
                textDecoration: 'underline',
                cursor: 'pointer',
              }}
              onClick={() =>
                maxVote && setAmount(formatANCInput(demicrofy(maxVote)))
              }
            >
              {maxVote ? formatANC(demicrofy(maxVote)) : 0} ANC
            </span>
          </span>
        </div>

        {txFee && (
          <TxFeeList className="receipt">
            <TxFeeListItem label={<IconSpan>Tx Fee</IconSpan>}>
              {formatUST(demicrofy(txFee))} UST
            </TxFeeListItem>
          </TxFeeList>
        )}

        <ActionButton
          className="submit"
          disabled={
            !connected ||
            !canIVote ||
            !vote ||
            amount.length === 0 ||
            !voteFor ||
            big(amount).lte(0) ||
            !!invalidTxFee ||
            !!invalidAmount
          }
          onClick={() => !!voteFor && submit(voteFor, amount)}
        >
          Submit
        </ActionButton>
      </Dialog>
    </Modal>
  );
}