@0xsequence/marketplace-sdk 0.0.0-20250513233135

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

@@ -0,0 +1,66 @@
+import { useERC1155SaleContractCheckout } from '@0xsequence/checkout';
+import type { Hash } from 'viem';
+import { useAccount } from 'wagmi';
+import type { 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>;
+	customProviderCallback?: (
+		onSuccess: (txHash: string) => void,
+		onError: (error: Error) => void,
+		onClose: () => void,
+	) => void;
+	enabled?: boolean;
+}
+
+export const useERC1155Checkout = ({
+	chainId,
+	salesContractAddress,
+	collectionAddress,
+	items,
+	customProviderCallback,
+	enabled = true,
+}: UseERC1155CheckoutParams) => {
+	const { address: accountAddress } = useAccount();
+	const quantity = useQuantity();
+	const onSuccess = useOnSuccess();
+	const onError = useOnError();
+
+	const checkoutParams = {
+		chain: chainId,
+		contractAddress: salesContractAddress,
+		collectionAddress,
+		items: [
+			{
+				...items[0],
+				quantity: quantity?.toString() || '1',
+			},
+		],
+		wallet: accountAddress ?? '',
+		onSuccess: (hash: string) => {
+			onSuccess({ hash: hash as Hash });
+		},
+		onError: (error: Error) => {
+			onError(error);
+		},
+		onClose: () => {
+			const queryClient = getQueryClient();
+			queryClient.invalidateQueries();
+			buyModalStore.send({ type: 'close' });
+		},
+		customProviderCallback,
+	};
+
+	const checkout = useERC1155SaleContractCheckout(checkoutParams);
+
+	return {
+		...checkout,
+		isEnabled: Boolean(enabled && accountAddress),
+		checkoutParams,
+	};
+};

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

@@ -0,0 +1,48 @@
+import { skipToken } from '@tanstack/react-query';
+import { avalanche, optimism } from 'viem/chains';
+import type { AdditionalFee } from '../../../../_internal';
+import { useMarketplaceConfig } from '../../../../hooks';
+
+export type FeesParams = {
+	chainId: number;
+	collectionAddress: string;
+};
+
+export const useFees = (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;
+
+	const collection = marketplaceConfig?.collections.find(
+		(collection) =>
+			collection.address.toLowerCase() === collectionAddress.toLowerCase() &&
+			chainId === Number(collection.chainId),
+	);
+
+	const avalancheOrOptimism =
+		chainId === avalanche.id || chainId === optimism.id;
+	const receiver = avalancheOrOptimism
+		? avalancheAndOptimismPlatformFeeRecipient
+		: defaultPlatformFeeRecipient;
+
+	const percentageToBPS = (percentage: string | number) =>
+		(Number(percentage) * 10000) / 100;
+
+	return {
+		amount: percentageToBPS(collection?.feePercentage || defaultFee).toString(),
+		receiver,
+	} satisfies AdditionalFee;
+};

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

@@ -0,0 +1,90 @@
+import { skipToken } from '@tanstack/react-query';
+import { useWallet } from '../../../../_internal/wallet/useWallet';
+import { useCollectible, useCollection, useCurrency } from '../../../../hooks';
+import { isMarketplaceProps, isShopProps, useBuyModalProps } from '../store';
+import { useCheckoutOptions } from './useCheckoutOptions';
+
+export const useLoadData = () => {
+	const props = useBuyModalProps();
+	const { chainId, collectionAddress } = props;
+
+	// Check if we're in marketplace mode
+	const isMarketplace = isMarketplaceProps(props);
+	const isShop = isShopProps(props);
+	const collectibleId = isMarketplace ? props.collectibleId : undefined;
+
+	const {
+		wallet,
+		isLoading: walletLoading,
+		isError: walletError,
+	} = useWallet();
+
+	const {
+		data: collection,
+		isLoading: collectionLoading,
+		isError: collectionError,
+	} = useCollection({
+		chainId,
+		collectionAddress,
+	});
+
+	const {
+		data: collectable,
+		isLoading: collectableLoading,
+		isError: collectableError,
+	} = useCollectible({
+		chainId,
+		collectionAddress,
+		collectibleId,
+		query: {
+			enabled: !!collectibleId,
+		},
+	});
+	const {
+		data: currency,
+		isLoading: currencyLoading,
+		isError: currencyError,
+	} = useCurrency({
+		chainId,
+		currencyAddress: isShop ? props.salePrice.currencyAddress : undefined,
+		query: {
+			enabled: isShop,
+		},
+	});
+	// Always call the hook, but with conditional parameters
+	const {
+		data: checkoutOptions,
+		isLoading: checkoutOptionsLoading,
+		isError: checkoutOptionsError,
+	} = useCheckoutOptions(
+		isMarketplace
+			? {
+					chainId,
+					collectionAddress,
+					orderId: props.orderId,
+					marketplace: props.marketplace,
+				}
+			: skipToken,
+	);
+
+	return {
+		collection,
+		collectable,
+		currency,
+		order: checkoutOptions?.order,
+		checkoutOptions,
+		wallet,
+		isLoading:
+			collectionLoading ||
+			collectableLoading ||
+			(isMarketplace && checkoutOptionsLoading) ||
+			(isShop && currencyLoading) ||
+			walletLoading,
+		isError:
+			collectionError ||
+			collectableError ||
+			(isMarketplace && checkoutOptionsError) ||
+			(isShop && currencyError) ||
+			walletError,
+	};
+};

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

