@0xsequence/marketplace-sdk 0.7.0 → 0.8.1

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

@@ -0,0 +1,140 @@
+import { act, fireEvent, render, screen } from '@test';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import type { Order } from '../../../../_internal';
+import { MarketplaceKind, OrderSide, OrderStatus } from '../../../../_internal';
+import { ERC1155QuantityModal } from '../ERC1155QuantityModal';
+import { buyModalStore } from '../store';
+
+const testOrder: Order = {
+	chainId: 1,
+	orderId: '1',
+	collectionContractAddress: '0x123',
+	createdAt: '2023-01-01T00:00:00Z',
+	createdBy: '0x123',
+	feeBps: 250,
+	feeBreakdown: [],
+	marketplace: MarketplaceKind.sequence_marketplace_v2,
+	priceAmount: '1000000000000000000',
+	priceAmountFormatted: '1',
+	priceAmountNet: '975000000000000000',
+	side: OrderSide.listing,
+	status: OrderStatus.active,
+	originName: '',
+	priceAmountNetFormatted: '',
+	priceCurrencyAddress: '',
+	priceDecimals: 0,
+	priceUSD: 0,
+	priceUSDFormatted: '',
+	quantityInitial: '10',
+	quantityInitialFormatted: '10',
+	quantityRemaining: '10',
+	quantityRemainingFormatted: '10',
+	quantityAvailable: '10',
+	quantityAvailableFormatted: '10',
+	quantityDecimals: 0,
+	validFrom: '',
+	validUntil: '',
+	blockNumber: 0,
+	updatedAt: '',
+};
+
+describe('ERC1155QuantityModal', () => {
+	beforeEach(() => {
+		// Initialize the store before each test
+		buyModalStore.send({
+			type: 'open',
+			props: {
+				chainId: 1,
+				orderId: '1',
+				collectionAddress: '0x123' as `0x${string}`,
+				collectibleId: '1',
+				marketplace: MarketplaceKind.sequence_marketplace_v2,
+			},
+		});
+	});
+
+	afterEach(() => {
+		// Reset the store after each test
+		buyModalStore.send({ type: 'close' });
+	});
+
+	it('should render quantity modal with order details', async () => {
+		render(<ERC1155QuantityModal order={testOrder} />);
+
+		// Check if the modal renders with the correct title
+		expect(screen.getByText('Select Quantity')).toBeInTheDocument();
+
+		// Check if the Buy now button exists
+		const buyButton = await screen.findByRole('button', { name: /buy now/i });
+		expect(buyButton).toBeInTheDocument();
+		// Capture the initial store state
+		const initialState = buyModalStore.getSnapshot();
+		expect(initialState.context.quantity).toBeUndefined();
+
+		// Click the Buy now button with default quantity "1"
+		await act(async () => {
+			fireEvent.click(buyButton);
+		});
+
+		// Ensure the store context was updated with the correct quantity
+		const updatedState = buyModalStore.getSnapshot();
+		expect(updatedState.context.quantity).toBe(1);
+	});
+
+	it('should update quantity when user changes the input value', async () => {
+		render(<ERC1155QuantityModal order={testOrder} />);
+
+		// Find the quantity input using label text
+		const quantityInput = await screen.findByLabelText('Enter quantity');
+
+		// Capture initial store state
+		const initialState = buyModalStore.getSnapshot();
+		expect(initialState.context.quantity).toBeUndefined();
+
+		// Change quantity to 5
+		await act(async () => {
+			fireEvent.change(quantityInput, { target: { value: '5' } });
+		});
+
+		// Click Buy now button
+		const buyButton = screen.getByRole('button', { name: /buy now/i });
+		await act(async () => {
+			fireEvent.click(buyButton);
+		});
+
+		// Check that the store is updated with quantity = 5
+		const updatedState = buyModalStore.getSnapshot();
+		expect(updatedState.context.quantity).toBe(5);
+	});
+
+	it('should validate input quantity against available quantity', async () => {
+		render(<ERC1155QuantityModal order={testOrder} />);
+
+		const quantityInput = await screen.findByLabelText('Enter quantity');
+
+		const invalidQuantity = '';
+		await act(async () => {
+			fireEvent.change(quantityInput, { target: { value: invalidQuantity } });
+		});
+
+		const buyButton = await screen.findByRole('button', { name: /buy now/i });
+		// The button should be disabled due to invalid quantity
+		expect(buyButton).toBeDisabled();
+
+		// Set valid quantity
+		await act(async () => {
+			fireEvent.change(quantityInput, { target: { value: '10' } });
+		});
+
+		// Button should be enabled
+		expect(buyButton).not.toBeDisabled();
+
+		// Click the button and check store update
+		await act(async () => {
+			fireEvent.click(buyButton);
+		});
+
+		const updatedState = buyModalStore.getSnapshot();
+		expect(updatedState.context.quantity).toBe(10);
+	});
+});

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

