@0xsequence/marketplace-sdk 0.4.7 → 0.4.9

package/src/react/hooks/options/__mocks__/marketplaceConfig.msw.ts

@@ -1,5 +1,6 @@
 import { http, HttpResponse } from 'msw';
 import { WalletOptions, type MarketplaceConfig } from '../../../../types';
+import { mockCurrencies } from '../../../_internal/api/__mocks__/marketplace.msw';
 
 // Mock data
 export const mockConfig: MarketplaceConfig = {
@@ -12,7 +13,15 @@ export const mockConfig: MarketplaceConfig = {
 	logoUrl: 'https://example.com/logo.png',
 	titleTemplate: '%s | Test Marketplace',
 	walletOptions: [WalletOptions.Sequence],
-	collections: [],
+	collections: [
+		{
+			collectionAddress: '0x1234567890123456789012345678901234567890',
+			chainId: 1,
+			marketplaceFeePercentage: 2.5,
+			marketplaceType: 'orderbook',
+			currencyOptions: mockCurrencies.map((c) => c.contractAddress),
+		},
+	],
 	landingPageLayout: 'default',
 	cssString: '',
 	manifestUrl: '',

package/src/react/hooks/useCollectionDetails.tsx

@@ -0,0 +1,35 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { SdkConfig } from '../../types';
+import { getMarketplaceClient } from '../_internal';
+import { useConfig } from './useConfig';
+
+type UseCollectionDetails = {
+	collectionAddress: string;
+	chainId: number;
+};
+
+const fetchCollectionDetails = async (
+	args: { collectionAddress: string },
+	marketplaceClient: Awaited<ReturnType<typeof getMarketplaceClient>>,
+) => {
+	const { collection } = await marketplaceClient.getCollectionDetail({
+		contractAddress: args.collectionAddress,
+	});
+	return collection;
+};
+
+export const collectionDetailsOptions = (
+	args: UseCollectionDetails,
+	config: SdkConfig,
+) => {
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	return queryOptions({
+		queryKey: ['collectionDetails', args],
+		queryFn: () => fetchCollectionDetails(args, marketplaceClient),
+	});
+};
+
+export const useCollectionDetails = (args: UseCollectionDetails) => {
+	const config = useConfig();
+	return useQuery(collectionDetailsOptions(args, config));
+};

package/src/react/hooks/useCollectionDetailsPolling.tsx

@@ -0,0 +1,60 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { SdkConfig } from '../../types';
+import { CollectionStatus } from '../_internal/api/marketplace.gen';
+import { useConfig } from './useConfig';
+import { collectionDetailsOptions } from './useCollectionDetails';
+
+type UseCollectionDetailsPolling = {
+	collectionAddress: string;
+	chainId: number;
+};
+
+const INITIAL_POLLING_INTERVAL = 2000; // 2 seconds
+const MAX_POLLING_INTERVAL = 30000; // 30 seconds
+const MAX_ATTEMPTS = 30;
+
+const isTerminalState = (status: CollectionStatus): boolean => {
+	return [
+		CollectionStatus.active,
+		CollectionStatus.failed,
+		CollectionStatus.inactive,
+		CollectionStatus.incompatible_type,
+	].includes(status);
+};
+
+export const collectionDetailsPollingOptions = (
+	args: UseCollectionDetailsPolling,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		...collectionDetailsOptions(args, config),
+		refetchInterval: (query) => {
+			const data = query.state.data;
+			if (data && isTerminalState(data.status)) {
+				return false;
+			}
+
+			// Calculate exponential backoff interval
+			const currentAttempt = (query.state.dataUpdateCount || 0) + 1;
+			if (currentAttempt >= MAX_ATTEMPTS) {
+				return false;
+			}
+
+			const interval = Math.min(
+				INITIAL_POLLING_INTERVAL * Math.pow(1.5, currentAttempt),
+				MAX_POLLING_INTERVAL,
+			);
+
+			return interval;
+		},
+		refetchOnWindowFocus: false,
+		retry: false,
+	});
+};
+
+export const useCollectionDetailsPolling = (
+	args: UseCollectionDetailsPolling,
+) => {
+	const config = useConfig();
+	return useQuery(collectionDetailsPollingOptions(args, config));
+};

