tag type, bg and text color fields

ui/publicTags/submit/PublicTagsSubmitForm.tsx

@@ -23,7 +23,7 @@ const PublicTagsSubmitForm = ({ config }: Props) => {
     mode: 'onBlur',
     defaultValues: {
       addresses: [ { hash: '' } ],
-      tags: [ { name: '', type: 'name', url: undefined, bgColor: undefined, textColor: undefined } ],
+      tags: [ { name: '', type: { label: 'name', value: 'name' }, url: undefined, bgColor: undefined, textColor: undefined } ],
     },
   });
 

ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx

 import { chakra, Flex, FormControl, Grid, GridItem, IconButton, Input, Textarea, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
-import type { FieldError, FieldErrorsImpl, Merge, UseFormRegister } from 'react-hook-form';
+import { type FieldError, type FieldErrorsImpl, type Merge, type UseFormRegister } from 'react-hook-form';
 
 import type { FormFields, FormFieldTag } from '../types';
 import type { PublicTagType } from 'types/api/addressMetadata';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { validator as urlValidator } from 'lib/validations/url';
-import FancySelect from 'ui/shared/FancySelect/FancySelect';
 import IconSvg from 'ui/shared/IconSvg';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
+import PublicTagsSubmitFieldTagColor from './PublicTagsSubmitFieldTagColor';
+import PublicTagsSubmitFieldTagType from './PublicTagsSubmitFieldTagType';
+
 interface Props {
   index: number;
   tagTypes: Array<PublicTagType> | undefined;
@@ -24,7 +26,7 @@ interface Props {
 const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddClick, onRemoveClick, tagTypes }: Props) => {
   const isMobile = useIsMobile();
   const bgColorDefault = useColorModeValue('blackAlpha.50', 'whiteAlpha.100');
-  const inputBgColor = useColorModeValue('white', 'gray.900');
+  const inputBgColor = useColorModeValue('white', 'black');
 
   const handleAddClick = React.useCallback(() => {
     onAddClick?.(index);
@@ -34,11 +36,6 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
     onRemoveClick?.(index);
   }, [ index, onRemoveClick ]);
 
-  const typeOptions = React.useMemo(() => tagTypes?.map((type) => ({
-    value: type.type,
-    label: type.type,
-  })), [ tagTypes ]);
-
   return (
     <>
       <GridItem colSpan={{ base: 1, lg: 2 }} p="10px" borderRadius="base" bgColor={ bgColorDefault }>
@@ -60,16 +57,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
             </FormControl>
           </GridItem>
           <GridItem colSpan={{ base: 1, lg: 2 }}>
-            <FancySelect
-              { ...register(`tags.${ index }.type`) }
-              options={ typeOptions }
-              size={ isMobile ? 'md' : 'lg' }
-              placeholder="Tag type"
-              isDisabled={ isDisabled }
-              isRequired
-              isAsync={ false }
-              bgColor={ inputBgColor }
-            />
+            <PublicTagsSubmitFieldTagType index={ index } tagTypes={ tagTypes } isDisabled={ isDisabled }/>
           </GridItem>
           <GridItem colSpan={{ base: 1, lg: 2 }}>
             <FormControl variant="floating" size={{ base: 'md', lg: 'lg' }}>
@@ -83,8 +71,22 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
               <InputPlaceholder text="Label URL" error={ errors?.url }/>
             </FormControl>
           </GridItem>
-          <chakra.div bgColor="blue.100" h={ 20 }/>
-          <chakra.div bgColor="blue.100" h={ 20 }/>
+          <PublicTagsSubmitFieldTagColor
+            fieldName="bgColor"
+            placeholder="Background color"
+            index={ index }
+            register={ register }
+            errors={ errors }
+            isDisabled={ isDisabled }
+          />
+          <PublicTagsSubmitFieldTagColor
+            fieldName="textColor"
+            placeholder="Text color"
+            index={ index }
+            register={ register }
+            errors={ errors }
+            isDisabled={ isDisabled }
+          />
           <GridItem colSpan={{ base: 1, lg: 4 }}>
             <FormControl variant="floating" size={{ base: 'md', lg: 'lg' }}>
               <Textarea

ui/publicTags/submit/fields/PublicTagsSubmitFieldTagColor.tsx

+import { FormControl, Input, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import type { FieldError, FieldErrorsImpl, Merge, UseFormRegister } from 'react-hook-form';
+
+import type { FormFieldTag, FormFields } from '../types';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+interface Props {
+  fieldName: 'textColor' | 'bgColor';
+  index: number;
+  isDisabled: boolean;
+  register: UseFormRegister<FormFields>;
+  errors: Merge<FieldError, FieldErrorsImpl<FormFieldTag>> | undefined;
+  placeholder: string;
+}
+
+const PublicTagsSubmitFieldTagColor = ({ index, isDisabled, register, errors, fieldName, placeholder }: Props) => {
+  const inputBgColor = useColorModeValue('white', 'black');
+
+  return (
+    <FormControl variant="floating" size={{ base: 'md', lg: 'lg' }}>
+      <Input
+        { ...register(`tags.${ index }.${ fieldName }`) }
+        isInvalid={ Boolean(errors?.[fieldName]) }
+        isDisabled={ isDisabled }
+        autoComplete="off"
+        bgColor={ inputBgColor }
+      />
+      <InputPlaceholder text={ placeholder } error={ errors?.[fieldName] }/>
+    </FormControl>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldTagColor);

ui/publicTags/submit/fields/PublicTagsSubmitFieldTagType.tsx

+import { FormControl, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import type { ControllerRenderProps } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+import type { PublicTagType } from 'types/api/addressMetadata';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import FancySelect from 'ui/shared/FancySelect/FancySelect';
+
+interface Props {
+  index: number;
+  tagTypes: Array<PublicTagType> | undefined;
+  isDisabled: boolean;
+}
+
+const PublicTagsSubmitFieldTagType = ({ index, tagTypes, isDisabled }: Props) => {
+  const isMobile = useIsMobile();
+  const { control } = useFormContext<FormFields>();
+  const inputBgColor = useColorModeValue('white', 'black');
+
+  const typeOptions = React.useMemo(() => tagTypes?.map((type) => ({
+    value: type.type,
+    label: type.type,
+  })), [ tagTypes ]);
+
+  const renderControl = React.useCallback(({ field }: { field: ControllerRenderProps<FormFields, `tags.${ number }.type`> }) => {
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
+        <FancySelect
+          { ...field }
+          options={ typeOptions }
+          size={ isMobile ? 'md' : 'lg' }
+          placeholder="Tag type"
+          isDisabled={ isDisabled }
+          isRequired
+          isAsync={ false }
+          formControlStyles={{
+            bgColor: inputBgColor,
+            borderRadius: 'base',
+          }}
+        />
+      </FormControl>
+    );
+  }, [ inputBgColor, isDisabled, isMobile, typeOptions ]);
+
+  return (
+    <Controller
+      name={ `tags.${ index }.type` }
+      control={ control }
+      render={ renderControl }
+      rules={{ required: true }}
+    />
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldTagType);

ui/publicTags/submit/fields/PublicTagsSubmitFieldTags.tsx

@@ -22,7 +22,14 @@ const PublicTagsSubmitFieldTags = ({ tagTypes }: Props) => {
   const isDisabled = formState.isSubmitting;
 
   const handleAddFieldClick = React.useCallback((index: number) => {
-    insert(index + 1, { name: '', type: 'name', url: undefined, bgColor: undefined, textColor: undefined, tooltipDescription: undefined });
+    insert(index + 1, {
+      name: '',
+      type: { label: 'name', value: 'name' },
+      url: undefined,
+      bgColor: undefined,
+      textColor: undefined,
+      tooltipDescription: undefined,
+    });
   }, [ insert ]);
 
   const handleRemoveFieldClick = React.useCallback((index: number) => {

ui/publicTags/submit/types.ts

@@ -10,7 +10,10 @@ export interface FormFields {
 
 export interface FormFieldTag {
   name: string;
-  type: AddressMetadataTagType;
+  type: {
+    label: string;
+    value: AddressMetadataTagType;
+  };
   url: string | undefined;
   bgColor: string | undefined;
   textColor: string | undefined;

ui/shared/FancySelect/FancySelect.tsx

+import type { ChakraProps } from '@chakra-ui/react';
 import { FormControl, useToken, useColorMode } from '@chakra-ui/react';
 import type { CSSObjectWithLabel, GroupBase, SingleValue, MultiValue, AsyncProps, Props as SelectProps } from 'chakra-react-select';
 import { Select, AsyncSelect } from 'chakra-react-select';
@@ -12,6 +13,7 @@ import InputPlaceholder from 'ui/shared/InputPlaceholder';
 interface CommonProps {
   error?: Merge<FieldError, FieldErrorsImpl<Option>> | undefined;
   placeholderIcon?: React.ReactNode;
+  formControlStyles?: ChakraProps;
 }
 
 interface RegularSelectProps extends SelectProps<Option, boolean, GroupBase<Option>>, CommonProps {
@@ -47,6 +49,7 @@ const FancySelect = (props: Props, ref: React.LegacyRef<HTMLDivElement>) => {
       { ...(props.error ? { 'aria-invalid': true } : {}) }
       { ...(props.isDisabled ? { 'aria-disabled': true } : {}) }
       { ...(props.value ? { 'data-active': true } : {}) }
+      { ...props.formControlStyles }
     >
       <SelectComponent
         { ...props }