@0xsequence/marketplace-sdk 0.5.6 → 0.6.0

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

@@ -0,0 +1,343 @@
+import { useSelectPaymentModal } from '@0xsequence/kit-checkout';
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useWallet } from '../../../../../_internal/wallet/useWallet';
+import { useConfig } from '../../../../../hooks';
+import { useBuyCollectable } from '../useBuyCollectable';
+import { useFees } from '../useFees';
+
+// Mock dependencies
+vi.mock('@0xsequence/kit-checkout', () => ({
+	useSelectPaymentModal: vi.fn(),
+}));
+
+vi.mock('../../../../../_internal/wallet/useWallet', () => ({
+	useWallet: vi.fn(),
+}));
+
+vi.mock('../../../../../hooks', () => ({
+	useConfig: vi.fn(),
+}));
+
+vi.mock('../useFees', () => ({
+	useFees: vi.fn(),
+}));
+
+vi.mock('../../../../../_internal', (actualImport) => {
+	const actualModule = actualImport();
+	return {
+		getMarketplaceClient: vi.fn(),
+		...actualModule,
+	};
+});
+
+describe('useBuyCollectable', () => {
+	const defaultProps = {
+		chainId: '1',
+		collectionAddress: '0x123',
+		tokenId: '1',
+		priceCurrencyAddress: '0x0',
+		setCheckoutModalIsLoading: vi.fn(),
+		setCheckoutModalLoaded: vi.fn(),
+	};
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+
+		// Setup default mock implementations
+		(
+			useSelectPaymentModal as unknown as ReturnType<typeof vi.fn>
+		).mockReturnValue({
+			openSelectPaymentModal: vi.fn(),
+		});
+
+		(useConfig as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			projectAccessKey: 'test-key',
+			projectId: 'test-id',
+		});
+
+		(useFees as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			amount: '250',
+			receiver: '0x123',
+		});
+	});
+
+	it('should return loading state initially', () => {
+		// Mock useWallet to return loading state
+		(useWallet as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			wallet: null,
+			isLoading: true,
+			isError: false,
+		});
+
+		const { result } = renderHook(() => useBuyCollectable(defaultProps));
+
+		expect(result.current).toEqual({
+			status: 'loading',
+			buy: null,
+			isLoading: true,
+			isError: false,
+		});
+	});
+
+	it('should return error state when wallet is not available', () => {
+		// Mock useWallet to return error state
+		(useWallet as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			wallet: null,
+			isLoading: false,
+			isError: true,
+		});
+
+		const { result } = renderHook(() => useBuyCollectable(defaultProps));
+
+		expect(result.current).toEqual({
+			status: 'error',
+			buy: null,
+			isLoading: false,
+			isError: true,
+		});
+
+		// Also test when wallet is undefined but no error
+		(useWallet as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			wallet: undefined,
+			isLoading: false,
+			isError: false,
+		});
+
+		const { result: result2 } = renderHook(() =>
+			useBuyCollectable(defaultProps),
+		);
+
+		expect(result2.current).toEqual({
+			status: 'error',
+			buy: null,
+			isLoading: false,
+			isError: true,
+		});
+	});
+
+	// it('should call buy function with correct parameters', async () => {
+	// 	// Mock useWallet to return a valid wallet
+	// 	(useWallet as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+	// 		wallet: {
+	// 			kind: WalletKind.sequence,
+	// 			address: async () => '0x123',
+	// 			chainId: '1',
+	// 		},
+	// 		isLoading: false,
+	// 		isError: false,
+	// 	});
+
+	// 	const openSelectPaymentModalMock = vi.fn();
+	// 	(
+	// 		useSelectPaymentModal as unknown as ReturnType<typeof vi.fn>
+	// 	).mockReturnValue({
+	// 		openSelectPaymentModal: openSelectPaymentModalMock,
+	// 	});
+
+	// 	const generateBuyTransactionMock = vi.fn().mockResolvedValue({
+	// 		steps: [
+	// 			{
+	// 				type: 'transaction',
+	// 				value: '1000000000000000000',
+	// 				to: '0x123',
+	// 				data: '0x456',
+	// 			},
+	// 		],
+	// 	});
+
+	// 	const marketplaceClientMock = {
+	// 		generateBuyTransaction: generateBuyTransactionMock,
+	// 	};
+
+	// 	(
+	// 		getMarketplaceClient as unknown as ReturnType<typeof vi.fn>
+	// 	).mockReturnValue(marketplaceClientMock);
+
+	// 	const { result } = renderHook(() => useBuyCollectable(defaultProps));
+
+	// 	if (result.current.status === 'ready') {
+	// 		await result.current.buy({
+	// 			orderId: '1',
+	// 			quantity: '1',
+	// 			collectableDecimals: 18,
+	// 			marketplace: MarketplaceKind.sequence_marketplace_v2,
+	// 			checkoutOptions: {
+	// 				swap: [],
+	// 				nftCheckout: [],
+	// 				onRamp: [],
+	// 				crypto: TransactionCrypto.all,
+	// 			},
+	// 		});
+	// 	}
+
+	// 	expect(generateBuyTransactionMock).toHaveBeenCalledWith({
+	// 		collectionAddress: defaultProps.collectionAddress,
+	// 		buyer: '0x123',
+	// 		marketplace: MarketplaceKind.sequence_marketplace_v2,
+	// 		ordersData: [
+	// 			{
+	// 				orderId: '1',
+	// 				quantity: '1',
+	// 			},
+	// 		],
+	// 		additionalFees: [
+	// 			{
+	// 				amount: '250',
+	// 				receiver: '0x123',
+	// 			},
+	// 		],
+	// 		walletType: WalletKind.unknown,
+	// 	});
+
+	// 	expect(openSelectPaymentModalMock).toHaveBeenCalledWith({
+	// 		chain: defaultProps.chainId,
+	// 		collectibles: [
+	// 			{
+	// 				tokenId: defaultProps.tokenId,
+	// 				quantity: '1',
+	// 				decimals: 18,
+	// 			},
+	// 		],
+	// 		currencyAddress: defaultProps.priceCurrencyAddress,
+	// 		price: '1000000000000000000',
+	// 		targetContractAddress: '0x123',
+	// 		txData: '0x456',
+	// 		collectionAddress: defaultProps.collectionAddress,
+	// 		recipientAddress: '0x123',
+	// 		enableMainCurrencyPayment: true,
+	// 		enableSwapPayments: true,
+	// 		creditCardProviders: [],
+	// 		onSuccess: expect.any(Function),
+	// 		onError: undefined,
+	// 		onClose: expect.any(Function),
+	// 	});
+
+	// 	expect(defaultProps.setCheckoutModalIsLoading).toHaveBeenCalledWith(true);
+	// 	expect(defaultProps.setCheckoutModalLoaded).toHaveBeenCalledWith(true);
+	// });
+
+	// it('should handle success callback', async () => {
+	// 	(useWallet as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+	// 		wallet: {
+	// 			kind: WalletKind.sequence,
+	// 			address: async () => '0x123',
+	// 			chainId: '1',
+	// 		},
+	// 		isLoading: false,
+	// 		isError: false,
+	// 	});
+
+	// 	const openSelectPaymentModalMock = vi.fn();
+	// 	(
+	// 		useSelectPaymentModal as unknown as ReturnType<typeof vi.fn>
+	// 	).mockReturnValue({
+	// 		openSelectPaymentModal: openSelectPaymentModalMock,
+	// 	});
+
+	// 	const generateBuyTransactionMock = vi.fn().mockResolvedValue({
+	// 		steps: [
+	// 			{
+	// 				type: 'transaction',
+	// 				value: '1000000000000000000',
+	// 				to: '0x123',
+	// 				data: '0x456',
+	// 			},
+	// 		],
+	// 	});
+
+	// 	const marketplaceClientMock = {
+	// 		generateBuyTransaction: generateBuyTransactionMock,
+	// 	};
+
+	// 	(
+	// 		getMarketplaceClient as unknown as ReturnType<typeof vi.fn>
+	// 	).mockReturnValue(marketplaceClientMock);
+
+	// 	const onSuccessMock = vi.fn();
+	// 	const props = {
+	// 		...defaultProps,
+	// 		callbacks: {
+	// 			onSuccess: onSuccessMock,
+	// 		},
+	// 	};
+
+	// 	const { result } = renderHook(() => useBuyCollectable(props));
+
+	// 	if (result.current.status === 'ready') {
+	// 		await result.current.buy({
+	// 			orderId: '1',
+	// 			quantity: '1',
+	// 			collectableDecimals: 18,
+	// 			marketplace: MarketplaceKind.sequence_marketplace_v2,
+	// 			checkoutOptions: {
+	// 				swap: [],
+	// 				nftCheckout: [],
+	// 				onRamp: [],
+	// 				crypto: TransactionCrypto.all,
+	// 			},
+	// 		});
+	// 	}
+
+	// 	const onSuccessCallback =
+	// 		openSelectPaymentModalMock.mock.calls[0][0].onSuccess;
+
+	// 	const txHash = '0x789';
+	// 	await onSuccessCallback(txHash);
+
+	// 	expect(onSuccessMock).toHaveBeenCalledWith({ hash: txHash });
+	// });
+
+	// it('should handle error callback', async () => {
+	// 	// Mock useWallet to return a valid wallet
+	// 	(useWallet as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+	// 		wallet: {
+	// 			kind: WalletKind.sequence,
+	// 			address: async () => '0x123',
+	// 			chainId: '1',
+	// 		},
+	// 		isLoading: false,
+	// 		isError: false,
+	// 	});
+
+	// 	const openSelectPaymentModalMock = vi.fn();
+	// 	(
+	// 		useSelectPaymentModal as unknown as ReturnType<typeof vi.fn>
+	// 	).mockReturnValue({
+	// 		openSelectPaymentModal: openSelectPaymentModalMock,
+	// 	});
+
+	// 	const onErrorMock = vi.fn();
+	// 	const props = {
+	// 		...defaultProps,
+	// 		callbacks: {
+	// 			onError: onErrorMock,
+	// 		},
+	// 	};
+
+	// 	const { result } = renderHook(() => useBuyCollectable(props));
+
+	// 	if (result.current.status === 'ready') {
+	// 		await result.current.buy({
+	// 			orderId: '1',
+	// 			quantity: '1',
+	// 			collectableDecimals: 18,
+	// 			marketplace: MarketplaceKind.sequence_marketplace_v2,
+	// 			checkoutOptions: {
+	// 				swap: [],
+	// 				nftCheckout: [],
+	// 				onRamp: [],
+	// 				crypto: TransactionCrypto.all,
+	// 			},
+	// 		});
+	// 	}
+
+	// 	const onErrorCallback = openSelectPaymentModalMock.mock.calls[0][0].onError;
+
+	// 	const error = new Error('Transaction failed');
+	// 	onErrorCallback(error);
+
+	// 	expect(onErrorMock).toHaveBeenCalledWith(error);
+	// });
+});

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

