@0xsequence/marketplace-sdk 0.0.0-20250513233135

package/src/react/ui/icons/InfoIcon.tsx

@@ -0,0 +1,44 @@
+'use client';
+import type { IconProps } from '@0xsequence/design-system';
+import type { SVGProps } from 'react';
+import { cn } from '../../../utils';
+import { iconVariants } from './iconVariants';
+
+const Svg = (props: SVGProps<SVGSVGElement>) => (
+	<svg
+		className="h-20 w-20"
+		viewBox="0 0 20 20"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-label="Information"
+		{...props}
+	>
+		<title>Information icon</title>
+		<path d="M10.75 8.75V13.75H9.25V8.75H10.75Z" fill="white" />
+		<path
+			d="M9.37508 7.47656C9.55997 7.65885 9.78263 7.75 10.043 7.75C10.2097 7.75 10.3634 7.70833 10.504 7.625C10.6446 7.53906 10.7579 7.42578 10.8438 7.28516C10.9324 7.14193 10.9779 6.98438 10.9805 6.8125C10.9779 6.55729 10.8829 6.33854 10.6954 6.15625C10.5079 5.97396 10.2904 5.88281 10.043 5.88281C9.78263 5.88281 9.55997 5.97396 9.37508 6.15625C9.19279 6.33854 9.10294 6.55729 9.10555 6.8125C9.10294 7.07031 9.19279 7.29167 9.37508 7.47656Z"
+			fill="white"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+const SvgInfoIcon = ({ className, size = 'sm', ...props }: IconProps) => (
+	<Svg
+		className={cn(
+			iconVariants({
+				size,
+			}),
+			className,
+		)}
+		{...props}
+	/>
+);
+
+export default SvgInfoIcon;

package/src/react/ui/icons/iconVariants.ts

@@ -0,0 +1,16 @@
+import { cva } from 'class-variance-authority';
+
+export const iconVariants = cva('block shrink-0', {
+	variants: {
+		size: {
+			xs: 'w-4 h-4',
+			sm: 'w-5 h-5',
+			md: 'w-6 h-6',
+			lg: 'w-7 h-7',
+			xl: 'w-9 h-9',
+		},
+	},
+	defaultVariants: {
+		size: 'md',
+	},
+});

package/src/react/ui/icons/index.ts

@@ -0,0 +1,4 @@
+export * from './BellIcon';
+export * from './CalendarIcon';
+export * from './CartIcon';
+export * from './InfoIcon';

package/src/react/ui/index.ts

@@ -0,0 +1,11 @@
+export * from './modals/modal-provider';
+export { useCreateListingModal } from './modals/CreateListingModal';
+export { useMakeOfferModal } from './modals/MakeOfferModal';
+export { useSuccessfulPurchaseModal } from './modals/SuccessfulPurchaseModal';
+export { useTransferModal } from './modals/TransferModal';
+export { useSellModal } from './modals/SellModal';
+export { useBuyModal } from './modals/BuyModal';
+
+// components
+export { Media } from './components/media/Media';
+export { CollectibleCard } from './components/marketplace-collectible-card/CollectibleCard';

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

@@ -0,0 +1,187 @@
+'use client';
+
+import { use$, useObservable } from '@legendapp/state/react';
+
+import { Text, TokenImage } from '@0xsequence/design-system';
+import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../consts';
+import type { MarketplaceType, Price } from '../../../../types';
+import type { Order } from '../../../../types';
+import { compareAddress } from '../../../../utils/address';
+import { formatPriceWithFee } from '../../../../utils/price';
+import { useCurrency, useMarketplaceConfig } from '../../../hooks';
+import { ActionModal } from '../_internal/components/actionModal';
+import QuantityInput from '../_internal/components/quantityInput';
+import { buyModalStore, useIsOpen } from './store';
+
+type ERC1155QuantityModalProps = {
+	order?: Order;
+	marketplaceType: MarketplaceType;
+	quantityDecimals?: number;
+	quantityRemaining?: string;
+	salePrice?: Price;
+	chainId: number;
+};
+
+export const ERC1155QuantityModal = ({
+	order,
+	quantityDecimals,
+	quantityRemaining,
+	salePrice,
+	chainId,
+	marketplaceType,
+}: ERC1155QuantityModalProps) => {
+	const isOpen = useIsOpen();
+
+	const localQuantity$ = useObservable('1');
+	const localQuantity = use$(localQuantity$);
+	const invalidQuantity$ = useObservable(false);
+	const invalidQuantity = use$(invalidQuantity$);
+
+	if (quantityDecimals === undefined) {
+		throw new Error('quantityDecimals is required');
+	}
+	if (quantityRemaining === undefined) {
+		throw new Error('quantityRemaining is required');
+	}
+
+	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={quantityDecimals}
+					maxQuantity={quantityRemaining}
+				/>
+
+				<TotalPrice
+					order={order}
+					quantityStr={localQuantity}
+					salePrice={salePrice}
+					chainId={chainId}
+					marketplaceType={marketplaceType}
+				/>
+			</div>
+		</ActionModal>
+	);
+};
+
+type TotalPriceProps = {
+	order?: Order;
+	quantityStr: string;
+	salePrice?: Price;
+	chainId: number;
+	marketplaceType: MarketplaceType;
+};
+
+const TotalPrice = ({
+	order,
+	quantityStr,
+	salePrice,
+	chainId,
+	marketplaceType,
+}: TotalPriceProps) => {
+	const isShop = marketplaceType === 'shop';
+	const isMarket = marketplaceType === 'market';
+	const { data: marketplaceConfig } = useMarketplaceConfig();
+	// Currency of sale contract is in salePrice, no need to fetch it
+	const { data: marketCurrency, isLoading: isMarketCurrencyLoading } =
+		useCurrency({
+			chainId,
+			currencyAddress: order?.priceCurrencyAddress,
+			query: {
+				enabled: isMarket,
+			},
+		});
+	const currency = isShop ? salePrice?.currency : marketCurrency;
+	console.log(salePrice?.amountRaw);
+
+	let error: null | string = null;
+	let formattedPrice = '0';
+
+	const quantity = BigInt(quantityStr);
+
+	if (isMarket && marketCurrency && order) {
+		try {
+			const marketplaceFeePercentage =
+				marketplaceConfig?.collections.find((collection) =>
+					compareAddress(
+						collection.address,
+						order ? order.collectionContractAddress : '',
+					),
+				)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+			const totalPriceRaw = BigInt(order.priceAmount) * quantity;
+
+			formattedPrice = formatPriceWithFee(
+				totalPriceRaw,
+				marketCurrency.decimals,
+				marketplaceFeePercentage,
+			);
+		} catch (e) {
+			console.error('Error formatting price', e);
+			error = 'Unable to calculate total price';
+		}
+	}
+
+	if (isShop && salePrice) {
+		const totalPriceRaw = BigInt(salePrice.amountRaw) * quantity;
+		formattedPrice = formatPriceWithFee(
+			totalPriceRaw,
+			salePrice.currency.decimals,
+			// Fee percentage isn't included if it's sale contract
+			0,
+		);
+	}
+
+	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">
+				{!currency || isMarketCurrencyLoading ? (
+					<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">
+							{marketCurrency?.symbol}
+						</Text>
+					</>
+				)}
+			</div>
+		</div>
+	);
+};

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