@@ -1,103 +1,94 @@
 import { beforeEach, describe, expect, it } from 'vitest';
-import type { Order } from '../../../../_internal';
-import { buyModal$, initialState } from '../store';
+import { MarketplaceKind } from '../../../../_internal';
+import { buyModalStore } from '../store';
 
 describe('BuyModal Store', () => {
 	beforeEach(() => {
-		buyModal$.set(initialState);
+		buyModalStore.send({ type: 'close' });
 	});
 
 	it('should initialize with correct default state', () => {
-		expect(buyModal$.isOpen.get()).toBe(false);
-		expect(buyModal$.state.get()).toEqual({
-			order: undefined as unknown as Order,
-			quantity: '1',
-			invalidQuantity: false,
-			checkoutModalIsLoading: false,
-			checkoutModalLoaded: false,
-			purchaseProcessing: false,
-			customProviderCallback: null,
-		});
-		expect(buyModal$.callbacks.get()).toBeUndefined();
+		const state = buyModalStore.getSnapshot();
+		expect(state.context.isOpen).toBe(false);
+		expect(state.context.props).toBeDefined();
+		expect(state.context.quantity).toBeUndefined();
 	});
 
 	it('should handle open action correctly', () => {
-		const mockOrder: Order = {
-			quantityAvailableFormatted: '10',
-		} as Order;
+		const mockProps = {
+			orderId: '1',
+			chainId: 1,
+			collectionAddress: '0x123' as `0x${string}`,
+			collectibleId: '1',
+			marketplace: MarketplaceKind.sequence_marketplace_v2,
+		};
 
-		const mockCallbacks = {
+		buyModalStore.send({
+			type: 'open',
+			props: mockProps,
 			onSuccess: () => {},
 			onError: () => {},
-		};
-
-		buyModal$.open({
-			order: mockOrder,
-			chainId: '1',
-			collectionAddress: '0x123',
-			tokenId: '123',
-			callbacks: mockCallbacks,
 		});
 
-		expect(buyModal$.isOpen.get()).toBe(true);
-		expect(buyModal$.state.get()).toEqual({
-			order: mockOrder,
-			quantity: '10',
-			invalidQuantity: false,
-			checkoutModalIsLoading: false,
-			checkoutModalLoaded: false,
-			purchaseProcessing: false,
-		});
-		expect(buyModal$.callbacks.get()).toBe(mockCallbacks);
+		const state = buyModalStore.getSnapshot();
+		expect(state.context.isOpen).toBe(true);
+		expect(state.context.props).toEqual(mockProps);
 	});
 
 	it('should handle close action correctly', () => {
-		const mockOrder: Order = {
-			quantityAvailableFormatted: '10',
-		} as Order;
-
-		buyModal$.open({
-			order: mockOrder,
-			chainId: '1',
-			collectionAddress: '0x123',
-			tokenId: '123',
-			callbacks: {
-				onSuccess: () => {},
-				onError: () => {},
-			},
+		const mockProps = {
+			orderId: '1',
+			chainId: 1,
+			collectionAddress: '0x123' as `0x${string}`,
+			collectibleId: '1',
+			marketplace: MarketplaceKind.sequence_marketplace_v2,
+		};
+
+		buyModalStore.send({
+			type: 'open',
+			props: mockProps,
+			onSuccess: () => {},
+			onError: () => {},
 		});
 
-		expect(buyModal$.isOpen.get()).toBe(true);
-
-		buyModal$.close();
-
-		expect(buyModal$.isOpen.get()).toBe(false);
-		expect(buyModal$.state.get().quantity).toBe('1');
-		expect(buyModal$.state.get().invalidQuantity).toBe(false);
-		expect(buyModal$.state.get().checkoutModalIsLoading).toBe(false);
-		expect(buyModal$.state.get().checkoutModalLoaded).toBe(false);
-		expect(buyModal$.callbacks.get()).toBeUndefined();
-		expect(buyModal$.state.order.get()).toBeUndefined();
-		expect(
-			buyModal$.state.order.collectionContractAddress.get(),
-		).toBeUndefined();
-		expect(buyModal$.state.order.tokenId.get()).toBeUndefined();
-		expect(buyModal$.state.order.chainId.get()).toBeUndefined();
-		expect(
-			buyModal$.state.order.quantityAvailableFormatted.get(),
-		).toBeUndefined();
+		const openState = buyModalStore.getSnapshot();
+		expect(openState.context.isOpen).toBe(true);
+
+		buyModalStore.send({ type: 'close' });
+
+		const closedState = buyModalStore.getSnapshot();
+		expect(closedState.context.isOpen).toBe(false);
 	});
 
 	it('should update loading states correctly', () => {
-		buyModal$.state.checkoutModalIsLoading.set(true);
-		expect(buyModal$.state.checkoutModalIsLoading.get()).toBe(true);
+		const mockProps = {
+			orderId: '1',
+			chainId: 1,
+			collectionAddress: '0x123' as `0x${string}`,
+			collectibleId: '1',
+			marketplace: MarketplaceKind.sequence_marketplace_v2,
+		};
+
+		buyModalStore.send({
+			type: 'open',
+			props: mockProps,
+		});
+
+		const state1 = buyModalStore.getSnapshot();
+		expect(state1.context.quantity).toBeUndefined();
+
+		buyModalStore.send({
+			type: 'setQuantity',
+			quantity: 5,
+		});
+
+		const state2 = buyModalStore.getSnapshot();
+		expect(state2.context.quantity).toBe(5);
 
-		buyModal$.state.checkoutModalLoaded.set(true);
-		expect(buyModal$.state.checkoutModalLoaded.get()).toBe(true);
+		// Test resetting by closing
+		buyModalStore.send({ type: 'close' });
 
-		buyModal$.state.checkoutModalIsLoading.set(false);
-		buyModal$.state.checkoutModalLoaded.set(false);
-		expect(buyModal$.state.checkoutModalIsLoading.get()).toBe(false);
-		expect(buyModal$.state.checkoutModalLoaded.get()).toBe(false);
+		const state3 = buyModalStore.getSnapshot();
+		expect(state3.context.quantity).toBeUndefined();
 	});
 });

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

@@ -1,4 +1,4 @@
-import { type RenderHookOptions, renderHook, server, waitFor } from '@test';
+import { renderHook, server, waitFor } from '@test';
 import { http, HttpResponse } from 'msw';
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
@@ -44,34 +44,6 @@ describe('useCheckoutOptions', () => {
 		});
 	});
 
-	it('should fetch checkout options successfully', async () => {
-		const { result } = renderHook(() => useCheckoutOptions(defaultInput));
-
-		await waitFor(() => {
-			expect(result.current.isSuccess).toBe(true);
-		});
-
-		expect(result.current.data).toEqual({
-			crypto: TransactionCrypto.all,
-			swap: [],
-			nftCheckout: [],
-			onRamp: [],
-		});
-	});
-
-	it('should not fetch when wallet is not available', () => {
-		vi.mocked(useWallet).mockReturnValue({
-			wallet: null,
-			isLoading: false,
-			isError: false,
-		});
-
-		const { result } = renderHook(() => useCheckoutOptions(defaultInput));
-
-		expect(result.current.data).toBeUndefined();
-		expect(result.current.isLoading).toBe(false);
-	});
-
 	it('should include fees in the API request', async () => {
 		const mockFeeAmount = '200000000000000000';
 		vi.mocked(useFees).mockReturnValue({
@@ -133,37 +105,6 @@ describe('useCheckoutOptions', () => {
 		expect(result.current.data).toBeUndefined();
 	});
 
-	it('should refetch when input parameters change', async () => {
-		const { result, rerender } = renderHook<
-			typeof defaultInput,
-			ReturnType<typeof useCheckoutOptions>
-		>((props) => useCheckoutOptions(props), {
-			initialProps: defaultInput,
-		} as RenderHookOptions<typeof defaultInput>);
-
-		await waitFor(() => {
-			expect(result.current.isSuccess).toBe(true);
-		});
-
-		// Change input
-		rerender({
-			...defaultInput,
-			orderId: '456',
-		});
-
-		await waitFor(() => {
-			expect(result.current.isSuccess).toBe(true);
-		});
-
-		// Verify that the query was refetched
-		expect(result.current.data).toEqual({
-			crypto: TransactionCrypto.all,
-			swap: [],
-			nftCheckout: [],
-			onRamp: [],
-		});
-	});
-
 	it('should handle wallet address resolution failure', async () => {
 		const mockWalletWithFailure = createMockWallet({
 			address: vi.fn().mockRejectedValue(new Error('Failed to get address')),

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

@@ -33,7 +33,7 @@ describe('useFees', () => {
 				collections: [
 					{
 						address: '0x456',
-						chainId: '1',
+						chainId: 1,
 						feePercentage: '5.0',
 					},
 				],

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

@@ -32,19 +32,35 @@ export const useCheckoutOptions = (input: {
 		queryFn: wallet
 			? async () => {
 					const marketplaceClient = getMarketplaceClient(input.chainId, config);
-					return marketplaceClient
-						.checkoutOptionsMarketplace({
-							wallet: await wallet.address(),
-							orders: [
-								{
-									contractAddress: input.collectionAddress,
-									orderId: input.orderId,
-									marketplace: input.marketplace,
-								},
-							],
-							additionalFee: Number(fees.amount),
-						})
-						.then((res) => res.options);
+					const response = await marketplaceClient.checkoutOptionsMarketplace({
+						wallet: await wallet.address(),
+						orders: [
+							{
+								contractAddress: input.collectionAddress,
+								orderId: input.orderId,
+								marketplace: input.marketplace,
+							},
+						],
+						additionalFee: Number(fees.amount),
+					});
+
+					// Get order data
+					const orderResponse = await marketplaceClient.getOrders({
+						input: [
+							{
+								contractAddress: input.collectionAddress,
+								orderId: input.orderId,
+								marketplace: input.marketplace,
+							},
+						],
+					});
+
+					const order = orderResponse.orders[0];
+
+					return {
+						...response.options,
+						order,
+					};
 				}
 			: skipToken,
 		enabled: !!wallet,

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

@@ -1,24 +1,18 @@
-import type { Hex } from 'viem';
-import type { MarketplaceKind } from '../../../../_internal';
+import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useCollectible, useCollection } from '../../../../hooks';
-
+import { useBuyModalProps } from '../store';
 import { useCheckoutOptions } from './useCheckoutOptions';
 
-export type UseLoadDataProps = {
-	chainId: number;
-	collectionAddress: Hex;
-	collectibleId: string | undefined;
-	orderId: string;
-	marketplace: MarketplaceKind;
-};
+export const useLoadData = () => {
+	const { chainId, collectionAddress, collectibleId, orderId, marketplace } =
+		useBuyModalProps();
+
+	const {
+		wallet,
+		isLoading: walletLoading,
+		isError: walletError,
+	} = useWallet();
 
-export const useLoadData = ({
-	chainId,
-	collectionAddress,
-	collectibleId,
-	orderId,
-	marketplace,
-}: UseLoadDataProps) => {
 	const {
 		data: collection,
 		isLoading: collectionLoading,
@@ -33,7 +27,7 @@ export const useLoadData = ({
 		isLoading: collectableLoading,
 		isError: collectableError,
 	} = useCollectible({
-		chainId: String(chainId),
+		chainId,
 		collectionAddress,
 		collectibleId,
 		query: {
@@ -45,6 +39,7 @@ export const useLoadData = ({
 		data: checkoutOptions,
 		isLoading: checkoutOptionsLoading,
 		isError: checkoutOptionsError,
+		// TODO: rename this... its order and checkout options
 	} = useCheckoutOptions({
 		chainId,
 		collectionAddress,
@@ -55,9 +50,19 @@ export const useLoadData = ({
 	return {
 		collection,
 		collectable,
-		checkoutOptions,
+		order: checkoutOptions?.order,
+		checkoutOptions: checkoutOptions,
+		wallet,
 		isLoading:
-			collectionLoading || collectableLoading || checkoutOptionsLoading,
-		isError: collectionError || collectableError || checkoutOptionsError,
+			collectionLoading ||
+			collectableLoading ||
+			checkoutOptionsLoading ||
+			walletLoading,
+		// TODO: we should have a way to determine what is causing the error
+		isError:
+			collectionError ||
+			collectableError ||
+			checkoutOptionsError ||
+			walletError,
 	};
 };