diff --git a/wallet-web/components/delegate/DelegateForm.tsx b/wallet-web/components/delegate/DelegateForm.tsx index 0e5bf469d8..2dfd02fc01 100644 --- a/wallet-web/components/delegate/DelegateForm.tsx +++ b/wallet-web/components/delegate/DelegateForm.tsx @@ -1,121 +1,146 @@ +import React, { useState, useEffect, ChangeEvent } from "react"; import Grid from "@material-ui/core/Grid"; -import React from "react"; import { Button, InputAdornment } from "@material-ui/core"; import TextField from "@material-ui/core/TextField"; import { DENOM } from "../../pages/_app"; import { theme } from "../../lib/theme"; -import { basicRawCoinValueValidation, makeBasicStyle, validateIdentityKey } from "../../common/helpers"; - +import { + basicRawCoinValueValidation, + makeBasicStyle, + validateIdentityKey, +} from "../../common/helpers"; +import { useGetBalance } from "../../hooks/useGetBalance"; +import { Alert } from "@material-ui/lab"; type DelegateFormProps = { - onSubmit: (event: any) => void -} + onSubmit: (event: any) => void; +}; export default function DelegateForm(props: DelegateFormProps) { - const classes = makeBasicStyle(theme); + const classes = makeBasicStyle(theme); - const [validAmount, setValidAmount] = React.useState(true) - const [validIdentity, setValidIdentity] = React.useState(true) - // const [checkboxSet, setCheckboxSet] = React.useState(false) + const [validAmount, setValidAmount] = useState(true); + const [validIdentity, setValidIdentity] = useState(true); + const [allocationWarning, setAllocationWarning] = useState(false); + const { getBalance, accountBalance } = useGetBalance(); - // const handleCheckboxToggle = () => { - // setCheckboxSet((prevSet) => !prevSet); - // } + useEffect(() => { + getBalance(); + }, [getBalance]); - const handleAmountChange = (event: any) => { - let nonZeroAmount = event.target.value.length > 0 - if (nonZeroAmount) { - // don't ask me about that. javascript works in mysterious ways - // and this is apparently a good way of checking if string - // is purely made of numeric characters - let parsed = +event.target.value - if (isNaN(parsed)) { - setValidAmount(false) - } else { - setValidAmount(true) + // const [checkboxSet, setCheckboxSet] = React.useState(false) + + // const handleCheckboxToggle = () => { + // setCheckboxSet((prevSet) => !prevSet); + // } + + const handleAmountChange = (event: any) => { + // don't ask me about that. javascript works in mysterious ways + // and this is apparently a good way of checking if string + // is purely made of numeric characters + let parsed = +event.target.value; + if (isNaN(parsed)) { + setValidAmount(false); + } else { + if (parsed > 0 && parseInt(accountBalance.amount) - parsed < 1) { + setAllocationWarning(true); + } else { + setAllocationWarning(false); + } + setValidAmount(true); + } + }; + + const validateForm = (event: any): boolean => { + let validIdentity = validateIdentityKey(event.target.identity.value); + let validAmount = validateAmount(event.target.amount.value); + + setValidIdentity(validIdentity); + setValidAmount(validAmount); + + return validIdentity && validAmount; + }; + + const validateAmount = (rawAmount: string): boolean => { + return basicRawCoinValueValidation(rawAmount); + }; + + const submitForm = (event: any) => { + event.preventDefault(); + + if (validateForm(event)) { + return props.onSubmit(event); + } + }; + + return ( +
+ ); +}