@0xsequence/marketplace-sdk 0.7.0 → 0.8.1

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

@@ -1,185 +0,0 @@
-import { renderHook } from '@test';
-import { describe, expect, it, vi } from 'vitest';
-import { MarketplaceKind } from '../../../../../_internal';
-import { useCollectible, useCollection } from '../../../../../hooks';
-import { useCheckoutOptions } from '../useCheckoutOptions';
-import { useLoadData } from '../useLoadData';
-
-// Mock dependencies
-vi.mock('../../../../../hooks', () => ({
-	useCollection: vi.fn(),
-	useCollectible: vi.fn(),
-}));
-
-vi.mock('../useCheckoutOptions', () => ({
-	useCheckoutOptions: vi.fn(),
-}));
-
-describe('useLoadData', () => {
-	const defaultProps = {
-		chainId: 1,
-		collectionAddress: '0x123' as `0x${string}`,
-		collectibleId: '1',
-		orderId: '1',
-		marketplace: MarketplaceKind.sequence_marketplace_v2,
-	};
-
-	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({
-			data: null,
-			isLoading: true,
-			isError: false,
-		});
-
-		(useCollectible as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
-			data: null,
-			isLoading: false,
-			isError: false,
-		});
-
-		(useCheckoutOptions as unknown as ReturnType<typeof vi.fn>).mockReturnValue(
-			{
-				data: null,
-				isLoading: false,
-				isError: false,
-			},
-		);
-
-		const { result } = renderHook(() => useLoadData(defaultProps));
-
-		expect(result.current.isLoading).toBe(true);
-		expect(result.current.isError).toBe(false);
-		expect(result.current.collection).toBeNull();
-		expect(result.current.collectable).toBeNull();
-		expect(result.current.checkoutOptions).toBeNull();
-	});
-
-	it('should return error state when any request fails', () => {
-		// Mock one hook to have an error
-		(useCollection as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
-			data: null,
-			isLoading: false,
-			isError: true,
-		});
-
-		(useCollectible as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
-			data: null,
-			isLoading: false,
-			isError: false,
-		});
-
-		(useCheckoutOptions as unknown as ReturnType<typeof vi.fn>).mockReturnValue(
-			{
-				data: null,
-				isLoading: false,
-				isError: false,
-			},
-		);
-
-		const { result } = renderHook(() => useLoadData(defaultProps));
-
-		expect(result.current.isError).toBe(true);
-		expect(result.current.isLoading).toBe(false);
-	});
-
-	it('should return all data when successfully loaded', () => {
-		const mockCollection = { type: 'ERC721', name: 'Test Collection' };
-		const mockCollectable = { tokenId: '1', name: 'Test NFT' };
-		const mockCheckoutOptions = {
-			swap: [],
-			nftCheckout: [],
-			onRamp: [],
-			crypto: ['ETH'],
-		};
-
-		(useCollection as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
-			data: mockCollection,
-			isLoading: false,
-			isError: false,
-		});
-
-		(useCollectible as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
-			data: mockCollectable,
-			isLoading: false,
-			isError: false,
-		});
-
-		(useCheckoutOptions as unknown as ReturnType<typeof vi.fn>).mockReturnValue(
-			{
-				data: mockCheckoutOptions,
-				isLoading: false,
-				isError: false,
-			},
-		);
-
-		const { result } = renderHook(() => useLoadData(defaultProps));
-
-		expect(result.current.isLoading).toBe(false);
-		expect(result.current.isError).toBe(false);
-		expect(result.current.collection).toBe(mockCollection);
-		expect(result.current.collectable).toBe(mockCollectable);
-		expect(result.current.checkoutOptions).toBe(mockCheckoutOptions);
-	});
-
-	it('should handle partial data loading states', () => {
-		// Mock different loading states for each hook
-		(useCollection as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
-			data: { type: 'ERC721', name: 'Test Collection' },
-			isLoading: false,
-			isError: false,
-		});
-
-		(useCollectible as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
-			data: null,
-			isLoading: true,
-			isError: false,
-		});
-
-		(useCheckoutOptions as unknown as ReturnType<typeof vi.fn>).mockReturnValue(
-			{
-				data: {
-					swap: [],
-					nftCheckout: [],
-					onRamp: [],
-					crypto: ['ETH'],
-				},
-				isLoading: false,
-				isError: false,
-			},
-		);
-
-		const { result } = renderHook(() => useLoadData(defaultProps));
-
-		// Should be loading if any data is loading
-		expect(result.current.isLoading).toBe(true);
-		expect(result.current.isError).toBe(false);
-
-		// Should have partial data available
-		expect(result.current.collection).toBeDefined();
-		expect(result.current.collectable).toBeNull();
-		expect(result.current.checkoutOptions).toBeDefined();
-
-		// Verify hook calls
-		expect(useCollection).toHaveBeenCalledWith({
-			chainId: defaultProps.chainId,
-			collectionAddress: defaultProps.collectionAddress,
-		});
-
-		expect(useCollectible).toHaveBeenCalledWith({
-			chainId: String(defaultProps.chainId),
-			collectionAddress: defaultProps.collectionAddress,
-			collectibleId: defaultProps.collectibleId,
-			query: {
-				enabled: !!defaultProps.collectibleId,
-			},
-		});
-
-		expect(useCheckoutOptions).toHaveBeenCalledWith({
-			chainId: defaultProps.chainId,
-			collectionAddress: defaultProps.collectionAddress,
-			orderId: defaultProps.orderId,
-			marketplace: defaultProps.marketplace,
-		});
-	});
-});

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

