frontend: Refactored transactions. Removed redundant hooks in favor o…

…f useTransact(). Added getResponseObjectId() function.

packages/frontend/src/components/GreetingForm.tsx

@@ -1,11 +1,20 @@
-import { fromBytesToString, getContentField } from '@/helpers/greeting'
+import {
+  CONTRACT_PACKAGE_VARIABLE_NAME,
+  useNetworkVariable,
+} from '@/config/networks'
+import {
+  fromBytesToString,
+  getResponseContentField,
+  getResponseObjectId,
+} from '@/helpers/greeting/misc'
+import {
+  prepareCreateGreetingTransaction,
+  prepareResetGreetingTransaction,
+  prepareSetGreetingTransaction,
+} from '@/helpers/greeting/transactions'
 import { notification } from '@/helpers/notification'
-import useCreateGreeting from '@/hooks/useCreateGreeting'
-import useGreet from '@/hooks/useGreet'
-import useReset from '@/hooks/useReset'
+import useTransact from '@/hooks/useTransact'
 import { useCurrentAccount } from '@mysten/dapp-kit'
-import { TransactionBlock } from '@mysten/sui.js/transactions'
-import { isValidSuiObjectId } from '@mysten/sui.js/utils'
 import { Button, TextField } from '@radix-ui/themes'
 import { ChangeEvent, FC, MouseEvent, PropsWithChildren, useState } from 'react'
 import useOwnGreeting from '../hooks/useOwnGreeting'
