@0xsequence/marketplace-sdk 1.1.0 → 1.2.0

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

@@ -63,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);
@@ -89,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

@@ -8,10 +8,10 @@ import {
 	type AdditionalFee,
 	getMarketplaceClient,
 	getQueryClient,
-	getSequenceApiClient,
 	type MarketplaceKind,
 	type Step,
 	StepType,
+	type TransactionOnRampProvider,
 	WalletKind,
 } from '../../../../_internal';
 import { useConfig } from '../../../../hooks';
@@ -44,6 +44,7 @@ interface GetBuyCollectableParams {
 	skipNativeBalanceCheck: boolean | undefined;
 	nativeTokenAddress: string | undefined;
 	buyAnalyticsId: string;
+	onRampProvider: TransactionOnRampProvider | undefined;
 }
 
 export const getBuyCollectableParams = async ({
@@ -64,6 +65,7 @@ export const getBuyCollectableParams = async ({
 	skipNativeBalanceCheck,
 	nativeTokenAddress,
 	buyAnalyticsId,
+	onRampProvider,
 }: GetBuyCollectableParams) => {
 	const marketplaceClient = getMarketplaceClient(config);
 	const { steps } = await marketplaceClient.generateBuyTransaction({
@@ -97,23 +99,6 @@ export const getBuyCollectableParams = async ({
 		? ['custom']
 		: checkoutOptions.nftCheckout || [];
 
-	const isTransakSupported = creditCardProviders.includes('transak');
-
-	let transakContractId: string | undefined;
-
-	if (isTransakSupported) {
-		const sequenceApiClient = getSequenceApiClient(config);
-		const transakContractIdResponse =
-			await sequenceApiClient.checkoutOptionsGetTransakContractID({
-				chainId,
-				contractAddress: buyStep.to,
-			});
-
-		if (transakContractIdResponse.contractId !== '') {
-			transakContractId = transakContractIdResponse.contractId;
-		}
-	}
-
 	return {
 		chain: chainId,
 		collectibles: [
@@ -131,8 +116,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,
@@ -156,11 +143,7 @@ export const getBuyCollectableParams = async ({
 				buyModalStore.send({ type: 'close' });
 			},
 		}),
-		...(transakContractId && {
-			transakConfig: {
-				contractId: transakContractId,
-			},
-		}),
+		onRampProvider,
 		successActionButtons: callbacks?.successActionButtons,
 	} satisfies SelectPaymentSettings;
 };
@@ -192,6 +175,7 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 		collectionAddress,
 		skipNativeBalanceCheck,
 		nativeTokenAddress,
+		onRampProvider,
 	} = buyModalProps;
 
 	// Extract Marketplace-specific properties using type guard
@@ -251,7 +235,9 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 						skipNativeBalanceCheck,
 						nativeTokenAddress,
 						buyAnalyticsId,
+						onRampProvider,
 					})
 			: skipToken,
+		retry: false,
 	});
 };

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

@@ -6,6 +6,7 @@ import type {
 	CheckoutOptionsItem,
 	MarketplaceKind,
 	Step,
+	TransactionOnRampProvider,
 } from '../../../_internal';
 import type { useAnalytics } from '../../../_internal/databeat';
 import { flattenAnalyticsArgs } from '../../../_internal/databeat/utils';
@@ -38,6 +39,8 @@ export type BuyModalBaseProps = {
 	cardType?: CardType;
 	customCreditCardProviderCallback?: PaymentModalProps['customCreditCardProviderCallback'];
 	successActionButtons?: ActionButton[];
+	hideQuantitySelector?: boolean;
+	onRampProvider?: TransactionOnRampProvider;
 };
 
 // Shop type modal props

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

@@ -52,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) {
@@ -88,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

@@ -78,6 +78,7 @@ export const useTransactionSteps = ({
 					...listingInput.listing,
 					expiry: new Date(Number(listingInput.listing.expiry) * 1000),
 				},
+				additionalFees: [],
 			});
 
 			return steps;

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

@@ -7,14 +7,17 @@ import { parseUnits } from 'viem';
 import type { FeeOption } from '../../../../types/waas-types';
 import { dateToUnixTime } from '../../../../utils/date';
 import { getNetwork } from '../../../../utils/network';
-import { ContractType } from '../../../_internal';
+import { ContractType, OrderbookKind } from '../../../_internal';
 import {
 	useCollectible,
 	useCollection,
 	useLowestListing,
 	useMarketCurrencies,
+	useMarketplaceConfig,
 } from '../../../hooks';
 import { useConnectorMetadata } from '../../../hooks/config/useConnectorMetadata';
+import { useRoyalty } from '../../../hooks/utils/useRoyalty';
+import { ErrorLogBox } from '../../components/_internals/ErrorLogBox';
 import { ActionModal } from '../_internal/components/actionModal/ActionModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
 import ExpirationDateSelect from '../_internal/components/expirationDateSelect';
