From b7d0a67292e2a4495440e475e18b421beae5b351 Mon Sep 17 00:00:00 2001
From: peetzweg/ <phil.czek@gmail.com>
Date: Fri, 2 Feb 2024 16:49:57 +0100
Subject: [PATCH 1/3] use zod if it's a dependency

---
 .../web3/greeter-contract-interactions.tsx         | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/web3/greeter-contract-interactions.tsx b/frontend/src/components/web3/greeter-contract-interactions.tsx
index 61ed42e..909ff91 100644
--- a/frontend/src/components/web3/greeter-contract-interactions.tsx
+++ b/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,8 +12,9 @@ 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'
@@ -20,7 +22,9 @@ 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()
@@ -29,7 +33,9 @@ export const GreeterContractInteractions: FC = () => {
   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,7 +66,7 @@ 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

From d623968827da0d96b51a09f79d2f02ecb1c6c2a8 Mon Sep 17 00:00:00 2001
From: peetzweg/ <phil.czek@gmail.com>
Date: Fri, 2 Feb 2024 16:53:56 +0100
Subject: [PATCH 2/3] adds changeset

---
 .changeset/early-deers-dream.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/early-deers-dream.md

diff --git a/.changeset/early-deers-dream.md b/.changeset/early-deers-dream.md
new file mode 100644
index 0000000..3f35987
--- /dev/null
+++ b/.changeset/early-deers-dream.md
@@ -0,0 +1,5 @@
+---
+"@inkathon/frontend": minor
+---
+
+uses zod for form validation

From b753f5f496be2fe94ca3da19cc14ed95b6ebbc0b Mon Sep 17 00:00:00 2001
From: peetzweg/ <phil.czek@gmail.com>
Date: Fri, 2 Feb 2024 16:59:49 +0100
Subject: [PATCH 3/3] use actual formState instead of self mantained state

---
 .../components/web3/greeter-contract-interactions.tsx  | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/web3/greeter-contract-interactions.tsx b/frontend/src/components/web3/greeter-contract-interactions.tsx
index 909ff91..4e7e05a 100644
--- a/frontend/src/components/web3/greeter-contract-interactions.tsx
+++ b/frontend/src/components/web3/greeter-contract-interactions.tsx
@@ -32,7 +32,6 @@ export const GreeterContractInteractions: FC = () => {
   const { typedContract } = useRegisteredTypedContract(ContractIds.Greeter, GreeterContract)
   const [greeterMessage, setGreeterMessage] = useState<string>()
   const [fetchIsLoading, setFetchIsLoading] = useState<boolean>()
-  const [updateIsLoading, setUpdateIsLoading] = useState<boolean>()
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   })
@@ -72,8 +71,6 @@ export const GreeterContractInteractions: FC = () => {
       return
     }
 
-    // Send transaction
-    setUpdateIsLoading(true)
     try {
       await contractTxWithToast(api, activeAccount.address, contract, 'setMessage', {}, [
         newMessage,
@@ -82,7 +79,6 @@ export const GreeterContractInteractions: FC = () => {
     } catch (e) {
       console.error(e)
     } finally {
-      setUpdateIsLoading(false)
       fetchGreeting()
     }
   }
@@ -121,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>