@0xsequence/marketplace-sdk 0.7.0 → 0.8.1

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

@@ -0,0 +1,127 @@
+'use client';
+
+import { use$, useObservable } from '@legendapp/state/react';
+import * as dn from 'dnum';
+
+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 { buyModalStore, useBuyModalProps, useIsOpen } from './store';
+
+export const ERC1155QuantityModal = ({ order }: { order: Order }) => {
+	const { chainId } = useBuyModalProps();
+	const isOpen = useIsOpen();
+
+	const localQuantity$ = useObservable('1');
+	const localQuantity = use$(localQuantity$);
+	const invalidQuantity$ = useObservable(false);
+	const invalidQuantity = use$(invalidQuantity$);
+
+	return (
+		<ActionModal
+			isOpen={isOpen}
+			chainId={chainId}
+			onClose={() => buyModalStore.send({ type: 'close' })}
+			title="Select Quantity"
+			disableAnimation={true}
+			ctas={[
+				{
+					label: 'Buy now',
+					onClick: () => {
+						buyModalStore.send({
+							type: 'setQuantity',
+							quantity: Number(localQuantity),
+						});
+					},
+					disabled: invalidQuantity,
+				},
+			]}
+		>
+			<div className="flex w-full flex-col gap-4">
+				<QuantityInput
+					$quantity={localQuantity$}
+					$invalidQuantity={invalidQuantity$}
+					decimals={order.quantityDecimals}
+					maxQuantity={order.quantityRemaining}
+				/>
+
+				<TotalPrice order={order} quantityStr={localQuantity} />
+			</div>
+		</ActionModal>
+	);
+};
+
+const TotalPrice = ({
+	order,
+	quantityStr,
+}: { order: Order; quantityStr: string }) => {
+	const { data: marketplaceConfig } = useMarketplaceConfig();
+	const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
+		chainId: order.chainId,
+		currencyAddress: order.priceCurrencyAddress,
+	});
+
+	let error: null | string = null;
+	let formattedPrice = '0';
+
+	if (currency) {
+		try {
+			const price = dn.from(order.priceAmount, currency.decimals);
+
+			const totalPriceWithoutFees = dn.multiply(quantityStr, price);
+			const marketplaceFeePercentage =
+				marketplaceConfig?.collections.find((collection) =>
+					compareAddress(collection.address, order.collectionContractAddress),
+				)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+
+			const feeMultiplier = dn.from(
+				1 + marketplaceFeePercentage / 100,
+				currency.decimals,
+			);
+			const totalPrice = dn.multiply(totalPriceWithoutFees, feeMultiplier);
+
+			formattedPrice = dn.format(totalPrice, { trailingZeros: false });
+		} catch (e) {
+			console.error('Error formatting price', e);
+			error = 'Unable to calculate total price';
+		}
+	}
+
+	return error ? (
+		<Text className="font-body font-medium text-xs" color="text50">
+			{error}
+		</Text>
+	) : (
+		<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/Modal.tsx

@@ -1,121 +1,106 @@
 'use client';
 
-import { use$ } from '@legendapp/state/react';
-import type { Hex } from 'viem';
-import { ContractType, type TokenMetadata } from '../../../_internal';
+import { useSelectPaymentModal } from '@0xsequence/checkout';
+import { useEffect } from 'react';
+import { ContractType } from '../../../_internal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
 import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
-import { useBuyCollectable } from './hooks/useBuyCollectable';
+import { ERC1155QuantityModal } from './ERC1155QuantityModal';
 import { useLoadData } from './hooks/useLoadData';
-import { CheckoutModal } from './modals/CheckoutModal';
-import type { BuyInput } from './modals/CheckoutModal';
-import { ERC1155QuantityModal } from './modals/Modal1155';
-import { buyModal$ } from './store';
+import { usePaymentModalParams } from './hooks/usePaymentModalParams';
+import {
+	buyModalStore,
+	useBuyModalProps,
+	useIsOpen,
+	useOnError,
+	useQuantity,
+} from './store';
 
 export const BuyModal = () => {
-	const isOpen = use$(buyModal$.isOpen);
+	const isOpen = useIsOpen();
 
-	if (!isOpen) return null;
+	if (!isOpen) {
+		return null;
+	}
 
 	return <BuyModalContent />;
 };
 
 const BuyModalContent = () => {
-	const chainId = String(use$(buyModal$.state.order.chainId));
-	const collectionAddress = use$(
-		buyModal$.state.order.collectionContractAddress,
-	) as Hex;
-	const buyModalState = use$(buyModal$.state);
-	const collectibleId = use$(buyModal$.state.order.tokenId);
-	const callbacks = use$(buyModal$.callbacks);
-	const order = use$(buyModal$.state.order);
-	const isOpen = use$(buyModal$.isOpen);
-	const checkoutModalIsLoading = use$(buyModal$.state.checkoutModalIsLoading);
-	const setCheckoutModalIsLoading = use$(buyModal$.setCheckoutModalIsLoading);
-	const setCheckoutModalLoaded = use$(buyModal$.setCheckoutModalLoaded);
+	const { chainId, skipNativeBalanceCheck } = useBuyModalProps();
 
-	const { collection, collectable, checkoutOptions, isLoading, isError } =
-		useLoadData({
-			chainId: Number(chainId),
-			collectionAddress,
-			collectibleId,
-			orderId: order.orderId,
-			marketplace: order.marketplace,
-		});
+	const onError = useOnError();
+
+	const { openSelectPaymentModal } = useSelectPaymentModal();
+	const quantity = useQuantity();
+
+	const {
+		collection,
+		collectable,
+		wallet,
+		isLoading,
+		isError,
+		order,
+		checkoutOptions,
+	} = useLoadData();
 
 	const {
-		buy,
-		isLoading: buyIsLoading,
-		isError: buyIsError,
-	} = useBuyCollectable({
-		chainId,
-		collectionAddress,
-		callbacks,
-		tokenId: collectibleId,
-		priceCurrencyAddress: order.priceCurrencyAddress,
-		setCheckoutModalIsLoading,
-		setCheckoutModalLoaded,
-		...(buyModalState?.customProviderCallback && {
-			customProviderCallback: buyModalState.customProviderCallback,
-		}),
+		data: paymentModalParams,
+		isLoading: isPaymentModalParamsLoading,
+		isError: isPaymentModalParamsError,
+	} = usePaymentModalParams({
+		wallet,
+		quantity,
+		marketplace: order?.marketplace,
+		collectable: collectable,
+		checkoutOptions: checkoutOptions,
+		priceCurrencyAddress: order?.priceCurrencyAddress,
 	});
 
-	const buyAction = (input: BuyInput) => {
-		if (buy && checkoutOptions) {
-			buy({ ...input, checkoutOptions });
-			buyModal$.state.purchaseProcessing.set(true);
-		} else {
-			console.error('buy is null or undefined');
+	// biome-ignore lint/correctness/useExhaustiveDependencies: we want to set this on collection change
+	useEffect(() => {
+		if (collection?.type === ContractType.ERC721 && !quantity) {
+			buyModalStore.send({ type: 'setQuantity', quantity: 1 });
 		}
-	};
+	}, [collection]);
+
+	if (isError || isPaymentModalParamsError) {
+		onError(new Error('Error loading data'));
+		return (
+			<ErrorModal
+				isOpen={true}
+				chainId={chainId}
+				onClose={() => buyModalStore.send({ type: 'close' })}
+				title="Error"
+			/>
+		);
+	}
 
 	if (
 		isLoading ||
-		checkoutModalIsLoading ||
+		isPaymentModalParamsLoading ||
 		!collection ||
 		!collectable ||
-		!checkoutOptions ||
-		buyIsLoading
+		!order
 	) {
 		return (
 			<LoadingModal
-				isOpen={isOpen}
-				chainId={Number(chainId)}
-				onClose={buyModal$.close}
+				isOpen={true}
+				chainId={chainId}
+				onClose={() => buyModalStore.send({ type: 'close' })}
 				title="Loading Sequence Pay"
 			/>
 		);
 	}
 
-	if (buyIsError || isError) {
-		return (
-			<ErrorModal
-				isOpen={isOpen}
-				chainId={Number(chainId)}
-				onClose={buyModal$.close}
-				title="Error"
-			/>
-		);
+	if (collection.type === ContractType.ERC1155 && !quantity) {
+		return <ERC1155QuantityModal order={order} />;
 	}
 
-	if (buyModal$.state.purchaseProcessing.get()) {
-		return null;
+	if (paymentModalParams) {
+		openSelectPaymentModal({
+			...paymentModalParams,
+			skipNativeBalanceCheck,
+		});
 	}
-
-	return collection.type === ContractType.ERC721 ? (
-		<CheckoutModal
-			buy={buyAction}
-			collectable={collectable as TokenMetadata}
-			order={order}
-		/>
-	) : (
-		<ERC1155QuantityModal
-			buy={buyAction}
-			collectable={collectable as TokenMetadata}
-			order={order}
-			chainId={chainId}
-			collectionAddress={collectionAddress}
-			collectibleId={collectibleId}
-		/>
-	);
 };

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

@@ -1,58 +1,24 @@
-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',
-	priceAmount: '1000000000000000000',
-	priceCurrencyAddress: '0x0',
-	quantityRemaining: '1',
-	createdAt: new Date().toISOString(),
-	marketplace: MarketplaceKind.sequence_marketplace_v2,
-} as Order;
-
-vi.mock('../hooks/useLoadData', () => ({
-	useLoadData: vi.fn(),
-}));
-
-vi.mock('../hooks/useBuyCollectable', () => ({
-	useBuyCollectable: vi.fn(),
-}));
+import { WebSdkWrapper, cleanup, render, screen } from '@test';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
-vi.mock('@0xsequence/kit', () => ({
-	useWaasFeeOptions: vi.fn().mockReturnValue([]),
-}));
+import { server } from '@test';
+import type { Address } from 'viem';
+import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import { BuyModal } from '../Modal';
+import { buyModalStore } from '../store';
 
 describe('BuyModal', () => {
 	beforeEach(() => {
-		vi.clearAllMocks();
-
-		(useLoadData as Mock).mockReturnValue({
-			collection: null,
-			collectable: null,
-			checkoutOptions: null,
-			isLoading: false,
-			isError: false,
-		});
-
-		(useBuyCollectable as Mock).mockReturnValue({
-			buy: vi.fn(),
-			isLoading: false,
-			isError: false,
-		});
-
-		buyModal$.close();
+		buyModalStore.send({ type: 'close' });
+	});
 
+	afterEach(() => {
 		cleanup();
+		// Reset server handlers
+		server.resetHandlers();
 	});
 
+	// Currently this is the only test we can run without the provider
 	it('should not render when isOpen is false', () => {
 		render(<BuyModal />);
 
@@ -62,190 +28,83 @@ describe('BuyModal', () => {
 	});
 
 	it.skip('should render error modal when there is an error', async () => {
-		const mockOrderBasic = {
-			...mockOrder,
-			marketplace: MarketplaceKind.sequence_marketplace_v2,
-			collectionContractAddress: '0x123',
-			tokenId: '1',
-			quantityRemaining: '1',
-			priceCurrencyAddress: '0x0',
-			chainId: 1,
-			priceAmount: '1000000000000000000',
-		};
-
-		// Test loading error
-		(useLoadData as Mock).mockReturnValue({
-			collection: { type: ContractType.ERC721 },
-			collectable: { decimals: 0 },
-			checkoutOptions: { someOption: true },
-			isLoading: false,
-			isError: true,
-		});
-
-		buyModal$.open({
-			order: mockOrderBasic,
-			callbacks: {},
-			chainId: '1',
-			collectionAddress: '0x123',
-			tokenId: '1',
-		});
-
-		render(<BuyModal />);
-
-		// Should show error modal
-		await waitFor(() => {
-			expect(screen.getByTestId('error-modal')).toBeInTheDocument();
-			expect(
-				screen.getByText('Error loading item details'),
-			).toBeInTheDocument();
-		});
-
-		// Cleanup
-		cleanup();
-
-		// Test buy error
-		(useLoadData as Mock).mockReturnValue({
-			collection: { type: ContractType.ERC721 },
-			collectable: { decimals: 0 },
-			checkoutOptions: { someOption: true },
-			isLoading: false,
-			isError: false,
-		});
-
-		(useBuyCollectable as Mock).mockReturnValue({
-			buy: vi.fn(),
-			isLoading: false,
-			isError: true,
-			status: 'error',
-		});
-
-		buyModal$.open({
-			order: mockOrderBasic,
-			callbacks: {},
-			chainId: '1',
-			collectionAddress: '0x123',
-			tokenId: '1',
-		});
-
-		render(<BuyModal />);
-
-		// Should show error modal for buy error too
-		expect(screen.getByText('Error')).toBeInTheDocument();
+		// server.use(
+		//   http.post(mockMetadataEndpoint("GetContractInfo"), () => {
+		//     return new HttpResponse(null, {
+		//       status: 404,
+		//     })
+		//   }),
+		// );
+		// buyModalStore.send({
+		//   type: 'open',
+		//   props: {
+		//     orderId: mockOrder.orderId,
+		//     chainId: mockOrder.chainId,
+		//     collectionAddress: mockOrder.collectionContractAddress as Address,
+		//     collectibleId: "1",
+		//     marketplace: mockOrder.marketplace,
+		//   },
+		// });
+		// render(
+		// <WebSdkWrapper>
+		//   <BuyModal />
+		// </WebSdkWrapper>
+		// );
+		// // Should show error modal
+		// await waitFor(() => {
+		//   expect(screen.getByText("Error")).toBeInTheDocument();
+		// }, { timeout: 1000 });
 	});
 
 	it.skip('should render ERC1155QuantityModal when contract type is ERC1155', async () => {
-		const mockOrderERC1155 = {
-			...mockOrder,
-			marketplace: MarketplaceKind.sequence_marketplace_v2,
-			collectionContractAddress: '0x123',
-			tokenId: '1',
-			quantityRemaining: '10',
-			priceCurrencyAddress: '0x0',
-			chainId: 1,
-			quantityDecimals: 0,
-			priceAmount: '1000000000000000000',
-		};
-
-		(useLoadData as Mock).mockReturnValue({
-			collection: { type: ContractType.ERC1155 },
-			collectable: { decimals: 0 },
-			checkoutOptions: { someOption: true },
-			isLoading: false,
-			isError: false,
-		});
-
-		(useBuyCollectable as Mock).mockReturnValue({
-			buy: vi.fn(),
-			isLoading: false,
-			isError: false,
-		});
-
-		buyModal$.open({
-			order: mockOrderERC1155,
-			callbacks: {},
-			chainId: '1',
-			collectionAddress: '0x123',
-			tokenId: '1',
-		});
-
-		// Initialize quantity state
-		buyModal$.state.quantity.set('1');
-		buyModal$.state.checkoutModalLoaded.set(false);
-		buyModal$.state.checkoutModalIsLoading.set(false);
-
-		render(<BuyModal />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Select Quantity')).toBeInTheDocument();
-		});
+		// // Create an ERC1155 mock collection
+		// const erc1155Collection = {
+		//   ...mockCollection,
+		//   contractType: ContractType.ERC1155,
+		// };
+		// const erc1155Order = {
+		//   ...testOrder,
+		//   quantityRemaining: "10",
+		//   quantityRemainingFormatted: "10",
+		// };
+		// buyModalStore.send({
+		//   type: 'open',
+		//   props: {
+		//     orderId: erc1155Order.orderId,
+		//     chainId: erc1155Order.chainId,
+		//     collectionAddress: erc1155Order.collectionContractAddress,
+		//     collectibleId: erc1155Order.tokenId,
+		//     marketplace: erc1155Order.marketplace,
+		//   },
+		// });
+		// render(<BuyModal />);
+		// // First should show loading
+		// expect(screen.getByText("Loading Sequence Pay")).toBeInTheDocument();
+		// // Then should show quantity modal for ERC1155
+		// await waitFor(() => {
+		//   expect(screen.getByText("Select Quantity")).toBeInTheDocument();
+		// }, { timeout: 5000 });
 	});
 
-	it.skip('should not render ERC1155QuantityModal when contract type is ERC721', async () => {
-		const mockBuy = vi.fn();
-		const mockOrderERC721 = {
-			...mockOrder,
-			marketplace: MarketplaceKind.sequence_marketplace_v2,
-			collectionContractAddress: '0x123',
-			tokenId: '1',
-			quantityRemaining: '1',
-			priceCurrencyAddress: '0x0',
-			chainId: 1,
-			priceAmount: '1000000000000000000',
-		};
-
-		// First, mock loading state
-		(useLoadData as Mock).mockReturnValue({
-			collection: null,
-			collectable: null,
-			checkoutOptions: null,
-			isLoading: true,
-			isError: false,
-		});
-
-		(useBuyCollectable as Mock).mockReturnValue({
-			buy: mockBuy,
-			isLoading: false,
-			isError: false,
-			status: 'ready',
-		});
-
-		buyModal$.open({
-			order: mockOrderERC721,
-			callbacks: {},
-			chainId: '1',
-			collectionAddress: '0x123',
-			tokenId: '1',
-		});
-
-		const { rerender } = render(<BuyModal />);
-
-		// Verify loading modal is shown
+	it('should show loading modal', async () => {
+		buyModalStore.send({
+			type: 'open',
+			props: {
+				orderId: mockOrder.orderId,
+				chainId: mockOrder.chainId,
+				collectionAddress: mockOrder.collectionContractAddress as Address,
+				collectibleId: '1',
+				marketplace: mockOrder.marketplace,
+			},
+		});
+
+		render(
+			<WebSdkWrapper>
+				<BuyModal />
+			</WebSdkWrapper>,
+		);
+
+		// Should show loading modal
 		expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
-
-		// Then update the mock to simulate data loaded
-		(useLoadData as Mock).mockReturnValue({
-			collection: { type: ContractType.ERC721 },
-			collectable: { decimals: 0 },
-			checkoutOptions: { someOption: true },
-			isLoading: false,
-			isError: false,
-		});
-
-		// Force a re-render with the new mock values
-		rerender(<BuyModal />);
-
-		// Wait for loading to complete and verify the rest of the flow
-		await waitFor(() => {
-			expect(mockBuy).toHaveBeenCalledWith({
-				orderId: mockOrderERC721.orderId,
-				collectableDecimals: 0,
-				quantity: '1',
-				marketplace: mockOrderERC721.marketplace,
-				checkoutOptions: { someOption: true },
-			});
-		});
-
-		expect(screen.queryByText('Loading Sequence Pay')).not.toBeInTheDocument();
-		expect(screen.queryByText('Select Quantity')).not.toBeInTheDocument();
 	});
 });