@0xsequence/marketplace-sdk 1.2.1 → 2.0.1

package/src/react/hooks/{data/market/useListMarketCardData.test.tsx → ui/card-data/market-card-data.test.tsx}

@@ -1,26 +1,28 @@
+import {
+	ContractType,
+	OrderbookKind,
+	PropertyType,
+} from '@0xsequence/api-client';
+import * as IndexerMocks from '@0xsequence/api-client/mocks/indexer';
+import * as MarketplaceMocks from '@0xsequence/api-client/mocks/marketplace';
+
+const { mockIndexerEndpoint, mockTokenBalance } = IndexerMocks;
+const { mockCollectibleOrder, mockMarketplaceEndpoint } = MarketplaceMocks;
+
 import { HttpResponse, http } from 'msw';
 import { zeroAddress } from 'viem';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { useDisconnect } from 'wagmi';
 import { renderHook, server, waitFor } from '../../../../../test';
 import * as types from '../../../../types';
-import {
-	mockIndexerEndpoint,
-	mockTokenBalance,
-} from '../../../_internal/api/__mocks__/indexer.msw';
-import {
-	mockCollectibleOrder,
-	mockMarketplaceEndpoint,
-} from '../../../_internal/api/__mocks__/marketplace.msw';
-import { PropertyType } from '../../../_internal/api/marketplace.gen';
-import { useListMarketCardData } from './useListMarketCardData';
+import { useMarketCardData } from './market-card-data';
 
