@0xsequence/marketplace-sdk 1.0.0 → 1.1.1

package/src/react/ui/components/marketplace-collectible-card/variants/NonTradableInventoryCard.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import type { ContractType } from '../../../../_internal';
+import { BaseCard } from '../components/BaseCard';
+import { NonTradableInventoryFooter } from '../components/footer';
+import type { NonTradableInventoryCardProps } from '../types';
+
+export function NonTradableInventoryCard({
+	collectibleId,
+	chainId,
+	collectionAddress,
+	collectionType,
+	assetSrcPrefixUrl,
+	cardLoading,
+	balance,
+	balanceIsLoading,
+	collectibleMetadata,
+}: NonTradableInventoryCardProps) {
+	return (
+		<BaseCard
+			collectibleId={collectibleId}
+			image={collectibleMetadata.image}
+			video={collectibleMetadata.video}
+			animationUrl={collectibleMetadata.animation_url}
+			chainId={chainId}
+			collectionAddress={collectionAddress}
+			collectionType={collectionType}
+			assetSrcPrefixUrl={assetSrcPrefixUrl}
+			cardLoading={cardLoading || balanceIsLoading}
+			contractType={collectionType as ContractType}
+			isShop={false}
+			name={collectibleMetadata.name}
+		>
+			<NonTradableInventoryFooter
+				name={collectibleMetadata.name || ''}
+				type={collectionType as ContractType}
+				balance={balance}
+				decimals={collectibleMetadata.decimals}
+			/>
+		</BaseCard>
+	);
+}

package/src/react/ui/components/marketplace-collectible-card/variants/ShopCard.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { CollectibleCardAction } from '../../../../../types';
+import { type CardType, CollectibleCardAction } from '../../../../../types';
 import { ContractType } from '../../../../_internal';
 import { useCurrency } from '../../../../hooks/data/market/useCurrency';
 import { ActionButtonWrapper } from '../components/ActionButtonWrapper';
 import { BaseCard } from '../components/BaseCard';
