@material-ui/icons#ThumbUpOutlined TypeScript Examples

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>
  );
}