diff --git a/.changeset/brave-rules-beam.md b/.changeset/brave-rules-beam.md new file mode 100644 index 000000000..62493dc77 --- /dev/null +++ b/.changeset/brave-rules-beam.md @@ -0,0 +1,5 @@ +--- +'explorer': minor +--- + +Refactored faucet form from formik to react-hook-form. diff --git a/apps/explorer/components/Faucet/FaucetFundForm.tsx b/apps/explorer/components/Faucet/FaucetFundForm.tsx index 57cfefa5a..3cd34ae47 100644 --- a/apps/explorer/components/Faucet/FaucetFundForm.tsx +++ b/apps/explorer/components/Faucet/FaucetFundForm.tsx @@ -1,94 +1,109 @@ import { - FormFieldFormik, - FormSubmitButtonFormik, Paragraph, + ReactHookFormField, + ReactHookFormSubmitButton, triggerSuccessToast, + triggerErrorToast, } from '@siafoundation/design-system' import { toHastings } from '@siafoundation/units' import BigNumber from 'bignumber.js' -import { useFormik } from 'formik' -import * as Yup from 'yup' import { networkName } from '../../config' import { useFaucetFund } from '../../hooks/useFaucetFund' +import { useForm } from 'react-hook-form' -const initialValues = { - address: '', - amount: undefined as BigNumber | undefined, +type FaucetFundFormFields = { + address: string + siacoin: BigNumber } -const validationSchema = Yup.object().shape({ - address: Yup.string().required('Required'), - amount: Yup.string() - .required('Required') - .test( - 'greater than zero', - 'Must be greater than 0 SC', - (val) => !new BigNumber(val || 0).isZero() - ) - .test('less than 1000', 'Must be 50,000 SC or less', (val) => - new BigNumber(val || 0).lte(50_000) - ), -}) +const faucetFundFormValidation = { + address: { + required: { value: true, message: 'An address is required' }, + }, + siacoin: { + required: { value: true, message: 'An amount is required' }, + min: { value: 1, message: 'Amount must be at least 1' }, + max: { value: 50000, message: 'Amount cannot exceed 50,000' }, + }, +} -type Props = { +type FaucetFundFormProps = { onDone: (id: string) => void } -export function FaucetFundForm({ onDone }: Props) { +export function FaucetFundForm({ onDone }: FaucetFundFormProps) { const fund = useFaucetFund() + const { + register, + handleSubmit, + formState: { errors, isSubmitting }, + watch, + setValue, + } = useForm() + const onSubmit = async (data: FaucetFundFormFields) => { + const { address, siacoin } = data + + const response = await fund.post({ + payload: { + unlockHash: address, + amount: toHastings(siacoin || 0).toString(), + }, + }) - const formik = useFormik({ - initialValues, - validationSchema, - onSubmit: async (values, actions) => { - const response = await fund.post({ - payload: { - unlockHash: values.address, - amount: toHastings(values.amount || 0).toString(), - }, + if (response.error) { + triggerErrorToast({ + title: + response.status === 429 + ? 'You have reached your maximum requests for now. Try again later.' + : 'Fund request failed. Check your connection or try again later.', }) - if (response.error) { - actions.setStatus({ error: response.error }) - } else { - triggerSuccessToast({ title: 'Address has been funded' }) - if (response.data) { - onDone(response.data.id) - } - actions.resetForm() - } - }, - }) + } else { + triggerSuccessToast({ title: 'Address has been funded.' }) + if (response.data) onDone(response.data.id) + setValue('address', '') + setValue('siacoin', undefined) + } + } return (