@0xsequence/marketplace-sdk 0.8.10 → 0.8.12

package/src/react/hooks/__tests__/useMarketplaceConfig.test.tsx

@@ -1,12 +1,7 @@
 import { renderHook, server, waitFor } from '@test';
 import { describe, expect, it } from 'vitest';
-import { createLookupMarketplaceConfigErrorHandler } from '../../_internal/api/__mocks__/builder.msw';
+import { createLookupMarketplaceErrorHandler } from '../../_internal/api/__mocks__/builder.msw';
 
-import {
-	createStylesErrorHandler,
-	mockConfig,
-	mockStyles,
-} from '../../_internal/api/__mocks__/builder.msw';
 import { useMarketplaceConfig } from '../useMarketplaceConfig';
 
 describe('useMarketplaceConfig', () => {
@@ -30,7 +25,7 @@ describe('useMarketplaceConfig', () => {
 
 	it('should handle config fetch error', async () => {
 		// Override the handler for this test to return an error
-		server.use(createLookupMarketplaceConfigErrorHandler());
+		server.use(createLookupMarketplaceErrorHandler());
 
 		const { result } = renderHook(() => useMarketplaceConfig());
 
@@ -41,56 +36,4 @@ describe('useMarketplaceConfig', () => {
 		expect(result.current.error).toBeDefined();
 		expect(result.current.data).toBeUndefined();
 	});
-
-	it('should handle styles fetch error', async () => {
-		// Override the handler for this test to return an error
-		server.use(createStylesErrorHandler());
-
-		const { result } = renderHook(() => useMarketplaceConfig());
-
-		await waitFor(() => {
-			expect(result.current.data).toBeDefined();
-		});
-
-		// They just result in an empty cssString
-		expect(result.current.isError).toBe(false);
-		expect(result.current.data?.cssString).toBe('');
-	});
-
-	it('should handle both config and styles fetch errors', async () => {
-		// Override both handlers to return errors
-		server.use(
-			createLookupMarketplaceConfigErrorHandler(),
-			createStylesErrorHandler(),
-		);
-
-		const { result } = renderHook(() => useMarketplaceConfig());
-
-		await waitFor(() => {
-			expect(result.current.isError).toBe(true);
-		});
-
-		expect(result.current.error).toBeDefined();
-		expect(result.current.data).toBeUndefined();
-	});
-
-	it('should cache the config data', async () => {
-		// First render to populate cache
-		const { result, rerender } = renderHook(() => useMarketplaceConfig());
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		// Trigger a rerender
-		rerender();
-
-		// Should have data immediately from cache
-		expect(result.current.isLoading).toBe(false);
-		expect(result.current.data).toEqual({
-			...mockConfig,
-			cssString: mockStyles.replaceAll(/['"]/g, ''),
-			manifestUrl: expect.stringContaining('/manifest.json'),
-		});
-	});
 });

package/src/react/hooks/index.ts

@@ -7,7 +7,7 @@ export * from './useCollectionBalanceDetails';
 export * from './useComparePrices';
 export * from './useConfig';
 export * from './useConvertPriceToUSD';
-export * from './useCurrencies';
+export * from './useMarketCurrencies';
 export * from './useCurrency';
 export * from './useFilters';
 export * from './useFilterState';
@@ -32,8 +32,16 @@ export * from './useGenerateSellTransaction';
 export * from './useGenerateCancelTransaction';
 export * from './useTransferTokens';
 export * from './useCheckoutOptions';
+export * from './useCheckoutOptionsSalesContract';
 export * from './useListCollections';
 export * from './useCancelOrder';
 export * from './useCollectionDetails';
 export * from './useCollectionDetailsPolling';
 export * from './useListTokenMetadata';
+export * from './useList1155ShopCardData';
+export * from './useList721ShopCardData';
+export * from './useListMarketCardData';
+export * from './useGetTokenSuppliesMap';
+export * from './useListPrimarySaleItems';
+export * from './useERC721SaleMintedTokens';
+export * from './useCheckoutOptionsSalesContract';

package/src/react/hooks/useBalanceOfCollectible.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import { ContractType } from '../_internal';
 import {
 	type UseBalanceOfCollectibleArgs,
 	balanceOfCollectibleOptions,
@@ -30,13 +31,18 @@ export function useBalanceOfCollectible(args: UseBalanceOfCollectibleArgs) {
 	const config = useConfig();
 	const { data: marketplaceConfig } = useMarketplaceConfig();
 
-	const isLaos721 = marketplaceConfig?.collections.find(
-		(collection) => collection.address === args.collectionAddress,
-	)?.isLAOSERC721;
+	const collection = marketplaceConfig?.market.collections.find(
+		(collection) => collection.itemsAddress === args.collectionAddress,
+	);
+	const isLaos721 = collection?.contractType === ContractType.LAOS_ERC_721;
 
-	if (isLaos721) {
-		args.isLaos721 = true;
-	}
-
-	return useQuery(balanceOfCollectibleOptions(args, config));
+	return useQuery(
+		balanceOfCollectibleOptions(
+			{
+				...args,
+				isLaos721,
+			},
+			config,
+		),
+	);
 }

package/src/react/hooks/useCancelTransactionSteps.tsx

@@ -4,6 +4,7 @@ import {
 	WalletInstanceNotFoundError,
 } from '../../utils/_internal/error/transaction';
 import {
+	ExecuteType,
 	type MarketplaceKind,
 	type Step,
 	StepType,
@@ -46,7 +47,7 @@ export const useCancelTransactionSteps = ({
 	const { wallet, isLoading, isError } = useWallet();
 	const walletIsInitialized = wallet && !isLoading && !isError;
 	const sdkConfig = useConfig();
-	const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+	const marketplaceClient = getMarketplaceClient(sdkConfig);
 	const { generateCancelTransactionAsync } = useGenerateCancelTransaction({
 		chainId,
 	});
@@ -95,6 +96,7 @@ export const useCancelTransactionSteps = ({
 			}
 
 			const steps = await generateCancelTransactionAsync({
+				chainId,
 				collectionAddress,
 				maker: address,
 				marketplace,
@@ -230,10 +232,12 @@ export const useCancelTransactionSteps = ({
 		);
 
 		const result = await marketplaceClient.execute({
+			chainId: String(chainId),
 			signature: signature as string,
 			method: signatureStep.post?.method as string,
 			endpoint: signatureStep.post?.endpoint as string,
 			body: signatureStep.post?.body,
+			executeType: ExecuteType.order,
 		});
 
 		return result.orderId;

package/src/react/hooks/useCheckoutOptions.tsx

@@ -33,8 +33,9 @@ const fetchCheckoutOptions = async (
 	args: UseCheckoutOptionsArgs & { walletAddress: Hex },
 	config: SdkConfig,
 ) => {
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 	return marketplaceClient.checkoutOptionsMarketplace({
+		chainId: String(args.chainId),
 		wallet: args.walletAddress,
 		orders: args.orders.map((order) => ({
 			contractAddress: order.collectionAddress,

package/src/react/hooks/useCheckoutOptionsSalesContract.tsx

@@ -0,0 +1,67 @@
+import { queryOptions, skipToken, useQuery } from '@tanstack/react-query';
+import type { Hex } from 'viem';
+import { useAccount } from 'wagmi';
+import type { SdkConfig } from '../../types';
+import {
+	type CheckoutOptionsSalesContractArgs,
+	getMarketplaceClient,
+} from '../_internal';
+import { useConfig } from './useConfig';
+
+type UseCheckoutOptionsSalesContractArgs = Omit<
+	CheckoutOptionsSalesContractArgs,
+	'wallet' | 'chainId'
+> & { chainId: number };
+
+const fetchCheckoutOptionsSalesContract = async (
+	args: CheckoutOptionsSalesContractArgs,
+	config: SdkConfig,
+) => {
+	const marketplaceClient = getMarketplaceClient(config);
+	return marketplaceClient.checkoutOptionsSalesContract({
+		chainId: args.chainId,
+		wallet: args.wallet,
+		contractAddress: args.contractAddress,
+		collectionAddress: args.collectionAddress,
+		items: args.items,
+	});
+};
+
+export const checkoutOptionsSalesContractOptions = (
+	args:
+		| (UseCheckoutOptionsSalesContractArgs & { wallet?: Hex })
+		| typeof skipToken,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		queryKey: ['checkoutOptionsSalesContract', args],
+		queryFn:
+			skipToken === args
+				? skipToken
+				: () =>
+						fetchCheckoutOptionsSalesContract(
+							{
+								chainId: String(args.chainId),
+								// biome-ignore lint/style/noNonNullAssertion: <explanation>
+								wallet: args.wallet!,
+								contractAddress: args.contractAddress,
+								collectionAddress: args.collectionAddress,
+								items: args.items,
+							},
+							config,
+						),
+	});
+};
+
+export const useCheckoutOptionsSalesContract = (
+	args: UseCheckoutOptionsSalesContractArgs | typeof skipToken,
+) => {
+	const { address } = useAccount();
+	const config = useConfig();
+	return useQuery(
+		checkoutOptionsSalesContractOptions(
+			skipToken === args ? skipToken : { ...args, wallet: address },
+			config,
+		),
+	);
+};

package/src/react/hooks/useCollectionDetails.tsx

@@ -6,14 +6,24 @@ import { useConfig } from './useConfig';
 type UseCollectionDetails = {
 	collectionAddress: string;
 	chainId: number;
+	query?: {
+		enabled?: boolean;
+	};
 };
 
-const fetchCollectionDetails = async (
-	args: { collectionAddress: string },
-	marketplaceClient: Awaited<ReturnType<typeof getMarketplaceClient>>,
-) => {
+const fetchCollectionDetails = async ({
+	collectionAddress,
+	chainId,
+	config,
+}: {
+	collectionAddress: string;
+	chainId: number;
+	config: SdkConfig;
+}) => {
+	const marketplaceClient = getMarketplaceClient(config);
 	const { collection } = await marketplaceClient.getCollectionDetail({
-		contractAddress: args.collectionAddress,
+		chainId: String(chainId),
+		contractAddress: collectionAddress,
 	});
 	return collection;
 };
@@ -22,10 +32,15 @@ export const collectionDetailsOptions = (
 	args: UseCollectionDetails,
 	config: SdkConfig,
 ) => {
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
 	return queryOptions({
 		queryKey: ['collectionDetails', args],
-		queryFn: () => fetchCollectionDetails(args, marketplaceClient),
+		queryFn: () =>
+			fetchCollectionDetails({
+				collectionAddress: args.collectionAddress,
+				chainId: args.chainId,
+				config,
+			}),
+		enabled: args.query?.enabled,
 	});
 };
 

package/src/react/hooks/useConvertPriceToUSD.tsx

@@ -8,8 +8,8 @@ import {
 	currencyKeys,
 	getQueryClient,
 } from '../_internal';
+import { currenciesOptions } from '../queries/marketCurrencies';
 import { useConfig } from './useConfig';
-import { currenciesOptions } from './useCurrencies';
 
 const UseConvertPriceToUSDArgsSchema = z.object({
 	chainId: z.number(),

package/src/react/hooks/useCountListingsForCollectible.tsx

@@ -36,11 +36,12 @@ const fetchCountListingsForCollectible = async (
 	config: SdkConfig,
 ) => {
 	const parsedArgs = UseCountListingsForCollectibleArgsSchema.parse(args);
-	const marketplaceClient = getMarketplaceClient(parsedArgs.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
+	const { chainId, collectionAddress, collectibleId } = parsedArgs;
 	return marketplaceClient.getCountOfListingsForCollectible({
-		...parsedArgs,
-		contractAddress: parsedArgs.collectionAddress,
-		tokenId: parsedArgs.collectibleId,
+		chainId: String(chainId),
+		contractAddress: collectionAddress,
+		tokenId: collectibleId,
 	});
 };
 

package/src/react/hooks/useCountOfCollectables.tsx

@@ -40,21 +40,24 @@ const fetchCountOfCollectables = async (
 	config: SdkConfig,
 ) => {
 	const parsedArgs = UseCountOfCollectableSchema.parse(args);
-	const marketplaceClient = getMarketplaceClient(parsedArgs.chainId, config);
-	if (parsedArgs.filter) {
+	const marketplaceClient = getMarketplaceClient(config);
+	const { chainId, collectionAddress, filter, side } = parsedArgs;
+
+	if (filter) {
 		return marketplaceClient
 			.getCountOfFilteredCollectibles({
-				...parsedArgs,
-				contractAddress: parsedArgs.collectionAddress,
+				chainId: String(chainId),
+				contractAddress: collectionAddress,
+				filter,
 				// biome-ignore lint/style/noNonNullAssertion: safe to assert here, as it's validated
-				side: parsedArgs.side!,
+				side: side!,
 			})
 			.then((resp) => resp.count);
 	}
 	return marketplaceClient
 		.getCountOfAllCollectibles({
-			...parsedArgs,
-			contractAddress: parsedArgs.collectionAddress,
+			chainId: String(chainId),
+			contractAddress: collectionAddress,
 		})
 		.then((resp) => resp.count);
 };

package/src/react/hooks/useCountOffersForCollectible.tsx

@@ -36,11 +36,12 @@ const fetchCountOffersForCollectible = async (
 	config: SdkConfig,
 ) => {
 	const parsedArgs = UseCountOffersForCollectibleArgsSchema.parse(args);
-	const marketplaceClient = getMarketplaceClient(parsedArgs.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
+	const { chainId, collectionAddress, collectibleId } = parsedArgs;
 	return marketplaceClient.getCountOfOffersForCollectible({
-		...parsedArgs,
-		contractAddress: parsedArgs.collectionAddress,
-		tokenId: parsedArgs.collectibleId,
+		chainId: String(chainId),
+		contractAddress: collectionAddress,
+		tokenId: collectibleId,
 	});
 };
 

package/src/react/hooks/useCurrency.tsx

@@ -33,9 +33,9 @@ const fetchCurrency = async (
 		| undefined;
 
 	if (!currencies) {
-		const marketplaceClient = getMarketplaceClient(chainId, config);
+		const marketplaceClient = getMarketplaceClient(config);
 		currencies = await marketplaceClient
-			.listCurrencies()
+			.listCurrencies({ chainId: String(chainId) })
 			.then((resp) => resp.currencies);
 	}
 

package/src/react/hooks/useERC721SaleMintedTokens.tsx

@@ -0,0 +1,67 @@
+import type { Address } from 'viem';
+import { useReadContract } from 'wagmi';
+import { ERC721_SALE_ABI } from '../../../../sdk/src';
+import { useGetTokenSuppliesMap } from './useGetTokenSuppliesMap';
+
+interface UseERC721SaleMintedTokensProps {
+	chainId: number;
+	contractAddress: Address;
+	salesContractAddress: Address;
+	enabled?: boolean;
+	tokenIds: string[];
+}
+
+export function useERC721SaleMintedTokens({
+	chainId,
+	contractAddress,
+	salesContractAddress,
+	tokenIds,
+	enabled = true,
+}: UseERC721SaleMintedTokensProps) {
+	const {
+		data: saleDetails,
+		isLoading: saleDetailsLoading,
+		error: saleDetailsError,
+	} = useReadContract({
+		chainId,
+		address: salesContractAddress,
+		abi: ERC721_SALE_ABI,
+		functionName: 'saleDetails',
+		query: {
+			enabled,
+		},
+	});
+
+	// Get token supplies for all potential tokens in the sale
+	const { data: tokenSupplies, isLoading: tokenSuppliesLoading } =
+		useGetTokenSuppliesMap({
+			chainId,
+			tokenIds,
+			collectionAddress: contractAddress as Address,
+		});
+
+	const isLoading = saleDetailsLoading || tokenSuppliesLoading;
+
+	// Count how many tokens have been minted/owned
+	const ownedCount = tokenIds.reduce((count, tokenId) => {
+		const supplies = tokenSupplies?.supplies[contractAddress];
+		const supply = supplies?.find((s) => s.tokenID === tokenId);
+		// If supply exists and is greater than 0, token exists and is owned
+		const hasOwner = supply ? BigInt(supply.supply) > 0n : false;
+		return count + (hasOwner ? 1 : 0);
+	}, 0);
+
+	const totalSupplyCap = saleDetails?.supplyCap
+		? Number(saleDetails.supplyCap)
+		: 0;
+	const remainingCount = Math.max(0, totalSupplyCap - ownedCount);
+
+	return {
+		ownedCount,
+		totalSupplyCap,
+		remainingCount,
+		isLoading,
+		error: saleDetailsError,
+		saleDetails,
+	};
+}

package/src/react/hooks/useFilters.tsx

@@ -1,39 +1,36 @@
 import type { PropertyFilter } from '@0xsequence/metadata';
 import { queryOptions, useQuery } from '@tanstack/react-query';
-import { z } from 'zod';
 import { FilterCondition, type SdkConfig } from '../../types';
 import { compareAddress } from '../../utils';
 import {
-	AddressSchema,
-	QueryArgSchema,
 	collectableKeys,
 	getMetadataClient,
 	getQueryClient,
 } from '../_internal';
+import { marketplaceConfigOptions } from '../queries/marketplaceConfig';
 import { useConfig } from './useConfig';
-import { marketplaceConfigOptions } from './useMarketplaceConfig';
 
-const UseFiltersSchema = z.object({
-	chainId: z.number(),
-	collectionAddress: AddressSchema,
-	showAllFilters: z.boolean().default(false).optional(),
-	query: QueryArgSchema,
-	excludePropertyValues: z.boolean().default(false).optional(),
-});
-
-export type UseFiltersArgs = z.infer<typeof UseFiltersSchema>;
+export type UseFiltersArgs = {
+	chainId: number;
+	collectionAddress: string;
+	showAllFilters?: boolean;
+	excludePropertyValues?: boolean;
+	query?: {
+		enabled?: boolean;
+	};
+};
 
 export type UseFilterReturn = Awaited<ReturnType<typeof fetchFilters>>;
 
 export const fetchFilters = async (args: UseFiltersArgs, config: SdkConfig) => {
-	const parsedArgs = UseFiltersSchema.parse(args);
+	const parsedArgs = args;
 	const metadataClient = getMetadataClient(config);
 
 	const filters = await metadataClient
 		.getTokenMetadataPropertyFilters({
 			chainID: parsedArgs.chainId.toString(),
 			contractAddress: parsedArgs.collectionAddress,
-			excludeProperties: [], // TODO: We can leverage this for some of the exclusion logic
+			excludeProperties: [],
 			excludePropertyValues: parsedArgs.excludePropertyValues,
 		})
 		.then((resp) => resp.filters);
@@ -44,8 +41,8 @@ export const fetchFilters = async (args: UseFiltersArgs, config: SdkConfig) => {
 	const marketplaceConfig = await queryClient.fetchQuery(
 		marketplaceConfigOptions(config),
 	);
-	const collectionFilters = marketplaceConfig.collections.find((c) =>
-		compareAddress(c.address, parsedArgs.collectionAddress),
+	const collectionFilters = marketplaceConfig.market.collections.find((c) =>
+		compareAddress(c.itemsAddress, parsedArgs.collectionAddress),
 	)?.filterSettings;
 
 	if (
@@ -58,7 +55,6 @@ export const fetchFilters = async (args: UseFiltersArgs, config: SdkConfig) => {
 
 	const { filterOrder, exclusions } = collectionFilters;
 
-	// Sort the filters based on the filterOrder, the filters that are not in the filterOrder are at the end
 	const sortedFilters = filters.toSorted((a, b) => {
 		const aIndex =
 			filterOrder.indexOf(a.name) > -1
@@ -73,17 +69,14 @@ export const fetchFilters = async (args: UseFiltersArgs, config: SdkConfig) => {
 
 	const filteredResults = sortedFilters.reduce<PropertyFilter[]>(
 		(acc, filter) => {
-			// Check if this filter should be excluded
 			const exclusionRule = exclusions.find((rule) => rule.key === filter.name);
 
 			if (!exclusionRule) {
-				// No exclusion rule, include the filter
 				acc.push(filter);
 				return acc;
 			}
 
 			if (exclusionRule.condition === FilterCondition.ENTIRE_KEY) {
-				// Skip this filter entirely
 				return acc;
 			}
 
@@ -91,7 +84,6 @@ export const fetchFilters = async (args: UseFiltersArgs, config: SdkConfig) => {
 				exclusionRule.condition === FilterCondition.SPECIFIC_VALUE &&
 				exclusionRule.value
 			) {
-				// Filter out specific values while keeping the filter
 				const filteredValues =
 					filter.values?.filter((value) => value !== exclusionRule.value) || [];
 				if (filteredValues.length > 0) {

package/src/react/hooks/useFloorOrder.tsx

@@ -20,9 +20,12 @@ export type UseFloorOrderArgs = z.infer<typeof UseFloorOrderSchema>;
 export type UseFloorOrderReturn = Awaited<ReturnType<typeof fetchFloorOrder>>;
 
 const fetchFloorOrder = async (args: UseFloorOrderArgs, config: SdkConfig) => {
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 	return marketplaceClient
-		.getFloorOrder({ contractAddress: args.collectionAddress })
+		.getFloorOrder({
+			chainId: String(args.chainId),
+			contractAddress: args.collectionAddress,
+		})
 		.then((data) => data.collectible);
 };
 

package/src/react/hooks/useGenerateCancelTransaction.tsx

@@ -8,6 +8,14 @@ import {
 import { stepSchema } from '../_internal/api/zod-schema';
 import { useConfig } from './useConfig';
 
+// Create a type that uses number for chainId
+type GenerateCancelTransactionArgsWithNumberChainId = Omit<
+	GenerateCancelTransactionArgs,
+	'chainId'
+> & {
+	chainId: number;
+};
+
 const UserGenerateCancelTransactionArgsSchema = z.object({
 	chainId: z.number(),
 	onSuccess: z.function().args(stepSchema.array().optional()).optional(),
@@ -18,13 +26,12 @@ type UseGenerateCancelTransactionArgs = z.infer<
 >;
 
 export const generateCancelTransaction = async (
-	args: GenerateCancelTransactionArgs,
+	args: GenerateCancelTransactionArgsWithNumberChainId,
 	config: SdkConfig,
-	chainId: number,
 ) => {
-	const marketplaceClient = getMarketplaceClient(chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 	return marketplaceClient
-		.generateCancelTransaction(args)
+		.generateCancelTransaction({ ...args, chainId: String(args.chainId) })
 		.then((data) => data.steps);
 };
 
@@ -35,8 +42,8 @@ export const useGenerateCancelTransaction = (
 
 	const { mutate, mutateAsync, ...result } = useMutation({
 		onSuccess: params.onSuccess,
-		mutationFn: (args: GenerateCancelTransactionArgs) =>
-			generateCancelTransaction(args, config, params.chainId),
+		mutationFn: (args: GenerateCancelTransactionArgsWithNumberChainId) =>
+			generateCancelTransaction(args, config),
 	});
 
 	return {

package/src/react/hooks/useGenerateListingTransaction.tsx

@@ -26,19 +26,27 @@ export type GenerateListingTransactionProps = Omit<
 	listing: CreateReqWithDateExpiry;
 };
 
+type GenerateListingTransactionArgsWithNumberChainId = Omit<
+	GenerateListingTransactionArgs,
+	'chainId' | 'listing'
+> & {
+	chainId: number;
+	listing: CreateReqWithDateExpiry;
+};
+
 export const generateListingTransaction = async (
-	params: GenerateListingTransactionProps,
+	params: GenerateListingTransactionArgsWithNumberChainId,
 	config: SdkConfig,
-	chainId: number,
 ) => {
 	const args = {
 		...params,
+		chainId: String(params.chainId),
 		listing: {
 			...params.listing,
 			expiry: dateToUnixTime(params.listing.expiry),
 		},
 	} satisfies GenerateListingTransactionArgs;
-	const marketplaceClient = getMarketplaceClient(chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 	return (await marketplaceClient.generateListingTransaction(args)).steps;
 };
 
@@ -49,8 +57,10 @@ export const useGenerateListingTransaction = (
 
 	const { mutate, mutateAsync, ...result } = useMutation({
 		onSuccess: params.onSuccess,
-		mutationFn: (args: GenerateListingTransactionProps) =>
-			generateListingTransaction(args, config, params.chainId),
+		mutationFn: (
+			args: Omit<GenerateListingTransactionArgsWithNumberChainId, 'chainId'>,
+		) =>
+			generateListingTransaction({ ...args, chainId: params.chainId }, config),
 	});
 
 	return {