refactor(explorer): move faucet form from formik to react-hook-form

[telestrial]

This replaces formik in the explorer faucet fund form. This doesn't remove the formik dependency, yet, because we still have these files using formik:

ContractsFilterContractIdDialog
ContractsFilterAddressDialog
ContractsFilterPublicKeyDialog
HostsFilterAddressDialog
HostsFilterPublicKeyDialog
AllowlistForm
BlocklistForm
FileCreateDirectoryDialog
WalletAddAddressDialog

I have one concern that I really haven't found the right solution for. I think a blue sky implementation of react-hook-form looks something like this:

const { handleSubmit, register } = useForm<(<foo: string, bar: number)>()
const onSubmit = (data) => { data.foo... }

return <form onSubmit={handleSubmit(onSubmit)}>
         <input type="text" {...register('foo')} />
       </form>

In theory, this should extend react-hook-form's FieldValues to be properly typed and, for example, prevent trying to register a property that doesn't exist in the type or use a value of the wrong type. The problem? I can't figure out how to receive that type in the ReactHookForm component. I've tried pretty much everything I can think of, including a T Extends FieldValues approach, but it hasn't worked. In lieu of that panning out, this implementation does work-setting the type in the data of the onSubmit. But you won't be properly checked around registering and setting values the way you might be if we could receive the type correctly in the ReactHookFormField component's FieldValues. Open to ideas here, for sure.

Otherwise, this does remove formik for react-hook-form in the faucet form. There just may be a better way to type it on the component side which would somewhat affect this implementation.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
explorer	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 10, 2024 7:55pm
explorer-zen	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 10, 2024 7:55pm

3 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
hostd	⬜️ Ignored (Inspect)	Visit Preview		Dec 10, 2024 7:55pm
renterd	⬜️ Ignored (Inspect)	Visit Preview		Dec 10, 2024 7:55pm
website	⬜️ Ignored (Inspect)	Visit Preview		Dec 10, 2024 7:55pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 38903f3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
explorer	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[telestrial]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• refactor(explorer): move faucet form from formik to react-hook-form #846 👈 (View in Graphite)
• feat(design-system): create ReactHookFormField components file #845
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[alexfreska]

@telestrial check out the form/ folder in the design-system it contains a whole bunch of useful components for using react-hook-form. If you check out any of the existing forms (eg: https://github.com/SiaFoundation/web/blob/main/apps/walletd/dialogs/WalletUpdateDialog/index.tsx) you can see they all follow the same pattern where they define a fields or getFields which provides field configuration data of type ConfigFields, all the components use this data format, which streamlines things. They all also define a defaultValues or getDefaultValues from which we get a Values type and that we pass to useForm to give it initial data and type information. If you look at a few of these existing forms it should give you some good information.