@@ -1,19 +1,14 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { useCheckoutOptions } from '../useCheckoutOptions';
-import { useWallet } from '../../../../../_internal/wallet/useWallet';
-import { useFees } from '../useFees';
-import { MarketplaceKind } from '../../../../../_internal';
-import {
-	renderHook,
-	waitFor,
-	type RenderHookOptions,
-} from '../../../../../_internal/test-utils';
+import { type RenderHookOptions, renderHook, server, waitFor } from '@test';
 import { http, HttpResponse } from 'msw';
-import { server } from '../../../../../_internal/test/setup';
-import { createMockWallet } from '../../../../../_internal/test/mocks/wallet';
-import { mockMarketplaceEndpoint } from '../../../../../_internal/api/__mocks__/marketplace.msw';
 import { zeroAddress } from 'viem';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { createMockWallet } from '../../../../../../../test/mocks/wallet';
+import { MarketplaceKind } from '../../../../../_internal';
+import { mockMarketplaceEndpoint } from '../../../../../_internal/api/__mocks__/marketplace.msw';
 import { TransactionCrypto } from '../../../../../_internal/api/marketplace.gen';
+import { useWallet } from '../../../../../_internal/wallet/useWallet';
+import { useCheckoutOptions } from '../useCheckoutOptions';
+import { useFees } from '../useFees';
 
 // Mock dependencies
 vi.mock('../../../../../_internal/wallet/useWallet');
