handle add public tag

ui/pages/PublicTags.tsx

 import { Link, Text, Icon } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React, { useCallback, useState } from 'react';
 import { animateScroll } from 'react-scroll';
 
@@ -8,6 +9,7 @@ import eastArrowIcon from 'icons/arrows/east.svg';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import useToast from 'lib/hooks/useToast';
+import getQueryParamString from 'lib/router/getQueryParamString';
 import PublicTagsData from 'ui/publicTags/PublicTagsData';
 import PublicTagsForm from 'ui/publicTags/PublicTagsForm/PublicTagsForm';
 import Page from 'ui/shared/Page/Page';
@@ -23,13 +25,21 @@ const toastDescriptions = {
 } as Record<TToastAction, string>;
 
 const PublicTagsComponent: React.FC = () => {
-  const [ screen, setScreen ] = useState<TScreen>('data');
-  const [ formData, setFormData ] = useState<PublicTag>();
+  const router = useRouter();
+  const addressHash = getQueryParamString(router.query.address);
+
+  const [ screen, setScreen ] = useState<TScreen>(addressHash ? 'form' : 'data');
+  const [ formData, setFormData ] = useState<Partial<PublicTag> | undefined>(addressHash ? { addresses: [ addressHash ] } : undefined);
 
   const toast = useToast();
   const isMobile = useIsMobile();
   useRedirectForInvalidAuthToken();
 
+  React.useEffect(() => {
+    router.replace({ pathname: '/account/public_tags_request' });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ ]);
+
   const showToast = useCallback((action: TToastAction) => {
     toast({
       position: 'top-right',

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -28,7 +28,7 @@ import PublicTagsFormInput from './PublicTagsFormInput';
 
 type Props = {
   changeToDataScreen: (success?: boolean) => void;
-  data?: PublicTag;
+  data?: Partial<PublicTag>;
 }
 
 export type Inputs = {
@@ -67,8 +67,8 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
       email: data?.email || '',
       companyName: data?.company || '',
       companyUrl: data?.website || '',
-      tags: data?.tags.split(';').map((tag) => tag).join('; ') || '',
-      addresses: data?.addresses.map((address, index: number) => ({ name: `address.${ index }.address`, address })) ||
+      tags: data?.tags?.split(';').map((tag) => tag).join('; ') || '',
+      addresses: data?.addresses?.map((address, index: number) => ({ name: `address.${ index }.address`, address })) ||
         [ { name: 'address.0.address', address: '' } ],
       comment: data?.additional_comment || '',
       action: data?.is_owner === undefined || data?.is_owner ? 'add' : 'report',

ui/shared/AddressActions/Menu.tsx

@@ -6,6 +6,7 @@ import iconArrow from 'icons/arrows/east-mini.svg';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
 import PrivateTagMenuItem from './PrivateTagMenuItem';
+import PublicTagMenuItem from './PublicTagMenuItem';
 
 const AddressActions = () => {
   const router = useRouter();
@@ -29,9 +30,7 @@ const AddressActions = () => {
         <MenuItem py={ 2 } px={ 4 }>
             Add token info
         </MenuItem>
-        <MenuItem py={ 2 } px={ 4 }>
-            Add public tag
-        </MenuItem>
+        <PublicTagMenuItem py={ 2 } px={ 4 } hash={ hash }/>
         <PrivateTagMenuItem py={ 2 } px={ 4 } hash={ hash }/>
       </MenuList>
     </Menu>

ui/shared/AddressActions/PublicTagMenuItem.tsx

+import { MenuItem, chakra } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useRedirectIfNotAuth from 'lib/hooks/useRedirectIfNotAuth';
+
+interface Props {
+  className?: string;
+  hash: string;
+}
+
+const PublicTagMenuItem = ({ className, hash }: Props) => {
+  const router = useRouter();
+  const redirectIfNotAuth = useRedirectIfNotAuth();
+
+  const handleClick = React.useCallback(() => {
+    if (redirectIfNotAuth()) {
+      return;
+    }
+
+    router.push({ pathname: '/account/public_tags_request', query: { address: hash } });
+  }, [ hash, redirectIfNotAuth, router ]);
+
+  return (
+    <MenuItem className={ className }onClick={ handleClick }>
+      Add public tag
+    </MenuItem>
+  );
+};
+
+export default React.memo(chakra(PublicTagMenuItem));