@@ -0,0 +1,221 @@
+import type { SelectPaymentSettings } from '@0xsequence/checkout';
+import type { TokenMetadata } from '@0xsequence/metadata';
+import { skipToken, useQuery } from '@tanstack/react-query';
+import type { Hash, Hex } from 'viem';
+import type { SdkConfig, Step } from '../../../../..';
+import { decodeERC20Approval } from '../../../../../utils/decode/erc20';
+import {
+	type AdditionalFee,
+	type CheckoutOptions,
+	type MarketplaceKind,
+	StepType,
+	WalletKind,
+	getMarketplaceClient,
+	getQueryClient,
+} from '../../../../_internal';
+import type { WalletInstance } from '../../../../_internal/wallet/wallet';
+import { useConfig } from '../../../../hooks';
+import type { ModalCallbacks } from '../../_internal/types';
+import {
+	buyModalStore,
+	isMarketplaceProps,
+	useBuyModalProps,
+	useOnError,
+	useOnSuccess,
+} from '../store';
+import { useFees } from './useFees';
+
+interface GetBuyCollectableParams {
+	chainId: number;
+	config: SdkConfig;
+	wallet: WalletInstance;
+	collectionAddress: string;
+	collectibleId: string;
+	marketplace: MarketplaceKind;
+	orderId: string;
+	quantity: number;
+	collectable: TokenMetadata;
+	checkoutOptions: CheckoutOptions;
+	fee: AdditionalFee;
+	callbacks: ModalCallbacks | undefined;
+	priceCurrencyAddress: string;
+	customCreditCardProviderCallback: ((buyStep: Step) => void) | undefined;
+	skipNativeBalanceCheck: boolean | undefined;
+	nativeTokenAddress: string | undefined;
+}
+
+export const getBuyCollectableParams = async ({
+	chainId,
+	collectionAddress,
+	collectibleId,
+	callbacks,
+	priceCurrencyAddress,
+	customCreditCardProviderCallback,
+	config,
+	wallet,
+	marketplace,
+	orderId,
+	quantity,
+	collectable,
+	checkoutOptions,
+	fee,
+	skipNativeBalanceCheck,
+	nativeTokenAddress,
+}: GetBuyCollectableParams) => {
+	const marketplaceClient = getMarketplaceClient(chainId, config);
+	const { steps } = await marketplaceClient.generateBuyTransaction({
+		collectionAddress,
+		buyer: await wallet.address(),
+		marketplace: marketplace,
+		ordersData: [
+			{
+				orderId: orderId,
+				quantity: quantity.toString(),
+				tokenId: collectibleId,
+			},
+		],
+		additionalFees: [fee],
+		walletType: WalletKind.unknown,
+	});
+
+	const buyStep = steps.find((step) => step.id === StepType.buy);
+	const approveStep = steps.find((step) => step.id === StepType.tokenApproval);
+
+	const approvedSpenderAddress = approveStep
+		? decodeERC20Approval(approveStep.data as Hex).spender
+		: undefined;
+
+	if (!buyStep) {
+		throw new Error('Buy step not found');
+	}
+
+	return {
+		chain: chainId,
+		collectibles: [
+			{
+				tokenId: collectibleId,
+				quantity: quantity.toString(),
+				decimals: collectable.decimals,
+			},
+		],
+		currencyAddress: priceCurrencyAddress,
+		price: buyStep.price,
+		targetContractAddress: buyStep.to,
+		approvedSpenderAddress,
+		txData: buyStep.data as Hex,
+		collectionAddress,
+		recipientAddress: await wallet.address(),
+		enableMainCurrencyPayment: true,
+		enableSwapPayments: !!checkoutOptions.swap,
+		creditCardProviders: customCreditCardProviderCallback
+			? ['custom']
+			: checkoutOptions.nftCheckout || [],
+		onSuccess: (hash: string) => {
+			callbacks?.onSuccess?.({ hash: hash as Hash });
+		},
+		supplementaryAnalyticsInfo: {
+			requestId: orderId,
+			marketplaceKind: marketplace,
+		},
+		onError: callbacks?.onError,
+		onClose: () => {
+			const queryClient = getQueryClient();
+			queryClient.invalidateQueries();
+			buyModalStore.send({ type: 'close' });
+		},
+		skipNativeBalanceCheck,
+		nativeTokenAddress,
+		...(customCreditCardProviderCallback && {
+			customProviderCallback: () => {
+				customCreditCardProviderCallback(buyStep);
+				buyModalStore.send({ type: 'close' });
+			},
+		}),
+	} satisfies SelectPaymentSettings;
+};
+
+interface usePaymentModalParams {
+	wallet: WalletInstance | undefined | null;
+	quantity: number | undefined;
+	marketplace: MarketplaceKind | undefined;
+	collectable: TokenMetadata | undefined;
+	checkoutOptions: CheckoutOptions | undefined;
+	priceCurrencyAddress: string | undefined;
+	enabled: boolean;
+}
+
+export const usePaymentModalParams = (args: usePaymentModalParams) => {
+	const {
+		wallet,
+		marketplace,
+		collectable,
+		checkoutOptions,
+		priceCurrencyAddress,
+		quantity,
+		enabled,
+	} = args;
+
+	const buyModalProps = useBuyModalProps();
+	const {
+		chainId,
+		collectionAddress,
+		skipNativeBalanceCheck,
+		nativeTokenAddress,
+	} = buyModalProps;
+
+	// Extract Marketplace-specific properties using type guard
+	const collectibleId = isMarketplaceProps(buyModalProps)
+		? buyModalProps.collectibleId
+		: '';
+	const orderId = isMarketplaceProps(buyModalProps)
+		? buyModalProps.orderId
+		: '';
+	const customCreditCardProviderCallback = isMarketplaceProps(buyModalProps)
+		? buyModalProps.customCreditCardProviderCallback
+		: undefined;
+
+	const config = useConfig();
+	const fee = useFees({
+		chainId,
+		collectionAddress,
+	});
+	const onSuccess = useOnSuccess();
+	const onError = useOnError();
+
+	const queryEnabled =
+		!!wallet &&
+		!!marketplace &&
+		!!collectable &&
+		!!checkoutOptions &&
+		!!priceCurrencyAddress &&
+		!!quantity &&
+		enabled;
+
+	return useQuery({
+		queryKey: ['buyCollectableParams', buyModalProps, args, fee],
+		queryFn: queryEnabled
+			? () =>
+					getBuyCollectableParams({
+						chainId,
+						config,
+						wallet,
+						collectionAddress,
+						collectibleId,
+						marketplace,
+						orderId,
+						quantity,
+						collectable,
+						checkoutOptions,
+						fee,
+						priceCurrencyAddress,
+						callbacks: {
+							onSuccess: onSuccess,
+							onError: onError,
+						},
+						customCreditCardProviderCallback,
+						skipNativeBalanceCheck,
+						nativeTokenAddress,
+					})
+			: skipToken,
+	});
+};

