handle add private tag

lib/hooks/useRedirectIfNotAuth.tsx

+import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+
+import type { UserInfo } from 'types/api/account';
+
+import { resourceKey } from 'lib/api/resources';
+import useLoginUrl from 'lib/hooks/useLoginUrl';
+
+export default function useRedirectIfNotAuth() {
+  const queryClient = useQueryClient();
+
+  const profileData = queryClient.getQueryData<UserInfo>([ resourceKey('user_info') ]);
+  const isAuth = Boolean(profileData);
+  const loginUrl = useLoginUrl();
+
+  return React.useCallback(() => {
+    if (!isAuth) {
+      window.location.assign(loginUrl);
+      return true;
+    }
+
+    return false;
+  }, [ isAuth, loginUrl ]);
+}

ui/address/details/AddressFavoriteButton.tsx

@@ -3,14 +3,11 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { UserInfo } from 'types/api/account';
-
 import starFilledIcon from 'icons/star_filled.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
-import { resourceKey } from 'lib/api/resources';
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
-import useLoginUrl from 'lib/hooks/useLoginUrl';
 import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
+import useRedirectIfNotAuth from 'lib/hooks/useRedirectIfNotAuth';
 import WatchlistAddModal from 'ui/watchlist/AddressModal/AddressModal';
 import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
 
