@0xsequence/marketplace-sdk 0.9.0 → 0.10.0

package/src/react/queries/listBalances.ts

@@ -1,13 +1,13 @@
 import type { GetTokenBalancesReturn, Page } from '@0xsequence/indexer';
 import { infiniteQueryOptions } from '@tanstack/react-query';
-import type { Hex } from 'viem';
+import type { Address, Hex } from 'viem';
 import type { SdkConfig } from '../../types';
 import { balanceQueries, getIndexerClient, LaosAPI } from '../_internal';
 
 export type UseListBalancesArgs = {
 	chainId: number;
-	accountAddress?: Hex;
-	contractAddress?: Hex;
+	accountAddress?: Address;
+	contractAddress?: Address;
 	tokenId?: string;
 	includeMetadata?: boolean;
 	metadataOptions?: {
@@ -34,6 +34,7 @@ export async function fetchBalances(
 		return laosClient.getTokenBalances({
 			chainId: args.chainId.toString(),
 			accountAddress: args.accountAddress,
+			contractAddress: args.contractAddress as Address,
 			includeMetadata: args.includeMetadata,
 			page: {
 				sort: [

package/src/react/queries/listCollections.ts

@@ -28,7 +28,7 @@ export interface FetchListCollectionsParams {
 }
 
 /**
- * Fetches list of collections from the metadata API with marketplace filtering
+ * Fetches collections from the metadata API with marketplace config filtering
  */
 export async function fetchListCollections(params: FetchListCollectionsParams) {
 	const { marketplaceType, marketplaceConfig, config } = params;
@@ -150,14 +150,18 @@ export const listCollectionsOptions = ({
 	config: SdkConfig;
 }) => {
 	return queryOptions({
-		queryKey: [...collectionKeys.list, marketplaceType],
+		queryKey: [
+			...collectionKeys.list,
+			{ marketplaceType, marketplaceConfig, config },
+		],
 		queryFn: marketplaceConfig
 			? () =>
 					fetchListCollections({
-						marketplaceType,
 						marketplaceConfig,
 						config,
+						marketplaceType,
 					})
 			: skipToken,
+		enabled: Boolean(marketplaceConfig),
 	});
 };

package/src/react/queries/listTokenMetadata.ts

@@ -2,7 +2,7 @@ import { queryOptions } from '@tanstack/react-query';
 import type { SdkConfig } from '../../types';
 import {
 	getMetadataClient,
-	metadataKeys,
+	tokenKeys,
 	type ValuesOptional,
 } from '../_internal';
 import type { StandardQueryOptions } from '../types/query';
@@ -49,7 +49,7 @@ export function listTokenMetadataQueryOptions(
 	);
 
 	return queryOptions({
-		queryKey: [...metadataKeys.tokenMetadata, params],
+		queryKey: [...tokenKeys.metadata, params],
 		queryFn: () =>
 			fetchListTokenMetadata({
 				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined

package/src/react/queries/marketplaceConfig.ts

@@ -38,7 +38,7 @@ export const fetchMarketplaceConfig = async ({
 		} satisfies MarketCollection;
 	});
 
-	const shopCollections = builderMarketplaceConfig.shopCollections.map(
+	const shopCollections = (builderMarketplaceConfig.shopCollections ?? []).map(
 		(collection) => {
 			return {
 				...collection,

package/src/react/queries/primarySaleItems.ts

@@ -0,0 +1,85 @@
+import { infiniteQueryOptions } from '@tanstack/react-query';
+import type { Address } from 'viem';
+import type { SdkConfig } from '../../types';
+import {
+	getMarketplaceClient,
+	type ListPrimarySaleItemsArgs,
+	type ListPrimarySaleItemsReturn,
+	type Page,
+	type PrimarySaleItemsFilter,
+	type ValuesOptional,
+} from '../_internal';
+import type { StandardQueryOptions } from '../types/query';
+
+export interface FetchPrimarySaleItemsParams {
+	chainId: number;
+	primarySaleContractAddress: Address;
+	filter?: PrimarySaleItemsFilter;
+	page?: Page;
+	config: SdkConfig;
+}
+
+/**
+ * Fetches primary sale items from the marketplace API
+ */
+export async function fetchPrimarySaleItems(
+	params: FetchPrimarySaleItemsParams,
+): Promise<ListPrimarySaleItemsReturn> {
+	const { chainId, primarySaleContractAddress, filter, page, config } = params;
+
+	const marketplaceClient = getMarketplaceClient(config);
+
+	return marketplaceClient.listPrimarySaleItems({
+		chainId: String(chainId),
+		primarySaleContractAddress,
+		filter,
+		page,
+	});
+}
+
+export type ListPrimarySaleItemsQueryOptions =
+	ValuesOptional<FetchPrimarySaleItemsParams> & {
+		query?: StandardQueryOptions;
+	};
+
+export const listPrimarySaleItemsQueryOptions = (
+	params: ListPrimarySaleItemsQueryOptions,
+) => {
+	const enabled = Boolean(
+		params.primarySaleContractAddress &&
+			params.chainId &&
+			params.config &&
+			(params.query?.enabled ?? true),
+	);
+
+	type PageParam = { page: number; pageSize: number };
+	const initialPage: PageParam = { page: 1, pageSize: 30 };
+
+	return infiniteQueryOptions({
+		queryKey: ['listPrimarySaleItems', params],
+		queryFn: async ({ pageParam }) => {
+			return fetchPrimarySaleItems({
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				chainId: params.chainId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				primarySaleContractAddress: params.primarySaleContractAddress!,
+				filter: params.filter,
+				page: pageParam,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				config: params.config!,
+			});
+		},
+		initialPageParam: initialPage,
+		getNextPageParam: (lastPage) =>
+			lastPage.page?.more
+				? {
+						page: (lastPage.page?.page || 1) + 1,
+						pageSize: lastPage.page?.pageSize || 30,
+					}
+				: undefined,
+		...params.query,
+		enabled,
+	});
+};
+
+export type { ListPrimarySaleItemsArgs, ListPrimarySaleItemsReturn };

package/src/react/queries/primarySaleItemsCount.ts

@@ -0,0 +1,64 @@
+import { queryOptions } from '@tanstack/react-query';
+import type { Address } from 'viem';
+import type { SdkConfig } from '../../types';
+import {
+	type GetCountOfPrimarySaleItemsReturn,
+	getMarketplaceClient,
+	type PrimarySaleItemsFilter,
+} from '../_internal';
+import type { StandardQueryOptions } from '../types/query';
+
+export interface FetchPrimarySaleItemsCountParams {
+	chainId: number;
+	primarySaleContractAddress: Address;
+	filter?: PrimarySaleItemsFilter;
+	config: SdkConfig;
+}
+
+/**
+ * Fetches the count of primary sale items from the marketplace API
+ */
+export async function fetchPrimarySaleItemsCount(
+	params: FetchPrimarySaleItemsCountParams,
+): Promise<GetCountOfPrimarySaleItemsReturn> {
+	const { chainId, primarySaleContractAddress, filter, config } = params;
+
+	const marketplaceClient = getMarketplaceClient(config);
+	return marketplaceClient.getCountOfPrimarySaleItems({
+		chainId: String(chainId),
+		primarySaleContractAddress,
+		filter,
+	});
+}
+
+export type PrimarySaleItemsCountQueryOptions =
+	Partial<FetchPrimarySaleItemsCountParams> & {
+		query?: StandardQueryOptions;
+	};
+
+export const primarySaleItemsCountQueryOptions = (
+	args: PrimarySaleItemsCountQueryOptions,
+) => {
+	const enabled = Boolean(
+		args.primarySaleContractAddress &&
+			args.chainId &&
+			args.config &&
+			(args.query?.enabled ?? true),
+	);
+
+	return queryOptions({
+		queryKey: ['primarySaleItemsCount', args],
+		queryFn: () =>
+			fetchPrimarySaleItemsCount({
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				chainId: args.chainId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				primarySaleContractAddress: args.primarySaleContractAddress!,
+				filter: args.filter,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				config: args.config!,
+			}),
+		...args.query,
+		enabled,
+	});
+};

package/src/react/queries/tokenSupplies.ts

@@ -0,0 +1,93 @@
+import type { GetTokenSuppliesArgs } from '@0xsequence/indexer';
+import { queryOptions } from '@tanstack/react-query';
+import type { SdkConfig } from '../../types';
+import {
+	getIndexerClient,
+	LaosAPI,
+	tokenKeys,
+	type ValuesOptional,
+} from '../_internal';
+import type { StandardQueryOptions } from '../types/query';
+
+export interface FetchTokenSuppliesParams
+	extends Omit<GetTokenSuppliesArgs, 'contractAddress'> {
+	chainId: number;
+	collectionAddress: string;
+	config: SdkConfig;
+	isLaos721?: boolean;
+}
+
+/**
+ * Fetches token supplies with support for both indexer and LAOS APIs
+ * Uses the more efficient single-contract APIs from both services
+ */
+export async function fetchTokenSupplies(params: FetchTokenSuppliesParams) {
+	const { chainId, collectionAddress, config, isLaos721, ...rest } = params;
+
+	if (isLaos721) {
+		const laosApi = new LaosAPI();
+
+		// Convert indexer Page format to LAOS PaginationOptions format
+		const laosPage = rest.page
+			? {
+					sort:
+						rest.page.sort?.map((sortBy) => ({
+							column: sortBy.column,
+							order: sortBy.order,
+						})) || [],
+				}
+			: undefined;
+
+		const result = await laosApi.getTokenSupplies({
+			chainId: chainId.toString(),
+			contractAddress: collectionAddress,
+			includeMetadata: rest.includeMetadata,
+			page: laosPage,
+		});
+
+		return result;
+	}
+
+	const indexerClient = getIndexerClient(chainId, config);
+
+	const apiArgs: GetTokenSuppliesArgs = {
+		contractAddress: collectionAddress,
+		...rest,
+	};
+
+	const result = await indexerClient.getTokenSupplies(apiArgs);
+	return result;
+}
+
+export type TokenSuppliesQueryOptions =
+	ValuesOptional<FetchTokenSuppliesParams> & {
+		query?: StandardQueryOptions;
+	};
+
+export function tokenSuppliesQueryOptions(params: TokenSuppliesQueryOptions) {
+	const enabled = Boolean(
+		params.chainId &&
+			params.collectionAddress &&
+			params.config &&
+			(params.query?.enabled ?? true),
+	);
+
+	return queryOptions({
+		queryKey: [...tokenKeys.supplies, params],
+		queryFn: () =>
+			fetchTokenSupplies({
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				chainId: params.chainId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				collectionAddress: params.collectionAddress!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				config: params.config!,
+				isLaos721: params.isLaos721,
+				includeMetadata: params.includeMetadata,
+				metadataOptions: params.metadataOptions,
+				page: params.page,
+			}),
+		...params.query,
+		enabled,
+	});
+}

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/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 {
-	clearPendingAction,
-	executePendingAction,
-	usePendingAction,
-} from '../store';
+import { useActionButtonStore } from '../store';
 
 type UseActionButtonLogicProps = {
 	tokenId: string;
@@ -30,7 +26,8 @@ export const useActionButtonLogic = ({
 		CollectibleCardAction.BUY,
 		CollectibleCardAction.OFFER,
 	];
-	const pendingAction = usePendingAction();
+	const { pendingAction, clearPendingAction, executePendingAction } =
+		useActionButtonStore();
 	const pendingActionType = pendingAction?.type;
 
 	// Handle owner restrictions
@@ -57,6 +54,7 @@ export const useActionButtonLogic = ({
 		tokenId,
 		onCannotPerformAction,
 		pendingActionType,
+		clearPendingAction,
 	]);
 
 	// Execute pending action when user becomes connected
@@ -67,10 +65,17 @@ export const useActionButtonLogic = ({
 			pendingAction &&
 			pendingAction?.collectibleId === tokenId
 		) {
-			executePendingAction(pendingAction);
+			executePendingAction();
 			clearPendingAction();
 		}
-	}, [address, owned, tokenId, pendingAction]);
+	}, [
+		address,
+		owned,
+		tokenId,
+		pendingAction,
+		executePendingAction,
+		clearPendingAction,
+	]);
 
 	const shouldShowAction = !address
 		? [CollectibleCardAction.BUY, CollectibleCardAction.OFFER].includes(action)