@@ -0,0 +1,226 @@
+'use client';
+
+import {
+	type SelectPaymentSettings,
+	useSelectPaymentModal,
+} from '@0xsequence/checkout';
+import { useEffect, useRef } from 'react';
+import { ContractType } from '../../../_internal';
+import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
+import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
+import { ERC1155QuantityModal } from './ERC1155QuantityModal';
+import { useERC1155Checkout } from './hooks/useERC1155Checkout';
+import { useLoadData } from './hooks/useLoadData';
+import { usePaymentModalParams } from './hooks/usePaymentModalParams';
+import {
+	type CheckoutOptionsSalesContractProps,
+	buyModalStore,
+	isMarketplaceProps,
+	isShopProps,
+	useBuyModalProps,
+	useIsOpen,
+	useOnError,
+	useQuantity,
+} from './store';
+
+export const BuyModal = () => {
+	const isOpen = useIsOpen();
+
+	if (!isOpen) {
+		return null;
+	}
+
+	return <BuyModalContent />;
+};
+
+const BuyModalContent = () => {
+	const props = useBuyModalProps();
+	const {
+		chainId,
+		marketplaceType,
+		collectionAddress,
+		quantityDecimals,
+		quantityRemaining,
+	} = useBuyModalProps();
+	const isShop = isShopProps(props);
+	const isMarketplace = isMarketplaceProps(props);
+
+	const onError = useOnError();
+	const quantity = useQuantity();
+
+	const {
+		collection,
+		collectable,
+		wallet,
+		isLoading,
+		isError,
+		order,
+		checkoutOptions,
+		currency,
+	} = useLoadData();
+
+	const {
+		data: paymentModalParams,
+		isLoading: isPaymentModalParamsLoading,
+		isError: isPaymentModalParamsError,
+	} = usePaymentModalParams({
+		wallet,
+		quantity,
+		marketplace: order?.marketplace,
+		collectable: collectable,
+		checkoutOptions: checkoutOptions,
+		priceCurrencyAddress: order?.priceCurrencyAddress,
+		enabled: isMarketplace,
+	});
+
+	// 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 ||
+		isPaymentModalParamsLoading ||
+		!collection ||
+		(isMarketplace && !collectable) ||
+		(isMarketplace && !order) ||
+		(isShop && !currency)
+	) {
+		return (
+			<LoadingModal
+				isOpen={true}
+				chainId={chainId}
+				onClose={() => buyModalStore.send({ type: 'close' })}
+				title="Loading Sequence Pay"
+			/>
+		);
+	}
+
+	if (collection.type === ContractType.ERC1155 && !quantity) {
+		return (
+			<ERC1155QuantityModal
+				order={order}
+				marketplaceType={marketplaceType}
+				quantityDecimals={quantityDecimals}
+				quantityRemaining={quantityRemaining}
+				salePrice={
+					isShopProps(props) && currency
+						? {
+								// eslint-disable-next-line react/prop-types
+								amountRaw: props.salePrice.amount,
+								currency,
+							}
+						: undefined
+				}
+				chainId={chainId}
+			/>
+		);
+	}
+
+	// Marketplace Payments
+	if (paymentModalParams) {
+		return <PaymentModalOpener paymentModalParams={paymentModalParams} />;
+	}
+
+	// Primary Sales Contract Checkout
+	if (isShopProps(props)) {
+		return (
+			// TODO: Add ERC721SaleContractCheckoutModalOpener once ERC721 sales contracts are implemented
+			<ERC1155SaleContractCheckoutModalOpener
+				chainId={chainId}
+				// eslint-disable-next-line react/prop-types
+				salesContractAddress={props.salesContractAddress}
+				collectionAddress={collectionAddress}
+				// eslint-disable-next-line react/prop-types
+				items={props.items}
+				// eslint-disable-next-line react/prop-types
+				enabled={!!props.salesContractAddress && !!props.items}
+			/>
+		);
+	}
+
+	return null;
+};
+
+const PaymentModalOpener = ({
+	paymentModalParams,
+}: {
+	paymentModalParams: SelectPaymentSettings;
+}) => {
+	const { openSelectPaymentModal } = useSelectPaymentModal();
+	const hasOpenedRef = useRef(false);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+	useEffect(() => {
+		if (!hasOpenedRef.current) {
+			hasOpenedRef.current = true;
+			openSelectPaymentModal(paymentModalParams);
+		}
+	}, []);
+
+	return null;
+};
+
+const ERC1155SaleContractCheckoutModalOpener = ({
+	chainId,
+	salesContractAddress,
+	collectionAddress,
+	items,
+	enabled,
+	customProviderCallback,
+}: CheckoutOptionsSalesContractProps & { enabled: boolean }) => {
+	const hasOpenedRef = useRef(false);
+
+	console.log(items);
+
+	const { openCheckoutModal, isLoading, isError, isEnabled } =
+		useERC1155Checkout({
+			chainId,
+			salesContractAddress,
+			collectionAddress,
+			items,
+			customProviderCallback,
+			enabled,
+		});
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+	useEffect(() => {
+		if (!hasOpenedRef.current && isEnabled && !isLoading) {
+			if (isError) {
+				// No need to throw an error here, as the onError callback in the hook will handle it
+				return;
+			}
+
+			// Open the checkout modal
+			hasOpenedRef.current = true;
+			openCheckoutModal();
+		}
+	}, [isLoading, isError, isEnabled]);
+
+	if (isLoading) {
+		return (
+			<LoadingModal
+				isOpen={true}
+				chainId={chainId}
+				onClose={() => buyModalStore.send({ type: 'close' })}
+				title="Loading Sequence Pay"
+			/>
+		);
+	}
+
+	return null;
+};

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

@@ -0,0 +1,107 @@
+import { cleanup, render, screen } from '@test';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+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(() => {
+		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 />);
+
+		expect(screen.queryByText('Loading Sequence Pay')).not.toBeInTheDocument();
+		expect(screen.queryByText('Checkout')).not.toBeInTheDocument();
+		expect(screen.queryByText('Select Quantity')).not.toBeInTheDocument();
+	});
+
+	it.skip('should render error modal when there is an error', async () => {
+		// 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(
+		//   <BuyModal />
+		// );
+		// // Should show error modal
+		// await waitFor(() => {
+		//   expect(screen.getByText("Error")).toBeInTheDocument();
+		// }, { timeout: 1000 });
+	});
+
+	it.skip('should render ERC1155QuantityModal when contract type is ERC1155', async () => {
+		// // 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('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,
+				marketplaceType: 'market',
+				quantityDecimals: 0,
+				quantityRemaining: '10',
+			},
+		});
+
+		render(<BuyModal />);
+
+		// Should show loading modal
+		expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+	});
+});