@@ -1,170 +0,0 @@
-import { useSelectPaymentModal } from '@0xsequence/checkout';
-import type { QueryKey } from '@tanstack/react-query';
-import type { Hash, Hex } from 'viem';
-import { decodeERC20Approval } from '../../../../../utils/decode/erc20';
-import {
-	type CheckoutOptions,
-	type MarketplaceKind,
-	StepType,
-	WalletKind,
-	balanceQueries,
-	collectableKeys,
-	getMarketplaceClient,
-	getQueryClient,
-} from '../../../../_internal';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
-import { useConfig } from '../../../../hooks';
-import type { ModalCallbacks } from '../../_internal/types';
-import { buyModal$ } from '../store';
-import { useFees } from './useFees';
-
-interface UseBuyCollectableProps {
-	chainId: string;
-	collectionAddress: string;
-	tokenId: string | undefined;
-	callbacks?: ModalCallbacks;
-	priceCurrencyAddress: string;
-	setCheckoutModalIsLoading: (isLoading: boolean) => void;
-	setCheckoutModalLoaded: (isLoaded: boolean) => void;
-	customProviderCallback?: (args: { data: string; value: string }) => void;
-}
-
-type BuyCollectableReturn =
-	| { status: 'loading'; buy: null; isLoading: true; isError: false }
-	| { status: 'error'; buy: null; isLoading: false; isError: true }
-	| {
-			status: 'ready';
-			isLoading: false;
-			isError: false;
-			buy: (input: {
-				orderId: string;
-				quantity: string;
-				collectableDecimals: number;
-				marketplace: MarketplaceKind;
-				checkoutOptions: CheckoutOptions;
-			}) => Promise<void>;
-	  };
-
-export const useBuyCollectable = ({
-	chainId,
-	collectionAddress,
-	tokenId,
-	callbacks,
-	priceCurrencyAddress,
-	setCheckoutModalIsLoading,
-	setCheckoutModalLoaded,
-	customProviderCallback,
-}: UseBuyCollectableProps): BuyCollectableReturn => {
-	const { openSelectPaymentModal } = useSelectPaymentModal();
-	const config = useConfig();
-	const marketplaceClient = getMarketplaceClient(Number(chainId), config);
-	const fees = useFees({ chainId: Number(chainId), collectionAddress });
-	const { wallet, isLoading, isError } = useWallet();
-
-	if (isLoading) {
-		return { status: 'loading', buy: null, isLoading, isError: false };
-	}
-
-	if (isError || !wallet || !tokenId) {
-		return { status: 'error', buy: null, isLoading, isError: true };
-	}
-
-	const invalidateQueries = async (queriesToInvalidate: QueryKey[]) => {
-		const queryClient = getQueryClient();
-		for (const queryKey of queriesToInvalidate) {
-			await queryClient.invalidateQueries({ queryKey });
-		}
-	};
-
-	return {
-		status: 'ready',
-		isLoading,
-		isError,
-		buy: async (input) => {
-			setCheckoutModalIsLoading(true);
-			const { steps } = await marketplaceClient.generateBuyTransaction({
-				collectionAddress,
-				buyer: await wallet.address(),
-				marketplace: input.marketplace,
-				ordersData: [
-					{
-						orderId: input.orderId,
-						quantity: input.quantity,
-						tokenId: tokenId,
-					},
-				],
-				additionalFees: [fees],
-				walletType: WalletKind.unknown,
-			});
-
-			// these states are necessary to manage appearance of the quantity modal
-			setCheckoutModalLoaded(true);
-			setCheckoutModalIsLoading(false);
-
-			const buyStep = steps.find((step) => step.id === StepType.buy);
-			const approveStep = steps.find(
-				(step) => step.id === StepType.tokenApproval,
-			);
-
-			const approvedSpenderAddress = approveStep
-				? decodeERC20Approval(approveStep.data as Hex).spender
-				: undefined;
-
-			if (!buyStep) {
-				throw new Error('Buy step not found');
-			}
-
-			const openSelectPaymentModalConfig = {
-				chain: chainId,
-				collectibles: [
-					{
-						tokenId: tokenId,
-						quantity: input.quantity,
-						decimals: input.collectableDecimals,
-					},
-				],
-				currencyAddress: priceCurrencyAddress,
-				price: buyStep.price,
-				targetContractAddress: buyStep.to,
-				approvedSpenderAddress,
-				txData: buyStep.data as Hex,
-				collectionAddress,
-				recipientAddress: await wallet.address(),
-				enableMainCurrencyPayment: true,
-				enableSwapPayments: !!input.checkoutOptions.swap,
-				creditCardProviders: customProviderCallback
-					? ['custom']
-					: input.checkoutOptions.nftCheckout || [],
-				onSuccess: (hash: string) => {
-					callbacks?.onSuccess?.({ hash: hash as Hash });
-				},
-				supplementaryAnalyticsInfo: {
-					orderId: input.orderId,
-					marketplaceKind: input.marketplace,
-				},
-				onError: callbacks?.onError,
-				onClose: () => {
-					invalidateQueries([
-						collectableKeys.listings,
-						collectableKeys.lowestListings,
-						collectableKeys.listingsCount,
-						collectableKeys.lists,
-						collectableKeys.userBalances,
-						balanceQueries.all,
-						balanceQueries.collectionBalanceDetails,
-					]);
-
-					buyModal$.close();
-				},
-				...(customProviderCallback && {
-					customProviderCallback: () => {
-						customProviderCallback(buyStep);
-						buyModal$.close();
-					},
-				}),
-			};
-
-			openSelectPaymentModal(openSelectPaymentModalConfig);
-		},
-	};
-};

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

