private tags resources

lib/api/resources.ts

@@ -15,6 +15,12 @@ export const RESOURCES = {
   public_tags: {
     path: '/api/account/v1/user/public_tags/:id?',
   },
+  private_tags_address: {
+    path: '/api/account/v1/user/tags/address/:id?',
+  },
+  private_tags_tx: {
+    path: '/api/account/v1/user/tags/transaction/:id?',
+  },
 
   // DEPRECATED
   old_api: {

lib/api/useApiQuery.tsx

 import type { UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 
-import type { UserInfo, CustomAbis, PublicTags } from 'types/api/account';
+import type { UserInfo, CustomAbis, PublicTags, AddressTags, TransactionTags } from 'types/api/account';
 import type { CsrfData } from 'types/client/account';
 
 import type { RESOURCES, ResourceError } from './resources';
@@ -28,4 +28,6 @@ export type ResourcePayload<Q extends keyof typeof RESOURCES> =
     Q extends 'csrf' ? CsrfData :
       Q extends 'custom_abi' ? CustomAbis :
         Q extends 'public_tags' ? PublicTags :
-          never;
+          Q extends 'private_tags_address' ? AddressTags :
+            Q extends 'private_tags_tx' ? TransactionTags :
+              never;

ui/privateTags/AddressModal/AddressForm.tsx

@@ -9,11 +9,11 @@ import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { AddressTag, AddressTagErrors } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
+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 type { ErrorType } from 'lib/hooks/useFetch';
-import useFetch from 'lib/hooks/useFetch';
 import { ADDRESS_REGEXP } from 'lib/validations/address';
 import AddressInput from 'ui/shared/AddressInput';
 import TagInput from 'ui/shared/TagInput';
@@ -32,7 +32,7 @@ type Inputs = {
 }
 
 const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
   const [ pending, setPending ] = useState(false);
   const { control, handleSubmit, formState: { errors, isValid, isDirty }, setError } = useForm<Inputs>({
     mode: 'onTouched',
@@ -54,24 +54,28 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
 
     const isEdit = data?.id;
     if (isEdit) {
-      return fetch(`/node-api/account/private-tags/address/${ data.id }`, { method: 'PUT', body });
+      return apiFetch('private_tags_address', {
+        pathParams: { id: data.id },
+        fetchParams: { method: 'PUT', body },
+      });
     }
 
-    return fetch('/node-api/account/private-tags/address', { method: 'POST', body });
+    return apiFetch('private_tags_address', { fetchParams: { method: 'POST', body } });
   }, {
-    onError: (e: ErrorType<AddressTagErrors>) => {
+    onError: (error: ResourceErrorAccount<AddressTagErrors>) => {
       setPending(false);
-      if (e?.error?.address_hash || e?.error?.name) {
-        e?.error?.address_hash && setError('address', { type: 'custom', message: getErrorMessage(e.error, 'address_hash') });
-        e?.error?.name && setError('tag', { type: 'custom', message: getErrorMessage(e.error, 'name') });
-      } else if (e?.error?.identity_id) {
-        setError('address', { type: 'custom', message: getErrorMessage(e.error, 'identity_id') });
+      const errorMap = error.payload?.errors;
+      if (errorMap?.address_hash || errorMap?.name) {
+        errorMap?.address_hash && setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'address_hash') });
+        errorMap?.name && setError('tag', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
+      } else if (errorMap?.identity_id) {
+        setError('address', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
       } else {
         setAlertVisible(true);
       }
     },
     onSuccess: () => {
-      queryClient.refetchQueries([ QueryKeys.addressTags ]).then(() => {
+      queryClient.refetchQueries([ resourceKey('private_tags_address') ]).then(() => {
         onClose();
         setPending(false);
       });

ui/privateTags/DeletePrivateTagModal.tsx

@@ -3,9 +3,9 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 
 import type { AddressTag, TransactionTag, AddressTags, TransactionTags } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
-import useFetch from 'lib/hooks/useFetch';
+import { resourceKey } from 'lib/api/resources';
+import useApiFetch from 'lib/api/useApiFetch';
 import DeleteModal from 'ui/shared/DeleteModal';
 
 type Props = {
@@ -20,19 +20,23 @@ const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, data, type })
   const id = data.id;
 
   const queryClient = useQueryClient();
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
 
   const mutationFn = useCallback(() => {
-    return fetch(`/node-api/account/private-tags/${ type }/${ id }`, { method: 'DELETE' });
-  }, [ fetch, type, id ]);
+    const resourceName = type === 'address' ? 'private_tags_address' : 'private_tags_tx';
+    return apiFetch(resourceName, {
+      pathParams: { id: data.id },
+      fetchParams: { method: 'DELETE' },
+    });
+  }, [ type, apiFetch, data.id ]);
 
   const onSuccess = useCallback(async() => {
     if (type === 'address') {
-      queryClient.setQueryData([ QueryKeys.addressTags ], (prevData: AddressTags | undefined) => {
+      queryClient.setQueryData([ resourceKey('private_tags_address') ], (prevData: AddressTags | undefined) => {
         return prevData?.filter((item: AddressTag) => item.id !== id);
       });
     } else {
-      queryClient.setQueryData([ QueryKeys.transactionTags ], (prevData: TransactionTags | undefined) => {
+      queryClient.setQueryData([ resourceKey('private_tags_tx') ], (prevData: TransactionTags | undefined) => {
         return prevData?.filter((item: TransactionTag) => item.id !== id);
       });
     }

ui/privateTags/PrivateAddressTags.tsx

 import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
-import type { AddressTags, AddressTag } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
+import type { AddressTag } from 'types/api/account';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -18,13 +16,11 @@ import AddressTagTable from './AddressTagTable/AddressTagTable';
 import DeletePrivateTagModal from './DeletePrivateTagModal';
 
 const PrivateAddressTags = () => {
-  const { data: addressTagsData, isLoading, isError } =
-    useQuery<unknown, unknown, AddressTags>([ QueryKeys.addressTags ], async() => fetch('/node-api/account/private-tags/address'), { refetchOnMount: false });
+  const { data: addressTagsData, isLoading, isError } = useApiQuery('private_tags_address', { queryOptions: { refetchOnMount: false } });
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
   const isMobile = useIsMobile();
-  const fetch = useFetch();
 
   const [ addressModalData, setAddressModalData ] = useState<AddressTag>();
   const [ deleteModalData, setDeleteModalData ] = useState<AddressTag>();

ui/privateTags/PrivateTransactionTags.tsx

 import { Box, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
-import type { TransactionTags, TransactionTag } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
+import type { TransactionTag } from 'types/api/account';
 
-import useFetch from 'lib/hooks/useFetch';
+import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -18,16 +16,11 @@ import TransactionTagListItem from './TransactionTagTable/TransactionTagListItem
 import TransactionTagTable from './TransactionTagTable/TransactionTagTable';
 
 const PrivateTransactionTags = () => {
-  const { data: transactionTagsData, isLoading, isError } =
-    useQuery<unknown, unknown, TransactionTags>(
-      [ QueryKeys.transactionTags ],
-      async() => fetch('/node-api/account/private-tags/transaction'), { refetchOnMount: false },
-    );
+  const { data: transactionTagsData, isLoading, isError } = useApiQuery('private_tags_tx', { queryOptions: { refetchOnMount: false } });
 
   const transactionModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
   const isMobile = useIsMobile();
-  const fetch = useFetch();
 
   const [ transactionModalData, setTransactionModalData ] = useState<TransactionTag>();
   const [ deleteModalData, setDeleteModalData ] = useState<TransactionTag>();

ui/privateTags/TransactionModal/TransactionForm.tsx

@@ -9,11 +9,11 @@ import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { TransactionTag, TransactionTagErrors } from 'types/api/account';
-import { QueryKeys } from 'types/client/accountQueries';
 
+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 type { ErrorType } from 'lib/hooks/useFetch';
-import useFetch from 'lib/hooks/useFetch';
 import { TRANSACTION_HASH_REGEXP } from 'lib/validations/transaction';
 import TagInput from 'ui/shared/TagInput';
 import TransactionInput from 'ui/shared/TransactionInput';
@@ -44,7 +44,7 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) =>
   });
 
   const queryClient = useQueryClient();
-  const fetch = useFetch();
+  const apiFetch = useApiFetch();
 
   const { mutate } = useMutation((formData: Inputs) => {
     const body = {
@@ -54,24 +54,28 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) =>
     const isEdit = data?.id;
 
     if (isEdit) {
-      return fetch(`/node-api/account/private-tags/transaction/${ data.id }`, { method: 'PUT', body });
+      return apiFetch('private_tags_tx', {
+        pathParams: { id: data.id },
+        fetchParams: { method: 'PUT', body },
+      });
     }
 
-    return fetch('/node-api/account/private-tags/transaction', { method: 'POST', body });
+    return apiFetch('private_tags_tx', { fetchParams: { method: 'POST', body } });
   }, {
-    onError: (e: ErrorType<TransactionTagErrors>) => {
+    onError: (error: ResourceErrorAccount<TransactionTagErrors>) => {
       setPending(false);
-      if (e?.error?.tx_hash || e?.error?.name) {
-        e?.error?.tx_hash && setError('transaction', { type: 'custom', message: getErrorMessage(e.error, 'tx_hash') });
-        e?.error?.name && setError('tag', { type: 'custom', message: getErrorMessage(e.error, 'name') });
-      } else if (e?.error?.identity_id) {
-        setError('transaction', { type: 'custom', message: getErrorMessage(e.error, 'identity_id') });
+      const errorMap = error.payload?.errors;
+      if (errorMap?.tx_hash || errorMap?.name) {
+        errorMap?.tx_hash && setError('transaction', { type: 'custom', message: getErrorMessage(errorMap, 'tx_hash') });
+        errorMap?.name && setError('tag', { type: 'custom', message: getErrorMessage(errorMap, 'name') });
+      } else if (errorMap?.identity_id) {
+        setError('transaction', { type: 'custom', message: getErrorMessage(errorMap, 'identity_id') });
       } else {
         setAlertVisible(true);
       }
     },
     onSuccess: () => {
-      queryClient.refetchQueries([ QueryKeys.transactionTags ]).then(() => {
+      queryClient.refetchQueries([ resourceKey('private_tags_tx') ]).then(() => {
         onClose();
         setPending(false);
       });