name and email fields

lib/api/resources.ts

@@ -31,7 +31,7 @@ import type {
   AddressCoinBalanceHistoryChartOld,
 } from 'types/api/address';
 import type { AddressesResponse } from 'types/api/addresses';
-import type { AddressMetadataInfo } from 'types/api/addressMetadata';
+import type { AddressMetadataInfo, PublicTagTypesResponse } from 'types/api/addressMetadata';
 import type { TxBlobs, Blob } from 'types/api/blobs';
 import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters, BlockWithdrawalsResponse } from 'types/api/block';
 import type { ChartMarketResponse, ChartSecondaryCoinPriceResponse, ChartTransactionResponse } from 'types/api/charts';
@@ -251,6 +251,11 @@ export const RESOURCES = {
     endpoint: getFeaturePayload(config.features.addressMetadata)?.api.endpoint,
     basePath: getFeaturePayload(config.features.addressMetadata)?.api.basePath,
   },
+  address_metadata_tag_types: {
+    path: '/api/v1/public-tag-types',
+    endpoint: getFeaturePayload(config.features.addressMetadata)?.api.endpoint,
+    basePath: getFeaturePayload(config.features.addressMetadata)?.api.basePath,
+  },
 
   // VISUALIZATION
   visualize_sol2uml: {
@@ -950,6 +955,7 @@ Q extends 'optimistic_l2_deposits_count' ? number :
 Q extends 'optimistic_l2_txn_batches_count' ? number :
 Q extends 'config_backend_version' ? BackendVersionConfig :
 Q extends 'address_metadata_info' ? AddressMetadataInfo :
+Q extends 'address_metadata_tag_types' ? PublicTagTypesResponse :
 never;
 // !!! IMPORTANT !!!
 // See comment above

theme/foundations/typography.ts

@@ -21,6 +21,12 @@ const typography = {
       lineHeight: '32px',
       fontFamily: 'heading',
     },
+    h4: {
+      fontSize: 'md',
+      fontWeight: '500',
+      lineHeight: '24px',
+      fontFamily: 'heading',
+    },
   },
 };
 

types/api/addressMetadata.ts

@@ -28,3 +28,15 @@ export interface AddressMetadataTagApi extends Omit<AddressMetadataTag, 'meta'>
     tooltipUrl?: string;
   } | null;
 }
+
+// TAG SUBMISSION
+
+interface PublicTagType {
+  id: string;
+  type: AddressMetadataTagType;
+  description: string;
+}
+
+export interface PublicTagTypesResponse {
+  tagTypes: Array<PublicTagType>;
+}

ui/pages/PublicTagsSubmit.tsx

 import React from 'react';
 