-describe('useListMarketCardData', () => {
+describe('useMarketCardData', () => {
 	const defaultProps = {
 		collectionAddress: zeroAddress,
 		chainId: 1,
-		orderbookKind: types.OrderbookKind.sequence_marketplace_v2,
-		collectionType: types.ContractType.ERC721,
+		orderbookKind: OrderbookKind.sequence_marketplace_v2,
+		collectionType: ContractType.ERC721,
 	};
 
 	beforeEach(() => {
@@ -53,7 +55,7 @@ describe('useListMarketCardData', () => {
 	});
 
 	it('should fetch collectibles and balances when wallet is connected', async () => {
-		const { result } = renderHook(() => useListMarketCardData(defaultProps));
+		const { result } = renderHook(() => useMarketCardData(defaultProps));
 
 		await waitFor(() => {
 			expect(result.current.isLoading).toBe(false);
@@ -67,7 +69,7 @@ describe('useListMarketCardData', () => {
 		const { result: disconnect } = renderHook(() => useDisconnect());
 		await disconnect.current.disconnectAsync();
 
-		const { result } = renderHook(() => useListMarketCardData(defaultProps));
+		const { result } = renderHook(() => useMarketCardData(defaultProps));
 
 		await waitFor(() => {
 			expect(result.current.isLoading).toBe(false);
@@ -88,7 +90,7 @@ describe('useListMarketCardData', () => {
 			}),
 		);
 
-		const { result } = renderHook(() => useListMarketCardData(defaultProps));
+		const { result } = renderHook(() => useMarketCardData(defaultProps));
 
 		await waitFor(() => {
 			expect(result.current.isLoading).toBe(false);
@@ -100,7 +102,7 @@ describe('useListMarketCardData', () => {
 
 	it('should handle search text filtering', async () => {
 		const { result } = renderHook(() =>
-			useListMarketCardData({
+			useMarketCardData({
 				...defaultProps,
 				searchText: 'test search',
 			}),
@@ -115,7 +117,7 @@ describe('useListMarketCardData', () => {
 
 	it('should handle property filtering', async () => {
 		const { result } = renderHook(() =>
-			useListMarketCardData({
+			useMarketCardData({
 				...defaultProps,
 				filterOptions: [
 					{
@@ -136,7 +138,7 @@ describe('useListMarketCardData', () => {
 
 	it('should handle listed-only filtering', async () => {
 		const { result } = renderHook(() =>
-			useListMarketCardData({
+			useMarketCardData({
 				...defaultProps,
 				showListedOnly: true,
 			}),
@@ -153,7 +155,7 @@ describe('useListMarketCardData', () => {
 		const onCollectibleClick = vi.fn();
 
 		const { result } = renderHook(() =>
-			useListMarketCardData({
+			useMarketCardData({
 				...defaultProps,
 				onCollectibleClick,
 			}),
@@ -164,15 +166,15 @@ describe('useListMarketCardData', () => {
 		});
 
 		// Simulate clicking the collectible
-		result.current.collectibleCards[0].onCollectibleClick?.('1');
-		expect(onCollectibleClick).toHaveBeenCalledWith('1');
+		result.current.collectibleCards[0].onCollectibleClick?.(1n);
+		expect(onCollectibleClick).toHaveBeenCalledWith(1n);
 	});
 
 	it('should handle cannot perform action callback', async () => {
 		const onCannotPerformAction = vi.fn();
 
 		const { result } = renderHook(() =>
-			useListMarketCardData({
+			useMarketCardData({
 				...defaultProps,
 				onCannotPerformAction,
 			}),
@@ -193,7 +195,7 @@ describe('useListMarketCardData', () => {
 
 	it('should prioritize owner actions when specified', async () => {
 		const { result } = renderHook(() =>
-			useListMarketCardData({
+			useMarketCardData({
 				...defaultProps,
 				prioritizeOwnerActions: true,
 			}),
@@ -212,7 +214,7 @@ describe('useListMarketCardData', () => {
 		const assetSrcPrefixUrl = 'https://custom-cdn.example.com/';
 
 		const { result } = renderHook(() =>
-			useListMarketCardData({
+			useMarketCardData({
 				...defaultProps,
 				assetSrcPrefixUrl,
 			}),
@@ -238,7 +240,7 @@ describe('useListMarketCardData', () => {
 			}),
 		);
 
-		const { result } = renderHook(() => useListMarketCardData(defaultProps));
+		const { result } = renderHook(() => useMarketCardData(defaultProps));
 
 		await waitFor(() => {
 			expect(result.current.isLoading).toBe(false);
@@ -255,7 +257,7 @@ describe('useListMarketCardData', () => {
 					collectibles: [
 						{
 							...mockCollectibleOrder,
-							metadata: { ...mockCollectibleOrder.metadata, tokenId: '2' },
+							metadata: { ...mockCollectibleOrder.metadata, tokenId: 2n },
 						},
 					],
 				});
@@ -275,7 +277,7 @@ describe('useListMarketCardData', () => {
 
 	it('should handle combined filters (search text and properties)', async () => {
 		const { result } = renderHook(() =>
-			useListMarketCardData({
+			useMarketCardData({
 				...defaultProps,
 				searchText: 'test search',
 				filterOptions: [

package/src/react/hooks/{data/market/useListMarketCardData.tsx → ui/card-data/market-card-data.tsx}

@@ -1,43 +1,40 @@
-import { useMemo } from 'react';
-
-import type { Address } from 'viem';
-import { useAccount } from 'wagmi';
 import type {
-	CollectibleCardAction,
+	Address,
 	CollectibleOrder,
 	ContractType,
 	Order,
-	OrderbookKind,
 	PropertyFilter,
-} from '../../../../types';
-import { OrderSide } from '../../../../types';
-import type { PriceFilter } from '../../../_internal';
+} from '@0xsequence/api-client';
+import { OrderSide } from '@0xsequence/api-client';
+import { useMemo } from 'react';
+import { useAccount } from 'wagmi';
+import type { CollectibleCardAction } from '../../../../types';
 import type { MarketCollectibleCardProps } from '../../../ui/components/marketplace-collectible-card/types';
 import { useSellModal } from '../../../ui/modals/SellModal';
-import { useListCollectibles } from '../collectibles/useListCollectibles';
-import { useCollectionBalanceDetails } from '../collections/useCollectionBalanceDetails';
+import { normalizePriceFilters } from '../../../utils/normalizePriceFilters';
+import { useCollectibleMarketList } from '../../collectible/market-list';
+import { useCollectionBalanceDetails } from '../../collection/balance-details';
+import type { UrlPriceFilter } from '../url-state/filter-state';
 
-interface UseListMarketCardDataProps {
+interface UseMarketCardDataProps {
 	collectionAddress: Address;
 	chainId: number;
-	// orderbookKind is optional — used to override marketplace config for internal tests
-	orderbookKind?: OrderbookKind;
 	collectionType: ContractType;
 	filterOptions?: PropertyFilter[];
 	searchText?: string;
 	showListedOnly?: boolean;
-	priceFilters?: PriceFilter[];
-	onCollectibleClick?: (tokenId: string) => void;
+	priceFilters?: UrlPriceFilter[];
+	onCollectibleClick?: (tokenId: bigint) => void;
 	onCannotPerformAction?: (action: CollectibleCardAction) => void;
 	prioritizeOwnerActions?: boolean;
 	assetSrcPrefixUrl?: string;
 	hideQuantitySelector?: boolean;
+	enabled?: boolean;
 }
 
-export function useListMarketCardData({
+export function useMarketCardData({
 	collectionAddress,
 	chainId,
-	orderbookKind,
 	collectionType,
 	filterOptions,
 	searchText,
@@ -48,7 +45,8 @@ export function useListMarketCardData({
 	prioritizeOwnerActions,
 	assetSrcPrefixUrl,
 	hideQuantitySelector,
-}: UseListMarketCardDataProps) {
+	enabled,
+}: UseMarketCardDataProps) {
 	const { address: accountAddress } = useAccount();
 	const { show: showSellModal } = useSellModal();
 
@@ -60,7 +58,7 @@ export function useListMarketCardData({
 		hasNextPage,
 		isFetchingNextPage,
 		error: collectiblesListError,
-	} = useListCollectibles({
+	} = useCollectibleMarketList({
 		collectionAddress,
 		chainId,
 		side: OrderSide.listing,
@@ -68,10 +66,11 @@ export function useListMarketCardData({
 			includeEmpty: !showListedOnly,
 			searchText,
 			properties: filterOptions,
-			prices: priceFilters,
+			prices: normalizePriceFilters(priceFilters),
 		},
 		query: {
-			enabled: !!collectionAddress && !!chainId,
+			enabled:
+				enabled !== undefined ? enabled : !!collectionAddress && !!chainId,
 		},
 	});
 
@@ -97,20 +96,27 @@ export function useListMarketCardData({
 
 	// Generate card props for each collectible
 	const collectibleCards = useMemo(() => {
-		return allCollectibles.map((collectible: CollectibleOrder) => {
-			const balance = collectionBalance?.balances.find(
-				(balance) => balance.tokenID === collectible.metadata.tokenId,
-			)?.balance;
+		return allCollectibles.map((collectible) => {
+			const balanceObj = collectionBalance?.balances.find(
+				(b: { tokenId: bigint }) =>
+					b.tokenId === BigInt(collectible.metadata.tokenId),
+			);
+			const balance = balanceObj?.balance?.toString();
 
 			const cardProps: MarketCollectibleCardProps = {
-				collectibleId: collectible.metadata.tokenId,
+				tokenId: BigInt(collectible.metadata.tokenId),
 				chainId,
 				collectionAddress,
 				collectionType,
 				cardLoading: collectiblesListIsLoading || balanceLoading,
 				cardType: 'market',
-				orderbookKind,
-				collectible,
+				collectible: {
+					...collectible,
+					metadata: {
+						...collectible.metadata,
+						tokenId: BigInt(collectible.metadata.tokenId),
+					},
+				} as CollectibleOrder,
 				onCollectibleClick,
 				balance,
 				balanceIsLoading: balanceLoading,
@@ -125,7 +131,7 @@ export function useListMarketCardData({
 						showSellModal({
 							chainId,
 							collectionAddress,
-							tokenId: collectible.metadata.tokenId,
+							tokenId: BigInt(collectible.metadata.tokenId),
 							order: order as Order,
 						});
 						return;
@@ -142,7 +148,6 @@ export function useListMarketCardData({
 		collectionType,
 		collectiblesListIsLoading,
 		balanceLoading,
-		orderbookKind,
 		onCollectibleClick,
 		collectionBalance?.balances,
 		onCannotPerformAction,
@@ -161,5 +166,13 @@ export function useListMarketCardData({
 		isFetchingNextPage,
 		fetchNextPage,
 		allCollectibles,
+	} as {
+		collectibleCards: MarketCollectibleCardProps[];
+		isLoading: boolean;
+		error: Error | null;
+		hasNextPage: boolean | undefined;
+		isFetchingNextPage: boolean;
+		fetchNextPage: () => Promise<unknown>;
+		allCollectibles: CollectibleOrder[];
 	};
 }

package/src/react/hooks/{data/primary-sales/useList1155ShopCardData.tsx → ui/card-data/primary-sale-1155-card-data.tsx}

@@ -1,32 +1,36 @@
-import type { Address } from 'viem';
+import type {
+	Address,
+	CollectiblePrimarySaleItem,
+} from '@0xsequence/api-client';
+import { ContractType } from '@0xsequence/api-client';
+import { zeroAddress } from 'viem';
 import { useReadContract } from 'wagmi';
-import {
-	ContractType,
-	type PrimarySaleItem,
-	type TokenMetadata,
-} from '../../../_internal';
 import type { ShopCollectibleCardProps } from '../../../ui/components/marketplace-collectible-card/types';
+
 import { useSalesContractABI } from '../../contracts/useSalesContractABI';
-import { useCollection } from '../collections/useCollection';
 
-interface UseList1155ShopCardDataProps {
-	primarySaleItemsWithMetadata: Array<{
-		metadata: TokenMetadata;
-		primarySaleItem: PrimarySaleItem;
-	}>;
+interface UsePrimarySale1155CardDataProps {
+	primarySaleItemsWithMetadata: CollectiblePrimarySaleItem[];
 	chainId: number;
 	contractAddress: Address;
 	salesContractAddress: Address;
 	enabled?: boolean;
 }
 
-export function useList1155ShopCardData({
+type UsePrimarySale1155CardDataReturn = {
+	collectibleCards: ShopCollectibleCardProps[];
+	tokenMetadataError: null;
+	tokenSaleDetailsError: null;
+	isLoading: boolean;
+};
+
+export function usePrimarySale1155CardData({
 	primarySaleItemsWithMetadata,
 	chainId,
 	contractAddress,
 	salesContractAddress,
 	enabled = true,
-}: UseList1155ShopCardDataProps) {
+}: UsePrimarySale1155CardDataProps): UsePrimarySale1155CardDataReturn {
 	const { abi, isLoading: versionLoading } = useSalesContractABI({
 		contractAddress: salesContractAddress,
 		contractType: ContractType.ERC1155,
@@ -34,14 +38,6 @@ export function useList1155ShopCardData({
 		enabled,
 	});
 
-	const { data: collection, isLoading: collectionLoading } = useCollection({
-		chainId,
-		collectionAddress: contractAddress,
-		query: {
-			enabled,
-		},
-	});
-
 	const { data: paymentToken, isLoading: paymentTokenLoading } =
 		useReadContract({
 			chainId,
@@ -53,32 +49,29 @@ export function useList1155ShopCardData({
 			},
 		});
 
-	const isLoading = versionLoading || collectionLoading || paymentTokenLoading;
+	const isLoading = versionLoading || paymentTokenLoading;
 
 	const collectibleCards = primarySaleItemsWithMetadata.map((item) => {
 		const { metadata, primarySaleItem: saleData } = item;
 
 		const salePrice = {
-			amount: saleData?.priceAmount?.toString() || '',
-			currencyAddress: (saleData?.currencyAddress ||
-				paymentToken ||
-				'0x') as Address,
+			amount: saleData?.priceAmount || 0n,
+			currencyAddress: saleData?.currencyAddress || paymentToken || zeroAddress,
 		};
 
-		const supply = saleData?.supply?.toString();
+		const supply = saleData?.supply;
 		const unlimitedSupply = saleData?.unlimitedSupply;
 
 		return {
-			collectibleId: metadata.tokenId,
+			tokenId: metadata.tokenId,
 			chainId,
 			collectionAddress: contractAddress,
 			collectionType: ContractType.ERC1155,
 			tokenMetadata: metadata,
 			cardLoading: isLoading,
-			salesContractAddress: salesContractAddress,
+			salesContractAddress,
 			salePrice,
 			quantityInitial: supply,
-			quantityDecimals: collection?.decimals || 0,
 			quantityRemaining: supply,
 			unlimitedSupply,
 			saleStartsAt: saleData?.startDate?.toString(),

package/src/react/hooks/{data/primary-sales/useList721ShopCardData.tsx → ui/card-data/primary-sale-721-card-data.tsx}

@@ -1,17 +1,20 @@
-import type { TokenMetadata } from '@0xsequence/metadata';
+import type {
+	Address,
+	CollectiblePrimarySaleItem,
+	MarketplaceTokenMetadata,
+} from '@0xsequence/api-client';
+import { ContractType, MetadataStatus } from '@0xsequence/api-client';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
-import type { Address } from 'viem';
+import { zeroAddress } from 'viem';
 import { useReadContract } from 'wagmi';
 import { useFilterState } from '../../..';
-import { ContractType } from '../../../_internal';
-import type { CollectiblePrimarySaleItem } from '../../../_internal/api/marketplace.gen';
+import { tokenSuppliesQueryOptions } from '../../../queries/token/supplies';
 import type { ShopCollectibleCardProps } from '../../../ui';
 import { useConfig } from '../../config';
 import { useSalesContractABI } from '../../contracts/useSalesContractABI';
-import { tokenSuppliesQueryOptions } from '../tokens';
 
-interface UseList721ShopCardDataProps {
+interface UsePrimarySale721CardDataProps {
 	primarySaleItemsWithMetadata: CollectiblePrimarySaleItem[];
 	chainId: number;
 	contractAddress: Address;
@@ -19,13 +22,53 @@ interface UseList721ShopCardDataProps {
 	enabled?: boolean;
 }
 
-export function useList721ShopCardData({
+type TokenMetadataInput = {
+	name?: string;
+	attributes?: MarketplaceTokenMetadata['attributes'];
+	status?: string;
+	description?: string;
+	image?: string;
+	video?: string;
+	audio?: string;
+	properties?: MarketplaceTokenMetadata['properties'];
+	image_data?: string;
+	external_url?: string;
+	background_color?: string;
+	animation_url?: string;
+	decimals?: number;
+	updatedAt?: string;
+};
+
+function normalizeTokenMetadata(
+	metadata: TokenMetadataInput | undefined,
+	tokenId: bigint,
+): MarketplaceTokenMetadata {
+	return {
+		tokenId,
+		name: metadata?.name ?? '',
+		attributes: metadata?.attributes ?? [],
+		status: (metadata?.status as MetadataStatus) ?? MetadataStatus.AVAILABLE,
+		description: metadata?.description,
+		image: metadata?.image,
+		video: metadata?.video,
+		audio: metadata?.audio,
+		properties: metadata?.properties,
+		image_data: metadata?.image_data,
+		external_url: metadata?.external_url,
+		background_color: metadata?.background_color,
+		animation_url: metadata?.animation_url,
+		decimals: metadata?.decimals,
+		updatedAt: metadata?.updatedAt,
+	};
+}
+
+export function usePrimarySale721CardData({
 	primarySaleItemsWithMetadata,
 	chainId,
 	contractAddress,
 	salesContractAddress,
 	enabled = true,
-}: UseList721ShopCardDataProps) {
+}: UsePrimarySale721CardDataProps) {
 	const [allTokenSuppliesFetched, setAllTokenSuppliesFetched] = useState(false);
 	const { showListedOnly: showAvailableSales } = useFilterState();
 
@@ -36,20 +79,12 @@ export function useList721ShopCardData({
 		enabled,
 	});
 	const config = useConfig();
-
-	const tokenSuppliesEnabled = Boolean(
-		chainId && contractAddress && config && (enabled ?? true),
-	);
-	// TODO: Find a way to remove this and use enabled in tokenSuppliesQueryOptions
 	const tokenSuppliesQuery = useInfiniteQuery({
 		...tokenSuppliesQueryOptions({
 			chainId,
 			collectionAddress: contractAddress,
 			includeMetadata: true,
 			config,
-			query: {
-				enabled: tokenSuppliesEnabled,
-			},
 		}),
 	});
 
@@ -63,8 +98,6 @@ export function useList721ShopCardData({
 
 	useEffect(() => {
 		async function fetchAllPages() {
-			if (!tokenSuppliesEnabled) return;
-
 			if (!hasNextSuppliesPage && tokenSuppliesData) {
 				setAllTokenSuppliesFetched(true);
 				return;
@@ -81,15 +114,15 @@ export function useList721ShopCardData({
 		isFetchingNextSuppliesPage,
 		tokenSuppliesLoading,
 		fetchNextTokenSuppliesPage,
-		tokenSuppliesEnabled,
 	]);
 
 	const allTokenSupplies = tokenSuppliesData?.pages.flatMap(
-		(page) => page.tokenIDs,
+		(page) => page.supplies,
 	);
-	const matchingTokenSupplies = allTokenSupplies?.filter((item) =>
+	const matchingTokenSupplies = allTokenSupplies?.filter((supply) =>
 		primarySaleItemsWithMetadata.some(
-			(primarySaleItem) => primarySaleItem.metadata.tokenId === item.tokenID,
+			(primarySaleItem) =>
+				BigInt(primarySaleItem.metadata.tokenId) === supply.tokenId,
 		),
 	);
 
@@ -112,7 +145,7 @@ export function useList721ShopCardData({
 	const unmintedPrimarySaleItems = primarySaleItemsWithMetadata.filter(
 		(item) =>
 			!matchingTokenSupplies?.some(
-				(supply) => supply.tokenID === item.metadata.tokenId,
+				(supply) => supply.tokenId === BigInt(item.metadata.tokenId),
 			),
 	);
 
@@ -121,30 +154,31 @@ export function useList721ShopCardData({
 			const { metadata, primarySaleItem } = item;
 
 			const salePrice = {
-				amount: primarySaleItem.priceAmount?.toString(),
-				currencyAddress: primarySaleItem.currencyAddress as Address,
+				amount: primarySaleItem.priceAmount || 0n,
+				currencyAddress: primarySaleItem.currencyAddress,
 			};
 
-			const quantityInitial = primarySaleItem.supply?.toString();
+			const quantityInitial = primarySaleItem.supply;
 
-			const quantityRemaining = '1';
+			const quantityRemaining = 1n;
 
 			const saleStartsAt = primarySaleItem.startDate.toString();
 
 			const saleEndsAt = primarySaleItem.endDate.toString();
 
 			return {
-				collectibleId: metadata.tokenId,
+				tokenId: BigInt(metadata.tokenId),
 				chainId,
 				collectionAddress: contractAddress,
 				collectionType: ContractType.ERC721,
-				tokenMetadata: metadata,
+				tokenMetadata: {
+					...metadata,
+				},
 				cardLoading: saleDetailsLoading,
-				salesContractAddress: salesContractAddress,
+				salesContractAddress,
 				salePrice,
 				quantityInitial,
 				quantityRemaining,
-				quantityDecimals: 0,
 				saleStartsAt,
 				saleEndsAt,
 				cardType: 'shop',
@@ -154,20 +188,19 @@ export function useList721ShopCardData({
 
 	const mintedTokensCollectibleCards = allTokenSupplies?.map((item) => {
 		return {
-			collectibleId: item.tokenID,
+			tokenId: item.tokenId,
 			chainId,
 			collectionAddress: contractAddress,
 			collectionType: ContractType.ERC721,
-			tokenMetadata: item.tokenMetadata as TokenMetadata,
+			tokenMetadata: normalizeTokenMetadata(item.tokenMetadata, item.tokenId),
 			cardLoading: saleDetailsLoading,
-			salesContractAddress: salesContractAddress,
+			salesContractAddress,
 			salePrice: {
-				amount: '0',
-				currencyAddress: '0x0000000000000000000000000000000000000000',
+				amount: 0n,
+				currencyAddress: zeroAddress,
 			},
 			quantityInitial: undefined,
 			quantityRemaining: undefined,
-			quantityDecimals: 0,
 			saleStartsAt: undefined,
 			saleEndsAt: undefined,
 			cardType: 'shop',

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

@@ -1,3 +1,5 @@
-export * from './useFilterState';
+export * from './card-data';
+export * from './url-state';
+export * from './useCollectibleCardOfferState';
 export * from './useFilters';
 export * from './useOpenConnectModal';