price ticker fields

ui/tokenInfo/TokenInfoForm.tsx

@@ -13,6 +13,7 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import TokenInfoFieldAddress from './fields/TokenInfoFieldAddress';
 import TokenInfoFieldDocs from './fields/TokenInfoFieldDocs';
 import TokenInfoFieldIconUrl from './fields/TokenInfoFieldIconUrl';
+import TokenInfoFieldPriceTicker from './fields/TokenInfoFieldPriceTicker';
 import TokenInfoFieldProjectDescription from './fields/TokenInfoFieldProjectDescription';
 import TokenInfoFieldProjectEmail from './fields/TokenInfoFieldProjectEmail';
 import TokenInfoFieldProjectName from './fields/TokenInfoFieldProjectName';
@@ -62,9 +63,13 @@ const TokenInfoForm = ({ id }: Props) => {
     <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 { ...fieldProps }/></GridItem>
+
+        <GridItem colSpan={ 2 }>
+          <TokenInfoFieldAddress { ...fieldProps }/>
+        </GridItem>
         <TokenInfoFieldRequesterName { ...fieldProps }/>
         <TokenInfoFieldRequesterEmail { ...fieldProps }/>
+
         <TokenInfoFormSectionHeader>Project info</TokenInfoFormSectionHeader>
         <TokenInfoFieldProjectName { ...fieldProps }/>
         <TokenInfoFieldProjectSector { ...fieldProps } config={ configQuery.data.projectSectors }/>
@@ -72,8 +77,19 @@ const TokenInfoForm = ({ id }: Props) => {
         <TokenInfoFieldProjectWebsite { ...fieldProps }/>
         <TokenInfoFieldDocs { ...fieldProps }/>
         <TokenInfoFieldSupport { ...fieldProps }/>
-        <GridItem colSpan={ 2 }><TokenInfoFieldIconUrl { ...fieldProps }/></GridItem>
-        <GridItem colSpan={ 2 }><TokenInfoFieldProjectDescription { ...fieldProps }/></GridItem>
+        <GridItem colSpan={ 2 }>
+          <TokenInfoFieldIconUrl { ...fieldProps }/>
+        </GridItem>
+        <GridItem colSpan={ 2 }>
+          <TokenInfoFieldProjectDescription { ...fieldProps }/>
+        </GridItem>
+
+        <TokenInfoFormSectionHeader>Price data</TokenInfoFormSectionHeader>
+        <TokenInfoFieldPriceTicker { ...fieldProps } name="ticker_coin_market_cap" label="CoinMarketCap URL"/>
+        <TokenInfoFieldPriceTicker { ...fieldProps } name="ticker_coin_gecko" label="CoinGecko URL"/>
+        <GridItem colSpan={ 2 }>
+          <TokenInfoFieldPriceTicker { ...fieldProps } name="ticker_defi_llama" label="DefiLlama URL "/>
+        </GridItem>
       </Grid>
       <Button type="submit" size="lg" mt={ 8 }>Send request</Button>
     </form>

ui/tokenInfo/fields/TokenInfoFieldPriceTicker.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 { validator } from 'lib/validations/url';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+interface Props {
+  formState: FormState<Fields>;
+  control: Control<Fields>;
+  isReadOnly?: boolean;
+  name: 'ticker_coin_gecko' | 'ticker_coin_market_cap' | 'ticker_defi_llama';
+  label: string;
+}
+
+const TokenInfoFieldPriceTicker = ({ formState, control, isReadOnly, name, label }: Props) => {
+  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<Fields, typeof name>}) => {
+    const error = name in formState.errors ? formState.errors[name] : undefined;
+
+    return (
+      <FormControl variant="floating" id={ field.name } size="lg">
+        <Input
+          { ...field }
+          isInvalid={ Boolean(error) }
+          isDisabled={ formState.isSubmitting || isReadOnly }
+          autoComplete="off"
+        />
+        <InputPlaceholder text={ label } error={ error }/>
+      </FormControl>
+    );
+  }, [ formState.errors, formState.isSubmitting, isReadOnly, name, label ]);
+
+  return (
+    <Controller
+      name={ name }
+      control={ control }
+      render={ renderControl }
+      rules={{ validate: validator }}
+    />
+  );
+};
+
+export default React.memo(TokenInfoFieldPriceTicker);

ui/tokenInfo/types.ts

@@ -12,4 +12,7 @@ export interface Fields {
   docs?: string;
   support?: string;
   icon_url: string;
+  ticker_coin_gecko?: string;
+  ticker_coin_market_cap?: string;
+  ticker_defi_llama?: string;
 }