@0xsequence/marketplace-sdk 0.4.7 → 0.4.9

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

@@ -4,19 +4,21 @@ import { useCollectible, useCollection } from '../../../../hooks';
 
 import { useCheckoutOptions } from './useCheckoutOptions';
 
+export type UseLoadDataProps = {
+	chainId: number;
+	collectionAddress: Hex;
+	collectibleId: string;
+	orderId: string;
+	marketplace: MarketplaceKind;
+};
+
 export const useLoadData = ({
 	chainId,
 	collectionAddress,
 	collectibleId,
 	orderId,
 	marketplace,
-}: {
-	chainId: number;
-	collectionAddress: Hex;
-	collectibleId: string;
-	orderId: string;
-	marketplace: MarketplaceKind;
-}) => {
+}: UseLoadDataProps) => {
 	const {
 		data: collection,
 		isLoading: collectionLoading,

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

@@ -5,6 +5,7 @@ import type {
 	MarketplaceKind,
 	TokenMetadata,
 } from '../../../../_internal/api/marketplace.gen';
+import { buyModal$ } from '../store';
 
 export interface BuyInput {
 	orderId: string;
@@ -22,6 +23,12 @@ export interface CheckoutModalProps {
 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,

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

@@ -1,9 +1,8 @@
 import { Box, Text, TokenImage } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
-import type { Address, Hex } from 'viem';
+import type { Hex } from 'viem';
 import { formatUnits, parseUnits } from 'viem';
-import { useCurrencies } from '../../../../hooks';
-import { useCurrencyOptions } from '../../../../hooks/useCurrencyOptions';
+import { useCurrency } from '../../../../hooks';
 import QuantityInput from '../../_internal/components/quantityInput';
 import { ActionModal } from '../../_internal/components/actionModal';
 import { buyModal$ } from '../store';
@@ -17,23 +16,20 @@ interface ERC1155QuantityModalProps extends CheckoutModalProps {
 
 export const ERC1155QuantityModal = observer(
 	({ buy, collectable, order }: ERC1155QuantityModalProps) => {
-		const currencyOptions = useCurrencyOptions({
-			collectionAddress: order.collectionContractAddress as Address,
-		});
-		const { data: currencies } = useCurrencies({
+		const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
 			chainId: order.chainId,
-			currencyOptions,
+			currencyAddress: order.priceCurrencyAddress,
 		});
 
-		const currency = currencies?.find(
-			(currency) => currency.contractAddress === order.priceCurrencyAddress,
-		);
-
 		const quantity = Number(buyModal$.state.quantity.get());
 		const pricePerToken = order.priceAmount;
 		const totalPrice = (BigInt(quantity) * BigInt(pricePerToken)).toString();
 
-		if (buyModal$.state.checkoutModalLoaded.get()) {
+		if (
+			buyModal$.state.checkoutModalLoaded.get() &&
+			buyModal$.isOpen.get() &&
+			buyModal$.state.checkoutModalIsLoading.get()
+		) {
 			return null;
 		}
 
@@ -72,14 +68,36 @@ export const ERC1155QuantityModal = observer(
 						maxQuantity={order.quantityRemaining}
 					/>
 					<Box display="flex" justifyContent="space-between">
-						<Text color="text50" fontSize="small">
+						<Text color="text50" fontSize="small" fontFamily="body">
 							Total Price
 						</Text>
 						<Box display="flex" alignItems="center" gap="2">
-							<TokenImage src={currency?.imageUrl} size="xs" />
-							<Text color="text100" fontSize="small" fontWeight="bold">
-								{formatUnits(BigInt(totalPrice), currency?.decimals || 0)}
-							</Text>
+							{isCurrencyLoading || !currency ? (
+								<Box display="flex" alignItems="center" gap="2">
+									<Text color="text50" fontSize="small" fontFamily="body">
+										Loading...
+									</Text>
+								</Box>
+							) : (
+								<>
+									{currency.imageUrl && (
+										<TokenImage src={currency.imageUrl} size="xs" />
+									)}
+
+									<Text
+										color="text100"
+										fontSize="small"
+										fontWeight="bold"
+										fontFamily="body"
+									>
+										{formatUnits(BigInt(totalPrice), currency.decimals || 0)}
+									</Text>
+
+									<Text color="text80" fontSize="small" fontFamily="body">
+										{currency?.symbol}
+									</Text>
+								</>
+							)}
 						</Box>
 					</Box>
 				</Box>

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

@@ -0,0 +1,162 @@
+import { render, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { CheckoutModal } from '../CheckoutModal';
+import { parseUnits } from 'viem';
+import type { Order, TokenMetadata } from '../../../../../_internal';
+import {
+	MarketplaceKind,
+	OrderSide,
+	OrderStatus,
+} from '../../../../../_internal';
+
+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,
+			});
+		});
+	});
+});

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

@@ -0,0 +1,243 @@
+import '@testing-library/jest-dom/vitest';
+import {
+	render,
+	screen,
+	waitFor,
+	within,
+	fireEvent,
+	act,
+	cleanup,
+} from '../../../../../_internal/test-utils';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ERC1155QuantityModal } from '../Modal1155';
+import { buyModal$ } from '../../store';
+import { MarketplaceKind } from '../../../../../_internal';
+import type { Order, TokenMetadata } from '../../../../../_internal';
+
+describe('ERC1155QuantityModal', () => {
+	const mockOrder = {
+		orderId: '1',
+		priceAmount: '1000000000000000000', // 1 ETH in wei
+		priceCurrencyAddress: '0x0',
+		quantityRemaining: '10',
+		quantityDecimals: 0,
+		chainId: 1,
+		marketplace: MarketplaceKind.sequence_marketplace_v2,
+		createdAt: new Date().toISOString(),
+		quantityAvailableFormatted: '1',
+	} as Order;
+
+	const mockCollectable: TokenMetadata = {
+		decimals: 0,
+		tokenId: '1',
+		name: 'Test Token',
+		description: 'Test Description',
+		image: 'https://example.com/image.png',
+		attributes: [],
+	};
+
+	const mockBuy = vi.fn();
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+
+		// Reset the modal state
+		buyModal$.close();
+		buyModal$.state.checkoutModalLoaded.set(false);
+		buyModal$.state.checkoutModalIsLoading.set(false);
+		buyModal$.state.invalidQuantity.set(false);
+		buyModal$.state.quantity.set('1');
+	});
+
+	afterEach(() => {
+		buyModal$.close();
+		cleanup();
+		vi.clearAllMocks();
+	});
+
+	it('should render quantity input correctly', async () => {
+		// Open the modal with initial state
+		buyModal$.open({
+			order: mockOrder,
+			callbacks: {},
+			chainId: '1',
+			collectionAddress: '0x123',
+			tokenId: '1',
+		});
+
+		render(
+			<ERC1155QuantityModal
+				buy={mockBuy}
+				collectable={mockCollectable}
+				order={mockOrder}
+				chainId="1"
+				collectionAddress="0x123"
+				collectibleId="1"
+			/>,
+		);
+
+		// Verify modal title
+		expect(screen.getByText('Select Quantity')).toBeInTheDocument();
+
+		// Verify quantity input is present with initial value
+		const quantityInput = screen.getByRole('textbox', {
+			name: /enter quantity/i,
+		});
+		expect(quantityInput).toBeInTheDocument();
+		expect(quantityInput).toHaveValue('1');
+
+		// Verify total price calculation (1 ETH)
+		const priceLabels = screen.getAllByText('Total Price');
+		const priceContainer = priceLabels[0].parentElement;
+		if (!priceContainer) throw new Error('Price container not found');
+		expect(within(priceContainer).getByText('1')).toBeInTheDocument();
+		expect(within(priceContainer).getByText('ETH')).toBeInTheDocument();
+
+		// Verify buy button
+		const buyButton = screen.getByRole('button', { name: /buy now/i });
+		expect(buyButton).toBeInTheDocument();
+		expect(buyButton).not.toBeDisabled();
+
+		// Verify token image
+		const tokenImage = screen.getByRole('img', { name: '' });
+		expect(tokenImage).toBeInTheDocument();
+		expect(tokenImage).toHaveAttribute('src', 'https://example.com/eth.png');
+
+		// Ensure loading state is false and button is enabled before clicking
+		buyModal$.state.checkoutModalIsLoading.set(false);
+		buyModal$.state.invalidQuantity.set(false);
+	});
+
+	it('should update total price when quantity changes', async () => {
+		buyModal$.open({
+			order: mockOrder,
+			callbacks: {},
+			chainId: '1',
+			collectionAddress: '0x123',
+			tokenId: '1',
+		});
+
+		render(
+			<ERC1155QuantityModal
+				buy={mockBuy}
+				collectable={mockCollectable}
+				order={mockOrder}
+				chainId="1"
+				collectionAddress="0x123"
+				collectibleId="1"
+			/>,
+		);
+
+		const quantityInput = screen.getByRole('textbox', {
+			name: /enter quantity/i,
+		});
+
+		// Change quantity to 2
+		await act(async () => {
+			fireEvent.change(quantityInput, { target: { value: '2' } });
+		});
+
+		// Verify total price updates to 2 ETH
+		const priceLabels = screen.getAllByText('Total Price');
+		const priceContainer = priceLabels[0].parentElement;
+		if (!priceContainer) throw new Error('Price container not found');
+
+		await waitFor(() => {
+			expect(within(priceContainer).getByText('2')).toBeInTheDocument();
+		});
+	});
+
+	it('should disable buy button when quantity is invalid', async () => {
+		buyModal$.open({
+			order: mockOrder,
+			callbacks: {},
+			chainId: '1',
+			collectionAddress: '0x123',
+			tokenId: '1',
+		});
+
+		// Set invalid quantity and loading state
+		buyModal$.state.invalidQuantity.set(true);
+		buyModal$.state.checkoutModalIsLoading.set(true);
+
+		render(
+			<ERC1155QuantityModal
+				buy={mockBuy}
+				collectable={mockCollectable}
+				order={mockOrder}
+				chainId="1"
+				collectionAddress="0x123"
+				collectibleId="1"
+			/>,
+		);
+
+		const buyButton = screen.getByRole('button', { name: /buy now/i });
+
+		// Wait for the button to be disabled
+		await waitFor(() => {
+			expect(buyButton).toBeDisabled();
+		});
+
+		// Click should not trigger buy function
+		fireEvent.click(buyButton);
+		expect(mockBuy).not.toHaveBeenCalled();
+	});
+
+	it('should calculate total price correctly', async () => {
+		// Open the modal with initial state
+		buyModal$.open({
+			order: mockOrder,
+			callbacks: {},
+			chainId: '1',
+			collectionAddress: '0x123',
+			tokenId: '1',
+		});
+
+		render(
+			<ERC1155QuantityModal
+				buy={mockBuy}
+				collectable={mockCollectable}
+				order={mockOrder}
+				chainId="1"
+				collectionAddress="0x123"
+				collectibleId="1"
+			/>,
+		);
+
+		// Wait for modal content to be fully loaded
+		await waitFor(() => {
+			expect(screen.getByText('Select Quantity')).toBeInTheDocument();
+			expect(
+				screen.getByRole('textbox', { name: /enter quantity/i }),
+			).toBeInTheDocument();
+			expect(screen.getAllByText('Total Price')[0]).toBeInTheDocument();
+		});
+
+		// Verify initial total price (1 ETH)
+		const priceLabels = screen.getAllByText('Total Price');
+		const priceContainer = priceLabels[0].parentElement;
+		if (!priceContainer) throw new Error('Price container not found');
+
+		await waitFor(() => {
+			expect(within(priceContainer).getByText('1')).toBeInTheDocument();
+			expect(within(priceContainer).getByText('ETH')).toBeInTheDocument();
+		});
+
+		// Change quantity to 3
+		const quantityInput = screen.getByRole('textbox', {
+			name: /enter quantity/i,
+		});
+		await act(async () => {
+			fireEvent.change(quantityInput, { target: { value: '3' } });
+		});
+
+		// Verify total price updates to 3 ETH
+		await waitFor(() => {
+			expect(within(priceContainer).getByText('3')).toBeInTheDocument();
+		});
+
+		// Verify modal is in a valid state
+		expect(buyModal$.state.checkoutModalIsLoading.get()).toBe(false);
+		expect(buyModal$.state.invalidQuantity.get()).toBe(false);
+	});
+});

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