@@ -45,11 +48,21 @@ const Modal = observer(() => {
 		offerPriceChanged,
 		invalidQuantity,
 		collectibleId,
-		orderbookKind,
+		orderbookKind: orderbookKindProp,
 		callbacks,
 	} = 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$ = makeOfferModal$.steps;
 	const [insufficientBalance, setInsufficientBalance] = useState(false);
+	const [openseaLowestPriceCriteriaMet, setOpenseaLowestPriceCriteriaMet] =
+		useState(true);
 	const {
 		data: collectible,
 		isLoading: collectableIsLoading,
@@ -88,12 +101,28 @@ const Modal = observer(() => {
 		isError: currenciesIsError,
 	} = useMarketCurrencies({
 		chainId,
+		collectionAddress,
 		includeNativeCurrency: false,
 	});
+
+	const { data: royalty, isLoading: royaltyLoading } = useRoyalty({
+		chainId,
+		collectionAddress,
+		collectibleId,
+	});
+
 	const modalLoading =
-		collectableIsLoading || collectionIsLoading || currenciesLoading;
+		collectableIsLoading ||
+		collectionIsLoading ||
+		currenciesLoading ||
+		royaltyLoading;
 
-	const { isLoading, executeApproval, makeOffer } = useMakeOffer({
+	const {
+		isLoading,
+		executeApproval,
+		makeOffer,
+		isError: approvalIsError,
+	} = useMakeOffer({
 		offerInput: {
 			contractType: collection?.type as ContractType,
 			offer: {
@@ -109,8 +138,8 @@ const Modal = observer(() => {
 		},
 		chainId,
 		collectionAddress,
-		orderbookKind,
 		callbacks,
+		orderbookKind,
 		closeMainModal: () => makeOfferModal$.close(),
 		steps$: steps$,
 	});
@@ -126,7 +155,12 @@ const Modal = observer(() => {
 		},
 	});
 
-	if (collectableIsError || collectionIsError || currenciesIsError) {
+	if (
+		collectableIsError ||
+		collectionIsError ||
+		currenciesIsError ||
+		approvalIsError
+	) {
 		return (
 			<ErrorModal
 				isOpen={makeOfferModal$.isOpen.get()}
@@ -137,7 +171,12 @@ const Modal = observer(() => {
 		);
 	}
 
-	if (!modalLoading && (!currencies || currencies.length === 0)) {
+	const shouldShowNoERC20Error =
+		!currenciesLoading &&
+		!currenciesIsError &&
+		(!currencies || currencies.length === 0);
+
+	if (shouldShowNoERC20Error) {
 		return (
 			<ErrorModal
 				isOpen={makeOfferModal$.isOpen.get()}
@@ -164,18 +203,26 @@ const Modal = observer(() => {
 			});
 		} catch (error) {
 			console.error('Make offer failed:', error);
+			setError(error as Error);
 		} finally {
 			makeOfferModal$.offerIsBeingProcessed.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 offerCtaLabel = getActionLabel('Make offer');
 
 	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,
@@ -184,7 +231,9 @@ const Modal = observer(() => {
 				isLoading ||
 				insufficientBalance ||
 				offerPrice.amountRaw === '0' ||
-				!offerPriceChanged,
+				!offerPriceChanged ||
+				(orderbookKind === OrderbookKind.opensea &&
+					!openseaLowestPriceCriteriaMet),
 		},
 		{
 			label: offerCtaLabel,
@@ -198,7 +247,9 @@ const Modal = observer(() => {
 				offerPrice.amountRaw === '0' ||
 				insufficientBalance ||
 				isLoading ||
-				invalidQuantity,
+				invalidQuantity ||
+				(orderbookKind === OrderbookKind.opensea &&
+					!openseaLowestPriceCriteriaMet),
 		},
 	];
 
@@ -240,7 +291,15 @@ const Modal = observer(() => {
 					enabled: true,
 					callback: (state) => setInsufficientBalance(state),
 				}}
+				setOpenseaLowestPriceCriteriaMet={(state) =>
+					setOpenseaLowestPriceCriteriaMet(state)
+				}
+				orderbookKind={orderbookKind}
+				modalType="offer"
 				disabled={shouldHideOfferButton}
+				feeData={{
+					royaltyPercentage: royalty ? Number(royalty.percentage) : 0,
+				}}
 			/>
 
 			{collection?.type === ContractType.ERC1155 && (
@@ -298,6 +357,14 @@ const Modal = observer(() => {
 					titleOnConfirm="Processing offer..."
 				/>
 			)}
+
+			{error && (
+				<ErrorLogBox
+					title="An error occurred while making an offer"
+					message="Please try again"
+					error={error}
+				/>
+			)}
 		</ActionModal>
 	);
 });

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

@@ -31,6 +31,8 @@ const mockCurrency = {
 	nativeCurrency: false,
 	createdAt: new Date().toISOString(),
 	updatedAt: new Date().toISOString(),
+	openseaListing: true,
+	openseaOffer: true,
 };
 
 describe('MakeOfferModal', () => {
@@ -45,6 +47,8 @@ describe('MakeOfferModal', () => {
 			data: { step: null }, // No approval needed by default
 			isLoading: false,
 			isSuccess: true,
+			isError: false,
+			error: null,
 		});
 	});
 
@@ -80,6 +84,8 @@ describe('MakeOfferModal', () => {
 			}, // Approval needed
 			isLoading: false,
 			isSuccess: true,
+			isError: false,
+			error: null,
 		});
 
 		// Render the modal
@@ -107,6 +113,8 @@ describe('MakeOfferModal', () => {
 				data: { step: null },
 				isLoading: false,
 				isSuccess: true,
+				isError: false,
+				error: null,
 			});
 		});
 
@@ -123,6 +131,8 @@ describe('MakeOfferModal', () => {
 				}, // Approval needed
 				isLoading: false,
 				isSuccess: true,
+				isError: false,
+				error: null,
 			});
 
 			makeOfferModal$.open(defaultArgs);
@@ -150,6 +160,8 @@ describe('MakeOfferModal', () => {
 				data: { step: null }, // No approval needed
 				isLoading: false,
 				isSuccess: true,
+				isError: false,
+				error: null,
 			});
 
 			makeOfferModal$.open(defaultArgs);