address type validation

ui/address/contract/ContractMethodCallable.tsx

@@ -80,6 +80,7 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
 
   const { control, handleSubmit, setValue, getValues } = useForm<MethodFormFields>({
     defaultValues: _fromPairs(inputs.map(({ name }, index) => [ getFieldName(name, index), '' ])),
+    mode: 'onBlur',
   });
 
   const handleTxSettle = React.useCallback(() => {

ui/address/contract/ContractMethodField.tsx

@@ -6,8 +6,9 @@ import {
   InputRightElement,
 } from '@chakra-ui/react';
 import React from 'react';
-import type { Control, ControllerRenderProps, UseFormGetValues, UseFormSetValue } from 'react-hook-form';
+import type { Control, ControllerRenderProps, UseFormGetValues, UseFormSetValue, UseFormStateReturn } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
+import { isAddress } from 'viem';
 
 import type { MethodFormFields } from './types';
 import type { SmartContractMethodArgType } from 'types/api/contract';
@@ -47,8 +48,13 @@ const ContractMethodField = ({ control, name, valueType, placeholder, setValue,
 
   const hasZerosControl = addZeroesAllowed(valueType);
 
-  const renderInput = React.useCallback(({ field }: { field: ControllerRenderProps<MethodFormFields> }) => {
+  const renderInput = React.useCallback((
+    { field, formState }: { field: ControllerRenderProps<MethodFormFields>; formState: UseFormStateReturn<MethodFormFields> },
+  ) => {
+    const error = formState.errors[name];
+
     return (
+      <Box>
         <FormControl
           id={ name }
           w="100%"
@@ -59,6 +65,8 @@ const ContractMethodField = ({ control, name, valueType, placeholder, setValue,
             <Input
               { ...field }
               ref={ ref }
+              isInvalid={ Boolean(error) }
+              required
               placeholder={ placeholder }
               paddingRight={ hasZerosControl ? '120px' : '40px' }
               autoComplete="off"
@@ -69,9 +77,22 @@ const ContractMethodField = ({ control, name, valueType, placeholder, setValue,
             </InputRightElement>
           </InputGroup>
         </FormControl>
+        { error && <Box color="error" fontSize="sm" mt={ 1 }>{ error.message }</Box> }
+      </Box>
     );
   }, [ name, isDisabled, placeholder, hasZerosControl, handleClear, handleAddZeroesClick ]);
 
+  const validate = React.useCallback((value: string) => {
+    switch (valueType) {
+      case 'address': {
+        return !isAddress(value) ? 'Invalid address format' : true;
+      }
+
+      default:
+        return;
+    }
+  }, [ valueType ]);
+
   return (
     <>
       <Box
@@ -86,6 +107,7 @@ const ContractMethodField = ({ control, name, valueType, placeholder, setValue,
         name={ name }
         control={ control }
         render={ renderInput }
+        rules={{ required: 'Field is required', validate }}
       />
     </>
   );