package/src/react/ui/modals/BuyModal/index.tsx

@@ -0,0 +1,10 @@
+import type { ModalCallbacks } from '../_internal/types';
+import { type BuyModalProps, buyModalStore } from './store';
+
+export const useBuyModal = (callbacks?: ModalCallbacks) => {
+	return {
+		show: (args: BuyModalProps) =>
+			buyModalStore.send({ type: 'open', props: args, ...callbacks }),
+		close: () => buyModalStore.send({ type: 'close' }),
+	};
+};

package/src/react/ui/modals/BuyModal/store.ts

@@ -0,0 +1,136 @@
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
+import type { Address, Hash } from 'viem';
+import type { MarketplaceType } from '../../../../types';
+import type {
+	CheckoutOptionsItem,
+	MarketplaceKind,
+	Step,
+} from '../../../_internal';
+
+export type CheckoutOptionsSalesContractProps = {
+	chainId: number;
+	salesContractAddress: Address;
+	collectionAddress: Address;
+	items: Array<CheckoutOptionsItem>;
+	customProviderCallback?: (
+		onSuccess: (txHash: string) => void,
+		onError: (error: Error) => void,
+		onClose: () => void,
+	) => void;
+};
+
+export type PaymentModalProps = {
+	collectibleId: string;
+	marketplace: MarketplaceKind;
+	orderId: string;
+	customCreditCardProviderCallback?: (buyStep: Step) => void;
+};
+
+export type BuyModalBaseProps = {
+	chainId: number;
+	collectionAddress: Address;
+	skipNativeBalanceCheck?: boolean;
+	nativeTokenAddress?: Address;
+	marketplaceType: MarketplaceType;
+	quantityDecimals: number;
+	quantityRemaining: string;
+};
+
+// Shop type modal props
+export type ShopBuyModalProps = BuyModalBaseProps & {
+	marketplaceType: 'shop';
+	salesContractAddress: Address;
+	items: Array<CheckoutOptionsItem>;
+	customProviderCallback?: CheckoutOptionsSalesContractProps['customProviderCallback'];
+	salePrice: {
+		amount: string;
+		currencyAddress: Address;
+	};
+};
+
+// Marketplace type modal props
+export type MarketplaceBuyModalProps = BuyModalBaseProps & {
+	marketplaceType: 'market';
+	collectibleId: string;
+	marketplace: MarketplaceKind;
+	orderId: string;
+	customCreditCardProviderCallback?: PaymentModalProps['customCreditCardProviderCallback'];
+};
+
+// Union type for either shop or marketplace
+export type BuyModalProps = ShopBuyModalProps | MarketplaceBuyModalProps;
+
+// Type guard functions
+export function isShopProps(props: BuyModalProps): props is ShopBuyModalProps {
+	return props.marketplaceType === 'shop';
+}
+
+export function isMarketplaceProps(
+	props: BuyModalProps,
+): props is MarketplaceBuyModalProps {
+	return props.marketplaceType === 'market';
+}
+
+export type onSuccessCallback = ({
+	hash,
+	orderId,
+}: {
+	hash?: Hash;
+	orderId?: string;
+}) => void;
+export type onErrorCallback = (error: Error) => void;
+
+const initialContext = {
+	isOpen: false,
+	props: null as unknown as BuyModalProps,
+	onError: (() => {}) as onErrorCallback,
+	onSuccess: (() => {}) as onSuccessCallback,
+	quantity: undefined as number | undefined,
+};
+
+export const buyModalStore = createStore({
+	context: { ...initialContext },
+	on: {
+		open: (
+			context,
+			event: {
+				props: BuyModalProps;
+				onError?: onErrorCallback;
+				onSuccess?: onSuccessCallback;
+			},
+		) => ({
+			...context,
+			props: event.props,
+			onError: event.onError ?? context.onError,
+			onSuccess: event.onSuccess ?? context.onSuccess,
+			isOpen: true,
+		}),
+
+		close: (context) => ({
+			...context,
+			isOpen: false,
+			quantity: undefined,
+		}),
+
+		setQuantity: (context, event: { quantity: number }) => ({
+			...context,
+			quantity: event.quantity,
+		}),
+	},
+});
+
+export const useIsOpen = () =>
+	useSelector(buyModalStore, (state) => state.context.isOpen);
+
+export const useBuyModalProps = () =>
+	useSelector(buyModalStore, (state) => state.context.props);
+
+export const useOnError = () =>
+	useSelector(buyModalStore, (state) => state.context.onError);
+
+export const useOnSuccess = () =>
+	useSelector(buyModalStore, (state) => state.context.onSuccess);
+
+export const useQuantity = () =>
+	useSelector(buyModalStore, (state) => state.context.quantity);