input fields

theme/components/Input.ts

@@ -16,8 +16,8 @@ const size = {
   xs: defineStyle({
     fontSize: 'md',
     lineHeight: '24px',
-    px: '4px',
-    py: '12px',
+    px: '8px',
+    py: '4px',
     h: '32px',
     borderRadius: 'base',
   }),

ui/address/contract/ContractReadItemInput.tsx

+import { Button, chakra } from '@chakra-ui/react';
+import _fromPairs from 'lodash/fromPairs';
 import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 
+import type { MethodInputFields } from './types';
 import type { SmartContractMethodInput } from 'types/api/contract';
 
+import ContractReadItemInputField from './ContractReadItemInputField';
+
 interface Props {
   data: Array<SmartContractMethodInput>;
 }
 
 const ContractReadItemInput = ({ data }: Props) => {
-  return <span>{ data.map(({ type }) => type).join(', ') }</span>;
+  const { control, handleSubmit } = useForm<MethodInputFields>({
+    defaultValues: _fromPairs(data.map(({ name }, index) => [ name || index, '' ])),
+  });
+
+  const onSubmit: SubmitHandler<MethodInputFields> = React.useCallback((data) => {
+    // eslint-disable-next-line no-console
+    console.log('__>__', data);
+  }, [ ]);
+
+  return (
+    <chakra.form
+      noValidate
+      display="flex"
+      columnGap={ 3 }
+      flexDir={{ base: 'column', lg: 'row' }}
+      rowGap={ 2 }
+      alignItems={{ base: 'flex-start', lg: 'center' }}
+      onSubmit={ handleSubmit(onSubmit) }
+    >
+      { data.map(({ type, name }, index) => {
+        return (
+          <ContractReadItemInputField
+            key={ name || index }
+            name={ name }
+            index={ index }
+            control={ control }
+            type={ type }
+          />
+        );
+      }) }
+      <Button
+        variant="outline"
+        size="sm"
+        flexShrink={ 0 }
+        type="submit"
+      >
+        Query
+      </Button>
+    </chakra.form>
+  );
 };
 
 export default ContractReadItemInput;

ui/address/contract/ContractReadItemInputField.tsx

+import { Button, FormControl, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerRenderProps } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import type { MethodInputFields } from './types';
+
+interface Props {
+  control: Control<MethodInputFields>;
+  type: string;
+  name: string;
+  index: number;
+}
+
+const ContractReadItemInputField = ({ control, name, type, index }: Props) => {
+  const fieldName = name || String(index);
+  const renderInput = React.useCallback(({ field }: {field: ControllerRenderProps<MethodInputFields>}) => {
+    return (
+      <FormControl id={ fieldName }>
+        <InputGroup key={ fieldName } size="xs">
+          <Input
+            { ...field }
+            placeholder={ `${ name }(${ type })` }
+          />
+          <InputRightElement>
+            <Button size="xs">clear</Button>
+          </InputRightElement>
+        </InputGroup>
+      </FormControl>
+    );
+  }, [ fieldName, name, type ]);
+
+  return (
+    <Controller
+      name={ fieldName }
+      control={ control }
+      render={ renderInput }
+    />
+
+  );
+};
+
+export default ContractReadItemInputField;

ui/address/contract/types.ts

+export type MethodInputFields = Record<string, string>;