From 0f26de3084ced1a370c3635d8059114218965d19 Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Wed, 1 Nov 2023 11:58:28 -0300
Subject: [PATCH 1/4] change signature of hooks

---
 .eslintrc.js                                  |   2 +
 lib/api/useApiQuery.tsx                       |  11 +-
 lib/hooks/useGetCsrfToken.tsx                 |  38 +++---
 lib/hooks/useIsSafeAddress.tsx                |  14 +-
 package.json                                  |   5 +-
 ui/apiKey/ApiKeyModal/ApiKeyForm.tsx          |   5 +-
 ui/customAbi/CustomAbiModal/CustomAbiForm.tsx |   5 +-
 ui/marketplace/useMarketplaceApps.tsx         |  17 ++-
 ui/pages/MarketplaceApp.tsx                   |  16 +--
 ui/privateTags/AddressModal/AddressForm.tsx   |  29 ++--
 .../TransactionModal/TransactionForm.tsx      |  35 ++---
 .../PublicTagsForm/PublicTagsForm.tsx         |   5 +-
 ui/shared/DeleteModal.tsx                     |   5 +-
 ui/shared/nft/useNftMediaType.tsx             |  13 +-
 ui/snippets/footer/Footer.tsx                 |  13 +-
 ui/snippets/networkMenu/useNetworkMenu.tsx    |  13 +-
 ui/watchlist/AddressModal/AddressForm.tsx     |   3 +-
 ui/watchlist/WatchlistTable/WatchListItem.tsx |  19 +--
 .../WatchlistTable/WatchListTableItem.tsx     |  19 +--
 yarn.lock                                     | 124 +++++++++++-------
 20 files changed, 213 insertions(+), 178 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 763a684cf9..f225b17b7a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -20,6 +20,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:jest/recommended',
     'plugin:playwright/playwright-test',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
   ],
   plugins: [
     'es5',
@@ -31,6 +32,7 @@ module.exports = {
     'eslint-plugin-import-helpers',
     'jest',
     'eslint-plugin-no-cyrillic-string',
+    '@tanstack/query',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
diff --git a/lib/api/useApiQuery.tsx b/lib/api/useApiQuery.tsx
index 5b3634f2e7..0d28e70c54 100644
--- a/lib/api/useApiQuery.tsx
+++ b/lib/api/useApiQuery.tsx
@@ -23,12 +23,15 @@ export default function useApiQuery<R extends ResourceName, E = unknown>(
 ) {
   const apiFetch = useApiFetch();
 
-  return useQuery<ResourcePayload<R>, ResourceError<E>, ResourcePayload<R>>(
-    getResourceKey(resource, { pathParams, queryParams }),
-    async() => {
+  return useQuery<ResourcePayload<R>, ResourceError<E>, ResourcePayload<R>>({
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
+    queryKey: getResourceKey(resource, { pathParams, queryParams }),
+    queryFn: async() => {
       // all errors and error typing is handled by react-query
       // so error response will never go to the data
       // that's why we are safe here to do type conversion "as Promise<ResourcePayload<R>>"
       return apiFetch(resource, { pathParams, queryParams, fetchParams }) as Promise<ResourcePayload<R>>;
-    }, queryOptions);
+    },
+    ...queryOptions,
+  });
 }
diff --git a/lib/hooks/useGetCsrfToken.tsx b/lib/hooks/useGetCsrfToken.tsx
index 98706689ca..297f1567c2 100644
--- a/lib/hooks/useGetCsrfToken.tsx
+++ b/lib/hooks/useGetCsrfToken.tsx
@@ -10,27 +10,29 @@ import useFetch from 'lib/hooks/useFetch';
 export default function useGetCsrfToken() {
   const nodeApiFetch = useFetch();
 
-  useQuery(getResourceKey('csrf'), async() => {
-    if (!isNeedProxy()) {
-      const url = buildUrl('csrf');
-      const apiResponse = await fetch(url, { credentials: 'include' });
-      const csrfFromHeader = apiResponse.headers.get('x-bs-account-csrf');
+  useQuery({
+    queryKey: getResourceKey('csrf'),
+    queryFn: async() => {
+      if (!isNeedProxy()) {
+        const url = buildUrl('csrf');
+        const apiResponse = await fetch(url, { credentials: 'include' });
+        const csrfFromHeader = apiResponse.headers.get('x-bs-account-csrf');
 
-      if (!csrfFromHeader) {
-        Sentry.captureException(new Error('Client fetch failed'), { tags: {
-          source: 'fetch',
-          'source.resource': 'csrf',
-          'status.code': 500,
-          'status.text': 'Unable to obtain csrf token from header',
-        } });
-        return;
-      }
+        if (!csrfFromHeader) {
+          Sentry.captureException(new Error('Client fetch failed'), { tags: {
+            source: 'fetch',
+            'source.resource': 'csrf',
+            'status.code': 500,
+            'status.text': 'Unable to obtain csrf token from header',
+          } });
+          return;
+        }
 
-      return { token: csrfFromHeader };
-    }
+        return { token: csrfFromHeader };
+      }
 
-    return nodeApiFetch('/node-api/csrf');
-  }, {
+      return nodeApiFetch('/node-api/csrf');
+    },
     enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
   });
 }
diff --git a/lib/hooks/useIsSafeAddress.tsx b/lib/hooks/useIsSafeAddress.tsx
index ec727a2d19..49062f7cc2 100644
--- a/lib/hooks/useIsSafeAddress.tsx
+++ b/lib/hooks/useIsSafeAddress.tsx
@@ -8,20 +8,18 @@ const feature = config.features.safe;
 export default function useIsSafeAddress(hash: string | undefined): boolean {
   const fetch = useFetch();
 
-  const { data } = useQuery(
-    [ 'safe_transaction_api', hash ],
-    async() => {
+  const { data } = useQuery({
+    queryKey: [ 'safe_transaction_api', hash ],
+    queryFn: async() => {
       if (!feature.isEnabled || !hash) {
         return Promise.reject();
       }
 
       return fetch(`${ feature.apiUrl }/${ hash }`, undefined, { omitSentryErrorLog: true });
     },
-    {
-      enabled: feature.isEnabled && Boolean(hash),
-      refetchOnMount: false,
-    },
-  );
+    enabled: feature.isEnabled && Boolean(hash),
+    refetchOnMount: false,
+  });
 
   return Boolean(data);
 }
diff --git a/package.json b/package.json
index 732eec6b0d..20a9390eef 100644
--- a/package.json
+++ b/package.json
@@ -39,8 +39,8 @@
     "@monaco-editor/react": "^4.4.6",
     "@sentry/react": "^7.72.0",
     "@slise/embed-react": "^2.2.0",
-    "@tanstack/react-query": "^4.0.10",
-    "@tanstack/react-query-devtools": "^4.0.10",
+    "@tanstack/react-query": "^5.4.3",
+    "@tanstack/react-query-devtools": "^5.4.3",
     "@types/papaparse": "^5.3.5",
     "@types/react-scroll": "^1.8.4",
     "@web3modal/ethereum": "^2.6.2",
@@ -89,6 +89,7 @@
     "@playwright/experimental-ct-react": "1.35.1",
     "@playwright/test": "^1.35.1",
     "@svgr/webpack": "^6.5.1",
+    "@tanstack/eslint-plugin-query": "^5.0.5",
     "@testing-library/react": "^14.0.0",
     "@total-typescript/ts-reset": "^0.4.0",
     "@types/crypto-js": "^4.1.1",
diff --git a/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx b/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx
index ba5204f6a7..b1f6bf4aa8 100644
--- a/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx
+++ b/ui/apiKey/ApiKeyModal/ApiKeyForm.tsx
@@ -57,7 +57,8 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
     });
   };
 
-  const mutation = useMutation(updateApiKey, {
+  const mutation = useMutation({
+    mutationFn: updateApiKey,
     onSuccess: async(data) => {
       const response = data as unknown as ApiKey;
 
@@ -148,7 +149,7 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
           size="lg"
           type="submit"
           isDisabled={ !isDirty }
-          isLoading={ mutation.isLoading }
+          isLoading={ mutation.isPending }
         >
           { data ? 'Save' : 'Generate API key' }
         </Button>
diff --git a/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx b/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx
index ed546cc9af..ed36d0f522 100644
--- a/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx
+++ b/ui/customAbi/CustomAbiModal/CustomAbiForm.tsx
@@ -63,7 +63,8 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
 
   const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
-  const mutation = useMutation(customAbiKey, {
+  const mutation = useMutation({
+    mutationFn: customAbiKey,
     onSuccess: (data) => {
       const response = data as unknown as CustomAbi;
       queryClient.setQueryData([ resourceKey('custom_abi') ], (prevData: CustomAbis | undefined) => {
@@ -175,7 +176,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
           size="lg"
           type="submit"
           isDisabled={ !isDirty }
-          isLoading={ mutation.isLoading }
+          isLoading={ mutation.isPending }
         >
           { data ? 'Save' : 'Create custom ABI' }
         </Button>
diff --git a/ui/marketplace/useMarketplaceApps.tsx b/ui/marketplace/useMarketplaceApps.tsx
index f36bd3b322..0e07ca2893 100644
--- a/ui/marketplace/useMarketplaceApps.tsx
+++ b/ui/marketplace/useMarketplaceApps.tsx
@@ -24,15 +24,14 @@ function isAppCategoryMatches(category: string, app: MarketplaceAppOverview, fav
 
 export default function useMarketplaceApps(filter: string, selectedCategoryId: string = MarketplaceCategory.ALL, favoriteApps: Array<string> = []) {
   const apiFetch = useApiFetch();
-  const { isPlaceholderData, isError, error, data } = useQuery<unknown, ResourceError<unknown>, Array<MarketplaceAppOverview>>(
-    [ 'marketplace-apps' ],
-    async() => apiFetch(configUrl, undefined, { resource: 'marketplace-apps' }),
-    {
-      select: (data) => (data as Array<MarketplaceAppOverview>).sort((a, b) => a.title.localeCompare(b.title)),
-      placeholderData: feature.isEnabled ? Array(9).fill(MARKETPLACE_APP) : undefined,
-      staleTime: Infinity,
-      enabled: feature.isEnabled,
-    });
+  const { isPlaceholderData, isError, error, data } = useQuery<unknown, ResourceError<unknown>, Array<MarketplaceAppOverview>>({
+    queryKey: [ 'marketplace-apps' ],
+    queryFn: async() => apiFetch(configUrl, undefined, { resource: 'marketplace-apps' }),
+    select: (data) => (data as Array<MarketplaceAppOverview>).sort((a, b) => a.title.localeCompare(b.title)),
+    placeholderData: feature.isEnabled ? Array(9).fill(MARKETPLACE_APP) : undefined,
+    staleTime: Infinity,
+    enabled: feature.isEnabled,
+  });
 
   const displayedApps = React.useMemo(() => {
     return data?.filter(app => isAppNameMatches(filter, app) && isAppCategoryMatches(selectedCategoryId, app, favoriteApps)) || [];
diff --git a/ui/pages/MarketplaceApp.tsx b/ui/pages/MarketplaceApp.tsx
index 7c6646beeb..c206c5c9f7 100644
--- a/ui/pages/MarketplaceApp.tsx
+++ b/ui/pages/MarketplaceApp.tsx
@@ -34,9 +34,9 @@ const MarketplaceApp = () => {
   const router = useRouter();
   const id = getQueryParamString(router.query.id);
 
-  const { isLoading, isError, error, data } = useQuery<unknown, ResourceError<unknown>, MarketplaceAppOverview>(
-    [ 'marketplace-apps', id ],
-    async() => {
+  const { isPending, isError, error, data } = useQuery<unknown, ResourceError<unknown>, MarketplaceAppOverview>({
+    queryKey: [ 'marketplace-apps', id ],
+    queryFn: async() => {
       const result = await apiFetch<Array<MarketplaceAppOverview>, unknown>(configUrl, undefined, { resource: 'marketplace-apps' });
       if (!Array.isArray(result)) {
         throw result;
@@ -49,12 +49,10 @@ const MarketplaceApp = () => {
 
       return item;
     },
-    {
-      enabled: feature.isEnabled,
-    },
-  );
+    enabled: feature.isEnabled,
+  });
 
-  const [ isFrameLoading, setIsFrameLoading ] = useState(isLoading);
+  const [ isFrameLoading, setIsFrameLoading ] = useState(isPending);
   const { colorMode } = useColorMode();
 
   const handleIframeLoad = useCallback(() => {
@@ -106,7 +104,7 @@ const MarketplaceApp = () => {
 
   return (
     <>
-      { !isLoading && <PageTitle title={ data.title } backLink={ backLink }/> }
+      { !isPending && <PageTitle title={ data.title } backLink={ backLink }/> }
       <Center
         h="100vh"
         mx={{ base: -4, lg: -12 }}
diff --git a/ui/privateTags/AddressModal/AddressForm.tsx b/ui/privateTags/AddressModal/AddressForm.tsx
index f9c25aa467..42884ce01b 100644
--- a/ui/privateTags/AddressModal/AddressForm.tsx
+++ b/ui/privateTags/AddressModal/AddressForm.tsx
@@ -44,22 +44,23 @@ const AddressForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisibl
 
   const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
-  const { mutate } = useMutation((formData: Inputs) => {
-    const body = {
-      name: formData?.tag,
-      address_hash: formData?.address,
-    };
+  const { mutate } = useMutation({
+    mutationFn: (formData: Inputs) => {
+      const body = {
+        name: formData?.tag,
+        address_hash: formData?.address,
+      };
 
-    const isEdit = data?.id;
-    if (isEdit) {
-      return apiFetch('private_tags_address', {
-        pathParams: { id: data.id },
-        fetchParams: { method: 'PUT', body },
-      });
-    }
+      const isEdit = data?.id;
+      if (isEdit) {
+        return apiFetch('private_tags_address', {
+          pathParams: { id: data.id },
+          fetchParams: { method: 'PUT', body },
+        });
+      }
 
-    return apiFetch('private_tags_address', { fetchParams: { method: 'POST', body } });
-  }, {
+      return apiFetch('private_tags_address', { fetchParams: { method: 'POST', body } });
+    },
     onError: (error: ResourceErrorAccount<AddressTagErrors>) => {
       setPending(false);
       const errorMap = error.payload?.errors;
diff --git a/ui/privateTags/TransactionModal/TransactionForm.tsx b/ui/privateTags/TransactionModal/TransactionForm.tsx
index 35097aeee3..dc3d11ac41 100644
--- a/ui/privateTags/TransactionModal/TransactionForm.tsx
+++ b/ui/privateTags/TransactionModal/TransactionForm.tsx
@@ -47,22 +47,23 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVi
   const queryClient = useQueryClient();
   const apiFetch = useApiFetch();
 
-  const { mutate } = useMutation((formData: Inputs) => {
-    const body = {
-      name: formData?.tag,
-      transaction_hash: formData?.transaction,
-    };
-    const isEdit = data?.id;
-
-    if (isEdit) {
-      return apiFetch('private_tags_tx', {
-        pathParams: { id: data.id },
-        fetchParams: { method: 'PUT', body },
-      });
-    }
-
-    return apiFetch('private_tags_tx', { fetchParams: { method: 'POST', body } });
-  }, {
+  const { mutate } = useMutation({
+    mutationFn: (formData: Inputs) => {
+      const body = {
+        name: formData?.tag,
+        transaction_hash: formData?.transaction,
+      };
+      const isEdit = data?.id;
+
+      if (isEdit) {
+        return apiFetch('private_tags_tx', {
+          pathParams: { id: data.id },
+          fetchParams: { method: 'PUT', body },
+        });
+      }
+
+      return apiFetch('private_tags_tx', { fetchParams: { method: 'POST', body } });
+    },
     onError: (error: ResourceErrorAccount<TransactionTagErrors>) => {
       setPending(false);
       const errorMap = error.payload?.errors;
@@ -76,7 +77,7 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVi
       }
     },
     onSuccess: async() => {
-      await queryClient.refetchQueries([ resourceKey('private_tags_tx') ]);
+      await queryClient.refetchQueries({ queryKey: [ resourceKey('private_tags_tx') ] });
       await onSuccess();
       onClose();
       setPending(false);
diff --git a/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx b/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx
index da25e86eae..07fb7ec2ae 100644
--- a/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx
+++ b/ui/publicTags/PublicTagsForm/PublicTagsForm.tsx
@@ -109,7 +109,8 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
     });
   };
 
-  const mutation = useMutation(updatePublicTag, {
+  const mutation = useMutation({
+    mutationFn: updatePublicTag,
     onSuccess: async(data) => {
       const response = data as unknown as PublicTag;
 
@@ -237,7 +238,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
           size="lg"
           type="submit"
           isDisabled={ !isDirty }
-          isLoading={ mutation.isLoading }
+          isLoading={ mutation.isPending }
         >
           Send request
         </Button>
diff --git a/ui/shared/DeleteModal.tsx b/ui/shared/DeleteModal.tsx
index a6421c840c..67f055e2d4 100644
--- a/ui/shared/DeleteModal.tsx
+++ b/ui/shared/DeleteModal.tsx
@@ -39,7 +39,8 @@ const DeleteModal: React.FC<Props> = ({
     onClose();
   }, [ onClose, setAlertVisible ]);
 
-  const mutation = useMutation(mutationFn, {
+  const mutation = useMutation({
+    mutationFn,
     onSuccess: async() => {
       onSuccess();
       onClose();
@@ -70,7 +71,7 @@ const DeleteModal: React.FC<Props> = ({
           <Button
             size="lg"
             onClick={ onDeleteClick }
-            isLoading={ mutation.isLoading }
+            isLoading={ mutation.isPending }
             // FIXME: chackra's button is disabled when isLoading
             isDisabled={ false }
           >
diff --git a/ui/shared/nft/useNftMediaType.tsx b/ui/shared/nft/useNftMediaType.tsx
index 153e6f4b3f..4444b122e3 100644
--- a/ui/shared/nft/useNftMediaType.tsx
+++ b/ui/shared/nft/useNftMediaType.tsx
@@ -13,9 +13,9 @@ export default function useNftMediaType(url: string | null, isEnabled: boolean)
 
   const fetch = useFetch();
 
-  const { data } = useQuery<unknown, ResourceError<unknown>, MediaType>(
-    [ 'nft-media-type', url ],
-    async() => {
+  const { data } = useQuery<unknown, ResourceError<unknown>, MediaType>({
+    queryKey: [ 'nft-media-type', url ],
+    queryFn: async() => {
       if (!url) {
         return 'image';
       }
@@ -41,10 +41,9 @@ export default function useNftMediaType(url: string | null, isEnabled: boolean)
         return 'image';
       }
     },
-    {
-      enabled: isEnabled && Boolean(url),
-      staleTime: Infinity,
-    });
+    enabled: isEnabled && Boolean(url),
+    staleTime: Infinity,
+  });
 
   return data;
 }
diff --git a/ui/snippets/footer/Footer.tsx b/ui/snippets/footer/Footer.tsx
index 1aa40a776a..21d109427e 100644
--- a/ui/snippets/footer/Footer.tsx
+++ b/ui/snippets/footer/Footer.tsx
@@ -96,13 +96,12 @@ const Footer = () => {
 
   const fetch = useFetch();
 
-  const { isLoading, data: linksData } = useQuery<unknown, ResourceError<unknown>, Array<CustomLinksGroup>>(
-    [ 'footer-links' ],
-    async() => fetch(config.UI.footer.links || '', undefined, { resource: 'footer-links' }),
-    {
-      enabled: Boolean(config.UI.footer.links),
-      staleTime: Infinity,
-    });
+  const { isLoading, data: linksData } = useQuery<unknown, ResourceError<unknown>, Array<CustomLinksGroup>>({
+    queryKey: [ 'footer-links' ],
+    queryFn: async() => fetch(config.UI.footer.links || '', undefined, { resource: 'footer-links' }),
+    enabled: Boolean(config.UI.footer.links),
+    staleTime: Infinity,
+  });
 
   return (
     <Flex
diff --git a/ui/snippets/networkMenu/useNetworkMenu.tsx b/ui/snippets/networkMenu/useNetworkMenu.tsx
index 150e81f408..0cb110dd19 100644
--- a/ui/snippets/networkMenu/useNetworkMenu.tsx
+++ b/ui/snippets/networkMenu/useNetworkMenu.tsx
@@ -13,13 +13,12 @@ export default function useNetworkMenu() {
   const { isOpen, onClose, onOpen, onToggle } = useDisclosure();
 
   const apiFetch = useApiFetch();
-  const { isLoading, data } = useQuery<unknown, ResourceError<unknown>, Array<FeaturedNetwork>>(
-    [ 'featured-network' ],
-    async() => apiFetch(config.UI.sidebar.featuredNetworks || '', undefined, { resource: 'featured-network' }),
-    {
-      enabled: Boolean(config.UI.sidebar.featuredNetworks) && isOpen,
-      staleTime: Infinity,
-    });
+  const { isLoading, data } = useQuery<unknown, ResourceError<unknown>, Array<FeaturedNetwork>>({
+    queryKey: [ 'featured-network' ],
+    queryFn: async() => apiFetch(config.UI.sidebar.featuredNetworks || '', undefined, { resource: 'featured-network' }),
+    enabled: Boolean(config.UI.sidebar.featuredNetworks) && isOpen,
+    staleTime: Infinity,
+  });
 
   return React.useMemo(() => ({
     isOpen,
diff --git a/ui/watchlist/AddressModal/AddressForm.tsx b/ui/watchlist/AddressModal/AddressForm.tsx
index 7b358186b4..613d4029ae 100644
--- a/ui/watchlist/AddressModal/AddressForm.tsx
+++ b/ui/watchlist/AddressModal/AddressForm.tsx
@@ -106,7 +106,8 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd
     }
   }
 
-  const { mutate } = useMutation(updateWatchlist, {
+  const { mutate } = useMutation({
+    mutationFn: updateWatchlist,
     onSuccess: async() => {
       await onSuccess();
       setPending(false);
diff --git a/ui/watchlist/WatchlistTable/WatchListItem.tsx b/ui/watchlist/WatchlistTable/WatchListItem.tsx
index 65ce512505..68e1fe6943 100644
--- a/ui/watchlist/WatchlistTable/WatchListItem.tsx
+++ b/ui/watchlist/WatchlistTable/WatchListItem.tsx
@@ -59,15 +59,16 @@ const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) =
     });
   }, [ notificationToast ]);
 
-  const { mutate } = useMutation(() => {
-    setSwitchDisabled(true);
-    const body = { ...item, notification_methods: { email: !notificationEnabled } };
-    setNotificationEnabled(prevState => !prevState);
-    return apiFetch('watchlist', {
-      pathParams: { id: item.id },
-      fetchParams: { method: 'PUT', body },
-    });
-  }, {
+  const { mutate } = useMutation({
+    mutationFn: () => {
+      setSwitchDisabled(true);
+      const body = { ...item, notification_methods: { email: !notificationEnabled } };
+      setNotificationEnabled(prevState => !prevState);
+      return apiFetch('watchlist', {
+        pathParams: { id: item.id },
+        fetchParams: { method: 'PUT', body },
+      });
+    },
     onError: () => {
       showErrorToast();
       setNotificationEnabled(prevState => !prevState);
diff --git a/ui/watchlist/WatchlistTable/WatchListTableItem.tsx b/ui/watchlist/WatchlistTable/WatchListTableItem.tsx
index 62506f8d7b..5c33383f30 100644
--- a/ui/watchlist/WatchlistTable/WatchListTableItem.tsx
+++ b/ui/watchlist/WatchlistTable/WatchListTableItem.tsx
@@ -63,15 +63,16 @@ const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Pro
     });
   }, [ notificationToast ]);
 
-  const { mutate } = useMutation(() => {
-    setSwitchDisabled(true);
-    const body = { ...item, notification_methods: { email: !notificationEnabled } };
-    setNotificationEnabled(prevState => !prevState);
-    return apiFetch('watchlist', {
-      pathParams: { id: item.id },
-      fetchParams: { method: 'PUT', body },
-    });
-  }, {
+  const { mutate } = useMutation({
+    mutationFn: () => {
+      setSwitchDisabled(true);
+      const body = { ...item, notification_methods: { email: !notificationEnabled } };
+      setNotificationEnabled(prevState => !prevState);
+      return apiFetch('watchlist', {
+        pathParams: { id: item.id },
+        fetchParams: { method: 'PUT', body },
+      });
+    },
     onError: () => {
       showErrorToast();
       setNotificationEnabled(prevState => !prevState);
diff --git a/yarn.lock b/yarn.lock
index ed7ac4b6b3..1298e0e827 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4054,23 +4054,28 @@
   dependencies:
     tslib "^2.4.0"
 
-"@tanstack/match-sorter-utils@^8.1.1":
-  version "8.5.14"
-  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.5.14.tgz#12efcd536abe491d09521e0242bc4d51442f8a8a"
-  integrity sha512-lVNhzTcOJ2bZ4IU+PeCPQ36vowBHvviJb2ZfdRFX5uhy7G0jM8N34zAMbmS5ZmVH8D2B7oU82OWo0e/5ZFzQrw==
+"@tanstack/eslint-plugin-query@^5.0.5":
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.0.5.tgz#3f1fc0ad472462c3ca0a8a99601206049dfa7211"
+  integrity sha512-kYbh5Cboz1BzN6LeUWnI1B0BCikXMYQjxaEO7cV+0rycllU0qZqSEkd2LdgWIZhuLTc4WBt0li1s+O6RhM5Cog==
   dependencies:
-    remove-accents "0.4.2"
-
-"@tanstack/query-core@4.10.3":
-  version "4.10.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.10.3.tgz#a6477bab9ed1ae4561ca0a59ae06f8c615c692b7"
-  integrity sha512-+ME02sUmBfx3Pjd+0XtEthK8/4rVMD2jcxvnW9DSgFONpKtpjzfRzjY4ykzpDw1QEo2eoPvl7NS8J5mNI199aA==
+    "@typescript-eslint/utils" "^5.54.0"
 
 "@tanstack/query-core@4.29.11":
   version "4.29.11"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.29.11.tgz#fa338f7d6897c6be5de6d8dabd603d9b78ee48c7"
   integrity sha512-8C+hF6SFAb/TlFZyS9FItgNwrw4PMa7YeX+KQYe2ZAiEz6uzg6yIr+QBzPkUwZ/L0bXvGd1sufTm3wotoz+GwQ==
 
+"@tanstack/query-core@5.4.3":
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.4.3.tgz#fbdd36ccf1acf70579980f2e7cf16d2c2aa2a5e9"
+  integrity sha512-fnI9ORjcuLGm1sNrKatKIosRQUpuqcD4SV7RqRSVmj8JSicX2aoMyKryHEBpVQvf6N4PaBVgBxQomjsbsGPssQ==
+
+"@tanstack/query-devtools@5.4.2":
+  version "5.4.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.4.2.tgz#1687645ba1b9ffc76c55ac7759461d331d0776bf"
+  integrity sha512-EXdaMXi8CxZuMp97J5mq6wy1RduOfoWFv5vtA1U+hyqb8Wst6M8kkkjDSdFvGZIRpYY4K8mKLlEFHNUZDG5dtw==
+
 "@tanstack/query-persist-client-core@4.29.11":
   version "4.29.11"
   resolved "https://registry.yarnpkg.com/@tanstack/query-persist-client-core/-/query-persist-client-core-4.29.11.tgz#96b4b83bead480eb37e024a59fd59bfd84b0545e"
@@ -4085,14 +4090,12 @@
   dependencies:
     "@tanstack/query-persist-client-core" "4.29.11"
 
-"@tanstack/react-query-devtools@^4.0.10":
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.11.0.tgz#a2adf21fa644eae5b834ba4235b99818301ab702"
-  integrity sha512-g/414SruE0TEp4jeMYxVUSXGXCc+zMY9j0gB8Q6B91gmyPseNqs9WLkVrqxRXoQDyRvDcphVOaEANNygGx+zGg==
+"@tanstack/react-query-devtools@^5.4.3":
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.4.3.tgz#7df56de0454104c229f25393cf57a957f6245186"
+  integrity sha512-J9EB50vpK5yvQ5W+AOp9jIQa+1mld+Wwc2GF3VLr2SEDhOyiTiHOjrFGKKL1Cal5Wg8UuS3vexf8trElrtg05A==
   dependencies:
-    "@tanstack/match-sorter-utils" "^8.1.1"
-    superjson "^1.10.0"
-    use-sync-external-store "^1.2.0"
+    "@tanstack/query-devtools" "5.4.2"
 
 "@tanstack/react-query-persist-client@^4.28.0":
   version "4.29.12"
@@ -4101,14 +4104,6 @@
   dependencies:
     "@tanstack/query-persist-client-core" "4.29.11"
 
-"@tanstack/react-query@^4.0.10":
-  version "4.10.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.10.3.tgz#294deefa0fb6ada88bc4631d346ef5d5551c5443"
-  integrity sha512-4OEJjkcsCTmG3ui7RjsVzsXerWQvInTe95CBKFyOV/GchMUlNztoFnnYmlMhX7hLUqJMhbG9l7M507V7+xU8Hw==
-  dependencies:
-    "@tanstack/query-core" "4.10.3"
-    use-sync-external-store "^1.2.0"
-
 "@tanstack/react-query@^4.28.0":
   version "4.29.12"
   resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.29.12.tgz#de111cf1d6c389b86acacfaf972302914cfa1208"
@@ -4117,6 +4112,13 @@
     "@tanstack/query-core" "4.29.11"
     use-sync-external-store "^1.2.0"
 
+"@tanstack/react-query@^5.4.3":
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.4.3.tgz#cf59120690032e44b8c1c4c463cfb43aaad2fc5f"
+  integrity sha512-4aSOrRNa6yEmf7mws5QPTVMn8Lp7L38tFoTZ0c1ZmhIvbr8GIA0WT7X5N3yz/nuK8hUtjw9cAzBr4BPDZZ+tzA==
+  dependencies:
+    "@tanstack/query-core" "5.4.3"
+
 "@testing-library/dom@^9.0.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.0.tgz#ed8ce10aa5e05eb6eaf0635b5b8975d889f66075"
@@ -4809,6 +4811,14 @@
     "@typescript-eslint/types" "5.60.1"
     "@typescript-eslint/visitor-keys" "5.60.1"
 
+"@typescript-eslint/scope-manager@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
+  integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+
 "@typescript-eslint/type-utils@5.60.1":
   version "5.60.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.60.1.tgz#17770540e98d65ab4730c7aac618003f702893f4"
@@ -4834,6 +4844,11 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.60.1.tgz#a17473910f6b8d388ea83c9d7051af89c4eb7561"
   integrity sha512-zDcDx5fccU8BA0IDZc71bAtYIcG9PowaOwaD8rjYbqwK7dpe/UMQl3inJ4UtUK42nOCT41jTSCwg76E62JpMcg==
 
+"@typescript-eslint/types@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
+  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
+
 "@typescript-eslint/typescript-estree@5.45.0":
   version "5.45.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.45.0.tgz#f70a0d646d7f38c0dfd6936a5e171a77f1e5291d"
@@ -4873,6 +4888,19 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
+"@typescript-eslint/typescript-estree@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
+  integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/utils@5.60.1":
   version "5.60.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.60.1.tgz#6861ebedbefba1ac85482d2bdef6f2ff1eb65b80"
@@ -4901,6 +4929,20 @@
     eslint-utils "^3.0.0"
     semver "^7.3.7"
 
+"@typescript-eslint/utils@^5.54.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
+  integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@types/json-schema" "^7.0.9"
+    "@types/semver" "^7.3.12"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
+    eslint-scope "^5.1.1"
+    semver "^7.3.7"
+
 "@typescript-eslint/visitor-keys@5.45.0":
   version "5.45.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.45.0.tgz#e0d160e9e7fdb7f8da697a5b78e7a14a22a70528"
@@ -4925,6 +4967,14 @@
     "@typescript-eslint/types" "5.60.1"
     eslint-visitor-keys "^3.3.0"
 
+"@typescript-eslint/visitor-keys@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
+  integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    eslint-visitor-keys "^3.3.0"
+
 "@vitejs/plugin-react@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.0.0.tgz#46d1c37c507447d10467be1c111595174555ef28"
@@ -6300,13 +6350,6 @@ cookie@~0.5.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
-copy-anything@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-3.0.2.tgz#7189171ff5e1893b2287e8bf574b8cd448ed50b1"
-  integrity sha512-CzATjGXzUQ0EvuvgOCI6A4BGOo2bcVx8B+eC2nF862iv9fopnPQwlrbACakNCHRIJbCSBj+J/9JeDf60k64MkA==
-  dependencies:
-    is-what "^4.1.6"
-
 copy-to-clipboard@3.3.3, copy-to-clipboard@^3.2.0, copy-to-clipboard@^3.3.1, copy-to-clipboard@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
@@ -8753,11 +8796,6 @@ is-weakset@^2.0.1:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
-is-what@^4.1.6:
-  version "4.1.7"
-  resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.7.tgz#c41dc1d2d2d6a9285c624c2505f61849c8b1f9cc"
-  integrity sha512-DBVOQNiPKnGMxRMLIYSwERAS5MVY1B7xYiGnpgctsOFvVDz9f9PFXXxMcTOHuoqYp4NK9qFYQaIC1NRRxLMpBQ==
-
 is-wsl@^2.1.1, is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
@@ -11255,11 +11293,6 @@ remarkable@^2.0.1:
     argparse "^1.0.10"
     autolinker "^3.11.0"
 
-remove-accents@0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
-  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
-
 repeat-string@^1.5.2:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
@@ -11908,13 +11941,6 @@ sucrase@^3.20.3:
     pirates "^4.0.1"
     ts-interface-checker "^0.1.9"
 
-superjson@^1.10.0:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.10.1.tgz#9c73e9393489dddab89d638694eadcbf4bda2f36"
-  integrity sha512-7fvPVDHmkTKg6641B9c6vr6Zz5CwPtF9j0XFExeLxJxrMaeLU2sqebY3/yrI3l0K5zJ+H9QA3H+lIYj5ooCOkg==
-  dependencies:
-    copy-anything "^3.0.2"
-
 superstruct@^0.14.2:
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-0.14.2.tgz#0dbcdf3d83676588828f1cf5ed35cda02f59025b"

From 5e563f4c9740167d89f7af14d7e0683fe34e0a83 Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Wed, 1 Nov 2023 15:13:41 -0300
Subject: [PATCH 2/4] isLoading -> isPending

---
 ui/address/coinBalance/AddressCoinBalanceChart.tsx        | 4 ++--
 ui/address/contract/ContractRead.tsx                      | 4 ++--
 ui/address/contract/ContractWrite.tsx                     | 4 ++--
 ui/address/tokenSelect/TokenSelect.tsx                    | 4 ++--
 ui/address/tokens/TokenBalances.tsx                       | 6 +++---
 ui/address/utils/useFetchTokens.ts                        | 2 +-
 ui/block/BlockDetails.pw.tsx                              | 6 +++---
 ui/home/indicators/ChainIndicatorChartContainer.tsx       | 4 ++--
 ui/home/indicators/ChainIndicatorItem.tsx                 | 2 +-
 ui/home/indicators/ChainIndicators.tsx                    | 2 +-
 ui/pages/ContractVerification.tsx                         | 2 +-
 ui/pages/CsvExport.tsx                                    | 2 +-
 ui/pages/MyProfile.tsx                                    | 4 ++--
 ui/pages/SearchResults.tsx                                | 2 +-
 ui/pages/Watchlist.tsx                                    | 2 +-
 ui/snippets/footer/Footer.tsx                             | 4 ++--
 ui/snippets/footer/IntTxsIndexingStatus.tsx               | 4 ++--
 ui/snippets/header/alerts/IndexingBlocksAlert.tsx         | 8 ++++----
 ui/snippets/networkMenu/useNetworkMenu.tsx                | 6 +++---
 ui/snippets/profileMenu/ProfileMenuDesktop.tsx            | 6 +++---
 ui/snippets/profileMenu/ProfileMenuMobile.tsx             | 6 +++---
 .../searchBar/SearchBarSuggest/SearchBarSuggest.tsx       | 2 +-
 ui/sol2uml/Sol2UmlDiagram.tsx                             | 2 +-
 ui/stats/ChartWidgetContainer.tsx                         | 4 ++--
 ui/token/TokenVerifiedInfo.tsx                            | 4 ++--
 ui/tokenInfo/TokenInfoForm.tsx                            | 2 +-
 ui/tx/TxLogs.tsx                                          | 2 +-
 ui/tx/TxRawTrace.tsx                                      | 2 +-
 ui/tx/TxState.tsx                                         | 2 +-
 ui/tx/TxTokenTransfer.tsx                                 | 2 +-
 ui/tx/useFetchTxInfo.tsx                                  | 4 ++--
 ui/txs/TxAdditionalInfoContainer.tsx                      | 4 ++--
 ui/txs/useTxsSort.tsx                                     | 2 +-
 ui/verifiedContracts/VerifiedContractsCounters.tsx        | 2 +-
 34 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/ui/address/coinBalance/AddressCoinBalanceChart.tsx b/ui/address/coinBalance/AddressCoinBalanceChart.tsx
index 8d55091a1d..483de97796 100644
--- a/ui/address/coinBalance/AddressCoinBalanceChart.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceChart.tsx
@@ -10,7 +10,7 @@ interface Props {
 }
 
 const AddressCoinBalanceChart = ({ addressHash }: Props) => {
-  const { data, isLoading, isError } = useApiQuery('address_coin_balance_chart', {
+  const { data, isPending, isError } = useApiQuery('address_coin_balance_chart', {
     pathParams: { hash: addressHash },
   });
 
@@ -24,7 +24,7 @@ const AddressCoinBalanceChart = ({ addressHash }: Props) => {
       isError={ isError }
       title="Balances"
       items={ items }
-      isLoading={ isLoading }
+      isLoading={ isPending }
       h="300px"
       units={ config.chain.currency.symbol }
     />
diff --git a/ui/address/contract/ContractRead.tsx b/ui/address/contract/ContractRead.tsx
index edbfdd899f..c85f03b6a7 100644
--- a/ui/address/contract/ContractRead.tsx
+++ b/ui/address/contract/ContractRead.tsx
@@ -27,7 +27,7 @@ const ContractRead = ({ addressHash, isProxy, isCustomAbi }: Props) => {
   const apiFetch = useApiFetch();
   const { address: userAddress } = useAccount();
 
-  const { data, isLoading, isError } = useApiQuery(isProxy ? 'contract_methods_read_proxy' : 'contract_methods_read', {
+  const { data, isPending, isError } = useApiQuery(isProxy ? 'contract_methods_read_proxy' : 'contract_methods_read', {
     pathParams: { hash: addressHash },
     queryParams: {
       is_custom_abi: isCustomAbi ? 'true' : 'false',
@@ -83,7 +83,7 @@ const ContractRead = ({ addressHash, isProxy, isCustomAbi }: Props) => {
     return <DataFetchAlert/>;
   }
 
-  if (isLoading) {
+  if (isPending) {
     return <ContentLoader/>;
   }
 
diff --git a/ui/address/contract/ContractWrite.tsx b/ui/address/contract/ContractWrite.tsx
index 73c253ac71..bbd513545d 100644
--- a/ui/address/contract/ContractWrite.tsx
+++ b/ui/address/contract/ContractWrite.tsx
@@ -29,7 +29,7 @@ const ContractWrite = ({ addressHash, isProxy, isCustomAbi }: Props) => {
   const { chain } = useNetwork();
   const { switchNetworkAsync } = useSwitchNetwork();
 
-  const { data, isLoading, isError } = useApiQuery(isProxy ? 'contract_methods_write_proxy' : 'contract_methods_write', {
+  const { data, isPending, isError } = useApiQuery(isProxy ? 'contract_methods_write_proxy' : 'contract_methods_write', {
     pathParams: { hash: addressHash },
     queryParams: {
       is_custom_abi: isCustomAbi ? 'true' : 'false',
@@ -99,7 +99,7 @@ const ContractWrite = ({ addressHash, isProxy, isCustomAbi }: Props) => {
     return <DataFetchAlert/>;
   }
 
-  if (isLoading) {
+  if (isPending) {
     return <ContentLoader/>;
   }
 
diff --git a/ui/address/tokenSelect/TokenSelect.tsx b/ui/address/tokenSelect/TokenSelect.tsx
index 9c54d9096e..11b358e3f7 100644
--- a/ui/address/tokenSelect/TokenSelect.tsx
+++ b/ui/address/tokenSelect/TokenSelect.tsx
@@ -35,7 +35,7 @@ const TokenSelect = ({ onClick }: Props) => {
 
   const addressQueryData = queryClient.getQueryData<Address>(addressResourceKey);
 
-  const { data, isError, isLoading, refetch } = useFetchTokens({ hash: addressQueryData?.hash });
+  const { data, isError, isPending, refetch } = useFetchTokens({ hash: addressQueryData?.hash });
   const tokensResourceKey = getResourceKey('address_tokens', { pathParams: { hash: addressQueryData?.hash }, queryParams: { type: 'ERC-20' } });
   const tokensIsFetching = useIsFetching({ queryKey: tokensResourceKey });
 
@@ -72,7 +72,7 @@ const TokenSelect = ({ onClick }: Props) => {
     handler: handleTokenBalanceMessage,
   });
 
-  if (isLoading) {
+  if (isPending) {
     return (
       <Flex columnGap={ 3 }>
         <Skeleton h={ 8 } w="150px" borderRadius="base"/>
diff --git a/ui/address/tokens/TokenBalances.tsx b/ui/address/tokens/TokenBalances.tsx
index 890f8dc9b3..a22a1e8dc6 100644
--- a/ui/address/tokens/TokenBalances.tsx
+++ b/ui/address/tokens/TokenBalances.tsx
@@ -49,12 +49,12 @@ const TokenBalances = () => {
       <TokenBalancesItem
         name="Net Worth"
         value={ addressData?.exchange_rate ? `${ prefix }$${ totalUsd.toFormat(2) } USD` : 'N/A' }
-        isLoading={ addressQuery.isLoading || tokenQuery.isLoading }
+        isLoading={ addressQuery.isPending || tokenQuery.isPending }
       />
       <TokenBalancesItem
         name={ `${ config.chain.currency.symbol } Balance` }
         value={ (!nativeUsd.eq(ZERO) ? `$${ nativeUsd.toFormat(2) } USD | ` : '') + `${ nativeValue } ${ config.chain.currency.symbol }` }
-        isLoading={ addressQuery.isLoading || tokenQuery.isLoading }
+        isLoading={ addressQuery.isPending || tokenQuery.isPending }
       />
       <TokenBalancesItem
         name="Tokens"
@@ -62,7 +62,7 @@ const TokenBalances = () => {
           `${ prefix }$${ tokensInfo.usd.toFormat(2) } USD ` +
           tokensNumText
         }
-        isLoading={ addressQuery.isLoading || tokenQuery.isLoading }
+        isLoading={ addressQuery.isPending || tokenQuery.isPending }
       />
     </Flex>
   );
diff --git a/ui/address/utils/useFetchTokens.ts b/ui/address/utils/useFetchTokens.ts
index 6a3ec6a960..9bc003373a 100644
--- a/ui/address/utils/useFetchTokens.ts
+++ b/ui/address/utils/useFetchTokens.ts
@@ -49,7 +49,7 @@ export default function useFetchTokens({ hash }: Props) {
   }, [ erc1155query.data, erc20query.data, erc721query.data ]);
 
   return {
-    isLoading: erc20query.isLoading || erc721query.isLoading || erc1155query.isLoading,
+    isPending: erc20query.isPending || erc721query.isPending || erc1155query.isPending,
     isError: erc20query.isError || erc721query.isError || erc1155query.isError,
     data,
     refetch,
diff --git a/ui/block/BlockDetails.pw.tsx b/ui/block/BlockDetails.pw.tsx
index b0e713ad04..eeddfb4241 100644
--- a/ui/block/BlockDetails.pw.tsx
+++ b/ui/block/BlockDetails.pw.tsx
@@ -21,7 +21,7 @@ const hooksConfig = {
 test('regular block +@mobile +@dark-mode', async({ mount, page }) => {
   const query = {
     data: blockMock.base,
-    isLoading: false,
+    isPending: false,
   } as UseQueryResult<Block, ResourceError>;
 
   const component = await mount(
@@ -39,7 +39,7 @@ test('regular block +@mobile +@dark-mode', async({ mount, page }) => {
 test('genesis block', async({ mount, page }) => {
   const query = {
     data: blockMock.genesis,
-    isLoading: false,
+    isPending: false,
   } as UseQueryResult<Block, ResourceError>;
 
   const component = await mount(
@@ -62,7 +62,7 @@ const customFieldsTest = test.extend({
 customFieldsTest('rootstock custom fields', async({ mount, page }) => {
   const query = {
     data: blockMock.rootstock,
-    isLoading: false,
+    isPending: false,
   } as UseQueryResult<Block, ResourceError>;
 
   const component = await mount(
diff --git a/ui/home/indicators/ChainIndicatorChartContainer.tsx b/ui/home/indicators/ChainIndicatorChartContainer.tsx
index 652ad8bd7d..95f4f34904 100644
--- a/ui/home/indicators/ChainIndicatorChartContainer.tsx
+++ b/ui/home/indicators/ChainIndicatorChartContainer.tsx
@@ -11,10 +11,10 @@ import ChainIndicatorChart from './ChainIndicatorChart';
 
 type Props = UseQueryResult<TimeChartData>;
 
-const ChainIndicatorChartContainer = ({ data, isError, isLoading }: Props) => {
+const ChainIndicatorChartContainer = ({ data, isError, isPending }: Props) => {
 
   const content = (() => {
-    if (isLoading) {
+    if (isPending) {
       return <ContentLoader mt="auto"/>;
     }
 
diff --git a/ui/home/indicators/ChainIndicatorItem.tsx b/ui/home/indicators/ChainIndicatorItem.tsx
index df15bc445a..68be618b91 100644
--- a/ui/home/indicators/ChainIndicatorItem.tsx
+++ b/ui/home/indicators/ChainIndicatorItem.tsx
@@ -33,7 +33,7 @@ const ChainIndicatorItem = ({ id, title, value, icon, isSelected, onClick, stats
       return null;
     }
 
-    if (stats.isLoading) {
+    if (stats.isPending) {
       return (
         <Skeleton
           h={ 3 }
diff --git a/ui/home/indicators/ChainIndicators.tsx b/ui/home/indicators/ChainIndicators.tsx
index 8aab806da9..d40148e763 100644
--- a/ui/home/indicators/ChainIndicators.tsx
+++ b/ui/home/indicators/ChainIndicators.tsx
@@ -41,7 +41,7 @@ const ChainIndicators = () => {
   }
 
   const valueTitle = (() => {
-    if (statsQueryResult.isLoading) {
+    if (statsQueryResult.isPending) {
       return <Skeleton h="48px" w="215px" mt={ 3 } mb={ 4 }/>;
     }
 
diff --git a/ui/pages/ContractVerification.tsx b/ui/pages/ContractVerification.tsx
index a61083965c..a2bdfc3d47 100644
--- a/ui/pages/ContractVerification.tsx
+++ b/ui/pages/ContractVerification.tsx
@@ -64,7 +64,7 @@ const ContractVerification = () => {
       return <DataFetchAlert/>;
     }
 
-    if (configQuery.isLoading || contractQuery.isLoading || isVerifiedContract) {
+    if (configQuery.isPending || contractQuery.isPending || isVerifiedContract) {
       return <ContentLoader/>;
     }
 
diff --git a/ui/pages/CsvExport.tsx b/ui/pages/CsvExport.tsx
index 987ffa00bf..b8a0315d62 100644
--- a/ui/pages/CsvExport.tsx
+++ b/ui/pages/CsvExport.tsx
@@ -108,7 +108,7 @@ const CsvExport = () => {
       return <DataFetchAlert/>;
     }
 
-    if (addressQuery.isLoading) {
+    if (addressQuery.isPending) {
       return <ContentLoader/>;
     }
 
diff --git a/ui/pages/MyProfile.tsx b/ui/pages/MyProfile.tsx
index 2fc7f1e406..91fe658d80 100644
--- a/ui/pages/MyProfile.tsx
+++ b/ui/pages/MyProfile.tsx
@@ -9,11 +9,11 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import UserAvatar from 'ui/shared/UserAvatar';
 
 const MyProfile = () => {
-  const { data, isLoading, isError } = useFetchProfileInfo();
+  const { data, isPending, isError } = useFetchProfileInfo();
   useRedirectForInvalidAuthToken();
 
   const content = (() => {
-    if (isLoading) {
+    if (isPending) {
       return <ContentLoader/>;
     }
 
diff --git a/ui/pages/SearchResults.tsx b/ui/pages/SearchResults.tsx
index 3df5128209..7948065e34 100644
--- a/ui/pages/SearchResults.tsx
+++ b/ui/pages/SearchResults.tsx
@@ -54,7 +54,7 @@ const SearchResultsPageContent = () => {
       }
     }
 
-    !redirectCheckQuery.isLoading && setShowContent(true);
+    !redirectCheckQuery.isPending && setShowContent(true);
   }, [ redirectCheckQuery, router, debouncedSearchTerm, showContent ]);
 
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
diff --git a/ui/pages/Watchlist.tsx b/ui/pages/Watchlist.tsx
index 52a2f0f269..e59f767645 100644
--- a/ui/pages/Watchlist.tsx
+++ b/ui/pages/Watchlist.tsx
@@ -42,7 +42,7 @@ const WatchList: React.FC = () => {
   }, [ addressModalProps ]);
 
   const onAddOrEditSuccess = useCallback(async() => {
-    await queryClient.refetchQueries([ resourceKey('watchlist') ]);
+    await queryClient.refetchQueries({ queryKey: [ resourceKey('watchlist') ] });
     setAddressModalData(undefined);
     addressModalProps.onClose();
   }, [ addressModalProps, queryClient ]);
diff --git a/ui/snippets/footer/Footer.tsx b/ui/snippets/footer/Footer.tsx
index 21d109427e..c2dfe18869 100644
--- a/ui/snippets/footer/Footer.tsx
+++ b/ui/snippets/footer/Footer.tsx
@@ -96,7 +96,7 @@ const Footer = () => {
 
   const fetch = useFetch();
 
-  const { isLoading, data: linksData } = useQuery<unknown, ResourceError<unknown>, Array<CustomLinksGroup>>({
+  const { isPending, data: linksData } = useQuery<unknown, ResourceError<unknown>, Array<CustomLinksGroup>>({
     queryKey: [ 'footer-links' ],
     queryFn: async() => fetch(config.UI.footer.links || '', undefined, { resource: 'footer-links' }),
     enabled: Boolean(config.UI.footer.links),
@@ -169,7 +169,7 @@ const Footer = () => {
             { BLOCKSCOUT_LINKS.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
           </Grid>
         </Box>
-        { config.UI.footer.links && isLoading && (
+        { config.UI.footer.links && isPending && (
           Array.from(Array(3)).map((i, index) => (
             <Box minW="160px" key={ index }>
               <Skeleton w="120px" h="20px" mb={ 6 }/>
diff --git a/ui/snippets/footer/IntTxsIndexingStatus.tsx b/ui/snippets/footer/IntTxsIndexingStatus.tsx
index 3f0f64fa98..3e0753b0bc 100644
--- a/ui/snippets/footer/IntTxsIndexingStatus.tsx
+++ b/ui/snippets/footer/IntTxsIndexingStatus.tsx
@@ -13,7 +13,7 @@ import useSocketMessage from 'lib/socket/useSocketMessage';
 
 const IntTxsIndexingStatus = () => {
 
-  const { data, isError, isLoading } = useApiQuery('homepage_indexing_status');
+  const { data, isError, isPending } = useApiQuery('homepage_indexing_status');
 
   const bgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100');
   const hintTextcolor = useColorModeValue('black', 'white');
@@ -42,7 +42,7 @@ const IntTxsIndexingStatus = () => {
     handler: handleInternalTxsIndexStatus,
   });
 
-  if (isError || isLoading) {
+  if (isError || isPending) {
     return null;
   }
 
diff --git a/ui/snippets/header/alerts/IndexingBlocksAlert.tsx b/ui/snippets/header/alerts/IndexingBlocksAlert.tsx
index 888c1bbbd2..edb57e3682 100644
--- a/ui/snippets/header/alerts/IndexingBlocksAlert.tsx
+++ b/ui/snippets/header/alerts/IndexingBlocksAlert.tsx
@@ -18,17 +18,17 @@ const IndexingBlocksAlert = () => {
   const cookiesString = appProps.cookies;
   const [ hasAlertCookie ] = React.useState(cookies.get(cookies.NAMES.INDEXING_ALERT, cookiesString) === 'true');
 
-  const { data, isError, isLoading } = useApiQuery('homepage_indexing_status', {
+  const { data, isError, isPending } = useApiQuery('homepage_indexing_status', {
     queryOptions: {
       enabled: !config.UI.indexingAlert.blocks.isHidden,
     },
   });
 
   React.useEffect(() => {
-    if (!isLoading && !isError) {
+    if (!isPending && !isError) {
       cookies.set(cookies.NAMES.INDEXING_ALERT, data.finished_indexing_blocks ? 'false' : 'true');
     }
-  }, [ data, isError, isLoading ]);
+  }, [ data, isError, isPending ]);
 
   const queryClient = useQueryClient();
 
@@ -62,7 +62,7 @@ const IndexingBlocksAlert = () => {
     return null;
   }
 
-  if (isLoading) {
+  if (isPending) {
     return hasAlertCookie ? <Skeleton h={{ base: '96px', lg: '48px' }} w="100%"/> : null;
   }
 
diff --git a/ui/snippets/networkMenu/useNetworkMenu.tsx b/ui/snippets/networkMenu/useNetworkMenu.tsx
index 0cb110dd19..1bd9accf0b 100644
--- a/ui/snippets/networkMenu/useNetworkMenu.tsx
+++ b/ui/snippets/networkMenu/useNetworkMenu.tsx
@@ -13,7 +13,7 @@ export default function useNetworkMenu() {
   const { isOpen, onClose, onOpen, onToggle } = useDisclosure();
 
   const apiFetch = useApiFetch();
-  const { isLoading, data } = useQuery<unknown, ResourceError<unknown>, Array<FeaturedNetwork>>({
+  const { isPending, data } = useQuery<unknown, ResourceError<unknown>, Array<FeaturedNetwork>>({
     queryKey: [ 'featured-network' ],
     queryFn: async() => apiFetch(config.UI.sidebar.featuredNetworks || '', undefined, { resource: 'featured-network' }),
     enabled: Boolean(config.UI.sidebar.featuredNetworks) && isOpen,
@@ -25,8 +25,8 @@ export default function useNetworkMenu() {
     onClose,
     onOpen,
     onToggle,
-    isLoading,
+    isPending,
     data,
     availableTabs: NETWORK_GROUPS.filter((tab) => data?.some(({ group }) => group === tab)),
-  }), [ isOpen, onClose, onOpen, onToggle, data, isLoading ]);
+  }), [ isOpen, onClose, onOpen, onToggle, data, isPending ]);
 }
diff --git a/ui/snippets/profileMenu/ProfileMenuDesktop.tsx b/ui/snippets/profileMenu/ProfileMenuDesktop.tsx
index aa375bfa01..8d5dea0a70 100644
--- a/ui/snippets/profileMenu/ProfileMenuDesktop.tsx
+++ b/ui/snippets/profileMenu/ProfileMenuDesktop.tsx
@@ -9,15 +9,15 @@ import UserAvatar from 'ui/shared/UserAvatar';
 import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 
 const ProfileMenuDesktop = () => {
-  const { data, error, isLoading } = useFetchProfileInfo();
+  const { data, error, isPending } = useFetchProfileInfo();
   const loginUrl = useLoginUrl();
   const [ hasMenu, setHasMenu ] = React.useState(false);
 
   React.useEffect(() => {
-    if (!isLoading) {
+    if (!isPending) {
       setHasMenu(Boolean(data));
     }
-  }, [ data, error?.status, isLoading ]);
+  }, [ data, error?.status, isPending ]);
 
   const handleSignInClick = React.useCallback(() => {
     mixpanel.logEvent(
diff --git a/ui/snippets/profileMenu/ProfileMenuMobile.tsx b/ui/snippets/profileMenu/ProfileMenuMobile.tsx
index 3c0ee64443..bce294a20c 100644
--- a/ui/snippets/profileMenu/ProfileMenuMobile.tsx
+++ b/ui/snippets/profileMenu/ProfileMenuMobile.tsx
@@ -11,7 +11,7 @@ import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 const ProfileMenuMobile = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const { data, error, isLoading } = useFetchProfileInfo();
+  const { data, error, isPending } = useFetchProfileInfo();
   const loginUrl = useLoginUrl();
   const [ hasMenu, setHasMenu ] = React.useState(false);
 
@@ -24,10 +24,10 @@ const ProfileMenuMobile = () => {
   }, []);
 
   React.useEffect(() => {
-    if (!isLoading) {
+    if (!isPending) {
       setHasMenu(Boolean(data));
     }
-  }, [ data, error?.status, isLoading ]);
+  }, [ data, error?.status, isPending ]);
 
   const buttonProps: Partial<ButtonProps> = (() => {
     if (hasMenu || !loginUrl) {
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
index 0704d04228..d7da026701 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
@@ -103,7 +103,7 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
   const bgColor = useColorModeValue('white', 'gray.900');
 
   const content = (() => {
-    if (query.isLoading || marketplaceApps.isPlaceholderData) {
+    if (query.isPending || marketplaceApps.isPlaceholderData) {
       return <ContentLoader text="We are searching, please wait... " fontSize="sm"/>;
     }
 
diff --git a/ui/sol2uml/Sol2UmlDiagram.tsx b/ui/sol2uml/Sol2UmlDiagram.tsx
index 6fd1423ba0..c7f1a1727b 100644
--- a/ui/sol2uml/Sol2UmlDiagram.tsx
+++ b/ui/sol2uml/Sol2UmlDiagram.tsx
@@ -71,7 +71,7 @@ const Sol2UmlDiagram = ({ addressHash }: Props) => {
     throw Error('Uml diagram fetch error', { cause: contractQuery.error as unknown as Error });
   }
 
-  if (contractQuery.isLoading || umlQuery.isLoading) {
+  if (contractQuery.isPending || umlQuery.isPending) {
     return <ContentLoader/>;
   }
 
diff --git a/ui/stats/ChartWidgetContainer.tsx b/ui/stats/ChartWidgetContainer.tsx
index 5c8ab6c4d3..3c577813b1 100644
--- a/ui/stats/ChartWidgetContainer.tsx
+++ b/ui/stats/ChartWidgetContainer.tsx
@@ -27,7 +27,7 @@ const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError
   const endDate = selectedInterval.start ? formatDate(new Date()) : undefined;
   const startDate = selectedInterval.start ? formatDate(selectedInterval.start) : undefined;
 
-  const { data, isLoading, isError } = useApiQuery('stats_line', {
+  const { data, isPending, isError } = useApiQuery('stats_line', {
     pathParams: { id },
     queryParams: {
       from: startDate,
@@ -56,7 +56,7 @@ const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError
       title={ title }
       units={ units }
       description={ description }
-      isLoading={ isLoading }
+      isLoading={ isPending }
       minH="230px"
     />
   );
diff --git a/ui/token/TokenVerifiedInfo.tsx b/ui/token/TokenVerifiedInfo.tsx
index 136929caf9..6684c0df52 100644
--- a/ui/token/TokenVerifiedInfo.tsx
+++ b/ui/token/TokenVerifiedInfo.tsx
@@ -15,14 +15,14 @@ interface Props {
 
 const TokenVerifiedInfo = ({ verifiedInfoQuery }: Props) => {
 
-  const { data, isLoading, isError } = verifiedInfoQuery;
+  const { data, isPending, isError } = verifiedInfoQuery;
 
   const content = (() => {
     if (!config.features.verifiedTokens.isEnabled) {
       return null;
     }
 
-    if (isLoading) {
+    if (isPending) {
       return (
         <>
           <Skeleton w="100px" h="30px" borderRadius="base"/>
diff --git a/ui/tokenInfo/TokenInfoForm.tsx b/ui/tokenInfo/TokenInfoForm.tsx
index 30da8f0e42..546becbb2a 100644
--- a/ui/tokenInfo/TokenInfoForm.tsx
+++ b/ui/tokenInfo/TokenInfoForm.tsx
@@ -112,7 +112,7 @@ const TokenInfoForm = ({ address, tokenName, application, onSubmit }: Props) =>
     return <DataFetchAlert/>;
   }
 
-  if (configQuery.isLoading) {
+  if (configQuery.isPending) {
     return <ContentLoader/>;
   }
 
diff --git a/ui/tx/TxLogs.tsx b/ui/tx/TxLogs.tsx
index 98d21bf9dd..68af313493 100644
--- a/ui/tx/TxLogs.tsx
+++ b/ui/tx/TxLogs.tsx
@@ -24,7 +24,7 @@ const TxLogs = () => {
     },
   });
 
-  if (!txInfo.isLoading && !txInfo.isPlaceholderData && !txInfo.isError && !txInfo.data.status) {
+  if (!txInfo.isPending && !txInfo.isPlaceholderData && !txInfo.isError && !txInfo.data.status) {
     return txInfo.socketStatus ? <TxSocketAlert status={ txInfo.socketStatus }/> : <TxPendingAlert/>;
   }
 
diff --git a/ui/tx/TxRawTrace.tsx b/ui/tx/TxRawTrace.tsx
index d149ab0545..ec49b81e73 100644
--- a/ui/tx/TxRawTrace.tsx
+++ b/ui/tx/TxRawTrace.tsx
@@ -49,7 +49,7 @@ const TxRawTrace = () => {
     handler: handleRawTraceMessage,
   });
 
-  if (!txInfo.isLoading && !txInfo.isPlaceholderData && !txInfo.isError && !txInfo.data.status) {
+  if (!txInfo.isPending && !txInfo.isPlaceholderData && !txInfo.isError && !txInfo.data.status) {
     return txInfo.socketStatus ? <TxSocketAlert status={ txInfo.socketStatus }/> : <TxPendingAlert/>;
   }
 
diff --git a/ui/tx/TxState.tsx b/ui/tx/TxState.tsx
index 1f294f4a50..61eff78451 100644
--- a/ui/tx/TxState.tsx
+++ b/ui/tx/TxState.tsx
@@ -31,7 +31,7 @@ const TxState = () => {
     },
   });
 
-  if (!txInfo.isLoading && !txInfo.isPlaceholderData && !txInfo.isError && !txInfo.data.status) {
+  if (!txInfo.isPending && !txInfo.isPlaceholderData && !txInfo.isError && !txInfo.data.status) {
     return txInfo.socketStatus ? <TxSocketAlert status={ txInfo.socketStatus }/> : <TxPendingAlert/>;
   }
 
diff --git a/ui/tx/TxTokenTransfer.tsx b/ui/tx/TxTokenTransfer.tsx
index 4249c7d305..834b601ccf 100644
--- a/ui/tx/TxTokenTransfer.tsx
+++ b/ui/tx/TxTokenTransfer.tsx
@@ -45,7 +45,7 @@ const TxTokenTransfer = () => {
     setTypeFilter(nextValue);
   }, [ tokenTransferQuery ]);
 
-  if (!txsInfo.isLoading && !txsInfo.isPlaceholderData && !txsInfo.isError && !txsInfo.data.status) {
+  if (!txsInfo.isPending && !txsInfo.isPlaceholderData && !txsInfo.isError && !txsInfo.data.status) {
     return txsInfo.socketStatus ? <TxSocketAlert status={ txsInfo.socketStatus }/> : <TxPendingAlert/>;
   }
 
diff --git a/ui/tx/useFetchTxInfo.tsx b/ui/tx/useFetchTxInfo.tsx
index 73b81d85ee..e83e9ff085 100644
--- a/ui/tx/useFetchTxInfo.tsx
+++ b/ui/tx/useFetchTxInfo.tsx
@@ -38,7 +38,7 @@ export default function useFetchTxInfo({ onTxStatusUpdate, updateDelay }: Params
       placeholderData: config.features.zkEvmRollup.isEnabled ? TX_ZKEVM_L2 : TX,
     },
   });
-  const { data, isError, isLoading } = queryResult;
+  const { data, isError, isPending } = queryResult;
 
   const handleStatusUpdateMessage: SocketMessage.TxStatusUpdate['handler'] = React.useCallback(async() => {
     updateDelay && await delay(updateDelay);
@@ -60,7 +60,7 @@ export default function useFetchTxInfo({ onTxStatusUpdate, updateDelay }: Params
     topic: `transactions:${ hash }`,
     onSocketClose: handleSocketClose,
     onSocketError: handleSocketError,
-    isDisabled: isLoading || isError || data.status !== null,
+    isDisabled: isPending || isError || data.status !== null,
   });
   useSocketMessage({
     channel,
diff --git a/ui/txs/TxAdditionalInfoContainer.tsx b/ui/txs/TxAdditionalInfoContainer.tsx
index 2b7a5a7ef7..25006c8fe7 100644
--- a/ui/txs/TxAdditionalInfoContainer.tsx
+++ b/ui/txs/TxAdditionalInfoContainer.tsx
@@ -11,14 +11,14 @@ interface Props {
 }
 
 const TxAdditionalInfoContainer = ({ hash }: Props) => {
-  const { data, isError, isLoading } = useApiQuery('tx', {
+  const { data, isError, isPending } = useApiQuery('tx', {
     pathParams: { hash },
     queryOptions: {
       refetchOnMount: false,
     },
   });
 
-  if (isLoading) {
+  if (isPending) {
     return (
       <Box>
         <Skeleton w="130px" h="24px" borderRadius="full" mb={ 6 }/>
diff --git a/ui/txs/useTxsSort.tsx b/ui/txs/useTxsSort.tsx
index e864c741a0..c8ed9dbffb 100644
--- a/ui/txs/useTxsSort.tsx
+++ b/ui/txs/useTxsSort.tsx
@@ -61,7 +61,7 @@ export default function useTxsSort(
   }, []);
 
   return React.useMemo(() => {
-    if (queryResult.isError || queryResult.isLoading) {
+    if (queryResult.isError || queryResult.isPending) {
       return { ...queryResult, setSortByField, setSortByValue, sorting };
     }
 
diff --git a/ui/verifiedContracts/VerifiedContractsCounters.tsx b/ui/verifiedContracts/VerifiedContractsCounters.tsx
index 230054896b..474d568a25 100644
--- a/ui/verifiedContracts/VerifiedContractsCounters.tsx
+++ b/ui/verifiedContracts/VerifiedContractsCounters.tsx
@@ -13,7 +13,7 @@ const VerifiedContractsCounters = () => {
   }
 
   const content = (() => {
-    if (countersQuery.isLoading) {
+    if (countersQuery.isPending) {
       const item = <Skeleton w={{ base: '100%', lg: 'calc((100% - 12px)/2)' }} h="69px" borderRadius="12px"/>;
       return (
         <>

From 840d4b6cda59a3ffb4d56da20382990947f0cfbe Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Wed, 1 Nov 2023 15:25:56 -0300
Subject: [PATCH 3/4] default error type

---
 lib/api/useQueryClientConfig.tsx                     | 2 +-
 ui/address/coinBalance/AddressCoinBalanceHistory.tsx | 3 ++-
 ui/address/details/AddressCounterItem.tsx            | 3 ++-
 ui/home/indicators/ChainIndicatorItem.tsx            | 3 ++-
 ui/token/TokenDetails.tsx                            | 3 ++-
 ui/token/TokenVerifiedInfo.tsx                       | 3 ++-
 ui/txs/useTxsSort.tsx                                | 5 +++--
 7 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/lib/api/useQueryClientConfig.tsx b/lib/api/useQueryClientConfig.tsx
index c84ba3da23..6ff2fed457 100644
--- a/lib/api/useQueryClientConfig.tsx
+++ b/lib/api/useQueryClientConfig.tsx
@@ -18,7 +18,7 @@ export default function useQueryClientConfig() {
           }
           return failureCount < 2;
         },
-        useErrorBoundary: (error) => {
+        throwOnError: (error) => {
           const status = getErrorObjStatusCode(error);
           // don't catch error for "Too many requests" response
           return status === 429;
diff --git a/ui/address/coinBalance/AddressCoinBalanceHistory.tsx b/ui/address/coinBalance/AddressCoinBalanceHistory.tsx
index 8b491093ed..8672520b18 100644
--- a/ui/address/coinBalance/AddressCoinBalanceHistory.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceHistory.tsx
@@ -6,6 +6,7 @@ import type { AddressCoinBalanceHistoryResponse } from 'types/api/address';
 import type { PaginationParams } from 'ui/shared/pagination/types';
 
 import config from 'configs/app';
+import type { ResourceError } from 'lib/api/resources';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -15,7 +16,7 @@ import AddressCoinBalanceListItem from './AddressCoinBalanceListItem';
 import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem';
 
 interface Props {
-  query: UseQueryResult<AddressCoinBalanceHistoryResponse> & {
+  query: UseQueryResult<AddressCoinBalanceHistoryResponse, ResourceError<unknown>> & {
     pagination: PaginationParams;
   };
 }
diff --git a/ui/address/details/AddressCounterItem.tsx b/ui/address/details/AddressCounterItem.tsx
index a8e4363b8f..21156b2cd8 100644
--- a/ui/address/details/AddressCounterItem.tsx
+++ b/ui/address/details/AddressCounterItem.tsx
@@ -7,11 +7,12 @@ import type { AddressCounters } from 'types/api/address';
 
 import { route } from 'nextjs-routes';
 
+import type { ResourceError } from 'lib/api/resources';
 import LinkInternal from 'ui/shared/LinkInternal';
 
 interface Props {
   prop: keyof AddressCounters;
-  query: UseQueryResult<AddressCounters>;
+  query: UseQueryResult<AddressCounters, ResourceError<unknown>>;
   address: string;
   onClick: () => void;
   isAddressQueryLoading: boolean;
diff --git a/ui/home/indicators/ChainIndicatorItem.tsx b/ui/home/indicators/ChainIndicatorItem.tsx
index 68be618b91..5a96c11fe2 100644
--- a/ui/home/indicators/ChainIndicatorItem.tsx
+++ b/ui/home/indicators/ChainIndicatorItem.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import type { HomeStats } from 'types/api/stats';
 import type { ChainIndicatorId } from 'types/homepage';
 
+import type { ResourceError } from 'lib/api/resources';
 import useIsMobile from 'lib/hooks/useIsMobile';
 
 interface Props {
@@ -14,7 +15,7 @@ interface Props {
   icon: React.ReactNode;
   isSelected: boolean;
   onClick: (id: ChainIndicatorId) => void;
-  stats: UseQueryResult<HomeStats>;
+  stats: UseQueryResult<HomeStats, ResourceError<unknown>>;
 }
 
 const ChainIndicatorItem = ({ id, title, value, icon, isSelected, onClick, stats }: Props) => {
diff --git a/ui/token/TokenDetails.tsx b/ui/token/TokenDetails.tsx
index 388546a67b..478ad7310a 100644
--- a/ui/token/TokenDetails.tsx
+++ b/ui/token/TokenDetails.tsx
@@ -7,6 +7,7 @@ import { scroller } from 'react-scroll';
 
 import type { TokenInfo } from 'types/api/token';
 
+import type { ResourceError } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { TOKEN_COUNTERS } from 'stubs/token';
@@ -18,7 +19,7 @@ import TruncatedValue from 'ui/shared/TruncatedValue';
 import TokenNftMarketplaces from './TokenNftMarketplaces';
 
 interface Props {
-  tokenQuery: UseQueryResult<TokenInfo>;
+  tokenQuery: UseQueryResult<TokenInfo, ResourceError<unknown>>;
 }
 
 const TokenDetails = ({ tokenQuery }: Props) => {
diff --git a/ui/token/TokenVerifiedInfo.tsx b/ui/token/TokenVerifiedInfo.tsx
index 6684c0df52..4beb5240d7 100644
--- a/ui/token/TokenVerifiedInfo.tsx
+++ b/ui/token/TokenVerifiedInfo.tsx
@@ -5,12 +5,13 @@ import React from 'react';
 import type { TokenVerifiedInfo as TTokenVerifiedInfo } from 'types/api/token';
 
 import config from 'configs/app';
+import type { ResourceError } from 'lib/api/resources';
 import LinkExternal from 'ui/shared/LinkExternal';
 
 import TokenProjectInfo from './TokenProjectInfo';
 
 interface Props {
-  verifiedInfoQuery: UseQueryResult<TTokenVerifiedInfo>;
+  verifiedInfoQuery: UseQueryResult<TTokenVerifiedInfo, ResourceError<unknown>>;
 }
 
 const TokenVerifiedInfo = ({ verifiedInfoQuery }: Props) => {
diff --git a/ui/txs/useTxsSort.tsx b/ui/txs/useTxsSort.tsx
index c8ed9dbffb..3a77967507 100644
--- a/ui/txs/useTxsSort.tsx
+++ b/ui/txs/useTxsSort.tsx
@@ -4,17 +4,18 @@ import React from 'react';
 import type { TxsResponse } from 'types/api/transaction';
 import type { Sort } from 'types/client/txs-sort';
 
+import type { ResourceError } from 'lib/api/resources';
 import * as cookies from 'lib/cookies';
 import sortTxs from 'lib/tx/sortTxs';
 
-type HookResult = UseQueryResult<TxsResponse> & {
+type HookResult = UseQueryResult<TxsResponse, ResourceError<unknown>> & {
   sorting: Sort;
   setSortByField: (field: 'val' | 'fee') => () => void;
   setSortByValue: (value: Sort | undefined) => void;
 }
 
 export default function useTxsSort(
-  queryResult: UseQueryResult<TxsResponse>,
+  queryResult: UseQueryResult<TxsResponse, ResourceError<unknown>>,
 ): HookResult {
 
   const [ sorting, setSorting ] = React.useState<Sort>(cookies.get(cookies.NAMES.TXS_SORT) as Sort);

From 2abe47a439a4133520a2d2c7e2d15678bc158176 Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Wed, 1 Nov 2023 16:21:10 -0300
Subject: [PATCH 4/4] dev tools props

---
 pages/_app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 853ccf8d94..b9d77d5c53 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -59,7 +59,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
                 { getLayout(<Component { ...pageProps }/>) }
               </SocketProvider>
             </ScrollDirectionProvider>
-            <ReactQueryDevtools/>
+            <ReactQueryDevtools buttonPosition="bottom-left" position="left"/>
             <GoogleAnalytics/>
           </QueryClientProvider>
         </AppContextProvider>