add token name field

ui/pages/VerifiedAddresses.tsx

@@ -126,11 +126,14 @@ const VerifiedAddresses = () => {
   }, [ handleGoBack, selectedAddress ]);
 
   if (selectedAddress) {
+    const addressInfo = addressesQuery.data?.verifiedAddresses.find(({ contractAddress }) => contractAddress.toLowerCase() === selectedAddress.toLowerCase());
+    const tokenName = addressInfo ? `${ addressInfo.metadata.tokenName } (${ addressInfo.metadata.tokenSymbol })` : '';
     return (
       <>
         <PageTitle text="Token info application form" backLink={ backLink }/>
         <TokenInfoForm
           address={ selectedAddress }
+          tokenName={ tokenName }
           application={ applicationsQuery.data?.submissions.find(({ tokenAddress }) => tokenAddress.toLowerCase() === selectedAddress.toLowerCase()) }
           onSubmit={ handleApplicationSubmit }
         />

ui/tokenInfo/TokenInfoForm.tsx

@@ -28,16 +28,18 @@ import TokenInfoFieldRequesterEmail from './fields/TokenInfoFieldRequesterEmail'
 import TokenInfoFieldRequesterName from './fields/TokenInfoFieldRequesterName';
 import TokenInfoFieldSocialLink from './fields/TokenInfoFieldSocialLink';
 import TokenInfoFieldSupport from './fields/TokenInfoFieldSupport';
+import TokenInfoFieldTokenName from './fields/TokenInfoFieldTokenName';
 import TokenInfoFormSectionHeader from './TokenInfoFormSectionHeader';
 import { getFormDefaultValues, prepareRequestBody } from './utils';
 
 interface Props {
   address: string;
+  tokenName: string;
   application?: TokenInfoApplication;
   onSubmit: (application: TokenInfoApplication) => void;
 }
 
-const TokenInfoForm = ({ address, application, onSubmit }: Props) => {
+const TokenInfoForm = ({ address, tokenName, application, onSubmit }: Props) => {
 
   const containerRef = React.useRef<HTMLFormElement>(null);
 
@@ -50,7 +52,7 @@ const TokenInfoForm = ({ address, application, onSubmit }: Props) => {
 
   const formApi = useForm<Fields>({
     mode: 'onBlur',
-    defaultValues: getFormDefaultValues(address, application),
+    defaultValues: getFormDefaultValues(address, tokenName, application),
   });
   const { handleSubmit, formState, control, trigger } = formApi;
 
@@ -107,9 +109,8 @@ const TokenInfoForm = ({ address, application, onSubmit }: Props) => {
         <Alert status="warning" mt={ 6 }>Request in progress. Once an admin approves your request you can edit token info.</Alert> }
       <Grid mt={ 8 } gridTemplateColumns={{ base: '1fr', lg: '1fr 1fr' }} columnGap={ 5 } rowGap={ 5 }>
 
-        <GridItem colSpan={{ base: 1, lg: 2 }}>
-          <TokenInfoFieldAddress { ...fieldProps }/>
-        </GridItem>
+        <TokenInfoFieldAddress { ...fieldProps }/>
+        <TokenInfoFieldTokenName { ...fieldProps }/>
         <TokenInfoFieldRequesterName { ...fieldProps }/>
         <TokenInfoFieldRequesterEmail { ...fieldProps }/>
 

ui/tokenInfo/fields/TokenInfoFieldTokenName.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 TokenInfoFieldTokenName = ({ control }: Props) => {
+  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, 'token_name'>}) => {
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
+        <Input
+          { ...field }
+          required
+          isDisabled
+        />
+        <InputPlaceholder text="Token name"/>
+      </FormControl>
+    );
+  }, []);
+
+  return (
+    <Controller
+      name="token_name"
+      control={ control }
+      render={ renderControl }
+    />
+  );
+};
+
+export default React.memo(TokenInfoFieldTokenName);

ui/tokenInfo/types.ts

@@ -2,6 +2,7 @@ import type { Option } from 'ui/shared/FancySelect/types';
 
 export interface Fields extends SocialLinkFields, TickerUrlFields {
   address: string;
+  token_name: string;
   requester_name: string;
   requester_email: string;
   project_name?: string;

ui/tokenInfo/utils.ts

 import type { Fields } from './types';
 import type { TokenInfoApplication } from 'types/api/account';
 
-export function getFormDefaultValues(address: string, application: TokenInfoApplication | undefined): Partial<Fields> {
+export function getFormDefaultValues(address: string, tokenName: string, application: TokenInfoApplication | undefined): Partial<Fields> {
   if (!application) {
-    return { address };
+    return { address, token_name: tokenName };
   }
 
   return {
     address,
+    token_name: tokenName,
     requester_name: application.requesterName,
     requester_email: application.requesterEmail,
     project_name: application.projectName,