@@ -3,6 +3,14 @@ import type { ShowBuyModalArgs } from '.';
 import type { Order } from '../../../_internal';
 import type { ModalCallbacks } from '../_internal/types';
 
+const buyState = {
+	order: undefined as unknown as Order,
+	quantity: '1',
+	invalidQuantity: false,
+	checkoutModalIsLoading: false,
+	checkoutModalLoaded: false,
+} as const;
+
 export interface BuyModalState {
 	isOpen: boolean;
 	open: (
@@ -15,7 +23,6 @@ export interface BuyModalState {
 	state: {
 		order: Order;
 		quantity: string;
-		modalId: number;
 		invalidQuantity: boolean;
 		checkoutModalIsLoading: boolean;
 		checkoutModalLoaded: boolean;
@@ -38,7 +45,6 @@ export const initialState: BuyModalState = {
 		buyModal$.state.set({
 			quantity: args.order.quantityAvailableFormatted,
 			order: args.order,
-			modalId: buyModal$.state.modalId.get() + 1,
 			invalidQuantity: false,
 			checkoutModalIsLoading: false,
 			checkoutModalLoaded: false,
@@ -48,15 +54,10 @@ export const initialState: BuyModalState = {
 	},
 	close: () => {
 		buyModal$.isOpen.set(false);
+		buyModal$.callbacks.set(undefined);
+		buyModal$.state.set(buyState);
 	},
-	state: {
-		order: undefined as unknown as Order,
-		quantity: '1',
-		modalId: 0,
-		invalidQuantity: false,
-		checkoutModalIsLoading: false,
-		checkoutModalLoaded: false,
-	},
+	state: buyState,
 	setCheckoutModalIsLoading: (isLoading: boolean) => {
 		buyModal$.state.checkoutModalIsLoading.set(isLoading);
 	},

package/src/react/ui/modals/CreateListingModal/Modal.tsx

@@ -7,6 +7,8 @@ import {
 	useBalanceOfCollectible,
 	useCollectible,
 	useCollection,
+	useCurrencies,
+	useCurrencyOptions,
 } from '../../../hooks';
 import {
 	ActionModal,
@@ -49,7 +51,16 @@ const Modal = observer(() => {
 		collectionAddress,
 		collectibleId,
 	});
-
+	const currencyOptions = useCurrencyOptions({ collectionAddress });
+	const {
+		data: currencies,
+		isLoading: currenciesLoading,
+		isError: currenciesIsError,
+	} = useCurrencies({
+		chainId,
+		currencyOptions,
+		includeNativeCurrency: true,
+	});
 	const {
 		data: collection,
 		isLoading: collectionIsLoading,
@@ -91,7 +102,7 @@ const Modal = observer(() => {
 			steps$: steps$,
 		});
 
-	if (collectableIsLoading || collectionIsLoading) {
+	if (collectableIsLoading || collectionIsLoading || currenciesLoading) {
 		return (
 			<LoadingModal
 				isOpen={createListingModal$.isOpen.get()}
@@ -102,13 +113,25 @@ const Modal = observer(() => {
 		);
 	}
 
-	if (collectableIsError || collectionIsError) {
+	if (collectableIsError || collectionIsError || currenciesIsError) {
+		return (
+			<ErrorModal
+				isOpen={createListingModal$.isOpen.get()}
+				chainId={Number(chainId)}
+				onClose={createListingModal$.close}
+				title="List item for sale"
+			/>
+		);
+	}
+
+	if (!currencies || currencies.length === 0) {
 		return (
 			<ErrorModal
 				isOpen={createListingModal$.isOpen.get()}
 				chainId={Number(chainId)}
 				onClose={createListingModal$.close}
 				title="List item for sale"
+				message="No currencies are configured for the marketplace, contact the marketplace owners"
 			/>
 		);
 	}