@material-ui/icons#Warning TypeScript Examples

textFieldInputProps = {
  endAdornment: (
    <InputAdornment position="end">
      <Tooltip color="error" title="Error Tooltip Content" placement="top">
        <Warning />
      </Tooltip>
    </InputAdornment>
  ),
}

warningTooltipAdornmentInputProps = {
  endAdornment: (
    <InputAdornment position="end">
      <Tooltip color="warning" title="Warning message..." placement="top">
        <Warning />
      </Tooltip>
    </InputAdornment>
  ),
}

function ComponentBase({
  className,
  closeDialog,
}: DialogProps<FormParams, FormReturn>) {
  // ---------------------------------------------
  // dependencies
  // ---------------------------------------------
  const { connected } = useAccount();

  const fixedFee = useFixedFee();

  const {
    contractAddress: { cw20 },
  } = useAnchorWebapp();

  const { data: { infoAndBalances = [] } = {} } =
    useBAssetInfoAndBalanceTotalQuery();

  const [send, sendResult] = useTerraSendTx();

  const currencies = useMemo<CurrencyInfo[]>(
    () => [
      {
        label: 'UST',
        value: 'usd',
        integerPoints: UST_INPUT_MAXIMUM_INTEGER_POINTS,
        decimalPoints: UST_INPUT_MAXIMUM_DECIMAL_POINTS,
        getWithdrawable: (bank: AnchorBank, fixedGas: u<UST<BigSource>>) => {
          return big(bank.tokenBalances.uUST)
            .minus(
              min(
                big(bank.tokenBalances.uUST).mul(bank.tax.taxRate),
                bank.tax.maxTaxUUSD,
              ),
            )
            .minus(big(fixedGas).mul(2))
            .toString() as u<Token>;
        },
        getFormatWithdrawable: (
          bank: AnchorBank,
          fixedGas: u<UST<BigSource>>,
        ) => {
          return formatUSTInput(
            demicrofy(
              big(bank.tokenBalances.uUST)
                .minus(
                  min(
                    big(bank.tokenBalances.uUST).mul(bank.tax.taxRate),
                    bank.tax.maxTaxUUSD,
                  ),
                )
                .minus(big(fixedGas).mul(2)) as u<UST<Big>>,
            ),
          );
        },
      },
      {
        label: 'aUST',
        value: 'aust',
        integerPoints: AUST_INPUT_MAXIMUM_INTEGER_POINTS,
        decimalPoints: AUST_INPUT_MAXIMUM_DECIMAL_POINTS,
        getWithdrawable: (bank: AnchorBank) => bank.tokenBalances.uaUST,
        getFormatWithdrawable: (bank: AnchorBank) =>
          formatAUSTInput(demicrofy(bank.tokenBalances.uaUST)),
        cw20Address: cw20.aUST,
      },
      {
        label: 'LUNA',
        value: 'luna',
        integerPoints: LUNA_INPUT_MAXIMUM_INTEGER_POINTS,
        decimalPoints: LUNA_INPUT_MAXIMUM_DECIMAL_POINTS,
        getWithdrawable: (bank: AnchorBank) => bank.tokenBalances.uLuna,
        getFormatWithdrawable: (bank: AnchorBank) =>
          formatLunaInput(demicrofy(bank.tokenBalances.uLuna)),
      },
      {
        label: 'bLUNA',
        value: 'bluna',
        integerPoints: LUNA_INPUT_MAXIMUM_INTEGER_POINTS,
        decimalPoints: LUNA_INPUT_MAXIMUM_DECIMAL_POINTS,
        getWithdrawable: (bank: AnchorBank) => bank.tokenBalances.ubLuna,
        getFormatWithdrawable: (bank: AnchorBank) =>
          formatLunaInput(demicrofy(bank.tokenBalances.ubLuna)),
        cw20Address: cw20.bLuna,
      },
      ...infoAndBalances.map(({ bAsset, balance, tokenDisplay }) => ({
        label: tokenDisplay?.symbol ?? bAsset.symbol,
        value: bAsset.symbol,
        integerPoints: LUNA_INPUT_MAXIMUM_INTEGER_POINTS,
        decimalPoints: LUNA_INPUT_MAXIMUM_DECIMAL_POINTS,
        getWithdrawable: () => balance.balance,
        getFormatWithdrawable: () =>
          formatBAssetInput(demicrofy(balance.balance)),
        cw20Address: bAsset.collateral_token,
      })),
      {
        label: 'ANC',
        value: 'anc',
        integerPoints: ANC_INPUT_MAXIMUM_INTEGER_POINTS,
        decimalPoints: ANC_INPUT_MAXIMUM_DECIMAL_POINTS,
        getWithdrawable: (bank: AnchorBank) => bank.tokenBalances.uANC,
        getFormatWithdrawable: (bank: AnchorBank) =>
          formatANCInput(demicrofy(bank.tokenBalances.uANC)),
        cw20Address: cw20.ANC,
      },
    ],
    [cw20.ANC, cw20.aUST, cw20.bLuna, infoAndBalances],
  );

  // ---------------------------------------------
  // states
  // ---------------------------------------------
  const [address, setAddress] = useState<string>('');

  const [amount, setAmount] = useState<Token>('' as Token);

  const [currency, setCurrency] = useState<CurrencyInfo>(() => currencies[0]);

  const [memo, setMemo] = useState<string>('');

  // ---------------------------------------------
  // queries
  // ---------------------------------------------
  const bank = useAnchorBank();

  // ---------------------------------------------
  // computed
  // ---------------------------------------------
  //const numberInputHandlers = useRestrictedNumberInput({
  //  maxIntegerPoinsts: currency.integerPoints,
  //  maxDecimalPoints: currency.decimalPoints,
  //});

  const memoWarning = useMemo(() => {
    return memo.trim().length === 0
      ? 'Please double check if the transaction requires a memo'
      : undefined;
  }, [memo]);

  // ---------------------------------------------
  // callbacks
  // ---------------------------------------------
  const updateCurrency = useCallback(
    (nextCurrencyValue: string) => {
      setCurrency(
        currencies.find(({ value }) => nextCurrencyValue === value) ??
          currencies[0],
      );

      setAmount('' as Token);
    },
    [currencies],
  );

  // ---------------------------------------------
  // logics
  // ---------------------------------------------
  const txFee = useMemo(() => {
    if (amount.length === 0 || currency.value !== 'usd') {
      return fixedFee;
    }

    return min(
      microfy(amount as UST).mul(bank.tax.taxRate),
      bank.tax.maxTaxUUSD,
    ).plus(fixedFee) as u<UST<Big>>;
  }, [amount, bank.tax.maxTaxUUSD, bank.tax.taxRate, currency.value, fixedFee]);

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

  const invalidAddress = useMemo(() => {
    if (address.length === 0) {
      return undefined;
    }

    return !AccAddress.validate(address) ? 'Invalid address' : undefined;
  }, [address]);

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

    return microfy(amount as Token).gt(currency.getWithdrawable(bank, fixedFee))
      ? 'Not enough assets'
      : undefined;
  }, [amount, currency, bank, fixedFee]);

  const invalidMemo = useMemo(() => {
    return /[<>]/.test(memo) ? 'Characters < and > are not allowed' : undefined;
  }, [memo]);

  const submit = useCallback(
    async (
      toAddress: string,
      currency: CurrencyInfo,
      amount: Token,
      txFee: u<UST>,
      memo: string,
    ) => {
      if (!connected || !send) {
        return;
      }

      send({
        toWalletAddress: toAddress as HumanAddr,
        amount,
        currency,
        txFee,
        memo,
      });
    },
    [connected, send],
  );

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

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

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

        {/* Address */}
        <div className="address-description">
          <p>Send to</p>
          <p />
        </div>

        <TextInput
          className="address"
          fullWidth
          placeholder="ADDRESS"
          value={address}
          error={!!invalidAddress}
          helperText={invalidAddress}
          onChange={({ target }: ChangeEvent<HTMLInputElement>) =>
            setAddress(target.value)
          }
        />

        {/* Amount */}
        <div className="amount-description">
          <p>Amount</p>
          <p />
        </div>

        <SelectAndTextInputContainer
          className="amount"
          gridColumns={[120, '1fr']}
          error={!!invalidAmount}
          leftHelperText={invalidAmount}
          rightHelperText={
            <span>
              Withdrawable:{' '}
              <span
                style={{ textDecoration: 'underline', cursor: 'pointer' }}
                onClick={() =>
                  setAmount(
                    currency.getFormatWithdrawable(bank, fixedFee) as Token,
                  )
                }
              >
                {currency.getFormatWithdrawable(bank, fixedFee)}{' '}
                {currency.label}
              </span>
            </span>
          }
        >
          <MuiNativeSelect
            value={currency.value}
            onChange={({ target }) => updateCurrency(target.value)}
          >
            {currencies.map(({ label, value }) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </MuiNativeSelect>
          <NumberMuiInput
            placeholder="0"
            value={amount}
            maxIntegerPoinsts={currency.integerPoints}
            maxDecimalPoints={currency.decimalPoints}
            onChange={({ target }: ChangeEvent<HTMLInputElement>) =>
              setAmount(target.value as Token)
            }
          />
        </SelectAndTextInputContainer>

        {/* Memo */}
        <div className="memo-description">
          <p>Memo (Optional)</p>
          <p />
        </div>

        <TextInput
          className="memo"
          fullWidth
          placeholder="MEMO"
          value={memo}
          error={!!invalidMemo}
          helperText={invalidMemo}
          onChange={({ target }: ChangeEvent<HTMLInputElement>) =>
            setMemo(target.value)
          }
        />

        <div className="memo-warning">
          {memoWarning && (
            <WarningMessage>
              <IconSpan wordBreak={false}>
                <Warning /> Please double check if the transaction requires a
                memo
              </IconSpan>
            </WarningMessage>
          )}
        </div>

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

        <ViewAddressWarning>
          <ActionButton
            className="send"
            disabled={
              !connected ||
              !send ||
              address.length === 0 ||
              amount.length === 0 ||
              !!invalidAddress ||
              !!invalidAmount ||
              !!invalidTxFee ||
              !!invalidMemo ||
              big(currency.getWithdrawable(bank, fixedFee)).lte(0)
            }
            onClick={() =>
              submit(
                address,
                currency,
                amount,
                txFee.toString() as u<UST>,
                memo,
              )
            }
          >
            Send
          </ActionButton>
        </ViewAddressWarning>
      </Dialog>
    </Modal>
  );
}