+import useApiQuery from 'lib/api/useApiQuery';
+import PublicTagsSubmitForm from 'ui/publicTags/submit/PublicTagsSubmitForm';
+import PublicTagsSubmitResult from 'ui/publicTags/submit/PublicTagsSubmitResult';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
-type Screen = 'form' | 'result';
+type Screen = 'form' | 'result' | 'initializing' | 'error';
 
 const PublicTagsSubmit = () => {
 
-  const [ screen ] = React.useState<Screen>('form');
+  const [ screen, setScreen ] = React.useState<Screen>('initializing');
+
+  const configQuery = useApiQuery('address_metadata_tag_types');
+
+  React.useEffect(() => {
+    if (!configQuery.isPending) {
+      setScreen(configQuery.isError ? 'error' : 'form');
+    }
+  }, [ configQuery.isError, configQuery.isPending ]);
 
   const content = (() => {
     switch (screen) {
+      case 'initializing':
+        return <ContentLoader/>;
+      case 'error':
+        return <DataFetchAlert/>;
       case 'form':
-        return 'FORM';
+        return <PublicTagsSubmitForm config={ configQuery.data }/>;
       case 'result':
-        return 'RESULT';
+        return <PublicTagsSubmitResult/>;
       default:
         return null;
     }

ui/publicTags/submit/PublicTagsSubmitForm.tsx

+import { Button, chakra, Grid, GridItem } from '@chakra-ui/react';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
+
+import type { FormFields } from './types';
+import type { PublicTagTypesResponse } from 'types/api/addressMetadata';
+
+import Hint from 'ui/shared/Hint';
+
+import PublicTagsSubmitFieldRequesterEmail from './fields/PublicTagsSubmitFieldRequesterEmail';
+import PublicTagsSubmitFieldRequesterName from './fields/PublicTagsSubmitFieldRequesterName';
+
+interface Props {
+  config: PublicTagTypesResponse | undefined;
+}
+
+const PublicTagsSubmitForm = ({ config }: Props) => {
+  const formApi = useForm<FormFields>({
+    mode: 'onBlur',
+  });
+
+  const onFormSubmit: SubmitHandler<FormFields> = React.useCallback((data) => {
+    // eslint-disable-next-line no-console
+    console.log('__>__', data, config);
+  }, [ config ]);
+
+  return (
+    <FormProvider { ...formApi }>
+      <chakra.form
+        noValidate
+        onSubmit={ formApi.handleSubmit(onFormSubmit) }
+      >
+        <Grid
+          columnGap={ 5 }
+          rowGap={{ base: 5, lg: 4 }}
+          templateColumns={{ base: '1fr', lg: '1fr 1fr minmax(0, 200px)' }}
+        >
+          <GridItem colSpan={ 3 } as="h2" textStyle="h4">
+            Company info
+          </GridItem>
+          <PublicTagsSubmitFieldRequesterName/>
+          <chakra.div bgColor="blue.100" h={ 20 }/>
+          <chakra.div bgColor="yellow.100" h={ 20 }/>
+          <PublicTagsSubmitFieldRequesterEmail/>
+          <chakra.div bgColor="blue.100" h={ 20 }/>
+          <chakra.div bgColor="yellow.100" h={ 20 }/>
+
+          <GridItem colSpan={ 3 } as="h2" textStyle="h4" mt={ 3 }>
+            Public tags/labels
+            <Hint label="Submit a public tag proposal for our moderation team to review" ml={ 1 }/>
+          </GridItem>
+          <chakra.div bgColor="blue.100" h={ 20 }/>
+          <chakra.div bgColor="blue.100" h={ 20 }/>
+          <chakra.div bgColor="yellow.100" h={ 20 }/>
+
+          <Button
+            variant="solid"
+            size="lg"
+            type="submit"
+            mt={ 3 }
+            isLoading={ formApi.formState.isSubmitting }
+            loadingText="Send request"
+            w="min-content"
+          >
+            Send request
+          </Button>
+        </Grid>
+      </chakra.form>
+    </FormProvider>
+  );
+};
+
+export default React.memo(PublicTagsSubmitForm);

ui/publicTags/submit/PublicTagsSubmitResult.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+const PublicTagsSubmitResult = () => {
+  return <Box>PublicTagsSubmitResult</Box>;
+};
+
+export default PublicTagsSubmitResult;

ui/publicTags/submit/fields/PublicTagsSubmitFieldRequesterEmail.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import { EMAIL_REGEXP } from 'lib/validations/email';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+const PublicTagsSubmitFieldRequesterEmail = () => {
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields>({ control, name: 'requesterEmail', rules: { required: true, pattern: EMAIL_REGEXP } });
+
+  const isDisabled = formState.isSubmitting;
+
+  return (
+    <FormControl variant="floating" isDisabled={ isDisabled } isRequired size={{ base: 'md', lg: 'lg' }}>
+      <Input
+        { ...field }
+        required
+        isInvalid={ Boolean(fieldState.error) }
+        isDisabled={ isDisabled }
+        autoComplete="off"
+      />
+      <InputPlaceholder text="Email" error={ fieldState.error }/>
+    </FormControl>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldRequesterEmail);

ui/publicTags/submit/fields/PublicTagsSubmitFieldRequesterName.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+const PublicTagsSubmitFieldRequesterName = () => {
+  const { control } = useFormContext<FormFields>();
+  const { field, fieldState, formState } = useController<FormFields>({ control, name: 'requesterName', rules: { required: true } });
+
+  const isDisabled = formState.isSubmitting;
+
+  return (
+    <FormControl variant="floating" isDisabled={ isDisabled } isRequired size={{ base: 'md', lg: 'lg' }}>
+      <Input
+        { ...field }
+        required
+        isInvalid={ Boolean(fieldState.error) }
+        isDisabled={ isDisabled }
+        autoComplete="off"
+      />
+      <InputPlaceholder text="Your name" error={ fieldState.error }/>
+    </FormControl>
+  );
+};
+
+export default React.memo(PublicTagsSubmitFieldRequesterName);

ui/publicTags/submit/types.ts

+export interface FormFields {
+  requesterName: string;
+  requesterEmail: string;
+}