@@ -47,24 +42,6 @@ describe('useCheckoutOptions', () => {
 			amount: '100000000000000000',
 			receiver: zeroAddress,
 		});
-
-		// Set up default API response
-		server.use(
-			http.post(mockMarketplaceEndpoint('CheckoutOptionsMarketplace'), () => {
-				return HttpResponse.json({
-					options: {
-						crypto: TransactionCrypto.all,
-						swap: [],
-						nftCheckout: [],
-						onRamp: [],
-					},
-				});
-			}),
-		);
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
 	});
 
 	it('should fetch checkout options successfully', async () => {

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

@@ -1,8 +1,8 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { useFees } from '../useFees';
-import { useMarketplaceConfig } from '../../../../../hooks';
+import { renderHook } from '@test';
 import { avalanche, optimism } from 'viem/chains';
-import { renderHook } from '../../../../../_internal/test-utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useMarketplaceConfig } from '../../../../../hooks';
+import { useFees } from '../useFees';
 
 // Mock dependencies
 vi.mock('../../../../../hooks', () => ({

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

@@ -1,11 +1,9 @@
-import { renderHook } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { useLoadData } from '../useLoadData';
-import { useCollection, useCollectible } from '../../../../../hooks';
-import { useCheckoutOptions } from '../useCheckoutOptions';
+import { renderHook } from '@test';
+import { describe, expect, it, vi } from 'vitest';
 import { MarketplaceKind } from '../../../../../_internal';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import type { ReactNode } from 'react';
+import { useCollectible, useCollection } from '../../../../../hooks';
+import { useCheckoutOptions } from '../useCheckoutOptions';
+import { useLoadData } from '../useLoadData';
 
 // Mock dependencies
 vi.mock('../../../../../hooks', () => ({
@@ -17,19 +15,6 @@ vi.mock('../useCheckoutOptions', () => ({
 	useCheckoutOptions: vi.fn(),
 }));
 
-const createWrapper = () => {
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: {
-				retry: false,
-			},
-		},
-	});
-	return ({ children }: { children: ReactNode }) => (
-		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-	);
-};
-
 describe('useLoadData', () => {
 	const defaultProps = {
 		chainId: 1,
@@ -39,10 +24,6 @@ describe('useLoadData', () => {
 		marketplace: MarketplaceKind.sequence_marketplace_v2,
 	};
 
-	beforeEach(() => {
-		vi.clearAllMocks();
-	});
-
 	it('should return loading state when any data is loading', () => {
 		// Mock one hook to be loading
 		(useCollection as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
@@ -65,9 +46,7 @@ describe('useLoadData', () => {
 			},
 		);
 
-		const { result } = renderHook(() => useLoadData(defaultProps), {
-			wrapper: createWrapper(),
-		});
+		const { result } = renderHook(() => useLoadData(defaultProps));
 
 		expect(result.current.isLoading).toBe(true);
 		expect(result.current.isError).toBe(false);
@@ -98,9 +77,7 @@ describe('useLoadData', () => {
 			},
 		);
 
-		const { result } = renderHook(() => useLoadData(defaultProps), {
-			wrapper: createWrapper(),
-		});
+		const { result } = renderHook(() => useLoadData(defaultProps));
 
 		expect(result.current.isError).toBe(true);
 		expect(result.current.isLoading).toBe(false);
@@ -136,9 +113,7 @@ describe('useLoadData', () => {
 			},
 		);
 
-		const { result } = renderHook(() => useLoadData(defaultProps), {
-			wrapper: createWrapper(),
-		});
+		const { result } = renderHook(() => useLoadData(defaultProps));
 
 		expect(result.current.isLoading).toBe(false);
 		expect(result.current.isError).toBe(false);
@@ -174,9 +149,7 @@ describe('useLoadData', () => {
 			},
 		);
 
-		const { result } = renderHook(() => useLoadData(defaultProps), {
-			wrapper: createWrapper(),
-		});
+		const { result } = renderHook(() => useLoadData(defaultProps));
 
 		// Should be loading if any data is loading
 		expect(result.current.isLoading).toBe(true);

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

@@ -1,12 +1,12 @@
+import { skipToken, useQuery } from '@tanstack/react-query';
 import type { Hex } from 'viem';
 import {
-	getMarketplaceClient,
 	type MarketplaceKind,
+	getMarketplaceClient,
 } from '../../../../_internal';
-import { useConfig } from '../../../../hooks';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
+import { useConfig } from '../../../../hooks';
 import { useFees } from './useFees';
-import { skipToken, useQuery } from '@tanstack/react-query';
 
 export const useCheckoutOptions = (input: {
 	chainId: number;

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

@@ -1,5 +1,5 @@
-import type { MarketplaceKind } from '../../../../_internal';
 import type { Hex } from 'viem';
+import type { MarketplaceKind } from '../../../../_internal';
 import { useCollectible, useCollection } from '../../../../hooks';
 
 import { useCheckoutOptions } from './useCheckoutOptions';

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

@@ -1,8 +1,9 @@
-import { Box, Text, TokenImage } from '@0xsequence/design-system';
+import { Box } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
 import type { Hex } from 'viem';
-import { formatUnits, parseUnits } from 'viem';
-import { useCurrency } from '../../../../hooks';
+import { parseUnits } from 'viem';
+
+// import { useCurrency } from '../../../../hooks';
 import { ActionModal } from '../../_internal/components/actionModal';
 import QuantityInput from '../../_internal/components/quantityInput';
 import { buyModal$ } from '../store';
@@ -16,14 +17,23 @@ interface ERC1155QuantityModalProps extends CheckoutModalProps {
 
 export const ERC1155QuantityModal = observer(
 	({ buy, collectable, order }: ERC1155QuantityModalProps) => {
-		const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
-			chainId: order.chainId,
-			currencyAddress: order.priceCurrencyAddress,
-		});
-
-		const quantity = Number(buyModal$.state.quantity.get());
-		const pricePerToken = order.priceAmount;
-		const totalPrice = (BigInt(quantity) * BigInt(pricePerToken)).toString();
+		// const { data: marketplaceConfig } = useMarketplaceConfig();
+		// const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
+		// 	chainId: order.chainId,
+		// 	currencyAddress: order.priceCurrencyAddress,
+		// });
+		// const quantity = Number(buyModal$.state.quantity.get());
+		// const pricePerToken = BigInt(order.priceAmount);
+		// const marketplaceFeePercentage =
+		// 	marketplaceConfig?.collections.find((collection) =>
+		// 		compareAddress(collection.address, order.collectionContractAddress),
+		// 	)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+		// const price = BigInt(quantity) * pricePerToken;
+		// const totalPrice =
+		// 	price +
+		// 	(price *
+		// 		BigInt(Math.round(Number(marketplaceFeePercentage || 0) * 100))) /
+		// 		BigInt(10000);
 
 		if (
 			buyModal$.state.checkoutModalLoaded.get() &&
@@ -69,7 +79,7 @@ export const ERC1155QuantityModal = observer(
 						decimals={order.quantityDecimals}
 						maxQuantity={order.quantityRemaining}
 					/>
-					<Box display="flex" justifyContent="space-between">
+					{/* <Box display="flex" justifyContent="space-between">
 						<Text color="text50" fontSize="small" fontFamily="body">
 							Total Price
 						</Text>
@@ -92,7 +102,7 @@ export const ERC1155QuantityModal = observer(
 										fontWeight="bold"
 										fontFamily="body"
 									>
-										{formatUnits(BigInt(totalPrice), currency.decimals || 0)}
+										{formatPrice(totalPrice, currency.decimals)}
 									</Text>
 
 									<Text color="text80" fontSize="small" fontFamily="body">
@@ -100,8 +110,8 @@ export const ERC1155QuantityModal = observer(
 									</Text>
 								</>
 							)}
-						</Box>
-					</Box>
+						</Box>  
+					</Box>*/}
 				</Box>
 			</ActionModal>
 		);

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

@@ -1,13 +1,13 @@
 import { render, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { CheckoutModal } from '../CheckoutModal';
 import { parseUnits } from 'viem';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { Order, TokenMetadata } from '../../../../../_internal';
 import {
 	MarketplaceKind,
 	OrderSide,
 	OrderStatus,
 } from '../../../../../_internal';
+import { CheckoutModal } from '../CheckoutModal';
 
 describe('CheckoutModal', () => {
 	const mockBuy = vi.fn();