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 ( +
+ + + + - const validateForm = (event: any): boolean => { - let validIdentity = validateIdentityKey(event.target.identity.value); - let validAmount = validateAmount(event.target.amount.value); + + {DENOM} + ), + }} + /> + + {allocationWarning && ( + + + You're about to allocate all of your tokens. You may want to keep + some in order to unbond this mixnode at a later time. + + + )} - setValidIdentity(validIdentity) - setValidAmount(validAmount) + {/**/} + {/* { - return basicRawCoinValueValidation(rawAmount) - } - - const submitForm = (event: any) => { - event.preventDefault() - - if (validateForm(event)) { - return props.onSubmit(event) - } - } - - return ( - - - - - - - - - {DENOM} - }} - /> - - - {/**/} - {/* */} - {/* }*/} - {/* label="checkbox text"*/} - {/* />*/} - {/**/} - - -
- -
- - ) -} \ No newline at end of file + {/* />*/} + {/* }*/} + {/* label="checkbox text"*/} + {/* />*/} + {/*
*/} +
+
+ +
+ + ); +}