@0xsequence/marketplace-sdk 0.7.0 → 0.8.1

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

@@ -0,0 +1,200 @@
+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,
+	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;
+}
+
+export const getBuyCollectableParams = async ({
+	chainId,
+	collectionAddress,
+	collectibleId,
+	callbacks,
+	priceCurrencyAddress,
+	customCreditCardProviderCallback,
+	config,
+	wallet,
+	marketplace,
+	orderId,
+	quantity,
+	collectable,
+	checkoutOptions,
+	fee,
+}: 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: {
+			orderId: orderId,
+			marketplaceKind: marketplace,
+		},
+		onError: callbacks?.onError,
+		onClose: () => {
+			const queryClient = getQueryClient();
+			queryClient.invalidateQueries();
+			buyModalStore.send({ type: 'close' });
+		},
+		...(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;
+}
+
+export const usePaymentModalParams = (args: usePaymentModalParams) => {
+	const {
+		wallet,
+		marketplace,
+		collectable,
+		checkoutOptions,
+		priceCurrencyAddress,
+		quantity,
+	} = args;
+
+	const {
+		chainId,
+		collectionAddress,
+		collectibleId,
+		orderId,
+		customCreditCardProviderCallback,
+		skipNativeBalanceCheck,
+	} = useBuyModalProps();
+	const config = useConfig();
+	const fee = useFees({
+		chainId,
+		collectionAddress,
+	});
+	const onSuccess = useOnSuccess();
+	const onError = useOnError();
+
+	const enabled =
+		!!wallet &&
+		!!marketplace &&
+		!!collectable &&
+		!!checkoutOptions &&
+		!!priceCurrencyAddress &&
+		!!quantity;
+
+	return useQuery({
+		queryKey: ['buyCollectableParams', args, quantity, fee],
+		queryFn: enabled
+			? () =>
+					getBuyCollectableParams({
+						chainId,
+						config,
+						wallet,
+						collectionAddress,
+						collectibleId,
+						marketplace,
+						orderId,
+						quantity,
+						collectable,
+						checkoutOptions,
+						fee,
+						priceCurrencyAddress,
+						callbacks: {
+							onSuccess: onSuccess,
+							onError: onError,
+						},
+						customCreditCardProviderCallback,
+						skipNativeBalanceCheck,
+					})
+			: skipToken,
+	});
+};

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

@@ -1,20 +1,10 @@
-import type { Hex } from 'viem';
-import type { Order } from '../../../_internal';
 import type { ModalCallbacks } from '../_internal/types';
-import { buyModal$ } from './store';
-
-export type ShowBuyModalArgs = {
-	chainId: string;
-	collectionAddress: Hex;
-	tokenId: string;
-	order: Order;
-	customProviderCallback?: (args: { data: string; value: string }) => void;
-};
+import { type BuyModalProps, buyModalStore } from './store';
 
 export const useBuyModal = (callbacks?: ModalCallbacks) => {
 	return {
-		show: (args: ShowBuyModalArgs) =>
-			buyModal$.open({ ...args, defaultCallbacks: callbacks }),
-		close: () => buyModal$.close(),
+		show: (args: BuyModalProps) =>
+			buyModalStore.send({ type: 'open', props: args, ...callbacks }),
+		close: () => buyModalStore.send({ type: 'close' }),
 	};
 };

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

@@ -1,82 +1,77 @@
-import { observable } from '@legendapp/state';
-import type { ShowBuyModalArgs } from '.';
-import type { Order } from '../../../_internal';
-import type { ModalCallbacks } from '../_internal/types';
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
+import type { Address, Hash } from 'viem';
+import type { MarketplaceKind, Step } from '../../../_internal';
 
-const buyState = {
-	order: undefined as unknown as Order,
-	quantity: '1',
-	invalidQuantity: false,
-	checkoutModalIsLoading: false,
-	checkoutModalLoaded: false,
-	purchaseProcessing: false,
-	customProviderCallback: null,
-} as const;
+export type BuyModalProps = {
+	orderId: string;
+	chainId: number;
+	collectionAddress: Address;
+	collectibleId: string;
+	marketplace: MarketplaceKind;
+	customCreditCardProviderCallback?: (buyStep: Step) => void;
+	skipNativeBalanceCheck?: boolean;
+};
 
-export interface BuyModalState {
-	isOpen: boolean;
-	open: (
-		args: ShowBuyModalArgs & {
-			callbacks?: ModalCallbacks;
-			defaultCallbacks?: ModalCallbacks;
-		},
-	) => void;
-	close: () => void;
-	state: {
-		order: Order;
-		quantity: string;
-		invalidQuantity: boolean;
-		checkoutModalIsLoading: boolean;
-		checkoutModalLoaded: boolean;
-		purchaseProcessing: boolean;
-		customProviderCallback?:
-			| ((args: { data: string; value: string }) => void)
-			| null;
-	};
-	setCheckoutModalIsLoading: (isLoading: boolean) => void;
-	setCheckoutModalLoaded: (isLoaded: boolean) => void;
-	setPurchaseProcessing: (isProcessing: boolean) => void;
-	callbacks?: ModalCallbacks;
-}
+export type onSuccessCallback = ({
+	hash,
+	orderId,
+}: {
+	hash?: Hash;
+	orderId?: string;
+}) => void;
+export type onErrorCallback = (error: Error) => void;
 
-export const initialState: BuyModalState = {
+const initialContext = {
 	isOpen: false,
-	open: ({
-		callbacks,
-		defaultCallbacks,
-		...args
-	}: ShowBuyModalArgs & {
-		callbacks?: ModalCallbacks;
-		defaultCallbacks?: ModalCallbacks;
-	}) => {
-		buyModal$.state.set({
-			quantity: args.order.quantityAvailableFormatted,
-			order: args.order,
-			invalidQuantity: false,
-			checkoutModalIsLoading: false,
-			checkoutModalLoaded: false,
-			purchaseProcessing: false,
-			customProviderCallback: args.customProviderCallback,
-		});
-		buyModal$.callbacks.set(callbacks || defaultCallbacks);
-		buyModal$.isOpen.set(true);
-	},
-	close: () => {
-		buyModal$.isOpen.set(false);
-		buyModal$.callbacks.set(undefined);
-		buyModal$.state.set(buyState);
-	},
-	state: buyState,
-	setCheckoutModalIsLoading: (isLoading: boolean) => {
-		buyModal$.state.checkoutModalIsLoading.set(isLoading);
-	},
-	setCheckoutModalLoaded: (isLoaded: boolean) => {
-		buyModal$.state.checkoutModalLoaded.set(isLoaded);
-	},
-	setPurchaseProcessing: (isProcessing: boolean) => {
-		buyModal$.state.purchaseProcessing.set(isProcessing);
-	},
-	callbacks: undefined,
+	props: null as unknown as BuyModalProps,
+	onError: (() => {}) as onErrorCallback,
+	onSuccess: (() => {}) as onSuccessCallback,
+	quantity: undefined as number | undefined,
 };
 
-export const buyModal$ = observable(initialState);
+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);

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

@@ -3,8 +3,10 @@
 import { Show, observer } from '@legendapp/state/react';
 import { parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
+import type { FeeOption } from '../../../../types/waas-types';
 import { dateToUnixTime } from '../../../../utils/date';
 import type { ContractType } from '../../../_internal';
+import { useWallet } from '../../../_internal/wallet/useWallet';
 import {
 	useBalanceOfCollectible,
 	useCollectible,
@@ -20,8 +22,11 @@ import ExpirationDateSelect from '../_internal/components/expirationDateSelect';
 import FloorPriceText from '../_internal/components/floorPriceText';
 import PriceInput from '../_internal/components/priceInput';
 import QuantityInput from '../_internal/components/quantityInput';
+import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
+import { selectWaasFeeOptions$ } from '../_internal/components/selectWaasFeeOptions/store';
 import TokenPreview from '../_internal/components/tokenPreview';
 import TransactionDetails from '../_internal/components/transactionDetails';
+import { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
 import { useCreateListing } from './hooks/useCreateListing';
 import { createListingModal$ } from './store';
 
@@ -38,8 +43,23 @@ const Modal = observer(() => {
 		collectibleId,
 		orderbookKind,
 		callbacks,
+		listingIsBeingProcessed,
 	} = state;
 	const steps$ = createListingModal$.steps;
+	const { wallet } = useWallet();
+
+	const {
+		shouldHideActionButton: shouldHideListButton,
+		waasFeeOptionsShown,
+		getActionLabel,
+		isTestnet,
+	} = useSelectWaasFeeOptions({
+		chainId,
+		isProcessing: listingIsBeingProcessed,
+		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+		selectedFeeOption:
+			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+	});
 
 	const {
 		data: collectible,
@@ -73,7 +93,7 @@ const Modal = observer(() => {
 	const { address } = useAccount();
 
 	const { data: balance } = useBalanceOfCollectible({
-		chainId: Number(chainId),
+		chainId,
 		collectionAddress,
 		collectableId: collectibleId,
 		userAddress: address ?? undefined,
@@ -125,6 +145,27 @@ const Modal = observer(() => {
 		);
 	}
 
+	const handleCreateListing = async () => {
+		createListingModal$.listingIsBeingProcessed.set(true);
+
+		try {
+			if (wallet?.isWaaS) {
+				selectWaasFeeOptions$.isVisible.set(true);
+			}
+
+			await createListing({
+				isTransactionExecuting: wallet?.isWaaS ? !isTestnet : false,
+			});
+		} catch (error) {
+			console.error('Create listing failed:', error);
+		} finally {
+			createListingModal$.listingIsBeingProcessed.set(false);
+			steps$.transaction.isExecuting.set(false);
+		}
+	};
+
+	const listCtaLabel = getActionLabel('List item for sale');
+
 	const ctas = [
 		{
 			label: 'Approve TOKEN',
@@ -140,16 +181,19 @@ const Modal = observer(() => {
 				isLoading,
 		},
 		{
-			label: 'List item for sale',
-			onClick: () => createListing(),
-			pending: steps$?.transaction.isExecuting.get(),
+			label: listCtaLabel,
+			onClick: handleCreateListing,
+			pending:
+				steps$?.transaction.isExecuting.get() ||
+				createListingModal$.listingIsBeingProcessed.get(),
 			testid: 'create-listing-submit-button',
 			disabled:
 				steps$.approval.exist.get() ||
 				tokenApprovalIsLoading ||
 				listingPrice.amountRaw === '0' ||
 				createListingModal$.invalidQuantity.get() ||
-				isLoading,
+				isLoading ||
+				listingIsBeingProcessed,
 		},
 	] satisfies ActionModalProps['ctas'];
 
@@ -157,11 +201,15 @@ const Modal = observer(() => {
 		<ActionModal
 			isOpen={createListingModal$.isOpen.get()}
 			chainId={Number(chainId)}
-			onClose={() => createListingModal$.close()}
+			onClose={() => {
+				createListingModal$.close();
+				selectWaasFeeOptions$.hide();
+			}}
 			title="List item for sale"
 			ctas={ctas}
 			modalLoading={modalLoading}
 			spinnerContainerClassname="h-[220px]"
+			hideCtas={shouldHideListButton}
 		>
 			<TokenPreview
 				collectionName={collection?.name}
@@ -174,6 +222,7 @@ const Modal = observer(() => {
 					chainId={chainId}
 					collectionAddress={collectionAddress}
 					$price={createListingModal$.listingPrice}
+					disabled={shouldHideListButton}
 				/>
 
 				{listingPrice.amountRaw !== '0' && (
@@ -191,9 +240,13 @@ const Modal = observer(() => {
 					$invalidQuantity={createListingModal$.invalidQuantity}
 					decimals={collectible?.decimals || 0}
 					maxQuantity={balance?.balance}
+					disabled={shouldHideListButton}
 				/>
 			)}
-			<ExpirationDateSelect $date={createListingModal$.expiry} />
+			<ExpirationDateSelect
+				$date={createListingModal$.expiry}
+				disabled={shouldHideListButton}
+			/>
 			<TransactionDetails
 				collectibleId={collectibleId}
 				collectionAddress={collectionAddress}
@@ -202,6 +255,17 @@ const Modal = observer(() => {
 				currencyImageUrl={listingPrice.currency.imageUrl}
 				includeMarketplaceFee={false}
 			/>
+
+			{waasFeeOptionsShown && (
+				<SelectWaasFeeOptions
+					chainId={Number(chainId)}
+					onCancel={() => {
+						createListingModal$.listingIsBeingProcessed.set(false);
+						steps$.transaction.isExecuting.set(false);
+					}}
+					titleOnConfirm="Processing listing..."
+				/>
+			)}
 		</ActionModal>
 	);
 });

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

@@ -24,7 +24,7 @@ vi.mock('@0xsequence/kit', () => ({
 
 const defaultArgs = {
 	collectionAddress: zeroAddress,
-	chainId: '1',
+	chainId: 1,
 	collectibleId: '1',
 };
 
@@ -85,7 +85,7 @@ describe.skip('CreateListingModal', () => {
 		// Reopen modal
 		createListingModal$.open({
 			collectionAddress: '0x456',
-			chainId: '1',
+			chainId: 1,
 			collectibleId: '2',
 		});
 

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

@@ -20,7 +20,7 @@ export interface ListingInput {
 
 interface UseCreateListingArgs {
 	listingInput: ListingInput;
-	chainId: string;
+	chainId: number;
 	collectionAddress: string;
 	orderbookKind?: OrderbookKind;
 	callbacks?: ModalCallbacks;

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

@@ -14,7 +14,7 @@ import {
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 
 export interface UseGetTokenApprovalDataArgs {
-	chainId: string;
+	chainId: number;
 	tokenId: string;
 	collectionAddress: string;
 	currencyAddress: string;

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

@@ -27,7 +27,7 @@ import { useTransactionStatusModal } from '../../_internal/components/transactio
 import type { ModalCallbacks } from '../../_internal/types';
 interface UseTransactionStepsArgs {
 	listingInput: ListingInput;
-	chainId: string;
+	chainId: number;
 	collectionAddress: string;
 	orderbookKind: OrderbookKind;
 	callbacks?: ModalCallbacks;
@@ -49,7 +49,7 @@ export const useTransactionSteps = ({
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const sdkConfig = useConfig();
 	const { data: currencies } = useCurrencies({
-		chainId: Number(chainId),
+		chainId,
 	});
 	const currency = currencies?.find(
 		(currency) =>
@@ -115,11 +115,15 @@ export const useTransactionSteps = ({
 		}
 	};
 
-	const createListing = async () => {
+	const createListing = async ({
+		isTransactionExecuting,
+	}: {
+		isTransactionExecuting: boolean;
+	}) => {
 		if (!wallet) return;
 
 		try {
-			steps$.transaction.isExecuting.set(true);
+			steps$.transaction.isExecuting.set(isTransactionExecuting);
 			const steps = await getListingSteps();
 			const transactionStep = steps?.find(
 				(step) => step.id === StepType.createListing,
@@ -199,7 +203,7 @@ export const useTransactionSteps = ({
 						collectionAddress,
 						currencyAddress: listingInput.listing.currencyAddress,
 						currencySymbol: '',
-						chainId,
+						chainId: chainId.toString(),
 						txnHash: hash || '',
 					},
 					nums: {

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

@@ -18,11 +18,12 @@ type CreateListingState = BaseModalState & {
 	invalidQuantity: boolean;
 	expiry: Date;
 	steps: TransactionSteps;
+	listingIsBeingProcessed: boolean;
 };
 
 export type OpenCreateListingModalArgs = {
 	collectionAddress: Hex;
-	chainId: string;
+	chainId: number;
 	collectibleId: string;
 	orderbookKind?: OrderbookKind;
 	callbacks?: ModalCallbacks;
@@ -58,7 +59,7 @@ const steps = {
 const initialState: CreateListingState = {
 	isOpen: false,
 	collectionAddress: '' as Hex,
-	chainId: '',
+	chainId: 0,
 	collectibleId: '',
 	orderbookKind: OrderbookKind.sequence_marketplace_v2,
 	collectionName: '',
@@ -69,6 +70,7 @@ const initialState: CreateListingState = {
 	expiry: new Date(addDays(new Date(), 7).toJSON()),
 	callbacks: undefined as ModalCallbacks | undefined,
 	steps: { ...steps },
+	listingIsBeingProcessed: false,
 };
 
 const actions: Actions = {
@@ -85,6 +87,9 @@ const actions: Actions = {
 		createListingModal$.set({ ...initialState, ...actions });
 		createListingModal$.listingPrice.set({ ...listingPrice });
 		createListingModal$.steps.set({ ...steps });
+		createListingModal$.listingIsBeingProcessed.set(false);
+		createListingModal$.steps.approval.isExecuting.set(false);
+		createListingModal$.steps.transaction.isExecuting.set(false);
 	},
 };