@@ -25,20 +22,15 @@ const AddressFavoriteButton = ({ className, hash, isAdded }: Props) => {
   const deleteModalProps = useDisclosure();
   const queryClient = useQueryClient();
   const router = useRouter();
-
-  const profileData = queryClient.getQueryData<UserInfo>([ resourceKey('user_info') ]);
-  const isAuth = Boolean(profileData);
-  const loginUrl = useLoginUrl();
-
+  const redirectIfNotAuth = useRedirectIfNotAuth();
   const watchListQuery = useApiQuery('watchlist', { queryOptions: { enabled: isAdded } });
 
   const handleClick = React.useCallback(() => {
-    if (!isAuth) {
-      window.location.assign(loginUrl);
+    if (redirectIfNotAuth()) {
       return;
     }
     isAdded ? deleteModalProps.onOpen() : addModalProps.onOpen();
-  }, [ addModalProps, deleteModalProps, isAdded, isAuth, loginUrl ]);
+  }, [ addModalProps, deleteModalProps, isAdded, redirectIfNotAuth ]);
 
   const handleAddOrDeleteSuccess = React.useCallback(async() => {
     const queryKey = getResourceKey('address', { pathParams: { hash: router.query.hash?.toString() } });

ui/privateTags/AddressModal/AddressForm.tsx

@@ -3,7 +3,7 @@ import {
   Button,
   useColorModeValue,
 } from '@chakra-ui/react';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
@@ -11,7 +11,6 @@ import { useForm, Controller } from 'react-hook-form';
 import type { AddressTag, AddressTagErrors } from 'types/api/account';
 
 import type { ResourceErrorAccount } from 'lib/api/resources';
-import { resourceKey } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
 import { ADDRESS_REGEXP } from 'lib/validations/address';
@@ -21,8 +20,9 @@ import TagInput from 'ui/shared/TagInput';
 const TAG_MAX_LENGTH = 35;
 
 type Props = {
-  data?: AddressTag;
+  data?: Partial<AddressTag>;
   onClose: () => void;
+  onSuccess: () => Promise<void>;
   setAlertVisible: (isAlertVisible: boolean) => void;
 }
 
@@ -31,7 +31,7 @@ type Inputs = {
   tag: string;
 }
 
-const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
+const AddressForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisible }) => {
   const apiFetch = useApiFetch();
   const [ pending, setPending ] = useState(false);
   const { control, handleSubmit, formState: { errors, isDirty }, setError } = useForm<Inputs>({
@@ -44,8 +44,6 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
 
   const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
-  const queryClient = useQueryClient();
-
   const { mutate } = useMutation((formData: Inputs) => {
     const body = {
       name: formData?.tag,
@@ -74,11 +72,10 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
         setAlertVisible(true);
       }
     },
-    onSuccess: () => {
-      queryClient.refetchQueries([ resourceKey('private_tags_address') ]).then(() => {
-        onClose();
-        setPending(false);
-      });
+    onSuccess: async() => {
+      await onSuccess();
+      onClose();
+      setPending(false);
     },
   });
 

ui/privateTags/AddressModal/AddressModal.tsx

@@ -9,18 +9,19 @@ import AddressForm from './AddressForm';
 type Props = {
   isOpen: boolean;
   onClose: () => void;
-  data?: AddressTag;
+  onSuccess: () => Promise<void>;
+  data?: Partial<AddressTag>;
 }
 
-const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
-  const title = data ? 'Edit address tag' : 'New address tag';
-  const text = !data ? 'Label any address with a private address tag (up to 35 chars) to customize your explorer experience.' : '';
+const AddressModal: React.FC<Props> = ({ isOpen, onClose, onSuccess, data }) => {
+  const title = data?.id ? 'Edit address tag' : 'New address tag';
+  const text = !data?.id ? 'Label any address with a private address tag (up to 35 chars) to customize your explorer experience.' : '';
 
   const [ isAlertVisible, setAlertVisible ] = useState(false);
 
   const renderForm = useCallback(() => {
-    return <AddressForm data={ data } onClose={ onClose } setAlertVisible={ setAlertVisible }/>;
-  }, [ data, onClose ]);
+    return <AddressForm data={ data } onClose={ onClose } onSuccess={ onSuccess } setAlertVisible={ setAlertVisible }/>;
+  }, [ data, onClose, onSuccess ]);
   return (
     <FormModal<AddressTag>
       isOpen={ isOpen }

ui/privateTags/PrivateAddressTags.tsx

@@ -16,7 +16,7 @@ import AddressTagTable from './AddressTagTable/AddressTagTable';
 import DeletePrivateTagModal from './DeletePrivateTagModal';
 
 const PrivateAddressTags = () => {
-  const { data: addressTagsData, isLoading, isError } = useApiQuery('private_tags_address', { queryOptions: { refetchOnMount: false } });
+  const { data: addressTagsData, isLoading, isError, refetch } = useApiQuery('private_tags_address', { queryOptions: { refetchOnMount: false } });
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
@@ -30,6 +30,10 @@ const PrivateAddressTags = () => {
     addressModalProps.onOpen();
   }, [ addressModalProps ]);
 
+  const onAddOrEditSuccess = useCallback(async() => {
+    await refetch();
+  }, [ refetch ]);
+
   const onAddressModalClose = useCallback(() => {
     setAddressModalData(undefined);
     addressModalProps.onClose();
@@ -103,7 +107,7 @@ const PrivateAddressTags = () => {
           Add address tag
         </Button>
       </Box>
-      <AddressModal { ...addressModalProps } onClose={ onAddressModalClose } data={ addressModalData }/>
+      <AddressModal { ...addressModalProps } onClose={ onAddressModalClose } data={ addressModalData } onSuccess={ onAddOrEditSuccess }/>
       { deleteModalData && (
         <DeletePrivateTagModal
           { ...deleteModalProps }

ui/token/TokenDetails/TokenDetailsActions.tsx → ui/shared/AddressActions/Menu.tsx

 import { Button, Menu, MenuButton, MenuItem, MenuList, Icon, Flex } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import iconArrow from 'icons/arrows/east-mini.svg';
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+import PrivateTagMenuItem from './PrivateTagMenuItem';
+
+const AddressActions = () => {
+  const router = useRouter();
+
+  const hash = getQueryParamString(router.query.hash);
 
-const TokenDetailsActions = () => {
   return (
     <Menu>
       <MenuButton
@@ -24,12 +32,10 @@ const TokenDetailsActions = () => {
         <MenuItem py={ 2 } px={ 4 }>
             Add public tag
         </MenuItem>
-        <MenuItem py={ 2 } px={ 4 }>
-            Add private tag
-        </MenuItem>
+        <PrivateTagMenuItem py={ 2 } px={ 4 } hash={ hash }/>
       </MenuList>
     </Menu>
   );
 };
 
-export default React.memo(TokenDetailsActions);
+export default React.memo(AddressActions);

ui/shared/AddressActions/PrivateTagMenuItem.tsx

+import { MenuItem, chakra, useDisclosure } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+
+import { getResourceKey } from 'lib/api/useApiQuery';
+import useRedirectIfNotAuth from 'lib/hooks/useRedirectIfNotAuth';
+import PrivateTagModal from 'ui/privateTags/AddressModal/AddressModal';
+
+interface Props {
+  className?: string;
+  hash: string;
+}
+
+const PrivateTagMenuItem = ({ className, hash }: Props) => {
+  const modal = useDisclosure();
+  const queryClient = useQueryClient();
+  const redirectIfNotAuth = useRedirectIfNotAuth();
+
+  const queryKey = getResourceKey('address', { pathParams: { hash } });
+  const addressData = queryClient.getQueryData<Address>(queryKey);
+
+  const handleClick = React.useCallback(() => {
+    if (redirectIfNotAuth()) {
+      return;
+    }
+
+    modal.onOpen();
+  }, [ modal, redirectIfNotAuth ]);
+
+  const handleAddPrivateTag = React.useCallback(async() => {
+    await queryClient.refetchQueries({ queryKey });
+    modal.onClose();
+  }, [ queryClient, queryKey, modal ]);
+
+  const formData = React.useMemo(() => {
+    return {
+      address_hash: hash,
+    };
+  }, [ hash ]);
+
+  if (addressData?.private_tags?.length) {
+    return null;
+  }
+
+  return (
+    <>
+      <MenuItem className={ className }onClick={ handleClick }>
+        Add private tag
+      </MenuItem>
+      <PrivateTagModal isOpen={ modal.isOpen } onClose={ modal.onClose } onSuccess={ handleAddPrivateTag } data={ formData }/>
+    </>
+  );
+};
+
+export default React.memo(chakra(PrivateTagMenuItem));

ui/token/TokenContractInfo.tsx

@@ -7,10 +7,9 @@ import type { TokenInfo } from 'types/api/token';
 
 import appConfig from 'configs/app/config';
 import useApiQuery from 'lib/api/useApiQuery';
+import AddressActionsMenu from 'ui/shared/AddressActions/Menu';
 import AddressHeadingInfo from 'ui/shared/AddressHeadingInfo';
 
-import TokenDetailsActions from './TokenDetails/TokenDetailsActions';
-
 interface Props {
   tokenQuery: UseQueryResult<TokenInfo>;
 }
@@ -51,7 +50,7 @@ const TokenContractInfo = ({ tokenQuery }: Props) => {
     <AddressHeadingInfo
       address={ address }
       token={ contractQuery.data?.token }
-      after={ appConfig.isAccountSupported ? <TokenDetailsActions/> : null }
+      after={ appConfig.isAccountSupported ? <AddressActionsMenu/> : null }
     />
   );
 };