@0xsequence/marketplace-sdk 0.8.11 → 0.9.0

package/src/react/ui/modals/BuyModal/hooks/useCheckoutOptions.ts

@@ -1,68 +1,86 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
 import type { Hex } from 'viem';
 import {
-	type MarketplaceKind,
 	getMarketplaceClient,
+	type MarketplaceKind,
 } from '../../../../_internal';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useConfig } from '../../../../hooks';
-import { useFees } from './useFees';
+import { useMarketPlatformFee } from './useMarketPlatformFee';
 
-export const useCheckoutOptions = (input: {
+export type CheckoutOptionsParams = {
 	chainId: number;
 	collectionAddress: Hex;
 	orderId: string;
 	marketplace: MarketplaceKind;
-}) => {
+};
+
+export const useCheckoutOptions = (
+	input: CheckoutOptionsParams | typeof skipToken,
+) => {
 	const config = useConfig();
 	const { wallet } = useWallet();
-	const fees = useFees({
-		chainId: input.chainId,
-		collectionAddress: input.collectionAddress,
-	});
+
+	// If input is skipToken, we don't want to calculate fees
+	const fees = useMarketPlatformFee(
+		input !== skipToken
+			? {
+					chainId: input.chainId,
+					collectionAddress: input.collectionAddress,
+				}
+			: skipToken,
+	);
 
 	return useQuery({
-		queryKey: [
-			'checkoutOptions',
-			input.chainId,
-			input.collectionAddress,
-			input.orderId,
-			input.marketplace,
-		],
-		queryFn: wallet
-			? async () => {
-					const marketplaceClient = getMarketplaceClient(input.chainId, config);
-					const response = await marketplaceClient.checkoutOptionsMarketplace({
-						wallet: await wallet.address(),
-						orders: [
+		queryKey:
+			input !== skipToken
+				? [
+						'checkoutOptions',
+						input.chainId,
+						input.collectionAddress,
+						input.orderId,
+						input.marketplace,
+					]
+				: ['checkoutOptions', 'skip'],
+		queryFn:
+			wallet && input !== skipToken
+				? async () => {
+						const marketplaceClient = getMarketplaceClient(config);
+						const response = await marketplaceClient.checkoutOptionsMarketplace(
 							{
-								contractAddress: input.collectionAddress,
-								orderId: input.orderId,
-								marketplace: input.marketplace,
+								chainId: String(input.chainId),
+								wallet: await wallet.address(),
+								orders: [
+									{
+										contractAddress: input.collectionAddress,
+										orderId: input.orderId,
+										marketplace: input.marketplace,
+									},
+								],
+								additionalFee: Number(fees.amount),
 							},
-						],
-						additionalFee: Number(fees.amount),
-					});
+						);
 
-					// Get order data
-					const orderResponse = await marketplaceClient.getOrders({
-						input: [
-							{
-								contractAddress: input.collectionAddress,
-								orderId: input.orderId,
-								marketplace: input.marketplace,
-							},
-						],
-					});
+						// Get order data
+						const orderResponse = await marketplaceClient.getOrders({
+							chainId: String(input.chainId),
+							input: [
+								{
+									contractAddress: input.collectionAddress,
+									orderId: input.orderId,
+									marketplace: input.marketplace,
+								},
+							],
+						});
 
-					const order = orderResponse.orders[0];
+						const order = orderResponse.orders[0];
 
-					return {
-						...response.options,
-						order,
-					};
-				}
-			: skipToken,
-		enabled: !!wallet,
+						return {
+							...response.options,
+							order,
+						};
+					}
+				: skipToken,
+		enabled: !!wallet && input !== skipToken,
 	});
 };

package/src/react/ui/modals/BuyModal/hooks/useERC1155Checkout.ts

@@ -0,0 +1,73 @@
+import { useERC1155SaleContractCheckout } from '@0xsequence/checkout';
+import type { Hash } from 'viem';
+import { useAccount } from 'wagmi';
+import type {
+	CheckoutOptions,
+	CheckoutOptionsItem,
+} from '../../../../_internal';
+import { getQueryClient } from '../../../../_internal';
+import { buyModalStore, useOnError, useOnSuccess, useQuantity } from '../store';
+
+interface UseERC1155CheckoutParams {
+	chainId: number;
+	salesContractAddress: string;
+	collectionAddress: string;
+	items: Array<CheckoutOptionsItem>;
+	checkoutOptions?: CheckoutOptions;
+	customProviderCallback?: (
+		onSuccess: (txHash: string) => void,
+		onError: (error: Error) => void,
+		onClose: () => void,
+	) => void;
+	enabled?: boolean;
+}
+
+export const useERC1155Checkout = ({
+	chainId,
+	salesContractAddress,
+	collectionAddress,
+	items,
+	checkoutOptions,
+	customProviderCallback,
+	enabled = true,
+}: UseERC1155CheckoutParams) => {
+	const { address: accountAddress } = useAccount();
+	const quantity = useQuantity();
+	const onSuccess = useOnSuccess();
+	const onError = useOnError();
+
+	const checkout = useERC1155SaleContractCheckout({
+		chain: chainId,
+		contractAddress: salesContractAddress,
+		collectionAddress,
+		items: [
+			{
+				...items[0],
+				quantity: quantity?.toString() || '1',
+			},
+		],
+		wallet: accountAddress ?? '',
+		// Pass checkout options if available
+		...(checkoutOptions && { checkoutOptions }),
+		onSuccess: (hash: string) => {
+			onSuccess({ hash: hash as Hash });
+		},
+		onError: (error: Error) => {
+			onError(error);
+		},
+		onClose: () => {
+			const queryClient = getQueryClient();
+			queryClient.invalidateQueries();
+			buyModalStore.send({ type: 'close' });
+		},
+		customProviderCallback,
+		supplementaryAnalyticsInfo: {
+			type: 'mint_shop',
+		},
+	});
+
+	return {
+		...checkout,
+		isEnabled: Boolean(enabled && accountAddress),
+	};
+};

package/src/react/ui/modals/BuyModal/hooks/useERC721SalePaymentParams.ts

@@ -0,0 +1,196 @@
+import type { SelectPaymentSettings } from '@0xsequence/checkout';
+import { skipToken, useQuery } from '@tanstack/react-query';
+import {
+	type Address,
+	encodeFunctionData,
+	type Hash,
+	type Hex,
+	toHex,
+} from 'viem';
+import { useAccount } from 'wagmi';
+import { BuyModalErrorFactory } from '../../../../../types/buyModalErrors';
+import { ERC721_SALE_ABI } from '../../../../../utils/abi/primary-sale/sequence-721-sales-contract';
+import { getQueryClient } from '../../../../_internal';
+import type { ModalCallbacks } from '../../_internal/types';
+import { buyModalStore, useOnError, useOnSuccess } from '../store';
+
+interface ERC721MintArgs {
+	to: Address;
+	amount: bigint;
+	paymentToken: Address;
+	price: bigint;
+	proof: Hex[];
+}
+
+const DEFAULT_PROOF = [toHex(0, { size: 32 })] as Hex[];
+
+const encodeERC721MintData = ({
+	to,
+	amount,
+	paymentToken,
+	price,
+	proof = DEFAULT_PROOF,
+}: ERC721MintArgs): Hex => {
+	const totalPrice = price * amount;
+
+	return encodeFunctionData({
+		abi: ERC721_SALE_ABI,
+		functionName: 'mint',
+		args: [to, amount, paymentToken, totalPrice, proof],
+	});
+};
+
+interface GetERC721SalePaymentParams {
+	chainId: number;
+	address: Address;
+	salesContractAddress: string;
+	collectionAddress: string;
+	price: bigint;
+	currencyAddress: string;
+	callbacks: ModalCallbacks | undefined;
+	customCreditCardProviderCallback: ((price: string) => void) | undefined;
+	skipNativeBalanceCheck: boolean | undefined;
+	nativeTokenAddress: string | undefined;
+	checkoutProvider?: string;
+	quantity: number;
+}
+
+export const getERC721SalePaymentParams = async ({
+	chainId,
+	address,
+	salesContractAddress,
+	collectionAddress,
+	price,
+	currencyAddress,
+	callbacks,
+	customCreditCardProviderCallback,
+	skipNativeBalanceCheck,
+	nativeTokenAddress,
+	checkoutProvider,
+	quantity,
+}: GetERC721SalePaymentParams) => {
+	try {
+		const purchaseTransactionData = encodeERC721MintData({
+			to: address,
+			amount: BigInt(quantity),
+			paymentToken: currencyAddress as Address,
+			price: price,
+			proof: DEFAULT_PROOF,
+		});
+
+		const creditCardProviders = customCreditCardProviderCallback
+			? ['custom']
+			: checkoutProvider
+				? [checkoutProvider]
+				: [];
+
+		return {
+			chain: chainId,
+			collectibles: [
+				{
+					quantity: quantity.toString(),
+					decimals: 0,
+				},
+			],
+			currencyAddress,
+			price: price.toString(),
+			targetContractAddress: salesContractAddress,
+			txData: purchaseTransactionData,
+			collectionAddress,
+			recipientAddress: address,
+			enableMainCurrencyPayment: true,
+			enableSwapPayments: true,
+			creditCardProviders,
+			onSuccess: (hash: string) => {
+				callbacks?.onSuccess?.({ hash: hash as Hash });
+			},
+			onError: callbacks?.onError,
+			onClose: () => {
+				const queryClient = getQueryClient();
+				queryClient.invalidateQueries();
+				buyModalStore.send({ type: 'close' });
+			},
+			skipNativeBalanceCheck,
+			supplementaryAnalyticsInfo: {
+				type: 'mint_shop',
+			},
+			nativeTokenAddress,
+			...(customCreditCardProviderCallback && {
+				customProviderCallback: () => {
+					customCreditCardProviderCallback(price.toString());
+					buyModalStore.send({ type: 'close' });
+				},
+			}),
+		} satisfies SelectPaymentSettings;
+	} catch (error) {
+		// Convert to structured error for better debugging
+		throw BuyModalErrorFactory.priceCalculation(
+			'ERC721 payment params calculation',
+			[price.toString(), quantity.toString()],
+			error instanceof Error ? error.message : 'Unknown error',
+		);
+	}
+};
+
+interface UseERC721SalePaymentParams {
+	salesContractAddress: string | undefined;
+	collectionAddress: string | undefined;
+	price: string | undefined;
+	currencyAddress: string | undefined;
+	enabled: boolean;
+	checkoutProvider?: string;
+	chainId: number;
+	quantity: number;
+}
+
+export const useERC721SalePaymentParams = (
+	args: UseERC721SalePaymentParams,
+) => {
+	const {
+		salesContractAddress,
+		collectionAddress,
+		price,
+		currencyAddress,
+		enabled,
+		checkoutProvider,
+		chainId,
+		quantity,
+	} = args;
+
+	const { address } = useAccount();
+	const onSuccess = useOnSuccess();
+	const onError = useOnError();
+
+	const queryEnabled =
+		enabled &&
+		!!address &&
+		!!salesContractAddress &&
+		!!collectionAddress &&
+		!!price &&
+		!!currencyAddress;
+
+	return useQuery({
+		queryKey: ['erc721SalePaymentParams', args],
+		queryFn: queryEnabled
+			? () =>
+					getERC721SalePaymentParams({
+						chainId,
+						address,
+						salesContractAddress,
+						collectionAddress,
+						price: BigInt(price),
+						currencyAddress,
+						callbacks: {
+							onSuccess,
+							onError,
+						},
+						customCreditCardProviderCallback: undefined, // Can be added as a prop if needed
+						skipNativeBalanceCheck: false, // Can be added as a prop if needed
+						nativeTokenAddress: undefined, // Can be added as a prop if needed
+
+						checkoutProvider,
+						quantity,
+					})
+			: skipToken,
+	});
+};

package/src/react/ui/modals/BuyModal/hooks/useLoadData.ts

@@ -1,11 +1,21 @@
+import { skipToken } from '@tanstack/react-query';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
-import { useCollectible, useCollection } from '../../../../hooks';
-import { useBuyModalProps } from '../store';
+import {
+	useCheckoutOptionsSalesContract,
+	useCollectible,
+	useCollection,
+	useCurrency,
+} from '../../../../hooks';
+import { isMarketProps, isShopProps, useBuyModalProps } from '../store';
 import { useCheckoutOptions } from './useCheckoutOptions';
 
 export const useLoadData = () => {
-	const { chainId, collectionAddress, collectibleId, orderId, marketplace } =
-		useBuyModalProps();
+	const props = useBuyModalProps();
+	const { chainId, collectionAddress } = props;
+
+	const isMarket = isMarketProps(props);
+	const isShop = isShopProps(props);
+	const collectibleId = isMarket ? props.collectibleId : undefined;
 
 	const {
 		wallet,
@@ -36,33 +46,79 @@ export const useLoadData = () => {
 	});
 
 	const {
-		data: checkoutOptions,
-		isLoading: checkoutOptionsLoading,
-		isError: checkoutOptionsError,
-		// TODO: rename this... its order and checkout options
-	} = useCheckoutOptions({
+		data: currency,
+		isLoading: currencyLoading,
+		isError: currencyError,
+	} = useCurrency({
 		chainId,
-		collectionAddress,
-		orderId,
-		marketplace,
+		currencyAddress: isShop ? props.salePrice?.currencyAddress : undefined,
+		query: {
+			enabled: isShop,
+		},
 	});
 
+	const {
+		data: marketplaceCheckoutOptions,
+		isLoading: marketplaceCheckoutOptionsLoading,
+		isError: marketplaceCheckoutOptionsError,
+	} = useCheckoutOptions(
+		isMarket
+			? {
+					chainId,
+					collectionAddress,
+					orderId: props.orderId,
+					marketplace: props.marketplace,
+				}
+			: skipToken,
+	);
+
+	const {
+		data: salesContractCheckoutOptions,
+		isLoading: salesContractCheckoutOptionsLoading,
+		isError: salesContractCheckoutOptionsError,
+	} = useCheckoutOptionsSalesContract(
+		isShop
+			? {
+					chainId,
+					contractAddress: props.salesContractAddress,
+					collectionAddress,
+					items: props.items.map((item) => ({
+						tokenId: item.tokenId ?? '0',
+						quantity: item.quantity ?? '1',
+					})),
+				}
+			: skipToken,
+	);
+
+	const shopData = isShop
+		? {
+				salesContractAddress: props.salesContractAddress,
+				items: props.items,
+				salePrice: props.salePrice,
+				checkoutOptions: salesContractCheckoutOptions?.options,
+			}
+		: undefined;
+
 	return {
 		collection,
 		collectable,
-		order: checkoutOptions?.order,
-		checkoutOptions: checkoutOptions,
+		currency,
+		order: marketplaceCheckoutOptions?.order,
+		checkoutOptions: marketplaceCheckoutOptions,
 		wallet,
+		shopData,
 		isLoading:
 			collectionLoading ||
 			collectableLoading ||
-			checkoutOptionsLoading ||
+			(isMarket && marketplaceCheckoutOptionsLoading) ||
+			(isShop && (currencyLoading || salesContractCheckoutOptionsLoading)) ||
 			walletLoading,
-		// TODO: we should have a way to determine what is causing the error
 		isError:
+			walletError ||
 			collectionError ||
 			collectableError ||
-			checkoutOptionsError ||
-			walletError,
+			currencyError ||
+			marketplaceCheckoutOptionsError ||
+			salesContractCheckoutOptionsError,
 	};
 };

package/src/react/ui/modals/BuyModal/hooks/useMarketPlatformFee.ts

@@ -0,0 +1,53 @@
+import { skipToken } from '@tanstack/react-query';
+import { avalanche, optimism } from 'viem/chains';
+import { compareAddress } from '../../../../../utils';
+import type { AdditionalFee } from '../../../../_internal';
+import { useMarketplaceConfig } from '../../../../hooks';
+
+export type FeesParams = {
+	chainId: number;
+	collectionAddress: string;
+};
+
+export const useMarketPlatformFee = (params: FeesParams | typeof skipToken) => {
+	const defaultFee = 2.5;
+	const defaultPlatformFeeRecipient =
+		'0x858dB1cbF6D09D447C96A11603189b49B2D1C219';
+	const avalancheAndOptimismPlatformFeeRecipient =
+		'0x400cdab4676c17aec07e8ec748a5fc3b674bca41';
+	const { data: marketplaceConfig } = useMarketplaceConfig();
+
+	// Early return if skipToken is passed
+	if (params === skipToken) {
+		return {
+			amount: '0',
+			receiver: defaultPlatformFeeRecipient,
+		} satisfies AdditionalFee;
+	}
+
+	const { chainId, collectionAddress } = params;
+
+	// Find collection in market collections only (not shop collections)
+	const marketCollection = marketplaceConfig?.market?.collections?.find(
+		(col) =>
+			compareAddress(col.itemsAddress, collectionAddress) &&
+			String(col.chainId) === String(chainId),
+	);
+
+	const avalancheOrOptimism =
+		chainId === avalanche.id || chainId === optimism.id;
+	const receiver = avalancheOrOptimism
+		? avalancheAndOptimismPlatformFeeRecipient
+		: defaultPlatformFeeRecipient;
+
+	const percentageToBPS = (percentage: string | number) =>
+		(Number(percentage) * 10000) / 100;
+
+	// Use collection fee if found in market collections, otherwise use default
+	const feePercentage = marketCollection?.feePercentage ?? defaultFee;
+
+	return {
+		amount: percentageToBPS(feePercentage).toString(),
+		receiver,
+	} satisfies AdditionalFee;
+};

package/src/react/ui/modals/BuyModal/hooks/usePaymentModalParams.ts

@@ -7,23 +7,24 @@ import { decodeERC20Approval } from '../../../../../utils/decode/erc20';
 import {
 	type AdditionalFee,
 	type CheckoutOptions,
-	type MarketplaceKind,
-	StepType,
-	WalletKind,
 	getMarketplaceClient,
 	getQueryClient,
 	getSequenceApiClient,
+	type MarketplaceKind,
+	StepType,
+	WalletKind,
 } from '../../../../_internal';
 import type { WalletInstance } from '../../../../_internal/wallet/wallet';
 import { useConfig } from '../../../../hooks';
 import type { ModalCallbacks } from '../../_internal/types';
 import {
 	buyModalStore,
+	isMarketProps,
 	useBuyModalProps,
 	useOnError,
 	useOnSuccess,
 } from '../store';
-import { useFees } from './useFees';
+import { useMarketPlatformFee } from './useMarketPlatformFee';
 
 interface GetBuyCollectableParams {
 	chainId: number;
@@ -62,8 +63,9 @@ export const getBuyCollectableParams = async ({
 	skipNativeBalanceCheck,
 	nativeTokenAddress,
 }: GetBuyCollectableParams) => {
-	const marketplaceClient = getMarketplaceClient(chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 	const { steps } = await marketplaceClient.generateBuyTransaction({
+		chainId: String(chainId),
 		collectionAddress,
 		buyer: await wallet.address(),
 		marketplace: marketplace,
@@ -165,6 +167,7 @@ interface usePaymentModalParams {
 	collectable: TokenMetadata | undefined;
 	checkoutOptions: CheckoutOptions | undefined;
 	priceCurrencyAddress: string | undefined;
+	enabled: boolean;
 }
 
 export const usePaymentModalParams = (args: usePaymentModalParams) => {
@@ -175,38 +178,50 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 		checkoutOptions,
 		priceCurrencyAddress,
 		quantity,
+		enabled,
 	} = args;
 
 	const buyModalProps = useBuyModalProps();
 	const {
 		chainId,
 		collectionAddress,
-		collectibleId,
-		orderId,
-		customCreditCardProviderCallback,
 		skipNativeBalanceCheck,
 		nativeTokenAddress,
 	} = buyModalProps;
 
+	// Extract Marketplace-specific properties using type guard
+	const collectibleId = isMarketProps(buyModalProps)
+		? buyModalProps.collectibleId
+		: '';
+	const orderId = isMarketProps(buyModalProps) ? buyModalProps.orderId : '';
+	const customCreditCardProviderCallback = isMarketProps(buyModalProps)
+		? buyModalProps.customCreditCardProviderCallback
+		: undefined;
+
 	const config = useConfig();
-	const fee = useFees({
-		chainId,
-		collectionAddress,
-	});
+	const fee = useMarketPlatformFee(
+		isMarketProps(buyModalProps)
+			? {
+					chainId,
+					collectionAddress,
+				}
+			: skipToken,
+	);
 	const onSuccess = useOnSuccess();
 	const onError = useOnError();
 
-	const enabled =
+	const queryEnabled =
 		!!wallet &&
 		!!marketplace &&
 		!!collectable &&
 		!!checkoutOptions &&
 		!!priceCurrencyAddress &&
-		!!quantity;
+		!!quantity &&
+		enabled;
 
 	return useQuery({
 		queryKey: ['buyCollectableParams', buyModalProps, args, fee],
-		queryFn: enabled
+		queryFn: queryEnabled
 			? () =>
 					getBuyCollectableParams({
 						chainId,