fixed size array

ui/address/contract/ContractMethodField.tsx

@@ -100,7 +100,7 @@ const ContractMethodField = ({ control, name, groupName, index, argType, placeho
               autoComplete="off"
             />
             <InputRightElement w="auto" right={ 1 }>
-              { field.value && <ClearButton onClick={ handleClear } isDisabled={ isDisabled }/> }
+              { typeof field.value === 'string' && field.value.replace('\n', '') && <ClearButton onClick={ handleClear } isDisabled={ isDisabled }/> }
               { hasZerosControl && <ContractMethodFieldZeroes onClick={ handleAddZeroesClick } isDisabled={ isDisabled }/> }
             </InputRightElement>
           </InputGroup>
@@ -110,11 +110,17 @@ const ContractMethodField = ({ control, name, groupName, index, argType, placeho
     );
   }, [ index, groupName, name, intMatch, isDisabled, placeholder, handleClear, handleAddZeroesClick ]);
 
-  const validate = React.useCallback((value: string | Array<string>) => {
-    if (typeof value === 'object' || !value) {
+  const validate = React.useCallback((_value: string | Array<string>) => {
+    if (typeof _value === 'object') {
       return;
     }
 
+    const value = _value.replace('\n', '');
+
+    if (!value) {
+      return 'Field is required';
+    }
+
     if (argType === 'address') {
       return !isAddress(value) ? 'Invalid address format' : true;
     }

ui/address/contract/ContractMethodFieldArray.tsx

@@ -22,15 +22,26 @@ interface Props {
   onChange: () => void;
 }
 
-const ContractMethodFieldArray = ({ control, name, setValue, getValues, isDisabled, argType, onChange }: Props) => {
+const ContractMethodFieldArray = ({ control, name, setValue, getValues, isDisabled, argType, onChange, size }: Props) => {
   const { fields, append, remove } = useFieldArray({
     name: name as never,
     control,
   });
 
   React.useEffect(() => {
-    fields.length === 0 && append('');
-  }, [ append, fields.length ]);
+    if (fields.length === 0) {
+      if (size === Infinity) {
+        append('');
+      } else {
+        for (let i = 0; i < size - 1; i++) {
+          // a little hack to append multiple empty fields in the array
+          // had to adjust code in ContractMethodField as well
+          append('\n');
+        }
+      }
+    }
+
+  }, [ fields.length, append, size ]);
 
   const handleAddButtonClick = React.useCallback(() => {
     append('');
@@ -60,7 +71,7 @@ const ContractMethodFieldArray = ({ control, name, setValue, getValues, isDisabl
               isDisabled={ isDisabled }
               onChange={ onChange }
             />
-            { array.length > 1 && (
+            { array.length > 1 && size === Infinity && (
               <IconButton
                 aria-label="remove"
                 data-index={ index }
@@ -73,7 +84,7 @@ const ContractMethodFieldArray = ({ control, name, setValue, getValues, isDisabl
                 isDisabled={ isDisabled }
               />
             ) }
-            { index === array.length - 1 && (
+            { index === array.length - 1 && size === Infinity && (
               <IconButton
                 aria-label="add"
                 data-index={ index }