@@ -1,47 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { parseUnits } from 'viem';
-import type { Order } from '../../../../_internal';
-import type {
-	MarketplaceKind,
-	TokenMetadata,
-} from '../../../../_internal/api/marketplace.gen';
-import { buyModal$ } from '../store';
-
-export interface BuyInput {
-	orderId: string;
-	collectableDecimals: number;
-	marketplace: MarketplaceKind;
-	quantity: string;
-}
-
-export interface CheckoutModalProps {
-	buy: (props: BuyInput) => void;
-	collectable: TokenMetadata;
-	order: Order;
-	isLoading?: boolean;
-}
-export function CheckoutModal({ buy, collectable, order }: CheckoutModalProps) {
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-	useEffect(() => {
-		if (
-			buyModal$.state.checkoutModalIsLoading.get() ||
-			buyModal$.state.checkoutModalLoaded.get()
-		)
-			return;
-
-		const executeBuy = () => {
-			buy({
-				orderId: order.orderId,
-				collectableDecimals: collectable.decimals || 0,
-				quantity: parseUnits('1', collectable.decimals || 0).toString(),
-				marketplace: order.marketplace,
-			});
-		};
-
-		executeBuy();
-	}, []);
-
-	return null;
-}

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

@@ -1,140 +0,0 @@
-'use client';
-
-import { observer } from '@legendapp/state/react';
-import * as dn from 'dnum';
-import type { Hex } from 'viem';
-
-import { Text, TokenImage } from '@0xsequence/design-system';
-import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../consts';
-import { compareAddress } from '../../../../../utils/address';
-import type { Order } from '../../../../_internal';
-import { useCurrency, useMarketplaceConfig } from '../../../../hooks';
-import { ActionModal } from '../../_internal/components/actionModal';
-import QuantityInput from '../../_internal/components/quantityInput';
-import { buyModal$ } from '../store';
-import type { CheckoutModalProps } from './CheckoutModal';
-
-interface ERC1155QuantityModalProps extends CheckoutModalProps {
-	chainId: string;
-	collectionAddress: Hex;
-	collectibleId: string | undefined;
-}
-
-export const ERC1155QuantityModal = observer(
-	({ buy, collectable, order }: ERC1155QuantityModalProps) => {
-		if (
-			buyModal$.state.checkoutModalLoaded.get() &&
-			buyModal$.isOpen.get() &&
-			buyModal$.state.checkoutModalIsLoading.get() &&
-			buyModal$.state.purchaseProcessing.get()
-		) {
-			return null;
-		}
-
-		return (
-			<ActionModal
-				isOpen={buyModal$.isOpen.get()}
-				chainId={order.chainId}
-				onClose={() => buyModal$.close()}
-				title="Select Quantity"
-				disableAnimation={true}
-				ctas={[
-					{
-						label: 'Buy now',
-						onClick: () => {
-							buyModal$.state.checkoutModalIsLoading.set(true);
-							buyModal$.state.purchaseProcessing.set(true);
-
-							buy({
-								quantity: buyModal$.state.quantity.get(),
-								orderId: order.orderId,
-								collectableDecimals: collectable.decimals || 0,
-								marketplace: order.marketplace,
-							});
-						},
-						disabled: buyModal$.state.checkoutModalIsLoading.get(),
-						pending: buyModal$.state.checkoutModalIsLoading.get(),
-					},
-				]}
-			>
-				<div className="flex w-full flex-col gap-4">
-					<QuantityInput
-						$quantity={buyModal$.state.quantity}
-						$invalidQuantity={buyModal$.state.invalidQuantity}
-						decimals={order.quantityDecimals}
-						maxQuantity={order.quantityRemaining}
-					/>
-
-					<TotalPrice order={order} />
-				</div>
-			</ActionModal>
-		);
-	},
-);
-
-const TotalPrice = observer(({ order }: { order: Order }) => {
-	const { data: marketplaceConfig } = useMarketplaceConfig();
-	const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
-		chainId: order.chainId,
-		currencyAddress: order.priceCurrencyAddress,
-	});
-
-	const quantityStr = buyModal$.state.quantity.get();
-
-	let formattedPrice = '0';
-
-	if (currency) {
-		const quantity = BigInt(quantityStr);
-		const totalPriceWithoutFees = dn.format(
-			dn.multiply(quantity, order.priceAmountFormatted),
-			{
-				digits: currency.decimals,
-				trailingZeros: false,
-			},
-		);
-		const marketplaceFeePercentage =
-			marketplaceConfig?.collections.find((collection) =>
-				compareAddress(collection.address, order.collectionContractAddress),
-			)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
-		const feeMultiplier = dn.from(1 + marketplaceFeePercentage / 100);
-		const totalPrice = dn.format(
-			dn.multiply(totalPriceWithoutFees, feeMultiplier),
-			{
-				digits: currency.decimals,
-				trailingZeros: false,
-			},
-		);
-
-		formattedPrice = totalPrice;
-	}
-
-	return (
-		<div className="flex justify-between">
-			<Text className="font-body font-medium text-xs" color="text50">
-				Total Price
-			</Text>
-
-			<div className="flex items-center gap-0.5">
-				{isCurrencyLoading || !currency ? (
-					<div className="flex items-center gap-2">
-						<Text className="font-body text-text-50 text-xs">Loading...</Text>
-					</div>
-				) : (
-					<>
-						{currency.imageUrl && (
-							<TokenImage src={currency.imageUrl} size="xs" />
-						)}
-
-						<Text className="font-body font-bold text-text-100 text-xs">
-							{formattedPrice}
-						</Text>
-
-						<Text className="font-body font-bold text-text-80 text-xs">
-							{currency?.symbol}
-						</Text>
-					</>
-				)}
-			</div>
-		</div>
-	);
-});

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

