@0xsequence/marketplace-sdk 0.8.10 → 0.8.12

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

@@ -19,11 +19,12 @@ 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,

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

@@ -1,19 +1,76 @@
 import { createStore } from '@xstate/store';
 import { useSelector } from '@xstate/store/react';
 import type { Address, Hash } from 'viem';
-import type { MarketplaceKind, Step } from '../../../_internal';
+import type { MarketplaceType } from '../../../../types';
+import type {
+	CheckoutOptionsItem,
+	MarketplaceKind,
+	Step,
+} from '../../../_internal';
 
-export type BuyModalProps = {
-	orderId: string;
+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;
+	customCreditCardProviderCallback?: PaymentModalProps['customCreditCardProviderCallback'];
+};
+
+// Shop type modal props
+export type ShopBuyModalProps = BuyModalBaseProps & {
+	marketplaceType: 'shop';
+	salesContractAddress: Address;
+	items: Array<Partial<CheckoutOptionsItem> & { tokenId?: string }>;
+	quantityDecimals: number;
+	quantityRemaining: number;
+	salePrice: {
+		amount: string;
+		currencyAddress: Address;
+	};
 };
 
+// Marketplace type modal props
+export type MarketplaceBuyModalProps = BuyModalBaseProps & {
+	marketplaceType?: 'market';
+	collectibleId: string;
+	marketplace: MarketplaceKind;
+	orderId: string;
+};
+
+export type BuyModalProps = ShopBuyModalProps | MarketplaceBuyModalProps;
+
+// Type guard functions
+export function isShopProps(props: BuyModalProps): props is ShopBuyModalProps {
+	return props.marketplaceType === 'shop';
+}
+
+export function isMarketProps(
+	props: BuyModalProps,
+): props is MarketplaceBuyModalProps {
+	// Default to MARKET type for backward compatibility
+	return !props.marketplaceType || props.marketplaceType === 'market';
+}
+
 export type onSuccessCallback = ({
 	hash,
 	orderId,
@@ -23,12 +80,18 @@ export type onSuccessCallback = ({
 }) => void;
 export type onErrorCallback = (error: Error) => void;
 
+type ModalState = 'idle' | 'opening' | 'open' | 'processing' | 'closing';
+type SubModalState = 'idle' | 'opening' | 'open' | 'closed';
+
 const initialContext = {
 	isOpen: false,
-	props: null as unknown as BuyModalProps,
+	props: null as BuyModalProps | null,
 	onError: (() => {}) as onErrorCallback,
 	onSuccess: (() => {}) as onSuccessCallback,
-	quantity: undefined as number | undefined,
+	quantity: null as number | null,
+	modalState: 'idle' as ModalState,
+	paymentModalState: 'idle' as SubModalState,
+	checkoutModalState: 'idle' as SubModalState,
 };
 
 export const buyModalStore = createStore({
@@ -41,32 +104,94 @@ export const buyModalStore = createStore({
 				onError?: onErrorCallback;
 				onSuccess?: onSuccessCallback;
 			},
-		) => ({
+		) => {
+			// Prevent duplicate opens
+			if (context.modalState !== 'idle') {
+				return context;
+			}
+			return {
+				...context,
+				props: event.props,
+				onError: event.onError ?? context.onError,
+				onSuccess: event.onSuccess ?? context.onSuccess,
+				isOpen: true,
+				modalState: 'opening' as const,
+			};
+		},
+
+		modalOpened: (context) => ({
 			...context,
-			props: event.props,
-			onError: event.onError ?? context.onError,
-			onSuccess: event.onSuccess ?? context.onSuccess,
-			isOpen: true,
+			modalState: 'open' as const,
 		}),
 
 		close: (context) => ({
 			...context,
 			isOpen: false,
-			quantity: undefined,
+			quantity: null,
+			modalState: 'idle' as const,
+			paymentModalState: 'idle' as const,
+			checkoutModalState: 'idle' as const,
 		}),
 
 		setQuantity: (context, event: { quantity: number }) => ({
 			...context,
 			quantity: event.quantity,
 		}),
+
+		openPaymentModal: (context) => {
+			if (context.paymentModalState !== 'idle') {
+				return context; // Prevent duplicate opens
+			}
+			return {
+				...context,
+				paymentModalState: 'opening' as const,
+			};
+		},
+
+		paymentModalOpened: (context) => ({
+			...context,
+			paymentModalState: 'open' as const,
+		}),
+
+		paymentModalClosed: (context) => ({
+			...context,
+			paymentModalState: 'closed' as const,
+		}),
+
+		openCheckoutModal: (context) => {
+			if (context.checkoutModalState !== 'idle') {
+				return context;
+			}
+			return {
+				...context,
+				checkoutModalState: 'opening' as const,
+			};
+		},
+
+		checkoutModalOpened: (context) => ({
+			...context,
+			checkoutModalState: 'open' as const,
+		}),
+
+		checkoutModalClosed: (context) => ({
+			...context,
+			checkoutModalState: 'closed' as const,
+		}),
 	},
 });
 
 export const useIsOpen = () =>
 	useSelector(buyModalStore, (state) => state.context.isOpen);
 
-export const useBuyModalProps = () =>
-	useSelector(buyModalStore, (state) => state.context.props);
+export const useBuyModalProps = () => {
+	const props = useSelector(buyModalStore, (state) => state.context.props);
+	if (!props) {
+		throw new Error(
+			'BuyModal props not initialized. Make sure to call show() first.',
+		);
+	}
+	return props;
+};
 
 export const useOnError = () =>
 	useSelector(buyModalStore, (state) => state.context.onError);
@@ -76,3 +201,12 @@ export const useOnSuccess = () =>
 
 export const useQuantity = () =>
 	useSelector(buyModalStore, (state) => state.context.quantity);
+
+export const useModalState = () =>
+	useSelector(buyModalStore, (state) => state.context.modalState);
+
+export const usePaymentModalState = () =>
+	useSelector(buyModalStore, (state) => state.context.paymentModalState);
+
+export const useCheckoutModalState = () =>
+	useSelector(buyModalStore, (state) => state.context.checkoutModalState);

package/src/react/ui/modals/CreateListingModal/Modal.tsx

@@ -11,7 +11,7 @@ import {
 	useBalanceOfCollectible,
 	useCollectible,
 	useCollection,
-	useCurrencies,
+	useMarketCurrencies,
 } from '../../../hooks';
 import {
 	ActionModal,
@@ -52,9 +52,7 @@ const Modal = observer(() => {
 		shouldHideActionButton: shouldHideListButton,
 		waasFeeOptionsShown,
 		getActionLabel,
-		isTestnet,
 	} = useSelectWaasFeeOptions({
-		chainId,
 		isProcessing: listingIsBeingProcessed,
 		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
 		selectedFeeOption:
@@ -74,7 +72,7 @@ const Modal = observer(() => {
 		data: currencies,
 		isLoading: currenciesLoading,
 		isError: currenciesIsError,
-	} = useCurrencies({
+	} = useMarketCurrencies({
 		chainId,
 		collectionAddress,
 		includeNativeCurrency: true,
@@ -154,7 +152,7 @@ const Modal = observer(() => {
 			}
 
 			await createListing({
-				isTransactionExecuting: wallet?.isWaaS ? !isTestnet : false,
+				isTransactionExecuting: !!wallet?.isWaaS,
 			});
 		} catch (error) {
 			console.error('Create listing failed:', error);

package/src/react/ui/modals/CreateListingModal/hooks/useCreateListing.tsx

@@ -2,6 +2,8 @@
 
 import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
+import type { MarketCollection } from '../../../../../types/new-marketplace-types';
+import { compareAddress } from '../../../../../utils';
 import {
 	type ContractType,
 	type CreateReq,
@@ -40,9 +42,9 @@ export const useCreateListing = ({
 	const { data: marketplaceConfig, isLoading: marketplaceIsLoading } =
 		useMarketplaceConfig();
 
-	const collectionConfig = marketplaceConfig?.collections.find(
-		(c) => c.address === collectionAddress,
-	);
+	const collectionConfig = marketplaceConfig?.market.collections.find((c) =>
+		compareAddress(c.itemsAddress, collectionAddress),
+	) as MarketCollection;
 
 	orderbookKind =
 		orderbookKind ??

package/src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts

@@ -31,7 +31,7 @@ export const useGetTokenApprovalData = (
 	const config = useConfig();
 	const { wallet } = useWallet();
 	const { address } = useAccount();
-	const marketplaceClient = getMarketplaceClient(params.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 
 	const listing = {
 		tokenId: params.tokenId,
@@ -52,6 +52,7 @@ export const useGetTokenApprovalData = (
 		queryFn: isEnabled
 			? async () => {
 					const args = {
+						chainId: String(params.chainId),
 						collectionAddress: params.collectionAddress,
 						owner: await wallet.address(),
 						walletType: wallet.walletKind,

package/src/react/ui/modals/CreateListingModal/hooks/useTransactionSteps.tsx

@@ -3,6 +3,7 @@ import { type Address, type Hex, formatUnits } from 'viem';
 import { OrderbookKind, type Price } from '../../../../../types';
 import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenceMarketRequestId';
 import {
+	ExecuteType,
 	type Step,
 	StepType,
 	type TransactionSteps,
@@ -20,8 +21,8 @@ import type {
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import {
 	useConfig,
-	useCurrencies,
 	useGenerateListingTransaction,
+	useMarketCurrencies,
 } from '../../../../hooks';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
@@ -45,17 +46,16 @@ export const useTransactionSteps = ({
 	steps$,
 }: UseTransactionStepsArgs) => {
 	const { wallet } = useWallet();
-	const expiry = new Date(Number(listingInput.listing.expiry) * 1000);
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const sdkConfig = useConfig();
-	const { data: currencies } = useCurrencies({
+	const { data: currencies } = useMarketCurrencies({
 		chainId,
 	});
 	const currency = currencies?.find(
 		(currency) =>
 			currency.contractAddress === listingInput.listing.currencyAddress,
 	);
-	const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+	const marketplaceClient = getMarketplaceClient(sdkConfig);
 	const analytics = useAnalytics();
 	const { generateListingTransactionAsync, isPending: generatingSteps } =
 		useGenerateListingTransaction({
@@ -79,7 +79,7 @@ export const useTransactionSteps = ({
 				orderbook: orderbookKind,
 				listing: {
 					...listingInput.listing,
-					expiry,
+					expiry: new Date(Number(listingInput.listing.expiry) * 1000),
 				},
 			});
 
@@ -265,10 +265,12 @@ export const useTransactionSteps = ({
 		);
 
 		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/ui/modals/MakeOfferModal/Modal.tsx

@@ -12,8 +12,8 @@ import { useWallet } from '../../../_internal/wallet/useWallet';
 import {
 	useCollectible,
 	useCollection,
-	useCurrencies,
 	useLowestListing,
+	useMarketCurrencies,
 } from '../../../hooks';
 import { useBuyModal } from '../BuyModal';
 import { ActionModal } from '../_internal/components/actionModal/ActionModal';
@@ -64,7 +64,6 @@ const Modal = observer(() => {
 		waasFeeOptionsShown,
 		getActionLabel,
 	} = useSelectWaasFeeOptions({
-		chainId,
 		isProcessing,
 		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
 		selectedFeeOption:
@@ -83,7 +82,7 @@ const Modal = observer(() => {
 		data: currencies,
 		isLoading: currenciesLoading,
 		isError: currenciesIsError,
-	} = useCurrencies({
+	} = useMarketCurrencies({
 		chainId,
 		includeNativeCurrency: false,
 	});

package/src/react/ui/modals/MakeOfferModal/hooks/useGetTokenApproval.tsx

@@ -29,7 +29,7 @@ export const useGetTokenApprovalData = (
 ) => {
 	const config = useConfig();
 	const { wallet } = useWallet();
-	const marketplaceClient = getMarketplaceClient(params.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 
 	const offer = {
 		tokenId: params.tokenId,
@@ -46,6 +46,7 @@ export const useGetTokenApprovalData = (
 		queryFn: isEnabled
 			? async () => {
 					const args = {
+						chainId: String(params.chainId),
 						collectionAddress: params.collectionAddress,
 						maker: await wallet.address(),
 						walletType: wallet.walletKind,

package/src/react/ui/modals/MakeOfferModal/hooks/useMakeOffer.tsx

@@ -3,6 +3,7 @@
 import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
 import { OrderbookKind } from '../../../../../types';
+import type { MarketCollection } from '../../../../../types/new-marketplace-types';
 import type { TransactionSteps } from '../../../../_internal';
 import type { OfferInput } from '../../../../_internal/types';
 import { useMarketplaceConfig } from '../../../../hooks';
@@ -32,9 +33,9 @@ export const useMakeOffer = ({
 	const { data: marketplaceConfig, isLoading: marketplaceIsLoading } =
 		useMarketplaceConfig();
 
-	const collectionConfig = marketplaceConfig?.collections.find(
-		(c) => c.address === collectionAddress,
-	);
+	const collectionConfig = marketplaceConfig?.market.collections.find(
+		(c) => c.itemsAddress === collectionAddress,
+	) as MarketCollection;
 
 	orderbookKind =
 		orderbookKind ??

package/src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx

@@ -3,6 +3,7 @@ import { type Address, type Hex, formatUnits } from 'viem';
 import { OrderbookKind, type Price } from '../../../../../types';
 import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenceMarketRequestId';
 import {
+	ExecuteType,
 	type Step,
 	StepType,
 	type TransactionSteps,
@@ -44,11 +45,10 @@ export const useTransactionSteps = ({
 	steps$,
 }: UseTransactionStepsArgs) => {
 	const { wallet } = useWallet();
-	const expiry = new Date(Number(offerInput.offer.expiry) * 1000);
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const sdkConfig = useConfig();
 	const analytics = useAnalytics();
-	const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+	const marketplaceClient = getMarketplaceClient(sdkConfig);
 	const { generateOfferTransactionAsync, isPending: generatingSteps } =
 		useGenerateOfferTransaction({
 			chainId,
@@ -75,7 +75,7 @@ export const useTransactionSteps = ({
 				orderbook: orderbookKind,
 				offer: {
 					...offerInput.offer,
-					expiry,
+					expiry: new Date(Number(offerInput.offer.expiry) * 1000),
 				},
 			});
 
@@ -256,10 +256,12 @@ export const useTransactionSteps = ({
 		);
 
 		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/ui/modals/SellModal/Modal.tsx

@@ -60,7 +60,6 @@ const Modal = observer(() => {
 	const isWaaS = wallet?.isWaaS;
 	const { shouldHideActionButton: shouldHideSellButton } =
 		useSelectWaasFeeOptions({
-			chainId,
 			isProcessing,
 			feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
 			selectedFeeOption:

package/src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx

@@ -8,7 +8,7 @@ import {
 } from '../../../../_internal';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useConfig } from '../../../../hooks/useConfig';
-import { useFees } from '../../BuyModal/hooks/useFees';
+import { useMarketPlatformFee } from '../../BuyModal/hooks/useMarketPlatformFee';
 
 export interface UseGetTokenApprovalDataArgs {
 	chainId: number;
@@ -22,8 +22,8 @@ export const useGetTokenApprovalData = (
 ) => {
 	const config = useConfig();
 	const { wallet } = useWallet();
-	const marketplaceClient = getMarketplaceClient(params.chainId, config);
-	const { amount, receiver } = useFees({
+	const marketplaceClient = getMarketplaceClient(config);
+	const { amount, receiver } = useMarketPlatformFee({
 		chainId: Number(params.chainId),
 		collectionAddress: params.collectionAddress,
 	});
@@ -34,6 +34,7 @@ export const useGetTokenApprovalData = (
 			? async () => {
 					const address = await wallet.address();
 					const args = {
+						chainId: String(params.chainId),
 						collectionAddress: params.collectionAddress,
 						walletType: wallet.walletKind,
 						seller: address,

package/src/react/ui/modals/SellModal/hooks/useTransactionSteps.tsx

@@ -2,6 +2,7 @@ import type { Observable } from '@legendapp/state';
 import { formatUnits } from 'viem';
 import type { Address, Hex } from 'viem';
 import {
+	ExecuteType,
 	type MarketplaceKind,
 	type Step,
 	StepType,
@@ -19,10 +20,10 @@ import type {
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import {
 	useConfig,
-	useCurrencies,
 	useGenerateSellTransaction,
+	useMarketCurrencies,
 } from '../../../../hooks';
-import { useFees } from '../../BuyModal/hooks/useFees';
+import { useMarketPlatformFee } from '../../BuyModal/hooks/useMarketPlatformFee';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
 import type { SellOrder } from './useSell';
@@ -52,15 +53,15 @@ export const useTransactionSteps = ({
 	const { wallet } = useWallet();
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const sdkConfig = useConfig();
-	const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+	const marketplaceClient = getMarketplaceClient(sdkConfig);
 	const analytics = useAnalytics();
 
-	const { amount, receiver } = useFees({
+	const { amount, receiver } = useMarketPlatformFee({
 		chainId,
 		collectionAddress: collectionAddress,
 	});
 
-	const { data: currencies } = useCurrencies({
+	const { data: currencies } = useMarketCurrencies({
 		chainId,
 	});
 	const { generateSellTransactionAsync, isPending: generatingSteps } =
@@ -248,10 +249,12 @@ export const useTransactionSteps = ({
 		);
 
 		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;