form main info

ui/tokenInfo/TokenInfoForm.tsx

-import { Box } from '@chakra-ui/react';
+import { Grid, GridItem } from '@chakra-ui/react';
 import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+
+import type { Fields } from './types';
+
+import TokenInfoFieldAddress from './fields/TokenInfoFieldAddress';
+import TokenInfoFieldRequesterEmail from './fields/TokenInfoFieldRequesterEmail';
+import TokenInfoFieldRequesterName from './fields/TokenInfoFieldRequesterName';
 
 interface Props {
   id: number;
 }
 
 const TokenInfoForm = ({ id }: Props) => {
-  return <Box>TokenInfoForm for { id }</Box>;
+  const formApi = useForm<Fields>({
+    mode: 'onBlur',
+    defaultValues: {
+      address: '0x9d2a7b2b09b1d4786e36699d9f56b8c04e92cbb9',
+    },
+  });
+  const { handleSubmit, formState, control } = formApi;
+
+  const onFormSubmit: SubmitHandler<Fields> = React.useCallback(async(data) => {
+    // eslint-disable-next-line no-console
+    console.log('__>__', id, data);
+  }, [ id ]);
+
+  const onSubmit = handleSubmit(onFormSubmit);
+
+  return (
+    <form noValidate onSubmit={ onSubmit }>
+      <div>Requests are sent to a moderator for review and approval. This process can take several days.</div>
+      <Grid mt={ 8 } gridTemplateColumns="1fr 1fr" columnGap={ 5 } rowGap={ 5 }>
+        <GridItem colSpan={ 2 }>
+          <TokenInfoFieldAddress control={ control }/>
+        </GridItem>
+        <GridItem>
+          <TokenInfoFieldRequesterName control={ control } formState={ formState }/>
+        </GridItem>
+        <GridItem>
+          <TokenInfoFieldRequesterEmail control={ control } formState={ formState }/>
+        </GridItem>
+      </Grid>
+    </form>
+  );
 };
 
 export default TokenInfoForm;

ui/tokenInfo/fields/TokenInfoFieldAddress.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerRenderProps } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import type { Fields } from '../types';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+interface Props {
+  control: Control<Fields>;
+}
+
+const TokenInfoFieldAddress = ({ control }: Props) => {
+  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'address'>}) => {
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired size="lg">
+        <Input
+          { ...field }
+          required
+          isDisabled
+        />
+        <InputPlaceholder text="Token contract address"/>
+      </FormControl>
+    );
+  }, []);
+
+  return (
+    <Controller
+      name="address"
+      control={ control }
+      render={ renderControl }
+    />
+  );
+};
+
+export default React.memo(TokenInfoFieldAddress);

ui/tokenInfo/fields/TokenInfoFieldRequesterEmail.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import type { Fields } from '../types';
+
+import { EMAIL_REGEXP } from 'lib/validations/email';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+interface Props {
+  formState: FormState<Fields>;
+  control: Control<Fields>;
+  isReadOnly?: boolean;
+}
+
+const TokenInfoFieldRequesterEmail = ({ formState, control, isReadOnly }: Props) => {
+  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'requester_email'>}) => {
+    const error = 'requester_email' in formState.errors ? formState.errors.requester_email : undefined;
+
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired size="lg">
+        <Input
+          { ...field }
+          required
+          isInvalid={ Boolean(error) }
+          isDisabled={ formState.isSubmitting || isReadOnly }
+          autoComplete="off"
+        />
+        <InputPlaceholder text="Requester email" error={ error }/>
+      </FormControl>
+    );
+  }, [ formState.errors, formState.isSubmitting, isReadOnly ]);
+
+  return (
+    <Controller
+      name="requester_email"
+      control={ control }
+      render={ renderControl }
+      rules={{ required: true, pattern: EMAIL_REGEXP }}
+    />
+  );
+};
+
+export default React.memo(TokenInfoFieldRequesterEmail);

ui/tokenInfo/fields/TokenInfoFieldRequesterName.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import type { Control, ControllerRenderProps, FormState } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import type { Fields } from '../types';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+interface Props {
+  formState: FormState<Fields>;
+  control: Control<Fields>;
+  isReadOnly?: boolean;
+}
+
+const TokenInfoFieldRequesterName = ({ formState, control, isReadOnly }: Props) => {
+  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'requester_name'>}) => {
+    const error = 'requester_name' in formState.errors ? formState.errors.requester_name : undefined;
+
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired size="lg">
+        <Input
+          { ...field }
+          required
+          isInvalid={ Boolean(error) }
+          isDisabled={ formState.isSubmitting || isReadOnly }
+          autoComplete="off"
+        />
+        <InputPlaceholder text="Requester name" error={ error }/>
+      </FormControl>
+    );
+  }, [ formState.errors, formState.isSubmitting, isReadOnly ]);
+
+  return (
+    <Controller
+      name="requester_name"
+      control={ control }
+      render={ renderControl }
+      rules={{ required: true }}
+    />
+  );
+};
+
+export default React.memo(TokenInfoFieldRequesterName);

ui/tokenInfo/types.ts

+export interface Fields {
+  address: string;
+  requester_name: string;
+  requester_email: string;
+}