add enums for query keys

lib/hooks/useFetchProfileInfo.tsx

 import { useQuery } from '@tanstack/react-query';
 
 import type { UserInfo } from 'types/api/account';
+import { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
 
@@ -14,7 +15,7 @@ interface Error {
 export default function useFetchProfileInfo() {
   const fetch = useFetch();
 
-  return useQuery<unknown, Error, UserInfo>([ 'profile' ], async() => {
+  return useQuery<unknown, Error, UserInfo>([ QueryKeys.profile ], async() => {
     return fetch('/api/account/profile');
   }, {
     refetchOnMount: false,

types/client/accountQueries.ts

+export enum QueryKeys {
+  addressTags = 'address-tags',
+  apiKeys = 'api-keys',
+  block = 'block',
+  blocks = 'blocks',
+  customAbis = 'custom-abis',
+  profile = 'profile',
+  publicTags = 'public-tags',
+  transactionTags = 'transaction-tags',
+  watchlist = 'watchlist',
+}

types/client/queries.ts

+export enum QueryKeys {
+  csrf = 'csrf',
+  profile = 'profile',
+  transactionsPending = 'transactions_pending',
+  transactionsValidated = 'transactions_validated',
+  tx = 'tx',
+  txInternals = 'tx-internals',
+  txLog = 'tx-log',
+  txRawTrace = 'tx-raw-trace',
+}

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -12,6 +12,7 @@ import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { ApiKey, ApiKeys, ApiKeyErrors } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import getErrorMessage from 'lib/getErrorMessage';
 import getPlaceholderWithError from 'lib/getPlaceholderWithError';
@@ -57,7 +58,7 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
     onSuccess: async(data) => {
       const response = data as unknown as ApiKey;
 
-      queryClient.setQueryData([ 'api-keys' ], (prevData: ApiKeys | undefined) => {
+      queryClient.setQueryData([ QueryKeys.apiKeys ], (prevData: ApiKeys | undefined) => {
         const isExisting = prevData && prevData.some((item) => item.api_key === response.api_key);
 
         if (isExisting) {

ui/apiKey/DeleteApiKeyModal.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 
 import type { ApiKey, ApiKeys } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import DeleteModal from 'ui/shared/DeleteModal';
@@ -22,7 +23,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   }, [ data.api_key, fetch ]);
 
   const onSuccess = useCallback(async() => {
-    queryClient.setQueryData([ 'api-keys' ], (prevData: ApiKeys | undefined) => {
+    queryClient.setQueryData([ QueryKeys.apiKeys ], (prevData: ApiKeys | undefined) => {
       return prevData?.filter((item) => item.api_key !== data.api_key);
     });
   }, [ data, queryClient ]);

ui/block/BlockDetails.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { scroller, Element } from 'react-scroll';
 
 import type { Block } from 'types/api/block';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import appConfig from 'configs/app/config';
 import clockIcon from 'icons/clock.svg';
@@ -34,7 +35,7 @@ const BlockDetails = () => {
   const fetch = useFetch();
 
   const { data, isLoading, isError, error } = useQuery<unknown, ErrorType<{ status: number }>, Block>(
-    [ 'block', router.query.id ],
+    [ QueryKeys.block, router.query.id ],
     async() => await fetch(`/api/blocks/${ router.query.id }`),
     {
       enabled: Boolean(router.query.id),

ui/blocks/BlocksContent.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
 import type { BlockType, BlocksResponse } from 'types/api/block';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import BlocksList from 'ui/blocks/BlocksList';
@@ -20,7 +21,7 @@ const BlocksContent = ({ type }: Props) => {
   const fetch = useFetch();
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, BlocksResponse>(
-    [ 'blocks', type ],
+    [ QueryKeys.blocks, type ],
     async() => await fetch(`/api/blocks${ type ? `?type=${ type }` : '' }`),
   );
 

ui/customAbi/CustomAbiModal/CustomAbiForm.tsx

@@ -13,6 +13,7 @@ import type { ControllerRenderProps, SubmitHandler } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { CustomAbi, CustomAbis, CustomAbiErrors } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import getErrorMessage from 'lib/getErrorMessage';
 import getPlaceholderWithError from 'lib/getPlaceholderWithError';
@@ -63,7 +64,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   const mutation = useMutation(customAbiKey, {
     onSuccess: (data) => {
       const response = data as unknown as CustomAbi;
-      queryClient.setQueryData([ 'custom-abis' ], (prevData: CustomAbis | undefined) => {
+      queryClient.setQueryData([ QueryKeys.customAbis ], (prevData: CustomAbis | undefined) => {
         const isExisting = prevData && prevData.some((item) => item.id === response.id);
 
         if (isExisting) {

ui/customAbi/DeleteCustomAbiModal.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 
 import type { CustomAbi, CustomAbis } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import DeleteModal from 'ui/shared/DeleteModal';
 
@@ -21,7 +22,7 @@ const DeleteCustomAbiModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   }, [ data ]);
 
   const onSuccess = useCallback(async() => {
-    queryClient.setQueryData([ 'custom-abis' ], (prevData: CustomAbis | undefined) => {
+    queryClient.setQueryData([ QueryKeys.customAbis ], (prevData: CustomAbis | undefined) => {
       return prevData?.filter((item) => item.id !== data.id);
     });
   }, [ data, queryClient ]);

ui/pages/ApiKeys.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { ApiKey, ApiKeys } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -30,7 +31,7 @@ const ApiKeysPage: React.FC = () => {
   const [ apiKeyModalData, setApiKeyModalData ] = useState<ApiKey>();
   const [ deleteModalData, setDeleteModalData ] = useState<ApiKey>();
 
-  const { data, isLoading, isError } = useQuery<unknown, unknown, ApiKeys>([ 'api-keys' ], async() => await fetch('/api/account/api-keys'));
+  const { data, isLoading, isError } = useQuery<unknown, unknown, ApiKeys>([ QueryKeys.apiKeys ], async() => await fetch('/api/account/api-keys'));
 
   const onEditClick = useCallback((data: ApiKey) => {
     setApiKeyModalData(data);

ui/pages/CustomAbi.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { CustomAbi, CustomAbis } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -27,7 +28,7 @@ const CustomAbiPage: React.FC = () => {
   const [ customAbiModalData, setCustomAbiModalData ] = useState<CustomAbi>();
   const [ deleteModalData, setDeleteModalData ] = useState<CustomAbi>();
 
-  const { data, isLoading, isError } = useQuery<unknown, unknown, CustomAbis>([ 'custom-abis' ], async() => await fetch('/api/account/custom-abis'));
+  const { data, isLoading, isError } = useQuery<unknown, unknown, CustomAbis>([ QueryKeys.customAbis ], async() => await fetch('/api/account/custom-abis'));
 
   const onEditClick = useCallback((data: CustomAbi) => {
     setCustomAbiModalData(data);

ui/pages/Watchlist.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { TWatchlist, TWatchlistItem } from 'types/client/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -19,7 +20,7 @@ import WatchlistTable from 'ui/watchlist/WatchlistTable/WatchlistTable';
 
 const WatchList: React.FC = () => {
   const { data, isLoading, isError } =
-    useQuery<unknown, unknown, TWatchlist>([ 'watchlist' ], async() => fetch('/api/account/watchlist/get-with-tokens'));
+    useQuery<unknown, unknown, TWatchlist>([ QueryKeys.watchlist ], async() => fetch('/api/account/watchlist/get-with-tokens'));
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();

ui/privateTags/AddressModal/AddressForm.tsx

@@ -9,6 +9,7 @@ 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 getErrorMessage from 'lib/getErrorMessage';
 import type { ErrorType } from 'lib/hooks/useFetch';
@@ -70,7 +71,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       }
     },
     onSuccess: () => {
-      queryClient.refetchQueries([ 'address-tags' ]).then(() => {
+      queryClient.refetchQueries([ QueryKeys.addressTags ]).then(() => {
         onClose();
         setPending(false);
       });

ui/privateTags/DeletePrivateTagModal.tsx

@@ -3,6 +3,7 @@ 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 DeleteModal from 'ui/shared/DeleteModal';
@@ -27,11 +28,11 @@ const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, data, type })
 
   const onSuccess = useCallback(async() => {
     if (type === 'address') {
-      queryClient.setQueryData([ 'address-tags' ], (prevData: AddressTags | undefined) => {
+      queryClient.setQueryData([ QueryKeys.addressTags ], (prevData: AddressTags | undefined) => {
         return prevData?.filter((item: AddressTag) => item.id !== id);
       });
     } else {
-      queryClient.setQueryData([ 'transaction-tags' ], (prevData: TransactionTags | undefined) => {
+      queryClient.setQueryData([ QueryKeys.transactionTags ], (prevData: TransactionTags | undefined) => {
         return prevData?.filter((item: TransactionTag) => item.id !== id);
       });
     }

ui/privateTags/PrivateAddressTags.tsx

@@ -3,6 +3,7 @@ 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 useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -18,7 +19,7 @@ import DeletePrivateTagModal from './DeletePrivateTagModal';
 
 const PrivateAddressTags = () => {
   const { data: addressTagsData, isLoading, isError } =
-    useQuery<unknown, unknown, AddressTags>([ 'address-tags' ], async() => fetch('/api/account/private-tags/address'), { refetchOnMount: false });
+    useQuery<unknown, unknown, AddressTags>([ QueryKeys.addressTags ], async() => fetch('/api/account/private-tags/address'), { refetchOnMount: false });
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();

ui/privateTags/PrivateTransactionTags.tsx

@@ -3,6 +3,7 @@ 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 useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -18,7 +19,10 @@ import TransactionTagTable from './TransactionTagTable/TransactionTagTable';
 
 const PrivateTransactionTags = () => {
   const { data: transactionTagsData, isLoading, isError } =
-    useQuery<unknown, unknown, TransactionTags>([ 'transaction-tags' ], async() => fetch('/api/account/private-tags/transaction'), { refetchOnMount: false });
+    useQuery<unknown, unknown, TransactionTags>(
+      [ QueryKeys.transactionTags ],
+      async() => fetch('/api/account/private-tags/transaction'), { refetchOnMount: false },
+    );
 
   const transactionModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();

ui/privateTags/TransactionModal/TransactionForm.tsx

@@ -9,6 +9,7 @@ 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 getErrorMessage from 'lib/getErrorMessage';
 import type { ErrorType } from 'lib/hooks/useFetch';
@@ -70,7 +71,7 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) =>
       }
     },
     onSuccess: () => {
-      queryClient.refetchQueries([ 'transaction-tags' ]).then(() => {
+      queryClient.refetchQueries([ QueryKeys.transactionTags ]).then(() => {
         onClose();
         setPending(false);
       });

ui/publicTags/DeletePublicTagModal.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useState } from 'react';
 import type { ChangeEvent } from 'react';
 
 import type { PublicTags, PublicTag } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import DeleteModal from 'ui/shared/DeleteModal';
@@ -32,7 +33,7 @@ const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, data, onDelete
 
   const onSuccess = useCallback(async() => {
     onDeleteSuccess();
-    queryClient.setQueryData([ 'public-tags' ], (prevData: PublicTags | undefined) => {
+    queryClient.setQueryData([ QueryKeys.publicTags ], (prevData: PublicTags | undefined) => {
       return prevData?.filter((item) => item.id !== data.id);
     });
   }, [ queryClient, data, onDeleteSuccess ]);

ui/publicTags/PublicTagsData.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { PublicTags, PublicTag } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -26,7 +27,7 @@ const PublicTagsData = ({ changeToFormScreen, onTagDelete }: Props) => {
   const isMobile = useIsMobile();
   const fetch = useFetch();
 
-  const { data, isLoading, isError } = useQuery<unknown, unknown, PublicTags>([ 'public-tags' ], async() => await fetch('/api/account/public-tags'));
+  const { data, isLoading, isError } = useQuery<unknown, unknown, PublicTags>([ QueryKeys.publicTags ], async() => await fetch('/api/account/public-tags'));
 
   const onDeleteModalClose = useCallback(() => {
     setDeleteModalData(undefined);

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -12,6 +12,7 @@ import type { FieldError, Path, SubmitHandler } from 'react-hook-form';
 import { useForm, useFieldArray } from 'react-hook-form';
 
 import type { PublicTags, PublicTag, PublicTagNew, PublicTagErrors } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import getErrorMessage from 'lib/getErrorMessage';
 import type { ErrorType } from 'lib/hooks/useFetch';
@@ -108,7 +109,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
     onSuccess: async(data) => {
       const response = data as unknown as PublicTag;
 
-      queryClient.setQueryData([ 'public-tags' ], (prevData: PublicTags | undefined) => {
+      queryClient.setQueryData([ QueryKeys.publicTags ], (prevData: PublicTags | undefined) => {
         const isExisting = prevData && prevData.some((item) => item.id === response.id);
 
         if (isExisting) {

ui/shared/Page/Page.tsx

@@ -2,6 +2,8 @@ import { Flex } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
+import { QueryKeys } from 'types/client/queries';
+
 import useFetch from 'lib/hooks/useFetch';
 import PageContent from 'ui/shared/Page/PageContent';
 import Header from 'ui/snippets/header/Header';
@@ -15,7 +17,7 @@ interface Props {
 const Page = ({ children, wrapChildren = true }: Props) => {
   const fetch = useFetch();
 
-  useQuery<unknown, unknown, unknown>([ 'csrf' ], async() => await fetch('/api/account/csrf'));
+  useQuery<unknown, unknown, unknown>([ QueryKeys.csrf ], async() => await fetch('/api/account/csrf'));
 
   const renderedChildren = wrapChildren ? (
     <PageContent>{ children }</PageContent>

ui/tx/TxDetails.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { scroller, Element } from 'react-scroll';
 
 import type { Transaction } from 'types/api/transaction';
+import { QueryKeys } from 'types/client/queries';
 
 import appConfig from 'configs/app/config';
 import clockIcon from 'icons/clock.svg';
@@ -47,7 +48,7 @@ const TxDetails = () => {
   const fetch = useFetch();
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, Transaction>(
-    [ 'tx', router.query.id ],
+    [ QueryKeys.tx, router.query.id ],
     async() => await fetch(`/api/transactions/${ router.query.id }`),
     {
       enabled: Boolean(router.query.id),

ui/tx/TxInternals.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { InternalTransactionsResponse, TxInternalsType, InternalTransaction } from 'types/api/internalTransaction';
+import { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -73,7 +74,7 @@ const TxInternals = () => {
   const [ searchTerm, setSearchTerm ] = React.useState<string>('');
   const [ sort, setSort ] = React.useState<Sort>();
   const { data, isLoading, isError } = useQuery<unknown, unknown, InternalTransactionsResponse>(
-    [ 'tx-internals', router.query.id ],
+    [ QueryKeys.txInternals, router.query.id ],
     async() => await fetch(`/api/transactions/${ router.query.id }/internal-transactions`),
     {
       enabled: Boolean(router.query.id),

ui/tx/TxLogs.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { LogsResponse } from 'types/api/log';
+import { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -15,7 +16,7 @@ const TxLogs = () => {
   const fetch = useFetch();
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, LogsResponse>(
-    [ 'tx-log', router.query.id ],
+    [ QueryKeys.txLog, router.query.id ],
     async() => await fetch(`/api/transactions/${ router.query.id }/logs`),
     {
       enabled: Boolean(router.query.id),

ui/tx/TxRawTrace.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { RawTracesResponse } from 'types/api/rawTrace';
+import { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
@@ -14,7 +15,7 @@ const TxRawTrace = () => {
   const fetch = useFetch();
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, RawTracesResponse>(
-    [ 'tx-raw-trace', router.query.id ],
+    [ QueryKeys.txRawTrace, router.query.id ],
     async() => await fetch(`/api/transactions/${ router.query.id }/raw-trace`),
     {
       enabled: Boolean(router.query.id),

ui/txs/TxsPending.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
 import type { TransactionsResponse } from 'types/api/transaction';
+import { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -14,7 +15,7 @@ import TxsSkeletonMobile from './TxsSkeletonMobile';
 const TxsValidated = () => {
   const fetch = useFetch();
   const { data, isLoading, isError } =
-  useQuery<unknown, unknown, TransactionsResponse>([ 'transactions_pending' ], async() => fetch('/api/transactions/?filter=pending'));
+  useQuery<unknown, unknown, TransactionsResponse>([ QueryKeys.transactionsPending ], async() => fetch('/api/transactions/?filter=pending'));
 
   if (isError) {
     return <DataFetchAlert/>;

ui/txs/TxsValidated.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
 import type { TransactionsResponse } from 'types/api/transaction';
+import { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -14,7 +15,7 @@ import TxsSkeletonMobile from './TxsSkeletonMobile';
 const TxsValidated = () => {
   const fetch = useFetch();
   const { data, isLoading, isError } =
-  useQuery<unknown, unknown, TransactionsResponse>([ 'transactions_validated' ], async() => fetch('/api/transactions/?filter=validated'));
+  useQuery<unknown, unknown, TransactionsResponse>([ QueryKeys.transactionsValidated ], async() => fetch('/api/transactions/?filter=validated'));
 
   if (isError) {
     return <DataFetchAlert/>;

ui/watchlist/AddressModal/AddressForm.tsx

@@ -11,6 +11,7 @@ import { useForm, Controller } from 'react-hook-form';
 
 import type { WatchlistErrors } from 'types/api/account';
 import type { TWatchlistItem } from 'types/client/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import getErrorMessage from 'lib/getErrorMessage';
 import type { ErrorType } from 'lib/hooks/useFetch';
@@ -106,7 +107,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
 
   const { mutate } = useMutation(updateWatchlist, {
     onSuccess: () => {
-      queryClient.refetchQueries([ 'watchlist' ]).then(() => {
+      queryClient.refetchQueries([ QueryKeys.watchlist ]).then(() => {
         onClose();
         setPending(false);
       });

ui/watchlist/DeleteAddressModal.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 
 import type { TWatchlistItem, TWatchlist } from 'types/client/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -24,7 +25,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   }, [ data?.id, fetch ]);
 
   const onSuccess = useCallback(async() => {
-    queryClient.setQueryData([ 'watchlist' ], (prevData: TWatchlist | undefined) => {
+    queryClient.setQueryData([ QueryKeys.watchlist ], (prevData: TWatchlist | undefined) => {
       return prevData?.filter((item) => item.id !== data.id);
     });
   }, [ data, queryClient ]);