@0xsequence/marketplace-sdk 0.8.11 → 0.8.12

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

@@ -0,0 +1,184 @@
+'use client';
+
+import { use$, useObservable } from '@legendapp/state/react';
+
+import { Text, TokenImage } from '@0xsequence/design-system';
+import type { Address } from 'viem';
+import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../consts';
+import type { MarketplaceType } from '../../../../../types';
+import { formatPriceWithFee } from '../../../../../utils/price';
+import type { Order } from '../../../../_internal';
+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?: {
+		amount: string;
+		currencyAddress: Address;
+	};
+	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$);
+
+	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?: {
+		amount: string;
+		currencyAddress: Address;
+	};
+	chainId: number;
+	marketplaceType: MarketplaceType;
+};
+
+const TotalPrice = ({
+	order,
+	quantityStr,
+	salePrice,
+	chainId,
+	marketplaceType,
+}: TotalPriceProps) => {
+	const isShop = marketplaceType === 'shop';
+	const isMarket = marketplaceType === 'market';
+	const { data: marketplaceConfig } = useMarketplaceConfig();
+	const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
+		chainId,
+		currencyAddress: order
+			? order.priceCurrencyAddress
+			: salePrice?.currencyAddress,
+	});
+
+	let error: null | string = null;
+	let formattedPrice = '0';
+
+	const quantity = BigInt(quantityStr);
+
+	if (isMarket && currency && order) {
+		try {
+			// Find fee percentage from market collections only
+			const marketCollection = marketplaceConfig?.market?.collections?.find(
+				(col) =>
+					col.itemsAddress.toLowerCase() ===
+						order.collectionContractAddress.toLowerCase() &&
+					col.chainId === chainId,
+			);
+			const marketplaceFeePercentage =
+				marketCollection?.feePercentage ?? DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+			const quantity = BigInt(quantityStr);
+			const totalPriceRaw = BigInt(order ? order.priceAmount : '0') * quantity;
+
+			formattedPrice = formatPriceWithFee(
+				totalPriceRaw,
+				currency.decimals,
+				marketplaceFeePercentage,
+			);
+		} catch (e) {
+			console.error('Error formatting price', e);
+			error = 'Unable to calculate total price';
+		}
+	}
+
+	if (isShop && salePrice && currency) {
+		const totalPriceRaw = BigInt(salePrice.amount) * quantity;
+		formattedPrice = formatPriceWithFee(
+			totalPriceRaw,
+			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 || isCurrencyLoading ? (
+					<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/components/ERC1155ShopModal.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import type { ContractInfo } from '@0xsequence/metadata';
+import { useEffect } from 'react';
+import { type Address, zeroAddress } from 'viem';
+import type { CheckoutOptions } from '../../../../_internal';
+import { LoadingModal } from '../../_internal/components/actionModal/LoadingModal';
+import { useERC1155Checkout } from '../hooks/useERC1155Checkout';
+import {
+	type CheckoutOptionsSalesContractProps,
+	buyModalStore,
+	isShopProps,
+	useBuyModalProps,
+	useCheckoutModalState,
+	useQuantity,
+} from '../store';
+import { ERC1155QuantityModal } from './ERC1155QuantityModal';
+import type { ShopData } from './types';
+
+interface ERC1155ShopModalProps {
+	collection: ContractInfo;
+	shopData: ShopData;
+	chainId: number;
+}
+
+export const ERC1155ShopModal = ({
+	collection,
+	shopData,
+	chainId,
+}: ERC1155ShopModalProps) => {
+	const quantity = useQuantity();
+	const modalProps = useBuyModalProps();
+	const isShop = isShopProps(modalProps);
+	const quantityDecimals =
+		isShop && modalProps.quantityDecimals ? modalProps.quantityDecimals : 0;
+	const quantityRemaining =
+		isShop && modalProps.quantityRemaining
+			? modalProps.quantityRemaining.toString()
+			: '0';
+
+	if (!quantity) {
+		return (
+			<ERC1155QuantityModal
+				salePrice={{
+					amount: shopData.salePrice?.amount ?? '0',
+					currencyAddress:
+						(shopData.salePrice?.currencyAddress as Address) ?? zeroAddress,
+				}}
+				marketplaceType="shop"
+				quantityDecimals={quantityDecimals}
+				quantityRemaining={quantityRemaining}
+				chainId={chainId}
+			/>
+		);
+	}
+
+	return (
+		<ERC1155SaleContractCheckoutModalOpener
+			chainId={chainId}
+			salesContractAddress={shopData.salesContractAddress as Address}
+			collectionAddress={collection.address as Address}
+			items={shopData.items.map((item) => ({
+				...item,
+				tokenId: item.tokenId ?? '0',
+				quantity: quantity.toString() ?? '1',
+			}))}
+			checkoutOptions={shopData.checkoutOptions}
+			enabled={!!shopData.salesContractAddress && !!shopData.items}
+		/>
+	);
+};
+
+interface ERC1155SaleContractCheckoutModalOpenerProps
+	extends CheckoutOptionsSalesContractProps {
+	enabled: boolean;
+	checkoutOptions?: CheckoutOptions;
+}
+
+const ERC1155SaleContractCheckoutModalOpener = ({
+	chainId,
+	salesContractAddress,
+	collectionAddress,
+	items,
+	checkoutOptions,
+	enabled,
+	customProviderCallback,
+}: ERC1155SaleContractCheckoutModalOpenerProps) => {
+	const checkoutModalState = useCheckoutModalState();
+
+	const { openCheckoutModal, isLoading, isError, isEnabled } =
+		useERC1155Checkout({
+			chainId,
+			salesContractAddress,
+			collectionAddress,
+			items,
+			checkoutOptions,
+			customProviderCallback,
+			enabled,
+		});
+
+	useEffect(() => {
+		if (checkoutModalState === 'idle' && isEnabled && !isLoading && !isError) {
+			buyModalStore.send({ type: 'openCheckoutModal' });
+			openCheckoutModal();
+			buyModalStore.send({ type: 'checkoutModalOpened' });
+		}
+	}, [checkoutModalState, isLoading, isError, isEnabled, openCheckoutModal]);
+
+	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/components/ERC721BuyModal.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import {
+	type SelectPaymentSettings,
+	useSelectPaymentModal,
+} from '@0xsequence/checkout';
+import type { ContractInfo, TokenMetadata } from '@0xsequence/metadata';
+import { useEffect } from 'react';
+import type { CheckoutOptions, Order } from '../../../../_internal';
+import type { WalletInstance } from '../../../../_internal/wallet/wallet';
+import { usePaymentModalParams } from '../hooks/usePaymentModalParams';
+import { buyModalStore, usePaymentModalState, useQuantity } from '../store';
+
+interface ERC721BuyModalProps {
+	collection: ContractInfo;
+	collectable: TokenMetadata;
+	order: Order;
+	wallet: WalletInstance | null | undefined;
+	checkoutOptions: CheckoutOptions | undefined;
+	chainId: number;
+}
+
+export const ERC721BuyModal = ({
+	collectable,
+	order,
+	wallet,
+	checkoutOptions,
+}: ERC721BuyModalProps) => {
+	const quantity = useQuantity();
+
+	// Ensure quantity is set to 1 for ERC721
+	useEffect(() => {
+		if (!quantity) {
+			buyModalStore.send({ type: 'setQuantity', quantity: 1 });
+		}
+	}, [quantity]);
+
+	const {
+		data: paymentModalParams,
+		isLoading: isPaymentModalParamsLoading,
+		isError: isPaymentModalParamsError,
+	} = usePaymentModalParams({
+		wallet,
+		quantity: quantity ?? undefined,
+		marketplace: order?.marketplace,
+		collectable,
+		checkoutOptions,
+		priceCurrencyAddress: order?.priceCurrencyAddress,
+		enabled: true,
+	});
+
+	// Show loading or error states would be handled by parent router
+	if (isPaymentModalParamsLoading || !paymentModalParams) {
+		return null;
+	}
+
+	if (isPaymentModalParamsError) {
+		throw new Error(
+			'Failed to load payment parameters for ERC721 marketplace purchase',
+		);
+	}
+
+	return <PaymentModalOpener paymentModalParams={paymentModalParams} />;
+};
+
+interface PaymentModalOpenerProps {
+	paymentModalParams: SelectPaymentSettings;
+}
+
+const PaymentModalOpener = ({
+	paymentModalParams,
+}: PaymentModalOpenerProps) => {
+	const { openSelectPaymentModal } = useSelectPaymentModal();
+	const paymentModalState = usePaymentModalState();
+
+	useEffect(() => {
+		if (paymentModalState === 'idle') {
+			buyModalStore.send({ type: 'openPaymentModal' });
+			openSelectPaymentModal(paymentModalParams);
+			buyModalStore.send({ type: 'paymentModalOpened' });
+		}
+	}, [paymentModalState, paymentModalParams, openSelectPaymentModal]);
+
+	return null;
+};

package/src/react/ui/modals/BuyModal/components/ERC721ShopModal.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import {
+	type SelectPaymentSettings,
+	useSelectPaymentModal,
+} from '@0xsequence/checkout';
+import type { ContractInfo } from '@0xsequence/metadata';
+import { useEffect } from 'react';
+import { BuyModalErrorFactory } from '../../../../../types/buyModalErrors';
+import { useERC721SalePaymentParams } from '../hooks/useERC721SalePaymentParams';
+import { buyModalStore, usePaymentModalState } from '../store';
+import type { ShopData } from './types';
+
+interface ERC721ShopModalProps {
+	collection: ContractInfo;
+	shopData: ShopData;
+	chainId: number;
+}
+
+export const ERC721ShopModal = ({
+	collection,
+	shopData,
+	chainId,
+}: ERC721ShopModalProps) => {
+	const quantity = Number(shopData.items[0]?.quantity ?? 1);
+
+	const {
+		data: erc721SalePaymentParams,
+		isLoading: isErc721PaymentParamsLoading,
+		isError: isErc721PaymentParamsError,
+	} = useERC721SalePaymentParams({
+		salesContractAddress: shopData.salesContractAddress,
+		collectionAddress: collection.address,
+		price: shopData.salePrice?.amount || '0',
+		currencyAddress: shopData.salePrice?.currencyAddress || '',
+		enabled: true,
+		chainId,
+		quantity,
+	});
+
+	// Handle loading or error states
+	if (isErc721PaymentParamsLoading || !erc721SalePaymentParams) {
+		return null;
+	}
+
+	if (isErc721PaymentParamsError) {
+		throw BuyModalErrorFactory.contractError(
+			shopData.salesContractAddress,
+			'Failed to load ERC721 sale parameters',
+		);
+	}
+
+	return <PaymentModalOpener paymentModalParams={erc721SalePaymentParams} />;
+};
+
+interface PaymentModalOpenerProps {
+	paymentModalParams: SelectPaymentSettings;
+}
+
+const PaymentModalOpener = ({
+	paymentModalParams,
+}: PaymentModalOpenerProps) => {
+	const { openSelectPaymentModal } = useSelectPaymentModal();
+	const paymentModalState = usePaymentModalState();
+	const totalPrice =
+		BigInt(paymentModalParams.price) *
+		BigInt(paymentModalParams.collectibles[0].quantity);
+
+	useEffect(() => {
+		if (paymentModalState === 'idle') {
+			buyModalStore.send({ type: 'openPaymentModal' });
+			openSelectPaymentModal({
+				...paymentModalParams,
+				price: String(totalPrice),
+			});
+			buyModalStore.send({ type: 'paymentModalOpened' });
+		}
+	}, [
+		paymentModalState,
+		paymentModalParams,
+		openSelectPaymentModal,
+		totalPrice,
+	]);
+
+	return null;
+};

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

@@ -0,0 +1,14 @@
+'use client';
+
+import { useIsOpen } from '../store';
+import { BuyModalRouter } from './BuyModalRouter';
+
+export const BuyModal = () => {
+	const isOpen = useIsOpen();
+
+	if (!isOpen) {
+		return null;
+	}
+
+	return <BuyModalRouter />;
+};

package/src/react/ui/modals/BuyModal/components/types.ts

@@ -0,0 +1,8 @@
+import type { CheckoutOptions } from '../../../../_internal';
+
+export interface ShopData {
+	salesContractAddress: string;
+	items: Array<{ tokenId?: string; quantity?: string }>;
+	salePrice?: { currencyAddress?: string; amount?: string };
+	checkoutOptions?: CheckoutOptions;
+}

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

@@ -8,11 +8,11 @@ import { mockMarketplaceEndpoint } from '../../../../../_internal/api/__mocks__/
 import { TransactionCrypto } from '../../../../../_internal/api/marketplace.gen';
 import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import { useCheckoutOptions } from '../useCheckoutOptions';
-import { useFees } from '../useFees';
+import { useMarketPlatformFee } from '../useMarketPlatformFee';
 
 // Mock dependencies
 vi.mock('../../../../../_internal/wallet/useWallet');
-vi.mock('../useFees');
+vi.mock('../useMarketPlatformFee');
 
 // Create mock wallet instance
 const mockWallet = createMockWallet({
@@ -38,7 +38,7 @@ describe('useCheckoutOptions', () => {
 		});
 
 		// Set up default fees mock
-		vi.mocked(useFees).mockReturnValue({
+		vi.mocked(useMarketPlatformFee).mockReturnValue({
 			amount: '100000000000000000',
 			receiver: zeroAddress,
 		});
@@ -46,7 +46,7 @@ describe('useCheckoutOptions', () => {
 
 	it('should include fees in the API request', async () => {
 		const mockFeeAmount = '200000000000000000';
-		vi.mocked(useFees).mockReturnValue({
+		vi.mocked(useMarketPlatformFee).mockReturnValue({
 			amount: mockFeeAmount,
 			receiver: zeroAddress,
 		});