@@ -1,162 +0,0 @@
-import { render, waitFor } from '@testing-library/react';
-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();
-
-	const defaultOrder: Order = {
-		orderId: '123',
-		marketplace: MarketplaceKind.sequence_marketplace_v2,
-		priceAmount: '1000000000000000000',
-		priceCurrencyAddress: '0x0',
-		quantityRemaining: '1',
-		priceUSDFormatted: '$1,800.00',
-		createdAt: new Date().toISOString(),
-		side: OrderSide.listing,
-		status: OrderStatus.active,
-		chainId: 1,
-		originName: 'test',
-		collectionContractAddress: '0x1234567890123456789012345678901234567890',
-		tokenId: '1',
-		createdBy: '0x1234567890123456789012345678901234567890',
-		priceAmountFormatted: '1.0',
-		priceAmountNet: '950000000000000000',
-		priceAmountNetFormatted: '0.95',
-		priceDecimals: 18,
-		priceUSD: 1800.0,
-		quantityInitial: '1',
-		quantityInitialFormatted: '1',
-		quantityRemainingFormatted: '1',
-		quantityAvailable: '1',
-		quantityAvailableFormatted: '1',
-		quantityDecimals: 0,
-		feeBps: 500,
-		feeBreakdown: [],
-		validFrom: new Date().toISOString(),
-		validUntil: new Date(Date.now() + 86400000).toISOString(),
-		blockNumber: 1234567,
-		updatedAt: new Date().toISOString(),
-	};
-
-	const defaultCollectable: TokenMetadata = {
-		tokenId: '1',
-		name: 'Test NFT',
-		description: 'Test Description',
-		image: 'https://test.com/image.png',
-		attributes: [],
-		decimals: 0,
-	};
-
-	beforeEach(() => {
-		vi.clearAllMocks();
-	});
-
-	it('should auto-execute buy function when mounted', async () => {
-		render(
-			<CheckoutModal
-				buy={mockBuy}
-				order={defaultOrder}
-				collectable={defaultCollectable}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(mockBuy).toHaveBeenCalledTimes(1);
-		});
-	});
-
-	it('should execute buy even when loading (current implementation)', async () => {
-		render(
-			<CheckoutModal
-				buy={mockBuy}
-				order={defaultOrder}
-				collectable={defaultCollectable}
-				isLoading={true}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(mockBuy).toHaveBeenCalledTimes(1);
-			expect(mockBuy).toHaveBeenCalledWith({
-				orderId: defaultOrder.orderId,
-				collectableDecimals: defaultCollectable.decimals || 0,
-				quantity: '1',
-				marketplace: defaultOrder.marketplace,
-			});
-		});
-	});
-
-	it('should call buy with correct parameters', async () => {
-		render(
-			<CheckoutModal
-				buy={mockBuy}
-				order={defaultOrder}
-				collectable={defaultCollectable}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(mockBuy).toHaveBeenCalledWith({
-				orderId: defaultOrder.orderId,
-				collectableDecimals: defaultCollectable.decimals || 0,
-				quantity: '1',
-				marketplace: defaultOrder.marketplace,
-			});
-		});
-	});
-
-	it('should handle decimals correctly', async () => {
-		const collectableWithDecimals: TokenMetadata = {
-			...defaultCollectable,
-			decimals: 18,
-		};
-
-		render(
-			<CheckoutModal
-				buy={mockBuy}
-				order={defaultOrder}
-				collectable={collectableWithDecimals}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(mockBuy).toHaveBeenCalledWith({
-				orderId: defaultOrder.orderId,
-				collectableDecimals: collectableWithDecimals.decimals,
-				quantity: parseUnits('1', 18).toString(),
-				marketplace: defaultOrder.marketplace,
-			});
-		});
-
-		// Test with different decimal values
-		const collectableWithCustomDecimals: TokenMetadata = {
-			...defaultCollectable,
-			decimals: 6,
-		};
-
-		render(
-			<CheckoutModal
-				buy={mockBuy}
-				order={defaultOrder}
-				collectable={collectableWithCustomDecimals}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(mockBuy).toHaveBeenCalledWith({
-				orderId: defaultOrder.orderId,
-				collectableDecimals: collectableWithCustomDecimals.decimals,
-				quantity: parseUnits('1', 6).toString(),
-				marketplace: defaultOrder.marketplace,
-			});
-		});
-	});
-});