@@ -15,17 +24,18 @@ const GreetingForm = () => {
   const [name, setName] = useState<string>('')
   const currentAccount = useCurrentAccount()
   const { data, isPending, error, refetch } = useOwnGreeting()
-  const { create } = useCreateGreeting({
+  const packageId = useNetworkVariable(CONTRACT_PACKAGE_VARIABLE_NAME)
+  const { transact: create } = useTransact({
     onSuccess: () => {
       refetch()
     },
   })
-  const { greet } = useGreet({
+  const { transact: greet } = useTransact({
     onSuccess: () => {
       refetch()
     },
   })
-  const { reset } = useReset({
+  const { transact: reset } = useTransact({
     onSuccess: () => {
       refetch()
     },
@@ -34,18 +44,16 @@ const GreetingForm = () => {
   const handleCreateGreetingClick = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
 
-    // @todo: Find a way to refactor this code.
-    const txb = new TransactionBlock()
-    create(txb)
+    create(prepareCreateGreetingTransaction(packageId))
   }
 
   const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
     e.preventDefault()
     setName(e.target.value)
   }
 
-  const handleGreetMe = (objectId: string | undefined) => {
-    if (objectId == null || !isValidSuiObjectId(objectId)) {
+  const handleGreetMe = (objectId: string | null | undefined) => {
+    if (objectId == null) {
       notification.error(null, 'Object ID is not valid')
       return
     }
@@ -55,26 +63,16 @@ const GreetingForm = () => {
       return
     }
 
-    // @todo: Find a way to refactor this code.
-    const txb = new TransactionBlock()
-    const args = [
-      txb.object(objectId),
-      txb.pure.string(name),
-      txb.object('0x8'),
-    ]
-    greet(txb, args)
+    greet(prepareSetGreetingTransaction(packageId, objectId, name))
   }
 
-  const handleReset = (objectId: string | undefined) => {
-    if (objectId == null || !isValidSuiObjectId(objectId)) {
+  const handleReset = (objectId: string | null | undefined) => {
+    if (objectId == null) {
       notification.error(null, 'Object ID is not valid')
       return
     }
 
-    // @todo: Find a way to refactor this code.
-    const txb = new TransactionBlock()
-    const args = [txb.object(objectId)]
-    reset(txb, args)
+    reset(prepareResetGreetingTransaction(packageId, objectId))
   }
 
   if (currentAccount == null)
@@ -97,20 +95,26 @@ const GreetingForm = () => {
         </div>
       ) : (
         <div>
-          {getContentField(data.data[0], 'name')?.length !== 0 ? (
+          {getResponseContentField(data.data[0], 'name')?.length !== 0 ? (
             <div className="flex w-full max-w-xs flex-col gap-6 px-2 sm:max-w-lg">
               <h1 className="bg-gradient-to-r from-sds-blue to-sds-pink bg-clip-text text-center text-4xl font-bold !leading-tight text-transparent sm:text-5xl">
                 Greetings from{' '}
-                <AnimalEmoji index={getContentField(data.data[0], 'emoji')} />,
+                <AnimalEmoji
+                  index={getResponseContentField(data.data[0], 'emoji')}
+                />
+                ,
                 <br />
-                {fromBytesToString(getContentField(data.data[0], 'name'))}!
+                {fromBytesToString(
+                  getResponseContentField(data.data[0], 'name')
+                )}
+                !
               </h1>
               <Button
                 variant="solid"
                 size="4"
                 onClick={(e: MouseEvent<HTMLButtonElement>) => {
                   e.preventDefault()
-                  handleReset(data.data[0].data?.objectId)
+                  handleReset(getResponseObjectId(data.data[0]))
                 }}
               >
                 Start over
@@ -129,7 +133,7 @@ const GreetingForm = () => {
                 size="4"
                 onClick={(e: MouseEvent<HTMLButtonElement>) => {
                   e.preventDefault()
-                  handleGreetMe(data.data[0].data?.objectId)
+                  handleGreetMe(getResponseObjectId(data.data[0]))
                 }}
               >
                 Greet me!

packages/frontend/src/helpers/greeting.ts → packages/frontend/src/helpers/greeting/misc.ts

@@ -1,5 +1,6 @@
 import { CONTRACT_MODULE_NAME } from '@/config/networks'
 import { SuiObjectResponse } from '@mysten/sui.js/client'
+import { isValidSuiObjectId } from '@mysten/sui.js/utils'
 
 export const fullFunctionName = (
   packageId: string,
@@ -19,15 +20,15 @@ export const fromBytesToString = (bytes: number[]): string => {
   return new TextDecoder().decode(new Uint8Array(bytes))
 }
 
-export const getContentField = (
+export const getResponseContentField = (
   response: SuiObjectResponse | null | undefined,
   field: string
 ) => {
-  if (response == null) {
-    return null
-  }
-
-  if (response.data == null || response.data.content == null) {
+  if (
+    response == null ||
+    response.data == null ||
+    response.data?.content == null
+  ) {
     return null
   }
 
@@ -46,6 +47,26 @@ export const getContentField = (
   return content.fields[field]
 }
 
+export const getResponseObjectId = (
+  response: SuiObjectResponse | null | undefined
+) => {
+  if (
+    response == null ||
+    response.data == null ||
+    response.data?.objectId == null
+  ) {
+    return null
+  }
+
+  const objectId = response.data.objectId
+
+  if (!isValidSuiObjectId(objectId)) {
+    return null
+  }
+
+  return objectId
+}
+
 const fullModuleName = (packageId: string): `${string}::${string}` => {
   return `${packageId}::${CONTRACT_MODULE_NAME}`
 }

packages/frontend/src/helpers/greeting/transactions.ts

@@ -0,0 +1,41 @@
+import { fullFunctionName } from '@/helpers/greeting/misc'
+import { TransactionBlock } from '@mysten/sui.js/transactions'
+
+export const prepareCreateGreetingTransaction = (
+  packageId: string
+): TransactionBlock => {
+  const txb = new TransactionBlock()
+  txb.moveCall({
+    arguments: [],
+    target: fullFunctionName(packageId, 'create'),
+  })
+
+  return txb
+}
+
+export const prepareSetGreetingTransaction = (
+  packageId: string,
+  objectId: string,
+  name: string
+): TransactionBlock => {
+  const txb = new TransactionBlock()
+  txb.moveCall({
+    arguments: [txb.object(objectId), txb.pure.string(name), txb.object('0x8')],
+    target: fullFunctionName(packageId, 'set_greeting'),
+  })
+
+  return txb
+}
+
+export const prepareResetGreetingTransaction = (
+  packageId: string,
+  objectId: string
+): TransactionBlock => {
+  const txb = new TransactionBlock()
+  txb.moveCall({
+    arguments: [txb.object(objectId)],
+    target: fullFunctionName(packageId, 'reset_greeting'),
+  })
+
+  return txb
+}

packages/frontend/src/hooks/useOwnGreeting.tsx

@@ -2,7 +2,7 @@ import {
   CONTRACT_PACKAGE_VARIABLE_NAME,
   useNetworkVariable,
 } from '@/config/networks'
-import { fullStructName } from '@/helpers/greeting'
+import { fullStructName } from '@/helpers/greeting/misc'
 import { useCurrentAccount, useSuiClientQuery } from '@mysten/dapp-kit'
 
 const useOwnGreeting = () => {

packages/frontend/src/hooks/useTransact.ts

@@ -12,23 +12,16 @@ import { SuiTransactionBlockResponse } from '@mysten/sui.js/client'
 import { TransactionBlock } from '@mysten/sui.js/transactions'
 
 interface IProps {
-  functionName: `${string}::${string}::${string}`
   onSuccess?: (response: SuiTransactionBlockResponse) => void
   onError?: (e: Error) => void
 }
 
-const useTransact = ({ functionName, onSuccess, onError }: IProps) => {
+const useTransact = ({ onSuccess, onError }: IProps) => {
   const client = useSuiClient()
   const { mutate: signAndExecute } = useSignAndExecuteTransactionBlock()
   const explorerUrl = useNetworkVariable(EXPLORER_URL_VARIABLE_NAME)
 
-  /* eslint-disable  @typescript-eslint/no-explicit-any */
-  const transact = (txb: TransactionBlock, args: any[] = []) => {
-    txb.moveCall({
-      arguments: args,
-      target: functionName,
-    })
-
+  const transact = (txb: TransactionBlock) => {
     const notificationId = notification.txLoading()
 
     signAndExecute(