@0xsequence/marketplace-sdk 0.5.7 → 0.6.0

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

@@ -1,18 +1,13 @@
-import {
-	render,
-	screen,
-	cleanup,
-	waitFor,
-} from '../../../../_internal/test-utils';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { BuyModal } from '../Modal';
-import { buyModal$ } from '../store';
-import { useLoadData } from '../hooks/useLoadData';
-import { useBuyCollectable } from '../hooks/useBuyCollectable';
+import { cleanup, render, screen, waitFor } from '@test';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { Mock } from 'vitest';
 import type { Order } from '../../../../_internal';
 import { MarketplaceKind } from '../../../../_internal';
 import { ContractType } from '../../../../_internal';
+import { BuyModal } from '../Modal';
+import { useBuyCollectable } from '../hooks/useBuyCollectable';
+import { useLoadData } from '../hooks/useLoadData';
+import { buyModal$ } from '../store';
 
 const mockOrder = {
 	orderId: '1',
@@ -31,6 +26,10 @@ vi.mock('../hooks/useBuyCollectable', () => ({
 	useBuyCollectable: vi.fn(),
 }));
 
+vi.mock('@0xsequence/kit', () => ({
+	useWaasFeeOptions: vi.fn().mockReturnValue([]),
+}));
+
 describe('BuyModal', () => {
 	beforeEach(() => {
 		vi.clearAllMocks();

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,16 +1,11 @@
+import { type RenderHookOptions, renderHook, server, waitFor } from '@test';
 import { http, HttpResponse } from '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 {
-	type RenderHookOptions,
-	renderHook,
-	waitFor,
-} from '../../../../../_internal/test-utils';
-import { createMockWallet } from '../../../../../_internal/test/mocks/wallet';
-import { server } from '../../../../../_internal/test/setup';
 import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import { useCheckoutOptions } from '../useCheckoutOptions';
 import { useFees } from '../useFees';

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,6 +1,6 @@
+import { renderHook } from '@test';
 import { describe, expect, it, vi } from 'vitest';
 import { MarketplaceKind } from '../../../../../_internal';
-import { renderHook } from '../../../../../_internal/test-utils';
 import { useCollectible, useCollection } from '../../../../../hooks';
 import { useCheckoutOptions } from '../useCheckoutOptions';
 import { useLoadData } from '../useLoadData';

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,13 +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 { parseUnits } from 'viem';
-import {
-	DEFAULT_MARKETPLACE_FEE_PERCENTAGE,
-	compareAddress,
-	formatPrice,
-} from '../../../../..';
-import { useCurrency, useMarketplaceConfig } from '../../../../hooks';
+
+// import { useCurrency } from '../../../../hooks';
 import { ActionModal } from '../../_internal/components/actionModal';
 import QuantityInput from '../../_internal/components/quantityInput';
 import { buyModal$ } from '../store';
@@ -21,20 +17,23 @@ interface ERC1155QuantityModalProps extends CheckoutModalProps {
 
 export const ERC1155QuantityModal = observer(
 	({ buy, collectable, order }: ERC1155QuantityModalProps) => {
-		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 = order.priceAmount;
-		const marketplaceFeePercentage =
-			marketplaceConfig?.collections.find((collection) =>
-				compareAddress(collection.address, order.collectionContractAddress),
-			)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
-		const price = Number(quantity) * Number(pricePerToken);
-		const totalPrice =
-			price + (price * Number(marketplaceFeePercentage || 0)) / 100;
+		// 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() &&
@@ -80,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>
@@ -111,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();