refactor

lib/api/resources.ts

-import type { UserInfo, CustomAbis } from 'types/api/account';
-import type { CsrfData } from 'types/client/account';
-
 export const RESOURCES = {
   // account
   user_info: {
@@ -24,12 +21,6 @@ export const RESOURCES = {
 
 export const resourceKey = (x: keyof typeof RESOURCES) => x;
 
-export type ResourcePayload<Q extends keyof typeof RESOURCES> =
-  Q extends 'user_info' ? UserInfo :
-    Q extends 'csrf' ? CsrfData :
-      Q extends 'custom_abi' ? CustomAbis :
-        never;
-
 export interface ResourceError<T = unknown> {
   error?: T;
   payload?: T;

lib/api/useApiFetch.tsx

@@ -4,7 +4,7 @@ import type { Params as FetchParams } from 'lib/hooks/useFetch';
 import useFetch from 'lib/hooks/useFetch';
 
 import buildUrl from './buildUrl';
-import type { RESOURCES, ResourcePayload, ResourceError } from './resources';
+import type { RESOURCES, ResourceError } from './resources';
 
 export interface Params {
   pathParams?: Record<string, string>;
@@ -15,7 +15,7 @@ export interface Params {
 export default function useApiFetch() {
   const fetch = useFetch();
 
-  return React.useCallback(<R extends keyof typeof RESOURCES, SuccessType = ResourcePayload<R>, ErrorType = ResourceError>(
+  return React.useCallback(<R extends keyof typeof RESOURCES, SuccessType = unknown, ErrorType = ResourceError>(
     resource: R,
     { pathParams, queryParams, fetchParams }: Params = {},
   ) => {

lib/api/useApiQuery.tsx

 import type { UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 
-import type { RESOURCES, ResourcePayload, ResourceError } from './resources';
+import type { UserInfo, CustomAbis } from 'types/api/account';
+import type { CsrfData } from 'types/client/account';
+
+import type { RESOURCES, ResourceError } from './resources';
 import type { Params as ApiFetchParams } from './useApiFetch';
 import useApiFetch from './useApiFetch';
 
@@ -16,6 +19,12 @@ export default function useApiQuery<R extends keyof typeof RESOURCES>(
   const apiFetch = useApiFetch();
 
   return useQuery<unknown, ResourceError, ResourcePayload<R>>([ resource ], async() => {
-    return apiFetch(resource, { pathParams, queryParams, fetchParams });
+    return apiFetch<R, ResourcePayload<R>, ResourceError>(resource, { pathParams, queryParams, fetchParams });
   }, queryOptions);
 }
+
+export type ResourcePayload<Q extends keyof typeof RESOURCES> =
+  Q extends 'user_info' ? UserInfo :
+    Q extends 'csrf' ? CsrfData :
+      Q extends 'custom_abi' ? CustomAbis :
+        never;

pages/_app.tsx

@@ -5,11 +5,11 @@ import type { AppProps } from 'next/app';
 import React, { useState } from 'react';
 
 import appConfig from 'configs/app/config';
+import type { ResourceError } from 'lib/api/resources';
 import { AppContextProvider } from 'lib/appContext';
 import { Chakra } from 'lib/Chakra';
 import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
 import useConfigSentry from 'lib/hooks/useConfigSentry';
-import type { ErrorType } from 'lib/hooks/useFetch';
 import { SocketProvider } from 'lib/socket/context';
 import theme from 'theme';
 import AppError from 'ui/shared/AppError/AppError';
@@ -22,7 +22,7 @@ function MyApp({ Component, pageProps }: AppProps) {
       queries: {
         refetchOnWindowFocus: false,
         retry: (failureCount, _error) => {
-          const error = _error as ErrorType<{ status: number }>;
+          const error = _error as ResourceError<{ status: number }>;
           const status = error?.status || error?.error?.status;
           if (status && status >= 400 && status < 500) {
             // don't do retry for client error responses

ui/block/BlockDetails.tsx

@@ -13,10 +13,10 @@ import { QueryKeys } from 'types/client/queries';
 import appConfig from 'configs/app/config';
 import clockIcon from 'icons/clock.svg';
 import flameIcon from 'icons/flame.svg';
+import type { ResourceError } from 'lib/api/resources';
 import getBlockReward from 'lib/block/getBlockReward';
 import { WEI, WEI_IN_GWEI, ZERO } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
-import type { ErrorType } from 'lib/hooks/useFetch';
 import useFetch from 'lib/hooks/useFetch';
 import { space } from 'lib/html-entities';
 import link from 'lib/link/link';
@@ -37,7 +37,7 @@ const BlockDetails = () => {
   const router = useRouter();
   const fetch = useFetch();
 
-  const { data, isLoading, isError, error } = useQuery<unknown, ErrorType<{ status: number }>, Block>(
+  const { data, isLoading, isError, error } = useQuery<unknown, ResourceError<{ status: number }>, Block>(
     [ QueryKeys.block, router.query.id ],
     async() => await fetch(`/node-api/blocks/${ router.query.id }`),
     {

ui/customAbi/CustomAbiModal/CustomAbiForm.tsx

@@ -52,10 +52,10 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
     const body = { name: data.name, contract_address_hash: data.contract_address_hash, abi: data.abi };
 
     if (!data.id) {
-      return apiFetch<'custom_abi', CustomAbi, CustomAbiErrors>('custom_abi', { fetchParams: { method: 'POST', body } });
+      return apiFetch('custom_abi', { fetchParams: { method: 'POST', body } });
     }
 
-    return apiFetch<'custom_abi', CustomAbi, CustomAbiErrors>('custom_abi', {
+    return apiFetch('custom_abi', {
       pathParams: { id: String(data.id) },
       fetchParams: { method: 'PUT', body },
     });