feat: merge states of multiple hooks for erc1155 tokens

packages/react/src/common/hooks/useAxiosGet.ts

@@ -20,7 +20,7 @@ export const useAxiosGet = <T>({
   enabled = true,
 }: Config) => {
   const [response, setResponse] = useState<T | null>(null);
-  const [error, setError] = useState<Error>();
+  const [error, setError] = useState<Error | undefined | null>();
   const [isLoading, setLoading] = useState(enabled);
 
   const cancelQuery = useCancel();

packages/react/src/core/index.ts

@@ -6,4 +6,5 @@ export * from './diamonds';
 export * from './ipfs';
 export * from './meta-transactions';
 export * from './ui';
+export * from './utils';
 export * from './wallet';

packages/react/src/core/utils/index.ts

@@ -0,0 +1 @@
+export * from './useMergeQueryStates';

packages/react/src/core/utils/useMergeQueryStates.ts

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query';
+
+export const useMergeQueryStates = (
+  results: Partial<ReturnType<typeof useQuery<any, any, any>> | any>[],
+) => {
+  const isLoading = results.some((result) => result.isLoading);
+  const isFetching = results.some((result) => result.isFetching);
+  const isFetched = results.every((result) => result.isFetched);
+  const isError = results.some((result) => result.isError);
+  const isSuccess = results.every((result) => result.isSuccess);
+  const isInitialLoading = results.some((result) => result.isInitialLoading);
+  const isRefetching = results.some((result) => result.isRefetching);
+
+  const error = results.find((result) => result.isError && result.error)?.error;
+  const fetchStatus =
+    results
+      .map((result) => result.fetchStatus)
+      .find((status) => status !== 'idle') || 'idle';
+
+  return {
+    isLoading,
+    isFetching,
+    isFetched,
+    isError,
+    isSuccess,
+    isInitialLoading,
+    isRefetching,
+    fetchStatus,
+    error,
+  } as const;
+};

packages/react/src/index.ts

@@ -1,12 +1,5 @@
-import '@tanstack/query-core';
-import '@wagmi/core';
-
-export * from '@flair-sdk/common';
-export * from '@flair-sdk/registry';
-export * from '@flair-sdk/ipfs';
-export * from '@flair-sdk/metatx';
-
 export * from './common';
 export * from './core';
 export * from './modules';
 export * from './providers';
+export * from './setupTests';

packages/react/src/modules/token/erc1155/base/hooks/useERC1155TokensByCollectionContractOnly.ts

@@ -2,6 +2,7 @@ import { Environment } from '@flair-sdk/common';
 import { BigNumber } from 'ethers';
 import { useMemo } from 'react';
 
+import { useMergeQueryStates } from '../../../../../core';
 import { useNftTokensByCollection } from '../../../../../core/data-query/hooks/useNftTokensByCollection';
 import {
   useTokenMetadataBaseUri,
@@ -28,17 +29,14 @@ export const useERC1155TokensByCollectionContractOnly = ({
   contractAddress,
   enabled = true,
 }: Props) => {
-  const {
-    data: collectionTokens,
-    error: collectionTokensError,
-    isLoading: collectionTokensLoading,
-  } = useNftTokensByCollection({
-    env,
-    clientId,
-    chainId,
-    contractAddress,
-    enabled,
-  });
+  const { data: collectionTokens, ...collectionTokensState } =
+    useNftTokensByCollection({
+      env,
+      clientId,
+      chainId,
+      contractAddress,
+      enabled,
+    });
 
   const tokenIds = useMemo(() => {
     return Array.from(Array(100).keys());
@@ -51,45 +49,41 @@ export const useERC1155TokensByCollectionContractOnly = ({
     //   : Array.from(Array(100).keys());
   }, []);
 
-  const {
-    data: collectionBaseUri,
-    error: collectionBaseUriError,
-    isLoading: collectionBaseUriLoading,
-  } = useTokenMetadataBaseUri({
-    chainId,
-    contractAddress,
-  });
+  const { data: collectionBaseUri, ...collectionBaseUriState } =
+    useTokenMetadataBaseUri({
+      chainId,
+      contractAddress,
+    });
 
-  const {
-    data: collectionFallbackUri,
-    error: collectionFallbackUriError,
-    isLoading: collectionFallbackUriLoading,
-  } = useTokenMetadataFallbackUri({
-    chainId,
-    contractAddress,
-  });
+  const { data: collectionFallbackUri, ...collectionFallbackUriState } =
+    useTokenMetadataFallbackUri({
+      chainId,
+      contractAddress,
+    });
 
-  const {
-    data: tokenIdToMaxSupplyMapping,
-    error: tokenIdToMaxSupplyMappingError,
-    isLoading: tokenIdToMaxSupplyMappingLoading,
-  } = useERC1155MaxSupplyBatch({
-    chainId,
-    contractAddress,
-    tokenIds,
-    enabled,
-  });
+  const { data: tokenIdToMaxSupplyMapping, ...tokenIdToMaxSupplyMappingState } =
+    useERC1155MaxSupplyBatch({
+      chainId,
+      contractAddress,
+      tokenIds,
+      enabled,
+    });
 
-  const {
-    data: tokenIdToUriMapping,
-    error: tokenIdToUriMappingError,
-    isLoading: tokenIdToUriMappingLoading,
-  } = useTokenMetadataUriBatch({
-    chainId,
-    contractAddress,
-    tokenIds,
-    enabled,
-  });
+  const { data: tokenIdToUriMapping, ...tokenIdToUriMappingState } =
+    useTokenMetadataUriBatch({
+      chainId,
+      contractAddress,
+      tokenIds,
+      enabled,
+    });
+
+  const mergedStates = useMergeQueryStates([
+    collectionTokensState,
+    collectionBaseUriState,
+    collectionFallbackUriState,
+    tokenIdToMaxSupplyMappingState,
+    tokenIdToUriMappingState,
+  ]);
 
   const combinedTokenIds = useMemo(() => {
     const combinedTokenIds: string[] =
@@ -138,14 +132,7 @@ export const useERC1155TokensByCollectionContractOnly = ({
   ]);
 
   return {
+    ...mergedStates,
     data: tokens,
-    error:
-      collectionTokensError ||
-      tokenIdToMaxSupplyMappingError ||
-      tokenIdToUriMappingError,
-    isLoading:
-      collectionTokensLoading ||
-      tokenIdToMaxSupplyMappingLoading ||
-      tokenIdToUriMappingLoading,
   } as const;
 };