-import { Footer } from '../Footer';
+import { Footer } from '../components/footer';
 import type { ShopCollectibleCardProps } from '../types';
 
 export function ShopCard({
@@ -15,7 +15,7 @@ export function ShopCard({
 	collectionType,
 	assetSrcPrefixUrl,
 	cardLoading,
-	marketplaceType,
+	cardType,
 	salesContractAddress,
 	tokenMetadata,
 	salePrice,
@@ -23,6 +23,7 @@ export function ShopCard({
 	quantityInitial,
 	quantityRemaining,
 	unlimitedSupply,
+	hideQuantitySelector,
 }: ShopCollectibleCardProps) {
 	const { data: saleCurrency, isLoading: saleCurrencyLoading } = useCurrency({
 		chainId,
@@ -35,8 +36,6 @@ export function ShopCard({
 		},
 	});
 
-	const isLoading = cardLoading || saleCurrencyLoading;
-
 	if (!tokenMetadata || !salePrice) {
 		console.error('Token metadata or sale price is undefined', {
 			tokenMetadata,
@@ -53,8 +52,9 @@ export function ShopCard({
 
 	const action = CollectibleCardAction.BUY;
 
-	const mediaClassName =
-		quantityRemaining === '0' || quantityRemaining === undefined
+	const mediaClassName = unlimitedSupply
+		? 'opacity-100'
+		: quantityRemaining === '0' || quantityRemaining === undefined
 			? 'opacity-50'
 			: 'opacity-100';
 
@@ -65,23 +65,28 @@ export function ShopCard({
 			collectionAddress={collectionAddress}
 			collectionType={collectionType}
 			assetSrcPrefixUrl={assetSrcPrefixUrl}
-			cardLoading={cardLoading}
-			marketplaceType={marketplaceType}
-			isLoading={isLoading}
+			cardLoading={cardLoading || saleCurrencyLoading}
+			cardType={cardType}
 			name={tokenMetadata.name || ''}
 			image={tokenMetadata.image}
 			video={tokenMetadata.video}
 			animationUrl={tokenMetadata.animation_url}
 			mediaClassName={mediaClassName}
+			contractType={collectionType as ContractType}
+			isShop={true}
+			hideQuantitySelector={hideQuantitySelector}
 		>
 			<Footer
+				chainId={chainId}
+				collectionAddress={collectionAddress}
+				collectibleId={collectibleId}
 				name={tokenMetadata.name || ''}
 				type={collectionType}
 				decimals={tokenMetadata.decimals}
 				quantityInitial={quantityInitial}
 				quantityRemaining={quantityRemaining}
 				unlimitedSupply={unlimitedSupply}
-				marketplaceType={marketplaceType}
+				cardType={cardType as CardType}
 				salePriceAmount={salePrice?.amount}
 				salePriceCurrency={saleCurrency}
 			/>
@@ -93,7 +98,7 @@ export function ShopCard({
 				tokenId={collectibleId}
 				action={action}
 				owned={false}
-				marketplaceType={marketplaceType}
+				cardType={cardType as CardType}
 				salesContractAddress={salesContractAddress}
 				salePrice={salePrice}
 				quantityDecimals={quantityDecimals}

package/src/react/ui/modals/BuyModal/__tests__/BuyModalRouter.test.tsx

@@ -199,7 +199,7 @@ describe('BuyModalRouter', () => {
 					collectibleId: '1',
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
-					marketplaceType: 'market',
+					cardType: 'market',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -235,7 +235,7 @@ describe('BuyModalRouter', () => {
 					collectibleId: '1',
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
-					marketplaceType: 'market',
+					cardType: 'market',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -289,7 +289,7 @@ describe('BuyModalRouter', () => {
 
 			render(<BuyModalRouter />);
 
-			expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+			expect(screen.getByText('Loading payment options')).toBeInTheDocument();
 		});
 	});
 
@@ -309,7 +309,7 @@ describe('BuyModalRouter', () => {
 						amount: '1000000000000000000',
 						currencyAddress: '0x0' as `0x${string}`,
 					},
-					marketplaceType: 'shop',
+					cardType: 'shop',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -350,7 +350,7 @@ describe('BuyModalRouter', () => {
 						amount: '1000000000000000000',
 						currencyAddress: '0x0' as `0x${string}`,
 					},
-					marketplaceType: 'shop',
+					cardType: 'shop',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -390,7 +390,7 @@ describe('BuyModalRouter', () => {
 						amount: '1000000000000000000',
 						currencyAddress: '0x0' as `0x${string}`,
 					},
-					marketplaceType: 'shop',
+					cardType: 'shop',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -410,7 +410,7 @@ describe('BuyModalRouter', () => {
 
 			render(<BuyModalRouter />);
 
-			expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+			expect(screen.getByText('Loading payment options')).toBeInTheDocument();
 		});
 	});
 
@@ -474,7 +474,7 @@ describe('BuyModalRouter', () => {
 
 			render(<BuyModalRouter />);
 
-			expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+			expect(screen.getByText('Loading payment options')).toBeInTheDocument();
 		});
 
 		it('should show error modal for unsupported configuration', () => {
@@ -491,7 +491,7 @@ describe('BuyModalRouter', () => {
 						amount: '1000000000000000000',
 						currencyAddress: '0x0' as `0x${string}`,
 					},
-					marketplaceType: 'shop',
+					cardType: 'shop',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -528,7 +528,7 @@ describe('BuyModalRouter', () => {
 					collectibleId: '1',
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
-					// marketplaceType not specified - should default to MARKET
+					// cardType not specified - should default to MARKET
 				},
 				analyticsFn: mockAnalyticsFn,
 			});

package/src/react/ui/modals/BuyModal/__tests__/ERC1155ShopModal.test.tsx

@@ -80,7 +80,7 @@ describe('ERC1155ShopModal', () => {
 					amount: mockShopData.salePrice.amount,
 					currencyAddress: mockShopData.salePrice.currencyAddress as Address,
 				},
-				marketplaceType: 'shop',
+				cardType: 'shop',
 			},
 			analyticsFn: mockAnalyticsFn,
 		});
@@ -168,7 +168,7 @@ describe('ERC1155ShopModal', () => {
 			/>,
 		);
 
-		expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+		expect(screen.getByText('Loading payment options')).toBeInTheDocument();
 		expect(mockOpenCheckoutModal).not.toHaveBeenCalled();
 	});
 
@@ -388,7 +388,7 @@ describe('ERC1155ShopModal', () => {
 			/>,
 		);
 
-		expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+		expect(screen.getByText('Loading payment options')).toBeInTheDocument();
 		expect(mockUseERC1155Checkout).toHaveBeenCalledWith(
 			expect.objectContaining({
 				chainId: 137,

package/src/react/ui/modals/BuyModal/__tests__/Modal.test.tsx.bak

@@ -25,7 +25,7 @@
 //   it("should not render when isOpen is false", () => {
 //     render(<BuyModal />);
 
-//     expect(screen.queryByText("Loading Sequence Pay")).not.toBeInTheDocument();
+//     expect(screen.queryByText("Loading payment options")).not.toBeInTheDocument();
 //     expect(screen.queryByText("Checkout")).not.toBeInTheDocument();
 //     expect(screen.queryByText("Select Quantity")).not.toBeInTheDocument();
 //   });
@@ -81,7 +81,7 @@
 //     });
 //     render(<BuyModal />);
 //     // First should show loading
-//     expect(screen.getByText("Loading Sequence Pay")).toBeInTheDocument();
+//     expect(screen.getByText("Loading payment options")).toBeInTheDocument();
 //     // Then should show quantity modal for ERC1155
 //     await waitFor(
 //       () => {
@@ -107,6 +107,6 @@
 //     render(<BuyModal />);
 
 //     // Should show loading modal
-//     expect(screen.getByText("Loading Sequence Pay")).toBeInTheDocument();
+//     expect(screen.getByText("Loading payment options")).toBeInTheDocument();
 //   });
 // });

package/src/react/ui/modals/BuyModal/__tests__/Modal1155.test.tsx

@@ -60,7 +60,7 @@ describe('ERC1155QuantityModal', () => {
 				collectionAddress: '0x123' as `0x${string}`,
 				collectibleId: '1',
 				marketplace: MarketplaceKind.sequence_marketplace_v2,
-				marketplaceType: 'market',
+				cardType: 'market',
 			},
 			analyticsFn,
 		});
@@ -75,7 +75,7 @@ describe('ERC1155QuantityModal', () => {
 		render(
 			<ERC1155QuantityModal
 				order={testOrder}
-				marketplaceType={'market'}
+				cardType={'market'}
 				chainId={1}
 				quantityDecimals={0}
 				quantityRemaining="10"
@@ -119,7 +119,7 @@ describe('ERC1155QuantityModal', () => {
 		render(
 			<ERC1155QuantityModal
 				order={testOrder}
-				marketplaceType={'market'}
+				cardType={'market'}
 				chainId={1}
 				quantityDecimals={0}
 				quantityRemaining="10"
@@ -162,7 +162,7 @@ describe('ERC1155QuantityModal', () => {
 		render(
 			<ERC1155QuantityModal
 				order={testOrder}
-				marketplaceType={'market'}
+				cardType={'market'}
 				chainId={1}
 				quantityDecimals={0}
 				quantityRemaining="10"
@@ -210,7 +210,7 @@ describe('ERC1155QuantityModal', () => {
 		render(
 			<ERC1155QuantityModal
 				order={testOrder}
-				marketplaceType={'market'}
+				cardType={'market'}
 				chainId={1}
 				quantityDecimals={0}
 				quantityRemaining="10"
@@ -239,7 +239,7 @@ describe('ERC1155QuantityModal', () => {
 	//     render(
 	//       <ERC1155QuantityModal
 	//         order={testOrder}
-	//         marketplaceType={'market'}
+	//         cardType={'market'}
 	//         chainId={1}
 	//       />
 	//     );

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

@@ -26,7 +26,7 @@ describe('BuyModal Store', () => {
 			collectionAddress: '0x123' as `0x${string}`,
 			collectibleId: '1',
 			marketplace: MarketplaceKind.sequence_marketplace_v2,
-			marketplaceType: 'market',
+			cardType: 'market',
 		};
 
 		buyModalStore.send({
@@ -49,7 +49,7 @@ describe('BuyModal Store', () => {
 			collectionAddress: '0x123' as `0x${string}`,
 			collectibleId: '1',
 			marketplace: MarketplaceKind.sequence_marketplace_v2,
-			marketplaceType: 'market',
+			cardType: 'market',
 		};
 
 		buyModalStore.send({
@@ -76,7 +76,7 @@ describe('BuyModal Store', () => {
 			collectionAddress: '0x123' as `0x${string}`,
 			collectibleId: '1',
 			marketplace: MarketplaceKind.sequence_marketplace_v2,
-			marketplaceType: 'market',
+			cardType: 'market',
 		};
 
 		buyModalStore.send({

package/src/react/ui/modals/BuyModal/components/BuyModalRouter.tsx

@@ -48,7 +48,7 @@ export const BuyModalRouter = () => {
 				isOpen={true}
 				chainId={chainId}
 				onClose={() => buyModalStore.send({ type: 'close' })}
-				title="Loading Sequence Pay"
+				title="Loading payment options"
 			/>
 		);
 	}
@@ -61,7 +61,7 @@ export const BuyModalRouter = () => {
 						isOpen={true}
 						chainId={chainId}
 						onClose={() => buyModalStore.send({ type: 'close' })}
-						title="Loading Sequence Pay"
+						title="Loading payment options"
 					/>
 				);
 			}
@@ -80,7 +80,7 @@ export const BuyModalRouter = () => {
 						isOpen={true}
 						chainId={chainId}
 						onClose={() => buyModalStore.send({ type: 'close' })}
-						title="Loading Sequence Pay"
+						title="Loading payment options"
 					/>
 				);
 			}
@@ -100,7 +100,7 @@ export const BuyModalRouter = () => {
 						isOpen={true}
 						chainId={chainId}
 						onClose={() => buyModalStore.send({ type: 'close' })}
-						title="Loading Sequence Pay"
+						title="Loading payment options"
 					/>
 				);
 			}
@@ -122,7 +122,7 @@ export const BuyModalRouter = () => {
 						isOpen={true}
 						chainId={chainId}
 						onClose={() => buyModalStore.send({ type: 'close' })}
-						title="Loading Sequence Pay"
+						title="Loading payment options"
 					/>
 				);
 			}

package/src/react/ui/modals/BuyModal/components/ERC1155BuyModal.tsx

@@ -8,6 +8,9 @@ import type { ContractInfo, TokenMetadata } from '@0xsequence/metadata';
 import { useEffect } from 'react';
 import type { Address } from 'viem';
 import type { CheckoutOptions, Order } from '../../../../_internal';
+import { ErrorLogBox } from '../../../components/_internals/ErrorLogBox';
+import { ActionModal } from '../../_internal/components/actionModal';
+import { LoadingModal } from '../../_internal/components/actionModal/LoadingModal';
 import { usePaymentModalParams } from '../hooks/usePaymentModalParams';
 import {
 	buyModalStore,
@@ -36,7 +39,7 @@ export const ERC1155BuyModal = ({
 }: ERC1155BuyModalProps) => {
 	const quantity = useQuantity();
 	const modalProps = useBuyModalProps();
-	const marketplaceType = modalProps.marketplaceType || 'market';
+	const cardType = modalProps.cardType || 'market';
 	const isShop = isShopProps(modalProps);
 	const quantityDecimals = isShop
 		? modalProps.quantityDecimals
@@ -44,20 +47,43 @@ export const ERC1155BuyModal = ({
 	const quantityRemaining = isShop
 		? modalProps.quantityRemaining?.toString()
 		: order?.quantityRemaining;
+	const unlimitedSupply = isShop ? modalProps.unlimitedSupply : false;
 
-	if (!quantity) {
+	useEffect(() => {
+		if (modalProps.hideQuantitySelector && !quantity) {
+			const minQuantity = quantityDecimals > 0 ? 10 ** quantityDecimals : 1;
+
+			const autoQuantity = unlimitedSupply
+				? minQuantity
+				: Math.min(Number(quantityRemaining), minQuantity);
+
+			buyModalStore.send({
+				type: 'setQuantity',
+				quantity: autoQuantity,
+			});
+		}
+	}, [
+		modalProps.hideQuantitySelector,
+		quantity,
+		quantityDecimals,
+		unlimitedSupply,
+		quantityRemaining,
+	]);
+
+	if (!quantity && !modalProps.hideQuantitySelector) {
 		return (
 			<ERC1155QuantityModal
 				order={order}
-				marketplaceType={marketplaceType}
+				cardType={cardType}
 				quantityDecimals={quantityDecimals}
 				quantityRemaining={quantityRemaining}
+				unlimitedSupply={unlimitedSupply}
 				chainId={chainId}
 			/>
 		);
 	}
 
-	if (!checkoutOptions) {
+	if (!checkoutOptions || !quantity) {
 		return null;
 	}
 
@@ -91,6 +117,7 @@ const Modal = ({
 		data: paymentModalParams,
 		isLoading: isPaymentModalParamsLoading,
 		isError: isPaymentModalParamsError,
+		failureReason,
 	} = usePaymentModalParams({
 		address,
 		quantity,
@@ -101,8 +128,43 @@ const Modal = ({
 		enabled: true,
 	});
 
+	if (failureReason) {
+		return (
+			<ActionModal
+				isOpen={true}
+				onClose={() => {
+					buyModalStore.send({ type: 'close' });
+				}}
+				title={'An error occurred while purchasing'}
+				children={
+					<ErrorLogBox
+						title={failureReason.name}
+						message={failureReason.message}
+						error={failureReason}
+					/>
+				}
+				ctas={[
+					{
+						label: 'Close',
+						onClick: () => {
+							buyModalStore.send({ type: 'close' });
+						},
+					},
+				]}
+				chainId={order.chainId}
+			/>
+		);
+	}
+
 	if (isPaymentModalParamsLoading || !paymentModalParams) {
-		return null;
+		return (
+			<LoadingModal
+				isOpen={true}
+				chainId={order.chainId}
+				onClose={() => buyModalStore.send({ type: 'close' })}
+				title="Loading checkout"
+			/>
+		);
 	}
 
 	if (isPaymentModalParamsError) {

package/src/react/ui/modals/BuyModal/components/ERC1155QuantityModal.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import type { Address } from 'viem';
 import { maxUint256, parseUnits } from 'viem';
 import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../consts';
-import type { MarketplaceType } from '../../../../../types';
+import type { CardType } from '../../../../../types';
 import { formatPriceWithFee } from '../../../../../utils/price';
 import type { Order } from '../../../../_internal';
 import { useMarketplaceConfig } from '../../../../hooks';
@@ -18,7 +18,7 @@ const INFINITY_STRING = maxUint256.toString();
 
 type ERC1155QuantityModalProps = {
 	order?: Order;
-	marketplaceType: MarketplaceType;
+	cardType: CardType;
 	quantityDecimals: number;
 	quantityRemaining: string;
 	unlimitedSupply?: boolean;
@@ -36,7 +36,7 @@ export const ERC1155QuantityModal = ({
 	unlimitedSupply,
 	salePrice,
 	chainId,
-	marketplaceType,
+	cardType,
 }: ERC1155QuantityModalProps) => {
 	const isOpen = useIsOpen();
 
@@ -93,7 +93,7 @@ export const ERC1155QuantityModal = ({
 					quantityStr={localQuantity}
 					salePrice={salePrice}
 					chainId={chainId}
-					marketplaceType={marketplaceType}
+					cardType={cardType}
 					quantityDecimals={quantityDecimals}
 				/>
 			</div>
@@ -109,7 +109,7 @@ type TotalPriceProps = {
 		currencyAddress: Address;
 	};
 	chainId: number;
-	marketplaceType: MarketplaceType;
+	cardType: CardType;
 	quantityDecimals: number;
 };
 
@@ -118,11 +118,11 @@ const TotalPrice = ({
 	quantityStr,
 	salePrice,
 	chainId,
-	marketplaceType,
+	cardType,
 	quantityDecimals,
 }: TotalPriceProps) => {
-	const isShop = marketplaceType === 'shop';
-	const isMarket = marketplaceType === 'market';
+	const isShop = cardType === 'shop';
+	const isMarket = cardType === 'market';
 	const { data: marketplaceConfig } = useMarketplaceConfig();
 	const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
 		chainId,

package/src/react/ui/modals/BuyModal/components/ERC1155ShopModal.tsx

@@ -48,7 +48,7 @@ export const ERC1155ShopModal = ({
 					currencyAddress:
 						(shopData.salePrice?.currencyAddress as Address) ?? zeroAddress,
 				}}
-				marketplaceType="shop"
+				cardType="shop"
 				quantityDecimals={quantityDecimals}
 				quantityRemaining={quantityRemaining}
 				unlimitedSupply={unlimitedSupply}
@@ -115,7 +115,7 @@ const ERC1155SaleContractCheckoutModalOpener = ({
 				isOpen={true}
 				chainId={chainId}
 				onClose={() => buyModalStore.send({ type: 'close' })}
-				title="Loading Sequence Pay"
+				title="Loading payment options"
 			/>
 		);
 	}

package/src/react/ui/modals/BuyModal/components/ERC721BuyModal.tsx

@@ -8,6 +8,8 @@ import type { ContractInfo, TokenMetadata } from '@0xsequence/metadata';
 import { useEffect } from 'react';
 import type { Address } from 'viem';
 import type { CheckoutOptions, Order } from '../../../../_internal';
+import { ErrorLogBox } from '../../../components/_internals/ErrorLogBox';
+import { ActionModal } from '../../_internal/components/actionModal';
 import { usePaymentModalParams } from '../hooks/usePaymentModalParams';
 import { buyModalStore, usePaymentModalState, useQuantity } from '../store';
 
@@ -39,6 +41,7 @@ export const ERC721BuyModal = ({
 		data: paymentModalParams,
 		isLoading: isPaymentModalParamsLoading,
 		isError: isPaymentModalParamsError,
+		failureReason,
 	} = usePaymentModalParams({
 		address,
 		quantity: quantity ?? undefined,
@@ -49,6 +52,34 @@ export const ERC721BuyModal = ({
 		enabled: true,
 	});
 
+	if (failureReason) {
+		return (
+			<ActionModal
+				isOpen={true}
+				onClose={() => {
+					buyModalStore.send({ type: 'close' });
+				}}
+				title={'An error occurred while purchasing'}
+				children={
+					<ErrorLogBox
+						title={failureReason.name}
+						message={failureReason.message}
+						error={failureReason}
+					/>
+				}
+				ctas={[
+					{
+						label: 'Close',
+						onClick: () => {
+							buyModalStore.send({ type: 'close' });
+						},
+					},
+				]}
+				chainId={order.chainId}
+			/>
+		);
+	}
+
 	// Show loading or error states would be handled by parent router
 	if (isPaymentModalParamsLoading || !paymentModalParams) {
 		return null;