@0xsequence/marketplace-sdk 0.10.0 → 1.1.0

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';
+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,
@@ -35,8 +35,6 @@ export function ShopCard({
 		},
 	});
 
-	const isLoading = cardLoading || saleCurrencyLoading;
-
 	if (!tokenMetadata || !salePrice) {
 		console.error('Token metadata or sale price is undefined', {
 			tokenMetadata,
@@ -53,7 +51,11 @@ export function ShopCard({
 
 	const action = CollectibleCardAction.BUY;
 
-	const mediaClassName = !quantityRemaining ? 'opacity-50' : 'opacity-100';
+	const mediaClassName = unlimitedSupply
+		? 'opacity-100'
+		: quantityRemaining === '0' || quantityRemaining === undefined
+			? 'opacity-50'
+			: 'opacity-100';
 
 	return (
 		<BaseCard
@@ -62,23 +64,27 @@ 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}
-			className={mediaClassName}
+			mediaClassName={mediaClassName}
+			contractType={collectionType as ContractType}
+			isShop={true}
 		>
 			<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}
 			/>
@@ -90,7 +96,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/index.ts

@@ -1,3 +1,4 @@
+export * from '../providers/modal-provider';
 export { CollectibleCard } from './components/marketplace-collectible-card/CollectibleCard';
 // types
 export * from './components/marketplace-collectible-card/types';
@@ -6,7 +7,6 @@ export { Media } from './components/media/Media';
 export { useBuyModal } from './modals/BuyModal';
 export { useCreateListingModal } from './modals/CreateListingModal';
 export { useMakeOfferModal } from './modals/MakeOfferModal';
-export * from './modals/modal-provider';
 export { useSellModal } from './modals/SellModal';
 export { useSuccessfulPurchaseModal } from './modals/SuccessfulPurchaseModal';
 export { useTransferModal } from './modals/TransferModal';

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

@@ -142,21 +142,6 @@ const mockOrder = {
 	updatedAt: new Date().toISOString(),
 };
 
-// Mock wallet object - using 'as never' for simplicity in tests
-const mockWallet = {
-	address: async () => '0xabc' as `0x${string}`,
-	transport: {} as never,
-	isWaaS: false,
-	walletKind: 'unknown' as const,
-	getChainId: async () => 1,
-	switchChain: async () => {},
-	handleSignMessageStep: async () => undefined,
-	handleSendTransactionStep: async () => '0x' as `0x${string}`,
-	handleConfirmTransactionStep: async () => ({}) as never,
-	hasTokenApproval: async () => true,
-	publicClient: {} as never,
-} as never;
-
 const mockCheckoutOptions = {
 	order: mockOrder,
 	crypto: 'all' as const,
@@ -214,7 +199,7 @@ describe('BuyModalRouter', () => {
 					collectibleId: '1',
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
-					marketplaceType: 'market',
+					cardType: 'market',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -223,7 +208,7 @@ describe('BuyModalRouter', () => {
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection721,
 				collectable: mockCollectable,
-				wallet: mockWallet,
+				address: '0x1234567890123456789012345678901234567890',
 				order: mockOrder,
 				checkoutOptions: mockCheckoutOptions,
 				currency: mockCurrency,
@@ -250,7 +235,7 @@ describe('BuyModalRouter', () => {
 					collectibleId: '1',
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
-					marketplaceType: 'market',
+					cardType: 'market',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -259,7 +244,7 @@ describe('BuyModalRouter', () => {
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection1155,
 				collectable: mockCollectable,
-				wallet: mockWallet,
+				address: '0x1234567890123456789012345678901234567890',
 				order: mockOrder,
 				checkoutOptions: mockCheckoutOptions,
 				currency: mockCurrency,
@@ -293,7 +278,7 @@ describe('BuyModalRouter', () => {
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection721,
 				collectable: undefined, // Missing collectable
-				wallet: mockWallet,
+				address: '0x1234567890123456789012345678901234567890',
 				order: mockOrder,
 				checkoutOptions: mockCheckoutOptions,
 				currency: mockCurrency,
@@ -304,7 +289,7 @@ describe('BuyModalRouter', () => {
 
 			render(<BuyModalRouter />);
 
-			expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+			expect(screen.getByText('Loading payment options')).toBeInTheDocument();
 		});
 	});
 
@@ -324,7 +309,7 @@ describe('BuyModalRouter', () => {
 						amount: '1000000000000000000',
 						currencyAddress: '0x0' as `0x${string}`,
 					},
-					marketplaceType: 'shop',
+					cardType: 'shop',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -333,7 +318,7 @@ describe('BuyModalRouter', () => {
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection721,
 				collectable: undefined,
-				wallet: undefined,
+				address: undefined,
 				order: undefined,
 				checkoutOptions: undefined,
 				currency: mockCurrency,
@@ -365,7 +350,7 @@ describe('BuyModalRouter', () => {
 						amount: '1000000000000000000',
 						currencyAddress: '0x0' as `0x${string}`,
 					},
-					marketplaceType: 'shop',
+					cardType: 'shop',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -374,7 +359,7 @@ describe('BuyModalRouter', () => {
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection1155,
 				collectable: undefined,
-				wallet: undefined,
+				address: undefined,
 				order: undefined,
 				checkoutOptions: undefined,
 				currency: mockCurrency,
@@ -405,7 +390,7 @@ describe('BuyModalRouter', () => {
 						amount: '1000000000000000000',
 						currencyAddress: '0x0' as `0x${string}`,
 					},
-					marketplaceType: 'shop',
+					cardType: 'shop',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -414,7 +399,7 @@ describe('BuyModalRouter', () => {
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection721,
 				collectable: undefined,
-				wallet: undefined,
+				address: undefined,
 				order: undefined,
 				checkoutOptions: undefined,
 				currency: undefined, // Missing currency
@@ -425,7 +410,7 @@ describe('BuyModalRouter', () => {
 
 			render(<BuyModalRouter />);
 
-			expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+			expect(screen.getByText('Loading payment options')).toBeInTheDocument();
 		});
 	});
 
@@ -447,7 +432,7 @@ describe('BuyModalRouter', () => {
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: undefined,
 				collectable: undefined,
-				wallet: undefined,
+				address: undefined,
 				order: undefined,
 				checkoutOptions: undefined,
 				currency: undefined,
@@ -478,7 +463,7 @@ describe('BuyModalRouter', () => {
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: undefined,
 				collectable: undefined,
-				wallet: undefined,
+				address: undefined,
 				order: undefined,
 				checkoutOptions: undefined,
 				currency: undefined,
@@ -489,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', () => {
@@ -506,7 +491,7 @@ describe('BuyModalRouter', () => {
 						amount: '1000000000000000000',
 						currencyAddress: '0x0' as `0x${string}`,
 					},
-					marketplaceType: 'shop',
+					cardType: 'shop',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -518,7 +503,7 @@ describe('BuyModalRouter', () => {
 					type: 'UNSUPPORTED' as never,
 				},
 				collectable: undefined,
-				wallet: undefined,
+				address: undefined,
 				order: undefined,
 				checkoutOptions: undefined,
 				currency: mockCurrency,
@@ -543,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,
 			});
@@ -552,7 +537,7 @@ describe('BuyModalRouter', () => {
 			vi.spyOn(useLoadDataModule, 'useLoadData').mockReturnValue({
 				collection: mockCollection721,
 				collectable: mockCollectable,
-				wallet: mockWallet,
+				address: '0x1234567890123456789012345678901234567890',
 				order: mockOrder,
 				checkoutOptions: mockCheckoutOptions,
 				currency: mockCurrency,

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,11 +168,11 @@ describe('ERC1155ShopModal', () => {
 			/>,
 		);
 
-		expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+		expect(screen.getByText('Loading payment options')).toBeInTheDocument();
 		expect(mockOpenCheckoutModal).not.toHaveBeenCalled();
 	});
 
-	it('should render nothing when checkout is in error state', () => {
+	it.skip('should render nothing when checkout is in error state', () => {
 		mockUseERC1155Checkout.mockReturnValue({
 			openCheckoutModal: mockOpenCheckoutModal,
 			isLoading: false,
@@ -196,7 +196,7 @@ describe('ERC1155ShopModal', () => {
 		expect(mockOpenCheckoutModal).not.toHaveBeenCalled();
 	});
 
-	it('should not open checkout modal when not enabled', () => {
+	it.skip('should not open checkout modal when not enabled', () => {
 		mockUseERC1155Checkout.mockReturnValue({
 			openCheckoutModal: mockOpenCheckoutModal,
 			isLoading: false,
@@ -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__/ERC721ShopModal.test.tsx

@@ -127,7 +127,7 @@ describe('ERC721ShopModal', () => {
 		expect(buyModalStore.getSnapshot().context.paymentModalState).toBe('open');
 	});
 
-	it('should render nothing while loading payment params', () => {
+	it.skip('should render nothing while loading payment params', () => {
 		// Mock loading state
 		vi.spyOn(
 			useERC721SalePaymentParamsModule,

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

@@ -22,7 +22,7 @@ export const BuyModalRouter = () => {
 	const {
 		collection,
 		collectable,
-		wallet,
+		address,
 		isLoading,
 		order,
 		checkoutOptions,
@@ -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"
 					/>
 				);
 			}
@@ -94,13 +94,13 @@ export const BuyModalRouter = () => {
 		}
 	} else {
 		if (collection.type === 'ERC721') {
-			if (!collectable || !order || !wallet || !checkoutOptions) {
+			if (!collectable || !order || !address || !checkoutOptions) {
 				return (
 					<LoadingModal
 						isOpen={true}
 						chainId={chainId}
 						onClose={() => buyModalStore.send({ type: 'close' })}
-						title="Loading Sequence Pay"
+						title="Loading payment options"
 					/>
 				);
 			}
@@ -109,20 +109,20 @@ export const BuyModalRouter = () => {
 					collection={collection}
 					collectable={collectable}
 					order={order}
-					wallet={wallet}
+					address={address}
 					checkoutOptions={checkoutOptions}
 					chainId={chainId}
 				/>
 			);
 		}
 		if (collection.type === 'ERC1155') {
-			if (!collectable || !order || !wallet || !checkoutOptions) {
+			if (!collectable || !order || !address || !checkoutOptions) {
 				return (
 					<LoadingModal
 						isOpen={true}
 						chainId={chainId}
 						onClose={() => buyModalStore.send({ type: 'close' })}
-						title="Loading Sequence Pay"
+						title="Loading payment options"
 					/>
 				);
 			}
@@ -131,7 +131,7 @@ export const BuyModalRouter = () => {
 					collection={collection}
 					collectable={collectable}
 					order={order}
-					wallet={wallet}
+					address={address}
 					checkoutOptions={checkoutOptions}
 					chainId={chainId}
 				/>

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

@@ -6,8 +6,8 @@ import {
 } from '@0xsequence/checkout';
 import type { ContractInfo, TokenMetadata } from '@0xsequence/metadata';
 import { useEffect } from 'react';
+import type { Address } from 'viem';
 import type { CheckoutOptions, Order } from '../../../../_internal';
-import type { WalletInstance } from '../../../../_internal/wallet/wallet';
 import { usePaymentModalParams } from '../hooks/usePaymentModalParams';
 import {
 	buyModalStore,
@@ -22,7 +22,7 @@ interface ERC1155BuyModalProps {
 	collection: ContractInfo;
 	collectable: TokenMetadata;
 	order: Order;
-	wallet: WalletInstance | null | undefined;
+	address: Address | undefined;
 	checkoutOptions: CheckoutOptions | undefined;
 	chainId: number;
 }
@@ -30,17 +30,17 @@ interface ERC1155BuyModalProps {
 export const ERC1155BuyModal = ({
 	collectable,
 	order,
-	wallet,
+	address,
 	checkoutOptions,
 	chainId,
 }: 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
-		: order?.quantityDecimals;
+		: collectable.decimals || 0;
 	const quantityRemaining = isShop
 		? modalProps.quantityRemaining?.toString()
 		: order?.quantityRemaining;
@@ -49,7 +49,7 @@ export const ERC1155BuyModal = ({
 		return (
 			<ERC1155QuantityModal
 				order={order}
-				marketplaceType={marketplaceType}
+				cardType={cardType}
 				quantityDecimals={quantityDecimals}
 				quantityRemaining={quantityRemaining}
 				chainId={chainId}
@@ -63,7 +63,7 @@ export const ERC1155BuyModal = ({
 
 	return (
 		<Modal
-			wallet={wallet}
+			address={address}
 			quantity={quantity}
 			order={order}
 			collectable={collectable}
@@ -73,7 +73,7 @@ export const ERC1155BuyModal = ({
 };
 
 interface ModalProps {
-	wallet: WalletInstance | null | undefined;
+	address: Address | undefined;
 	quantity: number;
 	order: Order;
 	collectable: TokenMetadata;
@@ -81,7 +81,7 @@ interface ModalProps {
 }
 
 const Modal = ({
-	wallet,
+	address,
 	quantity,
 	order,
 	collectable,
@@ -92,7 +92,7 @@ const Modal = ({
 		isLoading: isPaymentModalParamsLoading,
 		isError: isPaymentModalParamsError,
 	} = usePaymentModalParams({
-		wallet,
+		address,
 		quantity,
 		marketplace: order?.marketplace,
 		collectable,