@0xsequence/marketplace-sdk 0.8.11 → 0.9.0

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Show, observer } from '@legendapp/state/react';
+import { observer, Show } from '@legendapp/state/react';
 import { parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../../../types/waas-types';

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

@@ -2,12 +2,12 @@ import { cleanup, render, renderHook, screen, waitFor } from '@test';
 import { TEST_COLLECTIBLE } from '@test/const';
 import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { useCreateListingModal } from '..';
 import { StepType, WalletKind } from '../../../../_internal';
 import { createMockStep } from '../../../../_internal/api/__mocks__/marketplace.msw';
 import * as walletModule from '../../../../_internal/wallet/useWallet';
-import { CreateListingModal } from '../Modal';
+import { useCreateListingModal } from '..';
 import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
+import { CreateListingModal } from '../Modal';
 
 const defaultArgs = {
 	collectionAddress: TEST_COLLECTIBLE.collectionAddress,

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

@@ -64,7 +64,6 @@ export const useCreateListing = ({
 			},
 		});
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (tokenApproval?.step && !tokenApprovalIsLoading) {
 			steps$.approval.exist.set(true);

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

@@ -1,15 +1,15 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
 import { useAccount } from 'wagmi';
-import { useConfig } from '../../../..';
 import { dateToUnixTime } from '../../../../../utils/date';
+import { useConfig } from '../../../..';
 import {
 	type ContractType,
 	type CreateReq,
 	type GenerateListingTransactionArgs,
+	getMarketplaceClient,
 	type OrderbookKind,
 	type QueryArg,
 	StepType,
-	getMarketplaceClient,
 } from '../../../../_internal';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 
@@ -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

@@ -1,18 +1,19 @@
 import type { Observable } from '@legendapp/state';
-import { type Address, type Hex, formatUnits } from 'viem';
+import { type Address, formatUnits, type Hex } from 'viem';
 import { OrderbookKind, type Price } from '../../../../../types';
 import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenceMarketRequestId';
 import {
-	type Step,
-	StepType,
-	type TransactionSteps,
 	balanceQueries,
 	collectableKeys,
+	ExecuteType,
 	getMarketplaceClient,
+	type Step,
+	StepType,
+	type TransactionSteps,
 } from '../../../../_internal';
 import { useAnalytics } from '../../../../_internal/databeat';
-import { TransactionType } from '../../../../_internal/types';
 import type { ListingInput } from '../../../../_internal/types';
+import { TransactionType } from '../../../../_internal/types';
 import type {
 	SignatureStep,
 	TransactionStep as WalletTransactionStep,
@@ -25,6 +26,7 @@ import {
 } from '../../../../hooks';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
+
 interface UseTransactionStepsArgs {
 	listingInput: ListingInput;
 	chainId: number;
@@ -45,7 +47,6 @@ 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 } = useMarketCurrencies({
@@ -55,7 +56,7 @@ export const useTransactionSteps = ({
 		(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 +80,7 @@ export const useTransactionSteps = ({
 				orderbook: orderbookKind,
 				listing: {
 					...listingInput.listing,
-					expiry,
+					expiry: new Date(Number(listingInput.listing.expiry) * 1000),
 				},
 			});
 
@@ -110,7 +111,7 @@ export const useTransactionSteps = ({
 			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
 			steps$.approval.isExecuting.set(false);
 			steps$.approval.exist.set(false);
-		} catch (error) {
+		} catch (_error) {
 			steps$.approval.isExecuting.set(false);
 		}
 	};
@@ -265,10 +266,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/CreateListingModal/index.tsx

@@ -1,5 +1,5 @@
 import type { ModalCallbacks } from '../_internal/types';
-import { type OpenCreateListingModalArgs, createListingModal$ } from './store';
+import { createListingModal$, type OpenCreateListingModalArgs } from './store';
 
 type ShowCreateListingModalArgs = Exclude<
 	OpenCreateListingModalArgs,

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

@@ -2,7 +2,7 @@
 
 import { getNetwork } from '@0xsequence/connect';
 import { NetworkType } from '@0xsequence/network';
-import { Show, observer } from '@legendapp/state/react';
+import { observer, Show } from '@legendapp/state/react';
 import { useState } from 'react';
 import { parseUnits } from 'viem';
 import type { FeeOption } from '../../../../types/waas-types';
@@ -15,7 +15,6 @@ import {
 	useLowestListing,
 	useMarketCurrencies,
 } from '../../../hooks';
-import { useBuyModal } from '../BuyModal';
 import { ActionModal } from '../_internal/components/actionModal/ActionModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
 import ExpirationDateSelect from '../_internal/components/expirationDateSelect';
@@ -26,6 +25,7 @@ import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
 import { selectWaasFeeOptions$ } from '../_internal/components/selectWaasFeeOptions/store';
 import TokenPreview from '../_internal/components/tokenPreview';
 import { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
+import { useBuyModal } from '../BuyModal';
 import { useMakeOffer } from './hooks/useMakeOffer';
 import { makeOfferModal$ } from './store';
 

package/src/react/ui/modals/MakeOfferModal/__tests__/Modal.test.tsx

@@ -2,9 +2,9 @@ import { cleanup, render, renderHook, waitFor } from '@test';
 import { TEST_COLLECTIBLE } from '@test/const';
 import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { useMakeOfferModal } from '..';
 import { CurrencyStatus, WalletKind } from '../../../../_internal';
 import * as walletModule from '../../../../_internal/wallet/useWallet';
+import { useMakeOfferModal } from '..';
 import { MakeOfferModal } from '../Modal';
 import { makeOfferModal$ } from '../store';
 

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

@@ -4,10 +4,10 @@ import {
 	type ContractType,
 	type CreateReq,
 	type GenerateOfferTransactionArgs,
+	getMarketplaceClient,
 	type OrderbookKind,
 	type QueryArg,
 	StepType,
-	getMarketplaceClient,
 } from '../../../../_internal';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useConfig } from '../../../../hooks/useConfig';
@@ -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

@@ -55,7 +55,6 @@ export const useMakeOffer = ({
 			},
 		});
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (tokenApproval?.step && !tokenApprovalIsLoading) {
 			steps$.approval.exist.set(true);

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

@@ -1,18 +1,19 @@
 import type { Observable } from '@legendapp/state';
-import { type Address, type Hex, formatUnits } from 'viem';
+import { type Address, formatUnits, type Hex } from 'viem';
 import { OrderbookKind, type Price } from '../../../../../types';
 import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenceMarketRequestId';
 import {
-	type Step,
-	StepType,
-	type TransactionSteps,
 	balanceQueries,
 	collectableKeys,
+	ExecuteType,
 	getMarketplaceClient,
+	type Step,
+	StepType,
+	type TransactionSteps,
 } from '../../../../_internal';
 import { useAnalytics } from '../../../../_internal/databeat';
-import { TransactionType } from '../../../../_internal/types';
 import type { OfferInput } from '../../../../_internal/types';
+import { TransactionType } from '../../../../_internal/types';
 import type {
 	SignatureStep,
 	TransactionStep,
@@ -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,
@@ -58,7 +58,7 @@ export const useTransactionSteps = ({
 		});
 	const { data: currency } = useCurrency({
 		chainId,
-		currencyAddress: offerInput.offer.currencyAddress,
+		currencyAddress: offerInput.offer.currencyAddress as Address,
 	});
 
 	const getOfferSteps = async () => {
@@ -75,7 +75,7 @@ export const useTransactionSteps = ({
 				orderbook: orderbookKind,
 				offer: {
 					...offerInput.offer,
-					expiry,
+					expiry: new Date(Number(offerInput.offer.expiry) * 1000),
 				},
 			});
 
@@ -106,7 +106,7 @@ export const useTransactionSteps = ({
 			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
 			steps$.approval.isExecuting.set(false);
 			steps$.approval.exist.set(false);
-		} catch (error) {
+		} catch (_error) {
 			steps$.approval.isExecuting.set(false);
 		}
 	};
@@ -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/MakeOfferModal/index.tsx

@@ -1,5 +1,5 @@
 import type { ModalCallbacks } from '../_internal/types';
-import { type OpenMakeOfferModalArgs, makeOfferModal$ } from './store';
+import { makeOfferModal$, type OpenMakeOfferModalArgs } from './store';
 
 export type ShowMakeOfferModalArgs = Exclude<
 	OpenMakeOfferModalArgs,

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

@@ -2,8 +2,8 @@
 
 import { getNetwork } from '@0xsequence/connect';
 import { NetworkType } from '@0xsequence/network';
-import { Show, observer } from '@legendapp/state/react';
-import { parseUnits } from 'viem';
+import { observer, Show } from '@legendapp/state/react';
+import { type Address, parseUnits } from 'viem';
 import type { Price } from '../../../../types';
 import type { FeeOption } from '../../../../types/waas-types';
 import type { MarketplaceKind } from '../../../_internal/api/marketplace.gen';
@@ -50,7 +50,7 @@ const Modal = observer(() => {
 		isError: currencyError,
 	} = useCurrency({
 		chainId,
-		currencyAddress: order?.priceCurrencyAddress ?? '',
+		currencyAddress: order?.priceCurrencyAddress as Address | undefined,
 	});
 	const { wallet } = useWallet();
 	const feeOptionsVisible = selectWaasFeeOptions$.isVisible.get();

package/src/react/ui/modals/SellModal/__tests__/Modal.test.tsx

@@ -2,13 +2,15 @@ import { cleanup, render, renderHook, screen, waitFor } from '@test';
 import { TEST_COLLECTIBLE } from '@test/const';
 import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { useSellModal } from '..';
 import { StepType, WalletKind } from '../../../../_internal';
-import { createMockStep } from '../../../../_internal/api/__mocks__/marketplace.msw';
-import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import {
+	createMockStep,
+	mockOrder,
+} from '../../../../_internal/api/__mocks__/marketplace.msw';
 import * as walletModule from '../../../../_internal/wallet/useWallet';
-import { SellModal } from '../Modal';
+import { useSellModal } from '..';
 import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
+import { SellModal } from '../Modal';
 
 const defaultArgs = {
 	collectionAddress: TEST_COLLECTIBLE.collectionAddress,

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

@@ -1,14 +1,14 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
 import {
 	type GenerateSellTransactionArgs,
+	getMarketplaceClient,
 	type MarketplaceKind,
 	type OrderData,
 	StepType,
-	getMarketplaceClient,
 } 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/useSell.tsx

@@ -43,7 +43,6 @@ export const useSell = ({
 			marketplace,
 		});
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (tokenApproval?.step && !tokenApprovalIsLoading) {
 			steps$.approval.exist.set(true);