@0xsequence/marketplace-sdk 0.8.12 → 0.10.0

package/src/react/ui/components/_internals/action-button/ActionButton.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { observer } from '@legendapp/state/react';
-import type { Address, Hex } from 'viem';
+import type { Address } from 'viem';
 import type {
 	CollectibleCardAction,
 	MarketplaceType,
@@ -13,7 +12,7 @@ import { useActionButtonLogic } from './hooks/useActionButtonLogic';
 
 type ActionButtonProps = {
 	chainId: number;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	tokenId: string;
 	orderbookKind?: OrderbookKind;
 	isTransfer?: boolean;
@@ -33,75 +32,76 @@ type ActionButtonProps = {
 	};
 	quantityDecimals?: number;
 	quantityRemaining?: number;
+	unlimitedSupply?: boolean;
 };
 
-export const ActionButton = observer(
-	({
-		collectionAddress,
-		chainId,
+export function ActionButton({
+	collectionAddress,
+	chainId,
+	tokenId,
+	orderbookKind,
+	action,
+	owned,
+	highestOffer,
+	lowestListing,
+	onCannotPerformAction,
+	marketplaceType,
+	salesContractAddress,
+	prioritizeOwnerActions,
+	salePrice,
+	quantityDecimals,
+	quantityRemaining,
+	unlimitedSupply,
+}: ActionButtonProps) {
+	const { shouldShowAction, isOwnerAction } = useActionButtonLogic({
 		tokenId,
-		orderbookKind,
-		action,
 		owned,
-		highestOffer,
-		lowestListing,
+		action,
 		onCannotPerformAction,
-		marketplaceType,
-		salesContractAddress,
-		prioritizeOwnerActions,
-		salePrice,
-		quantityDecimals,
-		quantityRemaining,
-	}: ActionButtonProps) => {
-		const { shouldShowAction, isOwnerAction } = useActionButtonLogic({
-			tokenId,
-			owned,
-			action,
-			onCannotPerformAction,
-		});
+	});
 
-		if (!shouldShowAction) {
-			return null;
-		}
+	if (!shouldShowAction) {
+		return null;
+	}
 
-		if (isOwnerAction || prioritizeOwnerActions) {
-			return (
-				<OwnerActions
-					action={action}
-					tokenId={tokenId}
-					collectionAddress={collectionAddress}
-					chainId={chainId}
-					orderbookKind={orderbookKind}
-					highestOffer={highestOffer}
-				/>
-			);
-		}
+	if (isOwnerAction || prioritizeOwnerActions) {
+		return (
+			<OwnerActions
+				action={action}
+				tokenId={tokenId}
+				collectionAddress={collectionAddress}
+				chainId={chainId}
+				orderbookKind={orderbookKind}
+				highestOffer={highestOffer}
+			/>
+		);
+	}
 
-		const nonOwnerProps =
-			marketplaceType === 'shop' && salesContractAddress && salePrice
-				? {
-						marketplaceType: 'shop' as const,
-						salesContractAddress,
-						salePrice,
-						action,
-						tokenId,
-						collectionAddress,
-						chainId,
-						quantityDecimals,
-						quantityRemaining,
-					}
-				: {
-						marketplaceType: 'market' as const,
-						orderbookKind,
-						lowestListing,
-						action,
-						tokenId,
-						collectionAddress,
-						chainId,
-						quantityDecimals,
-						quantityRemaining,
-					};
+	const nonOwnerProps =
+		marketplaceType === 'shop' && salesContractAddress && salePrice
+			? {
+					marketplaceType: 'shop' as const,
+					salesContractAddress,
+					salePrice,
+					action,
+					tokenId,
+					collectionAddress,
+					chainId,
+					quantityDecimals,
+					quantityRemaining,
+					unlimitedSupply,
+				}
+			: {
+					marketplaceType: 'market' as const,
+					orderbookKind,
+					lowestListing,
+					action,
+					tokenId,
+					collectionAddress,
+					chainId,
+					quantityDecimals,
+					quantityRemaining,
+				};
 
-		return <NonOwnerActions {...nonOwnerProps} />;
-	},
-);
+	return <NonOwnerActions {...nonOwnerProps} />;
+}

package/src/react/ui/components/_internals/action-button/__tests__/ActionButtonBody.test.tsx

@@ -5,15 +5,24 @@ import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { CollectibleCardAction } from '../../../../../../types';
 import * as walletModule from '../../../../../_internal/wallet/useWallet';
+import * as hooksModule from '../../../../../hooks';
 import { ActionButtonBody } from '../components/ActionButtonBody';
-import { setPendingAction } from '../store';
+import { useActionButtonStore } from '../store';
 
 vi.mock('../store', () => ({
-	setPendingAction: vi.fn(),
+	useActionButtonStore: vi.fn(() => ({
+		setPendingAction: vi.fn(),
+	})),
+}));
+
+vi.mock('../../../../../hooks', () => ({
+	useOpenConnectModal: vi.fn(),
 }));
 
 describe('ActionButtonBody', () => {
 	const mockOnClick = vi.fn();
+	const mockOpenConnectModal = vi.fn();
+	const mockSetPendingAction = vi.fn();
 	const defaultProps = {
 		label: 'Buy now' as const,
 		tokenId: '123',
@@ -29,6 +38,14 @@ describe('ActionButtonBody', () => {
 			isLoading: false,
 			isError: false,
 		});
+
+		vi.spyOn(hooksModule, 'useOpenConnectModal').mockReturnValue({
+			openConnectModal: mockOpenConnectModal,
+		});
+
+		(useActionButtonStore as ReturnType<typeof vi.fn>).mockReturnValue({
+			setPendingAction: mockSetPendingAction,
+		});
 	});
 
 	it('executes onClick directly when user is connected', () => {
@@ -38,7 +55,7 @@ describe('ActionButtonBody', () => {
 		fireEvent.click(button);
 
 		expect(mockOnClick).toHaveBeenCalledTimes(1);
-		expect(setPendingAction).not.toHaveBeenCalled();
+		expect(mockSetPendingAction).not.toHaveBeenCalled();
 	});
 
 	it('sets pending action and opens connect modal when user is not connected', () => {
@@ -57,10 +74,11 @@ describe('ActionButtonBody', () => {
 		fireEvent.click(button);
 
 		expect(mockOnClick).not.toHaveBeenCalled();
-		expect(setPendingAction).toHaveBeenCalledWith(
+		expect(mockSetPendingAction).toHaveBeenCalledWith(
 			defaultProps.action,
 			defaultProps.onClick,
 			defaultProps.tokenId,
 		);
+		expect(mockOpenConnectModal).toHaveBeenCalledTimes(1);
 	});
 });

package/src/react/ui/components/_internals/action-button/__tests__/useActionButtonLogic.test.tsx

@@ -6,7 +6,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { CollectibleCardAction } from '../../../../../../types';
 import * as walletModule from '../../../../../_internal/wallet/useWallet';
 import { useActionButtonLogic } from '../hooks/useActionButtonLogic';
-import { actionButtonStore, setPendingAction } from '../store';
+import { actionButtonStore } from '../store';
 
 describe('useActionButtonLogic', () => {
 	const onCannotPerformActionMock = vi.fn();
@@ -23,7 +23,7 @@ describe('useActionButtonLogic', () => {
 		vi.clearAllMocks();
 		vi.clearAllMocks();
 		vi.restoreAllMocks();
-		actionButtonStore.pendingAction.set(null);
+		actionButtonStore.send({ type: 'clearPendingAction' });
 
 		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
 			wallet: createMockWallet(),
@@ -33,7 +33,12 @@ describe('useActionButtonLogic', () => {
 	});
 
 	it('restricts owners from performing buy/offer actions', async () => {
-		setPendingAction(defaultProps.action, vi.fn(), '123');
+		actionButtonStore.send({
+			type: 'setPendingAction',
+			action: defaultProps.action,
+			onPendingActionExecuted: vi.fn(),
+			tokenId: '123',
+		});
 
 		const { result } = renderHook(() =>
 			useActionButtonLogic({
@@ -52,11 +57,12 @@ describe('useActionButtonLogic', () => {
 	it('executes pending action when user becomes connected', async () => {
 		const executePendingActionMock = vi.fn();
 
-		setPendingAction(
-			CollectibleCardAction.BUY,
-			executePendingActionMock,
-			defaultProps.tokenId,
-		);
+		actionButtonStore.send({
+			type: 'setPendingAction',
+			action: CollectibleCardAction.BUY,
+			onPendingActionExecuted: executePendingActionMock,
+			tokenId: defaultProps.tokenId,
+		});
 
 		renderHook(() =>
 			useActionButtonLogic({

package/src/react/ui/components/_internals/action-button/components/ActionButtonBody.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { useOpenConnectModal } from '@0xsequence/connect';
 import { Button, type IconProps } from '@0xsequence/design-system';
 import type { ComponentType } from 'react';
 import type { CollectibleCardAction } from '../../../../../../types';
 import { useWallet } from '../../../../../_internal/wallet/useWallet';
-import { setPendingAction } from '../store';
+import { useOpenConnectModal } from '../../../../../hooks';
+import { useActionButtonStore } from '../store';
 
 type ActionButtonBodyProps = {
 	label: 'Buy now' | 'Sell' | 'Make an offer' | 'Create listing' | 'Transfer';
@@ -24,7 +24,8 @@ export function ActionButtonBody({
 }: ActionButtonBodyProps) {
 	const { wallet } = useWallet();
 	const address = wallet?.address;
-	const { setOpenConnectModal } = useOpenConnectModal();
+	const { openConnectModal } = useOpenConnectModal();
+	const { setPendingAction } = useActionButtonStore();
 
 	const handleClick = (e: React.MouseEvent) => {
 		e.preventDefault();
@@ -32,7 +33,7 @@ export function ActionButtonBody({
 
 		if (!address && action) {
 			setPendingAction(action, onClick, tokenId);
-			setOpenConnectModal(true);
+			openConnectModal();
 		} else {
 			onClick();
 		}

package/src/react/ui/components/_internals/action-button/components/NonOwnerActions.tsx

@@ -15,6 +15,7 @@ type NonOwnerActionsBaseProps = {
 	chainId: number;
 	quantityDecimals?: number;
 	quantityRemaining?: number;
+	unlimitedSupply?: boolean;
 };
 
 type ShopNonOwnerActionsProps = NonOwnerActionsBaseProps & {
@@ -48,6 +49,7 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 		chainId,
 		quantityDecimals,
 		quantityRemaining,
+		unlimitedSupply,
 		marketplaceType,
 	} = props;
 
@@ -80,6 +82,7 @@ export function NonOwnerActions(props: NonOwnerActionsProps) {
 						},
 						quantityDecimals: quantityDecimals ?? 0,
 						quantityRemaining: quantityRemaining ?? 0,
+						unlimitedSupply,
 					})
 				}
 				icon={SvgCartIcon}

package/src/react/ui/components/_internals/action-button/components/OwnerActions.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import { CollectibleCardAction } from '../../../../../../types';
 import type { Order, OrderbookKind } from '../../../../../_internal';
 import { useCreateListingModal } from '../../../../modals/CreateListingModal';
@@ -11,7 +11,7 @@ import { ActionButtonBody } from './ActionButtonBody';
 type OwnerActionsProps = {
 	action: CollectibleCardAction;
 	tokenId: string;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	orderbookKind?: OrderbookKind;
 	highestOffer?: Order;
@@ -36,7 +36,7 @@ export function OwnerActions({
 				tokenId={tokenId}
 				onClick={() =>
 					showCreateListingModal({
-						collectionAddress: collectionAddress as Hex,
+						collectionAddress: collectionAddress as Address,
 						chainId,
 						collectibleId: tokenId,
 						orderbookKind,
@@ -70,7 +70,7 @@ export function OwnerActions({
 				tokenId={tokenId}
 				onClick={() =>
 					showTransferModal({
-						collectionAddress: collectionAddress as Hex,
+						collectionAddress: collectionAddress as Address,
 						chainId,
 						collectibleId: tokenId,
 					})

package/src/react/ui/components/_internals/action-button/hooks/useActionButtonLogic.ts

@@ -3,11 +3,7 @@
 import { useEffect } from 'react';
 import { CollectibleCardAction } from '../../../../../../types';
 import { useWallet } from '../../../../../_internal/wallet/useWallet';
-import {
-	actionButtonStore,
-	clearPendingAction,
-	executePendingActionIfExists,
-} from '../store';
+import { useActionButtonStore } from '../store';
 
 type UseActionButtonLogicProps = {
 	tokenId: string;
@@ -30,17 +26,18 @@ export const useActionButtonLogic = ({
 		CollectibleCardAction.BUY,
 		CollectibleCardAction.OFFER,
 	];
-	const pendingActionType = actionButtonStore.pendingAction.type.get();
+	const { pendingAction, clearPendingAction, executePendingAction } =
+		useActionButtonStore();
+	const pendingActionType = pendingAction?.type;
 
 	// Handle owner restrictions
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (
 			owned &&
-			actionButtonStore.pendingAction.get() &&
+			pendingAction &&
 			address &&
 			actionsThatOwnersCannotPerform.includes(action) &&
-			actionButtonStore.pendingAction.get()?.collectibleId === tokenId
+			pendingAction?.collectibleId === tokenId
 		) {
 			onCannotPerformAction?.(
 				pendingActionType as
@@ -51,12 +48,13 @@ export const useActionButtonLogic = ({
 		}
 	}, [
 		owned,
-		actionButtonStore.pendingAction.get(),
+		pendingAction,
 		address,
 		action,
 		tokenId,
 		onCannotPerformAction,
 		pendingActionType,
+		clearPendingAction,
 	]);
 
 	// Execute pending action when user becomes connected
@@ -64,16 +62,20 @@ export const useActionButtonLogic = ({
 		if (
 			address &&
 			!owned &&
-			actionButtonStore.pendingAction.get() &&
-			actionButtonStore.pendingAction.get()?.collectibleId === tokenId
+			pendingAction &&
+			pendingAction?.collectibleId === tokenId
 		) {
-			// TODO: Remove this timeout once pointer-events: none issue is fixed on Radix UI side
-			setTimeout(() => {
-				executePendingActionIfExists();
-				clearPendingAction();
-			}, 1000);
+			executePendingAction();
+			clearPendingAction();
 		}
-	}, [address, owned, tokenId]);
+	}, [
+		address,
+		owned,
+		tokenId,
+		pendingAction,
+		executePendingAction,
+		clearPendingAction,
+	]);
 
 	const shouldShowAction = !address
 		? [CollectibleCardAction.BUY, CollectibleCardAction.OFFER].includes(action)

package/src/react/ui/components/_internals/action-button/store.ts

@@ -1,5 +1,8 @@
-import { observable } from '@legendapp/state';
-import type { CollectibleCardAction } from './types';
+'use client';
+
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
+import type { CollectibleCardAction } from '../../../../../types';
 
 type PendingAction = {
 	type: CollectibleCardAction.BUY | CollectibleCardAction.OFFER;
@@ -8,40 +11,75 @@ type PendingAction = {
 	timestamp: number;
 };
 
-export const actionButtonStore = observable({
-	pendingAction: null as PendingAction | null,
+interface ActionButtonContext {
+	pendingAction: PendingAction | null;
+}
+
+export const actionButtonStore = createStore({
+	context: {
+		pendingAction: null,
+	} as ActionButtonContext,
+	on: {
+		setPendingAction: (
+			context,
+			event: {
+				action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER;
+				onPendingActionExecuted: () => void;
+				tokenId: string;
+			},
+		) => ({
+			...context,
+			pendingAction: {
+				type: event.action,
+				callback: event.onPendingActionExecuted,
+				timestamp: Date.now(),
+				collectibleId: event.tokenId,
+			},
+		}),
+		clearPendingAction: (context) => ({
+			...context,
+			pendingAction: null,
+		}),
+	},
 });
 
-export const setPendingAction = (
-	type: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
-	callback: () => void,
-	collectibleId: string,
-) => {
-	actionButtonStore.pendingAction.set({
-		type,
-		callback,
-		timestamp: Date.now(),
-		collectibleId,
-	});
-};
+export const useActionButtonStore = () => {
+	const pendingAction = useSelector(
+		actionButtonStore,
+		(state) => state.context.pendingAction,
+	);
 
-export const clearPendingAction = () => {
-	actionButtonStore.pendingAction.set(null);
-};
+	return {
+		pendingAction,
+		setPendingAction: (
+			action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
+			onPendingActionExecuted: () => void,
+			tokenId: string,
+		) => {
+			actionButtonStore.send({
+				type: 'setPendingAction',
+				action,
+				onPendingActionExecuted,
+				tokenId,
+			});
+		},
+		clearPendingAction: () => {
+			actionButtonStore.send({ type: 'clearPendingAction' });
+		},
+		executePendingAction: () => {
+			if (!pendingAction) return;
+
+			const { timestamp, callback } = pendingAction;
 
-export const executePendingActionIfExists = () => {
-	const timestamp = actionButtonStore.pendingAction.get()?.timestamp;
-	const callback = actionButtonStore.pendingAction.get()?.callback as
-		| (() => void)
-		| undefined;
-
-	if (timestamp && callback) {
-		// Only execute if the pending action is less than 5 minutes old
-		if (
-			Date.now() - timestamp < 5 * 60 * 1000 &&
-			typeof callback === 'function'
-		) {
-			callback();
-		}
-	}
+			if (timestamp && callback) {
+				// Only execute if the pending action is less than 5 minutes old
+				if (
+					Date.now() - timestamp < 5 * 60 * 1000 &&
+					typeof callback === 'function'
+				) {
+					callback();
+				}
+			}
+		},
+	};
 };