package/src/react/provider.tsx

@@ -6,6 +6,7 @@ import '@0xsequence/design-system/styles.css';
 import type { SdkConfig } from '../types';
 import { PROVIDER_ID } from './_internal/get-provider';
 import { getQueryClient } from './_internal/api/get-query-client';
+import { InvalidProjectAccessKeyError } from '../utils/_internal/error/config';
 
 export const MarketplaceSdkContext = createContext({} as SdkConfig);
 
@@ -29,6 +30,10 @@ export function MarketplaceProvider({
 	config,
 	children,
 }: MarketplaceSdkProviderProps) {
+	if (config.projectAccessKey === '' || !config.projectAccessKey) {
+		throw new InvalidProjectAccessKeyError(config.projectAccessKey);
+	}
+
 	return (
 		<MarketplaceQueryClientProvider>
 			<MarketplaceSdkContext.Provider value={config}>

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

@@ -1,17 +1,12 @@
 'use client';
 
-import { Button } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
 import type { Hex } from 'viem';
-import { InvalidStepError } from '../../../../../utils/_internal/error/transaction';
 import type { Order, OrderbookKind } from '../../../../_internal';
-import { useBuyModal } from '../../../modals/BuyModal';
-import { useCreateListingModal } from '../../../modals/CreateListingModal';
-import { useMakeOfferModal } from '../../../modals/MakeOfferModal';
-import { useSellModal } from '../../../modals/SellModal';
-import { useTransferModal } from '../../../modals/TransferModal';
-
-import { CollectibleCardAction } from './types';
+import type { CollectibleCardAction } from './types';
+import { useActionButtonLogic } from './hooks/useActionButtonLogic';
+import { OwnerActions } from './components/OwnerActions';
+import { NonOwnerActions } from './components/NonOwnerActions';
 
 type ActionButtonProps = {
 	chainId: string;
@@ -20,9 +15,12 @@ type ActionButtonProps = {
 	orderbookKind?: OrderbookKind;
 	isTransfer?: boolean;
 	action: CollectibleCardAction;
-	isOwned: boolean;
+	owned?: boolean;
 	highestOffer?: Order;
 	lowestListing?: Order;
+	onCannotPerformAction?: (
+		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
+	) => void;
 };
 
 export const ActionButton = observer(
@@ -32,124 +30,44 @@ export const ActionButton = observer(
 		tokenId,
 		orderbookKind,
 		action,
+		owned,
 		highestOffer,
 		lowestListing,
+		onCannotPerformAction,
 	}: ActionButtonProps) => {
-		const { show: showCreateListingModal } = useCreateListingModal();
-		const { show: showMakeOfferModal } = useMakeOfferModal();
-		const { show: showSellModal } = useSellModal();
-		const { show: showTransferModal } = useTransferModal();
-		const { show: showBuyModal } = useBuyModal();
-
-		if (action === CollectibleCardAction.BUY) {
-			if (!lowestListing)
-				throw new InvalidStepError('BUY', 'lowestListing is required');
-
-			return (
-				<ActionButtonBody
-					label="Buy"
-					onClick={() =>
-						showBuyModal({
-							collectionAddress,
-							chainId: chainId,
-							tokenId: tokenId,
-							order: lowestListing,
-						})
-					}
-				/>
-			);
-		}
-
-		if (action === CollectibleCardAction.SELL) {
-			if (!highestOffer)
-				throw new InvalidStepError('SELL', 'highestOffer is required');
-
-			return (
-				<ActionButtonBody
-					label="Sell"
-					onClick={() =>
-						showSellModal({
-							collectionAddress,
-							chainId: chainId,
-							tokenId: tokenId,
-							order: highestOffer,
-						})
-					}
-				/>
-			);
-		}
-
-		if (action === CollectibleCardAction.LIST) {
-			return (
-				<ActionButtonBody
-					label="Create listing"
-					onClick={() =>
-						showCreateListingModal({
-							collectionAddress: collectionAddress as Hex,
-							chainId: chainId,
-							collectibleId: tokenId,
-							orderbookKind,
-						})
-					}
-				/>
-			);
-		}
+		const { shouldShowAction, isOwnerAction } = useActionButtonLogic({
+			tokenId,
+			owned,
+			action,
+			onCannotPerformAction,
+		});
 
-		if (action === CollectibleCardAction.OFFER) {
-			return (
-				<ActionButtonBody
-					label="Make an offer"
-					onClick={() =>
-						showMakeOfferModal({
-							collectionAddress: collectionAddress as Hex,
-							chainId: chainId,
-							collectibleId: tokenId,
-							orderbookKind,
-						})
-					}
-				/>
-			);
+		if (!shouldShowAction) {
+			return null;
 		}
 
-		if (action === CollectibleCardAction.TRANSFER) {
+		if (isOwnerAction) {
 			return (
-				<ActionButtonBody
-					label="Transfer"
-					onClick={() =>
-						showTransferModal({
-							collectionAddress: collectionAddress as Hex,
-							chainId: chainId,
-							collectibleId: tokenId,
-						})
-					}
+				<OwnerActions
+					action={action}
+					tokenId={tokenId}
+					collectionAddress={collectionAddress}
+					chainId={chainId}
+					orderbookKind={orderbookKind}
+					highestOffer={highestOffer}
 				/>
 			);
 		}
 
-		return null;
+		return (
+			<NonOwnerActions
+				action={action}
+				tokenId={tokenId}
+				collectionAddress={collectionAddress}
+				chainId={chainId}
+				orderbookKind={orderbookKind}
+				lowestListing={lowestListing}
+			/>
+		);
 	},
 );
-
-type ActionButtonBodyProps = {
-	label: string;
-	onClick: () => void;
-};
-
-function ActionButtonBody({ label, onClick }: ActionButtonBodyProps) {
-	return (
-		<Button
-			variant="primary"
-			label={label}
-			// eslint-disable-next-line @typescript-eslint/no-empty-function
-			onClick={(e) => {
-				e.preventDefault();
-				e.stopPropagation();
-				onClick();
-			}}
-			// leftIcon={leftIcon}
-			size="xs"
-			shape="square"
-			width="full"
-		/>
-	);
-}

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

@@ -0,0 +1,52 @@
+import { Button } from '@0xsequence/design-system';
+import { useAccount } from 'wagmi';
+import { useOpenConnectModal } from '@0xsequence/kit';
+import type { CollectibleCardAction } from '../types';
+import { setPendingAction } from '../store';
+import { actionButton } from '../styles.css';
+
+type ActionButtonBodyProps = {
+	label: 'Buy now' | 'Sell' | 'Make an offer' | 'Create listing' | 'Transfer';
+	tokenId: string;
+	onClick: () => void;
+	icon?: React.ComponentType<{
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+	}>;
+	action?: CollectibleCardAction.BUY | CollectibleCardAction.OFFER;
+};
+
+export function ActionButtonBody({
+	tokenId,
+	label,
+	onClick,
+	icon,
+	action,
+}: ActionButtonBodyProps) {
+	const { address } = useAccount();
+	const { setOpenConnectModal } = useOpenConnectModal();
+
+	const handleClick = (e: React.MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+
+		if (!address && action) {
+			setPendingAction(action, onClick, tokenId);
+			setOpenConnectModal(true);
+		} else {
+			onClick();
+		}
+	};
+
+	return (
+		<Button
+			className={actionButton}
+			variant="primary"
+			label={label}
+			onClick={handleClick}
+			leftIcon={icon}
+			size="xs"
+			shape="square"
+			width="full"
+		/>
+	);
+}

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

@@ -0,0 +1,72 @@
+import type { Hex } from 'viem';
+import type { Order, OrderbookKind } from '../../../../../_internal';
+import { CollectibleCardAction } from '../types';
+import { ActionButtonBody } from './ActionButtonBody';
+import { useBuyModal } from '../../../../modals/BuyModal';
+import { useMakeOfferModal } from '../../../../modals/MakeOfferModal';
+import { InvalidStepError } from '../../../../../../utils/_internal/error/transaction';
+import SvgCartIcon from '../../../../icons/CartIcon';
+
+type NonOwnerActionsProps = {
+	action: CollectibleCardAction;
+	tokenId: string;
+	collectionAddress: Hex;
+	chainId: string;
+	orderbookKind?: OrderbookKind;
+	lowestListing?: Order;
+};
+
+export function NonOwnerActions({
+	action,
+	tokenId,
+	collectionAddress,
+	chainId,
+	orderbookKind,
+	lowestListing,
+}: NonOwnerActionsProps) {
+	const { show: showBuyModal } = useBuyModal();
+	const { show: showMakeOfferModal } = useMakeOfferModal();
+
+	if (action === CollectibleCardAction.BUY) {
+		if (!lowestListing) {
+			throw new InvalidStepError('BUY', 'lowestListing is required');
+		}
+
+		return (
+			<ActionButtonBody
+				action={CollectibleCardAction.BUY}
+				tokenId={tokenId}
+				label="Buy now"
+				onClick={() =>
+					showBuyModal({
+						collectionAddress,
+						chainId,
+						tokenId,
+						order: lowestListing,
+					})
+				}
+				icon={SvgCartIcon}
+			/>
+		);
+	}
+
+	if (action === CollectibleCardAction.OFFER) {
+		return (
+			<ActionButtonBody
+				action={CollectibleCardAction.OFFER}
+				tokenId={tokenId}
+				label="Make an offer"
+				onClick={() =>
+					showMakeOfferModal({
+						collectionAddress,
+						chainId,
+						collectibleId: tokenId,
+						orderbookKind,
+					})
+				}
+			/>
+		);
+	}
+
+	return null;
+}

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

@@ -0,0 +1,81 @@
+import type { Hex } from 'viem';
+import type { Order, OrderbookKind } from '../../../../../_internal';
+import { CollectibleCardAction } from '../types';
+import { ActionButtonBody } from './ActionButtonBody';
+import { useCreateListingModal } from '../../../../modals/CreateListingModal';
+import { useSellModal } from '../../../../modals/SellModal';
+import { useTransferModal } from '../../../../modals/TransferModal';
+
+type OwnerActionsProps = {
+	action: CollectibleCardAction;
+	tokenId: string;
+	collectionAddress: Hex;
+	chainId: string;
+	orderbookKind?: OrderbookKind;
+	highestOffer?: Order;
+};
+
+export function OwnerActions({
+	action,
+	tokenId,
+	collectionAddress,
+	chainId,
+	orderbookKind,
+	highestOffer,
+}: OwnerActionsProps) {
+	const { show: showCreateListingModal } = useCreateListingModal();
+	const { show: showSellModal } = useSellModal();
+	const { show: showTransferModal } = useTransferModal();
+
+	if (action === CollectibleCardAction.LIST) {
+		return (
+			<ActionButtonBody
+				label="Create listing"
+				tokenId={tokenId}
+				onClick={() =>
+					showCreateListingModal({
+						collectionAddress: collectionAddress as Hex,
+						chainId,
+						collectibleId: tokenId,
+						orderbookKind,
+					})
+				}
+			/>
+		);
+	}
+
+	if (action === CollectibleCardAction.SELL && highestOffer) {
+		return (
+			<ActionButtonBody
+				tokenId={tokenId}
+				label="Sell"
+				onClick={() =>
+					showSellModal({
+						collectionAddress,
+						chainId,
+						tokenId,
+						order: highestOffer,
+					})
+				}
+			/>
+		);
+	}
+
+	if (action === CollectibleCardAction.TRANSFER) {
+		return (
+			<ActionButtonBody
+				label="Transfer"
+				tokenId={tokenId}
+				onClick={() =>
+					showTransferModal({
+						collectionAddress: collectionAddress as Hex,
+						chainId,
+						collectibleId: tokenId,
+					})
+				}
+			/>
+		);
+	}
+
+	return null;
+}

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

@@ -0,0 +1,93 @@
+import { useEffect } from 'react';
+import { useAccount } from 'wagmi';
+import { CollectibleCardAction } from '../types';
+import {
+	actionButtonStore,
+	clearPendingAction,
+	executePendingActionIfExists,
+} from '../store';
+
+type UseActionButtonLogicProps = {
+	tokenId: string;
+	owned?: boolean;
+	action: CollectibleCardAction;
+	onCannotPerformAction?: (
+		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
+	) => void;
+};
+
+export const useActionButtonLogic = ({
+	tokenId,
+	owned,
+	action,
+	onCannotPerformAction,
+}: UseActionButtonLogicProps) => {
+	const { address } = useAccount();
+	const actionsThatOwnersCannotPerform = [
+		CollectibleCardAction.BUY,
+		CollectibleCardAction.OFFER,
+	];
+	const pendingActionType = actionButtonStore.pendingAction.type.get();
+
+	// Handle owner restrictions
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+	useEffect(() => {
+		if (
+			owned &&
+			actionButtonStore.pendingAction.get() &&
+			address &&
+			!actionsThatOwnersCannotPerform.includes(action) &&
+			actionButtonStore.pendingAction.get()?.collectibleId === tokenId
+		) {
+			onCannotPerformAction?.(
+				pendingActionType as
+					| CollectibleCardAction.BUY
+					| CollectibleCardAction.OFFER,
+			);
+			clearPendingAction();
+		}
+	}, [
+		owned,
+		actionButtonStore.pendingAction.get(),
+		address,
+		action,
+		tokenId,
+		onCannotPerformAction,
+		pendingActionType,
+	]);
+
+	// Execute pending action when user becomes connected
+	useEffect(() => {
+		if (
+			address &&
+			!owned &&
+			actionButtonStore.pendingAction.get() &&
+			actionButtonStore.pendingAction.get()?.collectibleId === tokenId
+		) {
+			// TODO: Remove this timeout once pointer-events: none issue is fixed on Radix UI side
+			setTimeout(() => {
+				executePendingActionIfExists();
+				clearPendingAction();
+			}, 1000);
+		}
+	}, [address, owned, tokenId]);
+
+	const shouldShowAction = !address
+		? [CollectibleCardAction.BUY, CollectibleCardAction.OFFER].includes(action)
+		: true;
+
+	const isOwnerAction =
+		address &&
+		owned &&
+		[
+			CollectibleCardAction.LIST,
+			CollectibleCardAction.TRANSFER,
+			CollectibleCardAction.SELL,
+		].includes(action);
+
+	return {
+		address,
+		shouldShowAction,
+		isOwnerAction,
+	};
+};

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

@@ -0,0 +1,47 @@
+import { observable } from '@legendapp/state';
+import type { CollectibleCardAction } from './types';
+
+type PendingAction = {
+	type: CollectibleCardAction.BUY | CollectibleCardAction.OFFER;
+	collectibleId: string;
+	callback: () => void;
+	timestamp: number;
+};
+
+export const actionButtonStore = observable({
+	pendingAction: null as 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 clearPendingAction = () => {
+	actionButtonStore.pendingAction.set(null);
+};
+
+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();
+		}
+	}
+};

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

@@ -0,0 +1,8 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const actionButton = style({});
+
+globalStyle(`${actionButton} > div`, {
+	justifyContent: 'center',
+	alignItems: 'center',
+});