@0xsequence/marketplace-sdk 1.2.1 → 2.0.0

package/src/react/hooks/util/optimisticCancelUpdates.ts

@@ -1,10 +1,9 @@
 import type { QueryClient } from '@tanstack/react-query';
-import {
-	collectableKeys,
-	type GetCountOfListingsForCollectibleReturn,
-	type GetCountOfOffersForCollectibleReturn,
-	type ListListingsForCollectibleReturn,
-	type ListOffersForCollectibleReturn,
+import type {
+	GetCountOfListingsForCollectibleResponse,
+	GetCountOfOffersForCollectibleResponse,
+	ListListingsForCollectibleResponse,
+	ListOffersForCollectibleResponse,
 } from '../../_internal';
 
 const SECOND = 1000;
@@ -19,8 +18,8 @@ export const updateQueriesOnCancel = ({
 	queryClient,
 }: OptimisticCancelUpdatesParams) => {
 	queryClient.setQueriesData(
-		{ queryKey: collectableKeys.offersCount, exact: false },
-		(oldData: GetCountOfOffersForCollectibleReturn | undefined) => {
+		{ queryKey: ['collectible', 'market-offers-count'], exact: false },
+		(oldData: GetCountOfOffersForCollectibleResponse | undefined) => {
 			if (!oldData) return 0;
 			return Math.max(0, oldData.count - 1);
 		},
@@ -28,8 +27,8 @@ export const updateQueriesOnCancel = ({
 
 	// remove the offer with matching orderId
 	queryClient.setQueriesData(
-		{ queryKey: collectableKeys.offers, exact: false },
-		(oldData: ListOffersForCollectibleReturn | undefined) => {
+		{ queryKey: ['collectible', 'market-offers'], exact: false },
+		(oldData: ListOffersForCollectibleResponse | undefined) => {
 			if (!oldData || !oldData.offers) return oldData;
 			return {
 				...oldData,
@@ -41,23 +40,23 @@ export const updateQueriesOnCancel = ({
 	// 2 seconds is enough time for new data to be fetched
 	setTimeout(() => {
 		queryClient.invalidateQueries({
-			queryKey: collectableKeys.highestOffers,
+			queryKey: ['collectible', 'market-highest-offer'],
 			exact: false,
 			predicate: (query) => !query.meta?.persistent,
 		});
 	}, 2 * SECOND);
 
 	queryClient.setQueriesData(
-		{ queryKey: collectableKeys.listingsCount, exact: false },
-		(oldData: GetCountOfListingsForCollectibleReturn | undefined) => {
+		{ queryKey: ['collectible', 'market-listings-count'], exact: false },
+		(oldData: GetCountOfListingsForCollectibleResponse | undefined) => {
 			if (!oldData) return 0;
 			return Math.max(0, oldData.count - 1);
 		},
 	);
 
 	queryClient.setQueriesData(
-		{ queryKey: collectableKeys.listings, exact: false },
-		(oldData: ListListingsForCollectibleReturn | undefined) => {
+		{ queryKey: ['collectible', 'market-listings'], exact: false },
+		(oldData: ListListingsForCollectibleResponse | undefined) => {
 			if (!oldData || !oldData.listings) return oldData;
 			return {
 				...oldData,
@@ -71,7 +70,7 @@ export const updateQueriesOnCancel = ({
 	// 2 seconds is enough time for new data to be fetched
 	setTimeout(() => {
 		queryClient.invalidateQueries({
-			queryKey: collectableKeys.lowestListings,
+			queryKey: ['collectible', 'market-lowest-listing'],
 			exact: false,
 		});
 	}, 2 * SECOND);
@@ -83,32 +82,32 @@ export const invalidateQueriesOnCancel = ({
 	queryClient: QueryClient;
 }) => {
 	queryClient.invalidateQueries({
-		queryKey: collectableKeys.offers,
+		queryKey: ['collectible', 'market-offers'],
 		exact: false,
 	});
 
 	queryClient.invalidateQueries({
-		queryKey: collectableKeys.offersCount,
+		queryKey: ['collectible', 'market-offers-count'],
 		exact: false,
 	});
 
 	queryClient.invalidateQueries({
-		queryKey: collectableKeys.listings,
+		queryKey: ['collectible', 'market-listings'],
 		exact: false,
 	});
 
 	queryClient.invalidateQueries({
-		queryKey: collectableKeys.listingsCount,
+		queryKey: ['collectible', 'market-listings-count'],
 		exact: false,
 	});
 
 	queryClient.invalidateQueries({
-		queryKey: collectableKeys.highestOffers,
+		queryKey: ['collectible', 'market-highest-offer'],
 		exact: false,
 	});
 
 	queryClient.invalidateQueries({
-		queryKey: collectableKeys.lowestListings,
+		queryKey: ['collectible', 'market-lowest-listing'],
 		exact: false,
 	});
 };

package/src/react/hooks/utils/index.ts

@@ -1,8 +1,4 @@
 export * from './useAutoSelectFeeOption';
-export * from './useCheckoutOptions';
-export * from './useCheckoutOptionsSalesContract';
-export * from './useComparePrices';
-export * from './useConvertPriceToUSD';
 export * from './useEnsureCorrectChain';
 export * from './useGetReceiptFromHash';
 export * from './useRoyalty';

package/src/react/hooks/utils/useAutoSelectFeeOption.test.tsx

@@ -1,14 +1,14 @@
+import * as IndexerMocks from '@0xsequence/api-client/mocks/indexer';
+
+const { mockIndexerEndpoint, mockIndexerHandler, mockTokenBalance } =
+	IndexerMocks;
+
 import { renderHook, server, waitFor } from '@test';
 import { HttpResponse, http } from 'msw';
 import { zeroAddress } from 'viem';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { useDisconnect } from 'wagmi';
 import type { FeeOption } from '../../../types/waas-types';
-import {
-	mockIndexerEndpoint,
-	mockIndexerHandler,
-	mockTokenBalance,
-} from '../../_internal/api/__mocks__/indexer.msw';
 import { useAutoSelectFeeOption } from './useAutoSelectFeeOption';
 
 describe('useAutoSelectFeeOption', () => {
@@ -69,6 +69,7 @@ describe('useAutoSelectFeeOption', () => {
 				],
 				nativeBalances: [
 					{
+						accountAddress: mockTokenBalance.accountAddress,
 						balance: '2000000000000000000', // 2 ETH
 						blockHash: '0x1234',
 						blockNumber: 1234567,
@@ -116,6 +117,7 @@ describe('useAutoSelectFeeOption', () => {
 				],
 				nativeBalances: [
 					{
+						accountAddress: mockTokenBalance.accountAddress,
 						balance: '500000000000000000', // 0.5 ETH
 						blockHash: '0x1234',
 						blockNumber: 1234567,
@@ -159,6 +161,7 @@ describe('useAutoSelectFeeOption', () => {
 				],
 				nativeBalances: [
 					{
+						accountAddress: mockTokenBalance.accountAddress,
 						balance: '500000000000000000', // 0.5 ETH
 						blockHash: '0x1234',
 						blockNumber: 1234567,

package/src/react/hooks/utils/useAutoSelectFeeOption.tsx

@@ -1,11 +1,12 @@
 'use client';
 
+import type { Address, Indexer } from '@0xsequence/api-client';
 import { useChain } from '@0xsequence/connect';
 import { useCallback, useEffect } from 'react';
-import { type Address, zeroAddress } from 'viem';
+import { zeroAddress } from 'viem';
 import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../../types/waas-types';
-import { useCollectionBalanceDetails } from '../data/collections/useCollectionBalanceDetails';
+import { useCollectionBalanceDetails } from '../collection/balance-details';
 
 enum AutoSelectFeeOptionError {
 	UserNotConnected = 'User not connected',
@@ -87,18 +88,33 @@ type UseAutoSelectFeeOptionArgs = {
  * }
  * ```
  */
+/**
+ * Normalizes WaaS fee option token address to viem Address type
+ * - null represents native token (converted to zeroAddress)
+ * - string addresses from WaaS are validated and guaranteed to be hex addresses
+ */
+function normalizeWaasFeeTokenAddress(contractAddress: string | null): Address {
+	if (contractAddress === null) {
+		return zeroAddress;
+	}
+	// WaaS returns validated hex addresses, but TypeScript doesn't know they're `0x${string}`
+	// We validate to be safe and satisfy the type system
+	if (!contractAddress.startsWith('0x')) {
+		throw new Error(`Invalid address from WaaS: ${contractAddress}`);
+	}
+	return contractAddress as Address;
+}
+
 export function useAutoSelectFeeOption({
 	pendingFeeOptionConfirmation,
 	enabled,
 }: UseAutoSelectFeeOptionArgs) {
 	const { address: userAddress } = useAccount();
 
-	// one token that has null contract address is native token, so we need to replace it with zero address
+	const isEnabled = enabled ?? true;
+
 	const contractWhitelist = pendingFeeOptionConfirmation.options?.map(
-		(option) =>
-			option.token.contractAddress === null
-				? zeroAddress
-				: (option.token.contractAddress as Address),
+		(option) => normalizeWaasFeeTokenAddress(option.token.contractAddress),
 	);
 
 	const {
@@ -114,20 +130,20 @@ export function useAutoSelectFeeOption({
 		},
 		query: {
 			enabled:
-				!!pendingFeeOptionConfirmation.options && !!userAddress && enabled,
+				!!pendingFeeOptionConfirmation.options && !!userAddress && isEnabled,
 		},
 	});
 	const chain = useChain(pendingFeeOptionConfirmation.chainId);
 
 	// combine native balance and erc20 balances
 	const combinedBalances = balanceDetails && [
-		...balanceDetails.nativeBalances.map((b) => ({
+		...balanceDetails.nativeBalances.map((b: Indexer.NativeTokenBalance) => ({
 			chainId: pendingFeeOptionConfirmation.chainId,
 			balance: b.balance,
 			symbol: chain?.nativeCurrency.symbol,
 			contractAddress: zeroAddress,
 		})),
-		...balanceDetails.balances.map((b) => ({
+		...balanceDetails.balances.map((b: Indexer.TokenBalance) => ({
 			chainId: b.chainId,
 			balance: b.balance,
 			symbol: b.contractInfo?.symbol,
@@ -141,6 +157,7 @@ export function useAutoSelectFeeOption({
 		}
 	}, [combinedBalances]);
 
+	// eslint-disable-next-line @typescript-eslint/require-await -- Async for interface consistency
 	const autoSelectedOption = useCallback(async () => {
 		if (!userAddress) {
 			return {
@@ -169,13 +186,13 @@ export function useAutoSelectFeeOption({
 
 		const selectedOption = pendingFeeOptionConfirmation.options.find(
 			(option) => {
+				const normalizedAddress = normalizeWaasFeeTokenAddress(
+					option.token.contractAddress,
+				);
 				const tokenBalance = combinedBalances.find(
-					(balance) =>
+					(balance: { contractAddress: Address }) =>
 						balance.contractAddress.toLowerCase() ===
-						(option.token.contractAddress === null
-							? zeroAddress
-							: option.token.contractAddress
-						).toLowerCase(),
+						normalizedAddress.toLowerCase(),
 				);
 
 				if (!tokenBalance) return false;
@@ -191,8 +208,6 @@ export function useAutoSelectFeeOption({
 			};
 		}
 
-		console.debug('auto selected option', selectedOption);
-
 		return { selectedOption, error: null };
 	}, [
 		userAddress,
@@ -200,6 +215,7 @@ export function useAutoSelectFeeOption({
 		isBalanceDetailsLoading,
 		isBalanceDetailsError,
 		combinedBalances,
+		isEnabled,
 	]);
 
 	return autoSelectedOption();

package/src/react/hooks/utils/useRoyalty.test.tsx

@@ -9,7 +9,7 @@ describe('useRoyaltyPercentage', () => {
 		const { result } = renderHook(() => useRoyalty(TEST_COLLECTIBLE));
 
 		expect(result.current.isLoading).toBe(true);
-		expect(result.current.data).toBeNull();
+		expect(result.current.data).toBeUndefined();
 
 		await waitFor(
 			() => {

package/src/react/hooks/utils/useRoyalty.tsx

@@ -1,30 +1,105 @@
 'use client';
 
-import type { Address } from 'viem';
-import { useReadContract } from 'wagmi';
+import type { Address } from '@0xsequence/api-client';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { PublicClient } from 'viem';
+import { readContract } from 'viem/actions';
+import { usePublicClient } from 'wagmi';
 import { EIP2981_ABI } from '../../../utils';
 import type { QueryArg } from '../../_internal';
-import { collectableKeys } from '../../_internal';
+
+export interface RoyaltyInfo {
+	percentage: bigint;
+	recipient: Address;
+}
+
+export interface FetchRoyaltyParams {
+	chainId: number;
+	collectionAddress: Address;
+	tokenId: bigint;
+	publicClient: PublicClient | undefined;
+}
 
 export interface UseRoyaltyArgs {
 	chainId: number;
 	collectionAddress: Address;
-	collectibleId: string;
+	tokenId: bigint;
 	query?: QueryArg;
 }
 
+/**
+ * Fetches royalty information for a collectible using EIP-2981 standard
+ */
+async function fetchRoyalty(
+	params: FetchRoyaltyParams,
+): Promise<RoyaltyInfo | null> {
+	const { collectionAddress, tokenId, publicClient } = params;
+
+	if (!publicClient) {
+		throw new Error('Public client is required');
+	}
+
+	const result = await readContract(publicClient, {
+		abi: EIP2981_ABI,
+		address: collectionAddress,
+		functionName: 'royaltyInfo',
+		args: [BigInt(tokenId), BigInt(100)],
+	});
+
+	const [recipient, percentage] = result;
+
+	if (recipient && percentage) {
+		return {
+			percentage,
+			recipient,
+		};
+	}
+
+	return null;
+}
+
+function getRoyaltyQueryKey(params: Omit<FetchRoyaltyParams, 'publicClient'>) {
+	const apiArgs = {
+		chainId: String(params.chainId),
+		contractAddress: params.collectionAddress,
+		tokenId: params.tokenId,
+	};
+
+	return ['royalty-percentage', apiArgs] as const;
+}
+
+function royaltyQueryOptions(
+	params: FetchRoyaltyParams,
+	query?: UseRoyaltyArgs['query'],
+) {
+	const enabled = Boolean(
+		params.collectionAddress &&
+			params.chainId &&
+			params.tokenId &&
+			params.publicClient &&
+			(query?.enabled ?? true),
+	);
+
+	return queryOptions({
+		queryKey: getRoyaltyQueryKey(params),
+		queryFn: () => fetchRoyalty(params),
+		enabled,
+		...query,
+	});
+}
+
 /**
  * Hook to fetch royalty information for a collectible
  *
  * Reads royalty information from the blockchain using the EIP-2981 standard.
- * This hook queries the contract directly to get royalty percentage and recipient
- * address for a specific token.
+ * This hook uses TanStack Query to manage the blockchain call and caching,
+ * similar to other data fetching hooks in the SDK.
  *
  * @param args - Configuration parameters
  * @param args.chainId - The chain ID (must be number, e.g., 1 for Ethereum, 137 for Polygon)
  * @param args.collectionAddress - The collection contract address
- * @param args.collectibleId - The token ID within the collection
- * @param args.query - Optional React Query configuration
+ * @param args.tokenId - The token ID within the collection
+ * @param args.query - Optional TanStack Query configuration
  *
  * @returns Query result containing royalty information (percentage and recipient) or null
  *
@@ -34,7 +109,7 @@ export interface UseRoyaltyArgs {
  * const { data, isLoading } = useRoyalty({
  *   chainId: 137,
  *   collectionAddress: '0x...',
- *   collectibleId: '1'
+ *   tokenId: '1'
  * })
  *
  * if (data) {
@@ -48,7 +123,7 @@ export interface UseRoyaltyArgs {
  * const { data, isLoading } = useRoyalty({
  *   chainId: 1,
  *   collectionAddress: '0x...',
- *   collectibleId: '42',
+ *   tokenId: '42',
  *   query: {
  *     refetchInterval: 60000,
  *     enabled: hasTokenId
@@ -57,30 +132,20 @@ export interface UseRoyaltyArgs {
  * ```
  */
 export function useRoyalty(args: UseRoyaltyArgs) {
-	const { chainId, collectionAddress, collectibleId, query } = args;
-	const scopeKey = `${collectableKeys.royaltyPercentage.join('.')}-${chainId}-${collectionAddress}-${collectibleId}`;
+	const { chainId, collectionAddress, tokenId, query } = args;
+	const publicClient = usePublicClient({ chainId });
 
-	const contractResult = useReadContract({
-		scopeKey: scopeKey,
-		abi: EIP2981_ABI,
-		address: collectionAddress,
-		functionName: 'royaltyInfo',
-		args: [BigInt(collectibleId), BigInt(100)],
-		chainId,
-		query: query,
-	});
+	const queryOptions = royaltyQueryOptions(
+		{
+			chainId,
+			collectionAddress,
+			tokenId,
+			publicClient,
+		},
+		query,
+	);
 
-	const [recipient, percentage] = contractResult.data ?? [];
-	const formattedData =
-		recipient && percentage
-			? {
-					percentage,
-					recipient: recipient as Address,
-				}
-			: null;
-
-	return {
-		...contractResult,
-		data: formattedData,
-	};
+	return useQuery(queryOptions);
 }
+
+export { royaltyQueryOptions };