@0xsequence/marketplace-sdk 1.0.0 → 1.1.1

package/src/react/ui/modals/BuyModal/hooks/__tests__/useERC721SalePaymentParams.test.tsx

@@ -59,6 +59,7 @@ describe('getERC721SalePaymentParams', () => {
 			nativeTokenAddress: undefined,
 			checkoutProvider: undefined,
 			quantity: 1,
+			onRampProvider: undefined,
 		};
 
 		const result = await getERC721SalePaymentParams(params);
@@ -101,6 +102,7 @@ describe('getERC721SalePaymentParams', () => {
 			nativeTokenAddress: undefined,
 			checkoutProvider: 'stripe',
 			quantity: 1,
+			onRampProvider: undefined,
 		};
 
 		const result = await getERC721SalePaymentParams(params);
@@ -122,6 +124,7 @@ describe('getERC721SalePaymentParams', () => {
 			nativeTokenAddress: undefined,
 			checkoutProvider: undefined,
 			quantity: 1,
+			onRampProvider: undefined,
 		};
 
 		const result = await getERC721SalePaymentParams(params);
@@ -143,6 +146,7 @@ describe('getERC721SalePaymentParams', () => {
 			nativeTokenAddress: undefined,
 			checkoutProvider: undefined,
 			quantity: 5,
+			onRampProvider: undefined,
 		};
 
 		const result = await getERC721SalePaymentParams(params);
@@ -245,7 +249,22 @@ describe('useERC721SalePaymentParams', () => {
 		expect(result.current.data).toBeUndefined();
 	});
 
-	it('should use proper query key', () => {
+	it('should use proper query key', async () => {
+		// Ensure useAccount returns a connected address
+		const { useAccount } = vi.mocked(await import('wagmi'));
+		useAccount.mockReturnValue({
+			address: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266' as Address,
+			isConnected: true,
+			isConnecting: false,
+			isDisconnected: false,
+			isReconnecting: false,
+			connector: null,
+			addresses: undefined,
+			chain: undefined,
+			chainId: undefined,
+			status: 'connected',
+		} as never);
+
 		const args = {
 			salesContractAddress: mockSalesContractAddress,
 			collectionAddress: mockCollectionAddress,

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

@@ -5,7 +5,11 @@ import type {
 	CheckoutOptions,
 	CheckoutOptionsItem,
 } from '../../../../_internal';
-import { getQueryClient } from '../../../../_internal';
+import {
+	balanceQueries,
+	collectableKeys,
+	getQueryClient,
+} from '../../../../_internal';
 import {
 	buyModalStore,
 	useBuyAnalyticsId,
@@ -59,8 +63,10 @@ export const useERC1155Checkout = ({
 		wallet: accountAddress ?? '',
 		// Pass checkout options if available
 		...(checkoutOptions && { checkoutOptions }),
-		onSuccess: (hash: string) => {
-			onSuccess({ hash: hash as Hash });
+		onSuccess: (txHash?: string) => {
+			if (txHash) {
+				onSuccess({ hash: txHash as Hash });
+			}
 		},
 		onError: (error: Error) => {
 			onError(error);
@@ -68,7 +74,14 @@ export const useERC1155Checkout = ({
 		onClose: () => {
 			const queryClient = getQueryClient();
 			queryClient.invalidateQueries({
-				predicate: (query) => !query.meta?.persistent,
+				queryKey: balanceQueries.inventory,
+			});
+			queryClient.invalidateQueries({
+				queryKey: [...collectableKeys.userBalances],
+				refetchType: 'inactive',
+			});
+			queryClient.invalidateQueries({
+				queryKey: collectableKeys.listPrimarySaleItems,
 			});
 			buyModalStore.send({ type: 'close' });
 		},
@@ -78,6 +91,9 @@ export const useERC1155Checkout = ({
 			saleAnalyticsId,
 		},
 		successActionButtons: buyModalProps.successActionButtons,
+		...(buyModalProps.onRampProvider && {
+			onRampProvider: buyModalProps.onRampProvider,
+		}),
 	});
 
 	return {

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

@@ -10,7 +10,10 @@ import {
 import { useAccount } from 'wagmi';
 import { BuyModalErrorFactory } from '../../../../../types/buyModalErrors';
 import { ERC721_SALE_ABI_V0 } from '../../../../../utils/abi';
-import { getQueryClient } from '../../../../_internal';
+import {
+	getQueryClient,
+	type TransactionOnRampProvider,
+} from '../../../../_internal';
 import type { ActionButton, ModalCallbacks } from '../../_internal/types';
 import {
 	buyModalStore,
@@ -60,6 +63,7 @@ interface GetERC721SalePaymentParams {
 	checkoutProvider?: string;
 	quantity: number;
 	successActionButtons?: ActionButton[];
+	onRampProvider: TransactionOnRampProvider | undefined;
 }
 
 export const getERC721SalePaymentParams = async ({
@@ -76,6 +80,7 @@ export const getERC721SalePaymentParams = async ({
 	checkoutProvider,
 	quantity,
 	successActionButtons,
+	onRampProvider,
 }: GetERC721SalePaymentParams) => {
 	try {
 		const purchaseTransactionData = encodeERC721MintData({
@@ -107,8 +112,10 @@ export const getERC721SalePaymentParams = async ({
 			collectionAddress,
 			recipientAddress: address,
 			creditCardProviders,
-			onSuccess: (hash: string) => {
-				callbacks?.onSuccess?.({ hash: hash as Hash });
+			onSuccess: (txHash?: string) => {
+				if (txHash) {
+					callbacks?.onSuccess?.({ hash: txHash as Hash });
+				}
 			},
 			onError: callbacks?.onError,
 			onClose: () => {
@@ -130,6 +137,7 @@ export const getERC721SalePaymentParams = async ({
 				},
 			}),
 			successActionButtons,
+			onRampProvider,
 		} satisfies SelectPaymentSettings;
 	} catch (error) {
 		// Convert to structured error for better debugging
@@ -201,6 +209,7 @@ export const useERC721SalePaymentParams = (
 						checkoutProvider,
 						quantity,
 						successActionButtons: buyModalProps.successActionButtons,
+						onRampProvider: buyModalProps.onRampProvider,
 					})
 			: skipToken,
 	});

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

@@ -12,6 +12,7 @@ import {
 	type MarketplaceKind,
 	type Step,
 	StepType,
+	type TransactionOnRampProvider,
 	WalletKind,
 } from '../../../../_internal';
 import { useConfig } from '../../../../hooks';
@@ -44,6 +45,7 @@ interface GetBuyCollectableParams {
 	skipNativeBalanceCheck: boolean | undefined;
 	nativeTokenAddress: string | undefined;
 	buyAnalyticsId: string;
+	onRampProvider: TransactionOnRampProvider | undefined;
 }
 
 export const getBuyCollectableParams = async ({
@@ -64,6 +66,7 @@ export const getBuyCollectableParams = async ({
 	skipNativeBalanceCheck,
 	nativeTokenAddress,
 	buyAnalyticsId,
+	onRampProvider,
 }: GetBuyCollectableParams) => {
 	const marketplaceClient = getMarketplaceClient(config);
 	const { steps } = await marketplaceClient.generateBuyTransaction({
@@ -131,8 +134,10 @@ export const getBuyCollectableParams = async ({
 		collectionAddress,
 		recipientAddress: address,
 		creditCardProviders,
-		onSuccess: (hash: string) => {
-			callbacks?.onSuccess?.({ hash: hash as Hash });
+		onSuccess: (txHash?: string) => {
+			if (txHash) {
+				callbacks?.onSuccess?.({ hash: txHash as Hash });
+			}
 		},
 		supplementaryAnalyticsInfo: {
 			requestId: orderId,
@@ -161,6 +166,7 @@ export const getBuyCollectableParams = async ({
 				contractId: transakContractId,
 			},
 		}),
+		onRampProvider,
 		successActionButtons: callbacks?.successActionButtons,
 	} satisfies SelectPaymentSettings;
 };
@@ -192,6 +198,7 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 		collectionAddress,
 		skipNativeBalanceCheck,
 		nativeTokenAddress,
+		onRampProvider,
 	} = buyModalProps;
 
 	// Extract Marketplace-specific properties using type guard
@@ -251,7 +258,9 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 						skipNativeBalanceCheck,
 						nativeTokenAddress,
 						buyAnalyticsId,
+						onRampProvider,
 					})
 			: skipToken,
+		retry: false,
 	});
 };

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

@@ -1,11 +1,12 @@
 import { createStore } from '@xstate/store';
 import { useSelector } from '@xstate/store/react';
 import type { Address, Hash } from 'viem';
-import type { MarketplaceType } from '../../../../types';
+import type { CardType } from '../../../../types';
 import type {
 	CheckoutOptionsItem,
 	MarketplaceKind,
 	Step,
+	TransactionOnRampProvider,
 } from '../../../_internal';
 import type { useAnalytics } from '../../../_internal/databeat';
 import { flattenAnalyticsArgs } from '../../../_internal/databeat/utils';
@@ -35,14 +36,16 @@ export type BuyModalBaseProps = {
 	collectionAddress: Address;
 	skipNativeBalanceCheck?: boolean;
 	nativeTokenAddress?: Address;
-	marketplaceType?: MarketplaceType;
+	cardType?: CardType;
 	customCreditCardProviderCallback?: PaymentModalProps['customCreditCardProviderCallback'];
 	successActionButtons?: ActionButton[];
+	hideQuantitySelector?: boolean;
+	onRampProvider?: TransactionOnRampProvider;
 };
 
 // Shop type modal props
 export type ShopBuyModalProps = BuyModalBaseProps & {
-	marketplaceType: 'shop';
+	cardType: 'shop';
 	salesContractAddress: Address;
 	items: Array<Partial<CheckoutOptionsItem> & { tokenId?: string }>;
 	quantityDecimals: number;
@@ -56,7 +59,7 @@ export type ShopBuyModalProps = BuyModalBaseProps & {
 
 // Marketplace type modal props
 export type MarketplaceBuyModalProps = BuyModalBaseProps & {
-	marketplaceType?: 'market';
+	cardType?: 'market';
 	collectibleId: string;
 	marketplace: MarketplaceKind;
 	orderId: string;
@@ -66,14 +69,14 @@ export type BuyModalProps = ShopBuyModalProps | MarketplaceBuyModalProps;
 
 // Type guard functions
 export function isShopProps(props: BuyModalProps): props is ShopBuyModalProps {
-	return props.marketplaceType === 'shop';
+	return props.cardType === 'shop';
 }
 
 export function isMarketProps(
 	props: BuyModalProps,
 ): props is MarketplaceBuyModalProps {
 	// Default to MARKET type for backward compatibility
-	return !props.marketplaceType || props.marketplaceType === 'market';
+	return !props.cardType || props.cardType === 'market';
 }
 
 export type onSuccessCallback = ({

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

@@ -2,6 +2,7 @@
 
 import { observer, Show, use$ } from '@legendapp/state/react';
 import * as dnum from 'dnum';
+import { useState } from 'react';
 import { parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../../../types/waas-types';
@@ -12,8 +13,10 @@ import {
 	useCollectible,
 	useCollection,
 	useMarketCurrencies,
+	useMarketplaceConfig,
 } from '../../../hooks';
 import { useConnectorMetadata } from '../../../hooks/config/useConnectorMetadata';
+import { ErrorLogBox } from '../../components/_internals/ErrorLogBox';
 import {
 	ActionModal,
 	type ActionModalProps,
@@ -45,10 +48,18 @@ const Modal = observer(() => {
 		chainId,
 		listingPrice,
 		collectibleId,
-		orderbookKind,
+		orderbookKind: orderbookKindProp,
 		callbacks,
 		listingIsBeingProcessed,
 	} = state;
+	const { data: marketplaceConfig } = useMarketplaceConfig();
+	const [error, setError] = useState<Error | undefined>(undefined);
+
+	const collectionConfig = marketplaceConfig?.market.collections.find(
+		(c) => c.itemsAddress === collectionAddress,
+	);
+	const orderbookKind =
+		orderbookKindProp ?? collectionConfig?.destinationMarketplace;
 	const steps$ = createListingModal$.steps;
 	const { isWaaS } = useConnectorMetadata();
 	const { isVisible: feeOptionsVisible, selectedFeeOption } =
@@ -107,30 +118,40 @@ const Modal = observer(() => {
 			)
 		: 0;
 
-	const { isLoading, executeApproval, createListing, tokenApprovalIsLoading } =
-		useCreateListing({
-			listingInput: {
-				contractType: collection?.type as ContractType,
-				listing: {
-					tokenId: collectibleId,
-					quantity: parseUnits(
-						createListingModal$.quantity.get(),
-						collectible?.decimals || 0,
-					).toString(),
-					expiry: dateToUnixTime(createListingModal$.expiry.get()),
-					currencyAddress: listingPrice.currency.contractAddress,
-					pricePerToken: listingPrice.amountRaw,
-				},
+	const {
+		isLoading,
+		executeApproval,
+		createListing,
+		tokenApprovalIsLoading,
+		isError: tokenApprovalIsError,
+	} = useCreateListing({
+		listingInput: {
+			contractType: collection?.type as ContractType,
+			listing: {
+				tokenId: collectibleId,
+				quantity: parseUnits(
+					createListingModal$.quantity.get(),
+					collectible?.decimals || 0,
+				).toString(),
+				expiry: dateToUnixTime(createListingModal$.expiry.get()),
+				currencyAddress: listingPrice.currency.contractAddress,
+				pricePerToken: listingPrice.amountRaw,
 			},
-			chainId,
-			collectionAddress,
-			orderbookKind,
-			callbacks,
-			closeMainModal: () => createListingModal$.close(),
-			steps$: steps$,
-		});
+		},
+		chainId,
+		collectionAddress,
+		orderbookKind,
+		callbacks,
+		closeMainModal: () => createListingModal$.close(),
+		steps$: steps$,
+	});
 
-	if (collectableIsError || collectionIsError || currenciesIsError) {
+	if (
+		collectableIsError ||
+		collectionIsError ||
+		currenciesIsError ||
+		tokenApprovalIsError
+	) {
 		return (
 			<ErrorModal
 				isOpen={createListingModal$.isOpen.get()}
@@ -166,18 +187,26 @@ const Modal = observer(() => {
 			});
 		} catch (error) {
 			console.error('Create listing failed:', error);
+			setError(error as Error);
 		} finally {
 			createListingModal$.listingIsBeingProcessed.set(false);
 			steps$.transaction.isExecuting.set(false);
 		}
 	};
 
+	const handleApproveToken = async () => {
+		await executeApproval().catch((error) => {
+			console.error('Approve TOKEN failed:', error);
+			setError(error as Error);
+		});
+	};
+
 	const listCtaLabel = getActionLabel('List item for sale');
 
 	const ctas = [
 		{
 			label: 'Approve TOKEN',
-			onClick: async () => await executeApproval(),
+			onClick: handleApproveToken,
 			hidden: !steps$.approval.exist.get(),
 			pending: steps$?.approval.isExecuting.get(),
 			variant: 'glass' as const,
@@ -237,6 +266,8 @@ const Modal = observer(() => {
 						createListingModal$.listingPrice.currency.set(newCurrency);
 					}}
 					disabled={shouldHideListButton}
+					orderbookKind={orderbookKind}
+					modalType="listing"
 				/>
 
 				{listingPrice.amountRaw !== '0' && (
@@ -287,6 +318,14 @@ const Modal = observer(() => {
 					titleOnConfirm="Processing listing..."
 				/>
 			)}
+
+			{error && (
+				<ErrorLogBox
+					title="An error occurred while listing"
+					message="Please try again"
+					error={error}
+				/>
+			)}
 		</ActionModal>
 	);
 });

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

@@ -34,6 +34,8 @@ describe('MakeOfferModal', () => {
 			},
 			isLoading: false,
 			isSuccess: true,
+			isError: false,
+			error: null,
 		});
 
 		// Render the modal
@@ -64,6 +66,8 @@ describe('MakeOfferModal', () => {
 			},
 			isLoading: false,
 			isSuccess: true,
+			isError: false,
+			error: null,
 		});
 
 		// Render the modal

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

@@ -2,6 +2,7 @@
 
 import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
+import type { Address } from 'viem';
 import type { MarketCollection } from '../../../../../types/new-marketplace-types';
 import { compareAddress } from '../../../../../utils';
 import {
@@ -23,7 +24,7 @@ export interface ListingInput {
 interface UseCreateListingArgs {
 	listingInput: ListingInput;
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	orderbookKind?: OrderbookKind;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;
@@ -51,18 +52,22 @@ export const useCreateListing = ({
 		collectionConfig?.destinationMarketplace ??
 		OrderbookKind.sequence_marketplace_v2;
 
-	const { data: tokenApproval, isLoading: tokenApprovalIsLoading } =
-		useGetTokenApprovalData({
-			chainId,
-			tokenId: listingInput.listing.tokenId,
-			collectionAddress,
-			currencyAddress: listingInput.listing.currencyAddress,
-			contractType: listingInput.contractType,
-			orderbook: orderbookKind,
-			query: {
-				enabled: !marketplaceIsLoading,
-			},
-		});
+	const {
+		data: tokenApproval,
+		isLoading: tokenApprovalIsLoading,
+		isError,
+		error,
+	} = useGetTokenApprovalData({
+		chainId,
+		tokenId: listingInput.listing.tokenId,
+		collectionAddress,
+		currencyAddress: listingInput.listing.currencyAddress,
+		contractType: listingInput.contractType,
+		orderbook: orderbookKind,
+		query: {
+			enabled: !marketplaceIsLoading,
+		},
+	});
 
 	useEffect(() => {
 		if (tokenApproval?.step && !tokenApprovalIsLoading) {
@@ -87,5 +92,7 @@ export const useCreateListing = ({
 		createListing,
 		tokenApprovalStepExists: tokenApproval?.step !== null,
 		tokenApprovalIsLoading,
+		isError,
+		error,
 	};
 };

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

@@ -43,7 +43,7 @@ export const useGetTokenApprovalData = (
 	const isEnabled =
 		address && (params.query?.enabled ?? true) && !!params.currencyAddress;
 
-	const { data, isLoading, isSuccess } = useQuery({
+	const { data, isLoading, isSuccess, isError, error } = useQuery({
 		queryKey: ['token-approval-data', params, address],
 		queryFn: isEnabled
 			? async () => {
@@ -55,6 +55,7 @@ export const useGetTokenApprovalData = (
 						contractType: params.contractType,
 						orderbook: params.orderbook,
 						listing,
+						additionalFees: [],
 					} satisfies GenerateListingTransactionArgs;
 					const steps = await marketplaceClient
 						.generateListingTransaction(args)
@@ -80,5 +81,7 @@ export const useGetTokenApprovalData = (
 		data,
 		isLoading,
 		isSuccess,
+		isError,
+		error,
 	};
 };

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

@@ -26,7 +26,7 @@ import type { ModalCallbacks } from '../../_internal/types';
 interface UseTransactionStepsArgs {
 	listingInput: ListingInput;
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	orderbookKind: OrderbookKind;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;
@@ -78,6 +78,7 @@ export const useTransactionSteps = ({
 					...listingInput.listing,
 					expiry: new Date(Number(listingInput.listing.expiry) * 1000),
 				},
+				additionalFees: [],
 			});
 
 			return steps;