Merge pull request #57 from peetzweg/pz/zod-form

feat: use zod for form validation

Author: wottpal

.changeset/early-deers-dream.md

@@ -0,0 +1,5 @@
+---
+"@inkathon/frontend": minor
+---
+
+uses zod for form validation

frontend/src/components/web3/greeter-contract-interactions.tsx

@@ -3,6 +3,7 @@
 import { FC, useEffect, useState } from 'react'
 
 import { ContractIds } from '@/deployments/deployments'
+import { zodResolver } from '@hookform/resolvers/zod'
 import GreeterContract from '@inkathon/contracts/typed-contracts/contracts/greeter'
 import {
   contractQuery,
@@ -11,25 +12,29 @@ import {
   useRegisteredContract,
   useRegisteredTypedContract,
 } from '@scio-labs/use-inkathon'
-import { useForm } from 'react-hook-form'
+import { SubmitHandler, useForm } from 'react-hook-form'
 import toast from 'react-hot-toast'
+import * as z from 'zod'
 
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import { Form, FormControl, FormItem, FormLabel } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { contractTxWithToast } from '@/utils/contract-tx-with-toast'
 
-type UpdateGreetingValues = { newMessage: string }
+const formSchema = z.object({
+  newMessage: z.string().min(1).max(90),
+})
 
 export const GreeterContractInteractions: FC = () => {
   const { api, activeAccount, activeSigner } = useInkathon()
   const { contract, address: contractAddress } = useRegisteredContract(ContractIds.Greeter)
   const { typedContract } = useRegisteredTypedContract(ContractIds.Greeter, GreeterContract)
   const [greeterMessage, setGreeterMessage] = useState<string>()
   const [fetchIsLoading, setFetchIsLoading] = useState<boolean>()
-  const [updateIsLoading, setUpdateIsLoading] = useState<boolean>()
-  const form = useForm<UpdateGreetingValues>()
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  })
 
   const { register, reset, handleSubmit } = form
 
@@ -60,14 +65,12 @@ export const GreeterContractInteractions: FC = () => {
   }, [typedContract])
 
   // Update Greeting
-  const updateGreeting = async ({ newMessage }: UpdateGreetingValues) => {
+  const updateGreeting: SubmitHandler<z.infer<typeof formSchema>> = async ({ newMessage }) => {
     if (!activeAccount || !contract || !activeSigner || !api) {
       toast.error('Wallet not connected. Try again…')
       return
     }
 
-    // Send transaction
-    setUpdateIsLoading(true)
     try {
       await contractTxWithToast(api, activeAccount.address, contract, 'setMessage', {}, [
         newMessage,
@@ -76,7 +79,6 @@ export const GreeterContractInteractions: FC = () => {
     } catch (e) {
       console.error(e)
     } finally {
-      setUpdateIsLoading(false)
       fetchGreeting()
     }
   }
@@ -115,12 +117,12 @@ export const GreeterContractInteractions: FC = () => {
                   <FormLabel className="text-base">Update Greeting</FormLabel>
                   <FormControl>
                     <div className="flex gap-2">
-                      <Input disabled={updateIsLoading} {...register('newMessage')} />
+                      <Input disabled={form.formState.isSubmitting} {...register('newMessage')} />
                       <Button
                         type="submit"
                         className="bg-primary font-bold"
-                        disabled={fetchIsLoading || updateIsLoading}
-                        isLoading={updateIsLoading}
+                        disabled={fetchIsLoading || form.formState.isSubmitting}
+                        isLoading={form.formState.isSubmitting}
                       >
                         Submit
                       </Button>