@0xsequence/marketplace-sdk 0.8.3 → 0.8.5

package/src/react/queries/inventory.ts

@@ -0,0 +1,303 @@
+import type {
+	ContractInfo,
+	Page as IndexerPage,
+	TokenBalance,
+} from '@0xsequence/indexer';
+import { infiniteQueryOptions } from '@tanstack/react-query';
+import type { Address } from 'viem';
+import { OrderSide, type Page, type SdkConfig } from '../../types';
+import {
+	type CollectibleOrder,
+	type ContractType,
+	getIndexerClient,
+} from '../_internal';
+import { fetchCollectibles } from './listCollectibles';
+
+export interface UseInventoryArgs {
+	accountAddress: Address;
+	collectionAddress: Address;
+	chainId: number;
+	isLaos721?: boolean;
+	query?: {
+		enabled?: boolean;
+	};
+}
+
+// Maintain collection state across calls
+interface InventoryState {
+	seenTokenIds: Set<string>;
+	marketplaceFinished: boolean;
+	// Track if we've already fetched all indexer tokens
+	indexerTokensFetched: boolean;
+	// Store the token balances from the indexer
+	indexerTokenBalances: Map<string, CollectibleWithBalance>;
+}
+
+// Store state per collection
+const stateByCollection = new Map<string, InventoryState>();
+
+const getCollectionKey = (args: UseInventoryArgs) =>
+	`${args.chainId}-${args.collectionAddress}-${args.accountAddress}`;
+
+interface GetInventoryArgs extends Omit<UseInventoryArgs, 'query'> {
+	isLaos721: boolean;
+}
+
+interface CollectibleWithBalance extends CollectibleOrder {
+	balance: string;
+	contractInfo?: ContractInfo;
+	contractType: ContractType.ERC1155 | ContractType.ERC721;
+}
+
+export interface CollectiblesResponse {
+	collectibles: CollectibleWithBalance[];
+	page: Page;
+}
+
+function getOrInitState(collectionKey: string): InventoryState {
+	if (!stateByCollection.has(collectionKey)) {
+		stateByCollection.set(collectionKey, {
+			seenTokenIds: new Set<string>(),
+			marketplaceFinished: false,
+			indexerTokensFetched: false,
+			indexerTokenBalances: new Map(),
+		});
+	}
+
+	// biome-ignore lint/style/noNonNullAssertion: guaranteed to exist, by the above init
+	return stateByCollection.get(collectionKey)!;
+}
+
+function collectibleFromTokenBalance(
+	token: TokenBalance,
+): CollectibleWithBalance {
+	return {
+		metadata: {
+			tokenId: token.tokenID ?? '',
+			attributes: token.tokenMetadata?.attributes ?? [],
+			image: token.tokenMetadata?.image,
+			name: token.tokenMetadata?.name ?? '',
+			description: token.tokenMetadata?.description,
+			video: token.tokenMetadata?.video,
+			audio: token.tokenMetadata?.audio,
+		},
+		contractInfo: token.contractInfo,
+		contractType: token.contractType as
+			| ContractType.ERC1155
+			| ContractType.ERC721,
+		balance: token.balance,
+	};
+}
+
+async function fetchAllIndexerTokens(
+	chainId: number,
+	accountAddress: Address,
+	collectionAddress: Address,
+	config: SdkConfig,
+	state: InventoryState,
+): Promise<void> {
+	const indexerClient = getIndexerClient(chainId, config);
+
+	let page: IndexerPage = {
+		pageSize: 50,
+	};
+
+	while (true) {
+		const { balances, page: nextPage } = await indexerClient.getTokenBalances({
+			accountAddress,
+			contractAddress: collectionAddress,
+			includeMetadata: true,
+			page: page,
+		});
+
+		for (const balance of balances) {
+			if (balance.tokenID) {
+				state.indexerTokenBalances.set(
+					balance.tokenID,
+					collectibleFromTokenBalance(balance),
+				);
+			}
+		}
+
+		if (!nextPage.more) {
+			break;
+		}
+		page = nextPage;
+	}
+
+	state.indexerTokensFetched = true;
+}
+
+// Process indexer tokens that we haven't seen yet
+function processRemainingIndexerTokens(
+	state: InventoryState,
+	page: Page,
+): CollectiblesResponse {
+	const allTokens = Array.from(state.indexerTokenBalances.values());
+
+	// Filter out tokens that we've already seen
+	const newTokens = allTokens.filter(
+		(token) => !state.seenTokenIds.has(token.metadata.tokenId),
+	);
+
+	// Calculate pagination
+	const startIndex = (page.page - 1) * page.pageSize;
+	const endIndex = startIndex + page.pageSize;
+	const paginatedTokens = newTokens.slice(startIndex, endIndex);
+
+	// Add new token IDs to the set
+	for (const token of paginatedTokens) {
+		state.seenTokenIds.add(token.metadata.tokenId);
+	}
+
+	return {
+		collectibles: paginatedTokens,
+		page: {
+			page: page.page,
+			pageSize: page.pageSize,
+			more: endIndex < newTokens.length,
+		},
+	};
+}
+
+function processMarketplaceCollectibles(
+	collectibles: CollectibleOrder[],
+	state: InventoryState,
+	page: Page,
+): {
+	enrichedCollectibles: CollectibleWithBalance[];
+	missingTokens: CollectibleWithBalance[];
+} {
+	// Add new token IDs to the set
+	for (const c of collectibles) {
+		state.seenTokenIds.add(c.metadata.tokenId);
+	}
+
+	// Enrich marketplace collectibles with balance data from indexer
+	const enrichedCollectibles = collectibles.map((c: CollectibleOrder) => {
+		const tokenId = c.metadata.tokenId;
+		const indexerData = state.indexerTokenBalances.get(tokenId);
+
+		return {
+			...c,
+			balance: indexerData?.balance,
+			contractInfo: indexerData?.contractInfo,
+			contractType: indexerData?.contractType,
+		} as CollectibleWithBalance;
+	});
+
+	// Check for missing tokens in the marketplace data
+	const marketplaceTokenIds = new Set(
+		enrichedCollectibles.map((c) => c.metadata.tokenId),
+	);
+
+	const missingTokens = Array.from(state.indexerTokenBalances.entries())
+		.filter(([tokenId]) => !marketplaceTokenIds.has(tokenId))
+		.map(([_, balance]) => balance)
+		.slice(0, page.pageSize);
+
+	return { enrichedCollectibles, missingTokens };
+}
+
+export async function fetchInventory(
+	args: GetInventoryArgs,
+	config: SdkConfig,
+	page: Page,
+): Promise<CollectiblesResponse> {
+	const { accountAddress, collectionAddress, chainId, isLaos721 } = args;
+	const collectionKey = getCollectionKey(args);
+	const state = getOrInitState(collectionKey);
+
+	// On first run, fetch all pages from the indexer
+	if (!state.indexerTokensFetched) {
+		await fetchAllIndexerTokens(
+			chainId,
+			accountAddress,
+			collectionAddress,
+			config,
+			state,
+		);
+	}
+
+	// If marketplace API has no more results, use the indexer data
+	if (state.marketplaceFinished) {
+		return processRemainingIndexerTokens(state, page);
+	}
+
+	// Fetch collectibles from marketplace API
+	const collectibles = await fetchCollectibles(
+		{
+			chainId,
+			collectionAddress,
+			filter: {
+				inAccounts: [accountAddress],
+				includeEmpty: true,
+			},
+			side: OrderSide.listing,
+			isLaos721,
+		},
+		config,
+		page,
+	);
+
+	// Process the collectibles and find missing tokens
+	const { enrichedCollectibles, missingTokens } =
+		processMarketplaceCollectibles(collectibles.collectibles, state, page);
+
+	// If there are no more results from the marketplace API
+	if (!collectibles.page?.more) {
+		// Mark marketplace as finished and start using indexer data on next call
+		state.marketplaceFinished = true;
+		return {
+			collectibles: [...enrichedCollectibles, ...missingTokens],
+			page: {
+				page: collectibles.page?.page ?? page.page,
+				pageSize: collectibles.page?.pageSize ?? page.pageSize,
+				more: missingTokens.length > 0,
+			},
+		};
+	}
+
+	return {
+		collectibles: enrichedCollectibles,
+		page: {
+			page: collectibles.page?.page ?? page.page,
+			pageSize: collectibles.page?.pageSize ?? page.pageSize,
+			more: Boolean(collectibles.page?.more),
+		},
+	};
+}
+
+export function inventoryOptions(args: UseInventoryArgs, config: SdkConfig) {
+	const collectionKey = getCollectionKey(args);
+	const enabledQuery = args.query?.enabled ?? true;
+	const enabled =
+		enabledQuery && !!args.accountAddress && !!args.collectionAddress;
+
+	return infiniteQueryOptions({
+		queryKey: [
+			'inventory',
+			args.accountAddress,
+			args.collectionAddress,
+			args.chainId,
+		],
+		queryFn: ({ pageParam }) =>
+			fetchInventory(
+				{
+					...args,
+					isLaos721: args.isLaos721 ?? false,
+				},
+				config,
+				pageParam,
+			),
+		initialPageParam: { page: 1, pageSize: 30 } as Page,
+		getNextPageParam: (lastPage) =>
+			lastPage.page?.more ? lastPage.page : undefined,
+		enabled,
+		meta: {
+			onInvalidate: () => {
+				stateByCollection.delete(collectionKey);
+			},
+		},
+	});
+}

package/src/react/queries/listBalances.ts

@@ -24,14 +24,6 @@ export type UseListBalancesArgs = {
 	};
 };
 
-/**
- * Fetches a list of token balances with pagination support
- *
- * @param args - Arguments for the API call
- * @param config - SDK configuration
- * @param page - Page parameters for pagination
- * @returns The token balances data
- */
 export async function fetchBalances(
 	args: UseListBalancesArgs,
 	config: SdkConfig,
@@ -48,6 +40,7 @@ export async function fetchBalances(
 				body: JSON.stringify({
 					chainId: args.chainId.toString(),
 					accountAddress: args.accountAddress,
+					contractAddress: args.contractAddress,
 					includeMetadata: args.includeMetadata ?? true,
 					page: {
 						sort: [

package/src/react/queries/listCollectibles.ts

@@ -1,5 +1,5 @@
 import { infiniteQueryOptions } from '@tanstack/react-query';
-import type { Hex } from 'viem';
+import type { Address, Hex } from 'viem';
 import type { Page, SdkConfig } from '../../types';
 import type {
 	CollectibleOrder,
@@ -8,7 +8,7 @@ import type {
 	ListCollectiblesReturn,
 } from '../_internal';
 import { OrderSide, collectableKeys, getMarketplaceClient } from '../_internal';
-import { fetchBalances } from './listBalances';
+import { type UseListBalancesArgs, fetchBalances } from './listBalances';
 export type UseListCollectiblesArgs = {
 	collectionAddress: Hex;
 	chainId: number;
@@ -43,7 +43,16 @@ export async function fetchCollectibles(
 
 	if (args.isLaos721 && args.side === OrderSide.listing) {
 		try {
-			const balances = await fetchBalances(args, config, page);
+			const fetchBalancesArgs = {
+				chainId: args.chainId,
+				accountAddress: args.filter?.inAccounts?.[0] as Address,
+				contractAddress: args.collectionAddress,
+				page: page,
+				includeMetadata: true,
+				isLaos721: true,
+			} satisfies UseListBalancesArgs;
+
+			const balances = await fetchBalances(fetchBalancesArgs, config, page);
 			const collectibles: CollectibleOrder[] = balances.balances.map(
 				(balance) => {
 					if (!balance.tokenMetadata)

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

@@ -1,133 +1,66 @@
 'use client';
 
-import * as kit from '@0xsequence/connect';
 import { fireEvent, render, screen } from '@test';
+import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import * as wagmi from 'wagmi';
+import * as walletModule from '../../../../../_internal/wallet/useWallet';
 import { ActionButtonBody } from '../components/ActionButtonBody';
 import { setPendingAction } from '../store';
 import { CollectibleCardAction } from '../types';
 
-// Mock the hooks
-vi.mock('wagmi', async () => {
-	const actual = await vi.importActual('wagmi');
-	return {
-		...actual,
-		useAccount: vi.fn(),
-	};
-});
-
-vi.mock('@0xsequence/connect', () => ({
-	useOpenConnectModal: vi.fn(),
-}));
-
-// Mock the store
 vi.mock('../store', () => ({
 	setPendingAction: vi.fn(),
 }));
 
-describe.skip('ActionButtonBody', () => {
+describe('ActionButtonBody', () => {
+	const mockOnClick = vi.fn();
 	const defaultProps = {
 		label: 'Buy now' as const,
-		tokenId: '1',
-		onClick: vi.fn(),
+		tokenId: '123',
+		onClick: mockOnClick,
 		action: CollectibleCardAction.BUY as CollectibleCardAction.BUY,
-		disabled: false,
-		loading: false,
 	};
 
 	beforeEach(() => {
 		vi.clearAllMocks();
-		// @ts-expect-error
-		vi.mocked(wagmi.useAccount).mockReturnValue({ address: undefined });
-		vi.mocked(kit.useOpenConnectModal).mockReturnValue({
-			setOpenConnectModal: vi.fn(),
-			openConnectModalState: false,
+
+		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+			wallet: createMockWallet(),
+			isLoading: false,
+			isError: false,
 		});
 	});
 
-	it('renders with correct label', () => {
+	it('executes onClick directly when user is connected', () => {
 		render(<ActionButtonBody {...defaultProps} />);
-		expect(screen.getByText('Buy now')).toBeInTheDocument();
-	});
 
-	it('calls onClick directly when user is connected', () => {
-		// @ts-expect-error
-		vi.mocked(wagmi.useAccount).mockReturnValue({ address: '0x123' });
-		render(<ActionButtonBody {...defaultProps} />);
+		const button = screen.getByRole('button', { name: defaultProps.label });
+		fireEvent.click(button);
 
-		fireEvent.click(screen.getByText('Buy now'));
-		expect(defaultProps.onClick).toHaveBeenCalled();
+		expect(mockOnClick).toHaveBeenCalledTimes(1);
 		expect(setPendingAction).not.toHaveBeenCalled();
 	});
 
 	it('sets pending action and opens connect modal when user is not connected', () => {
-		const setOpenConnectModal = vi.fn();
-		// @ts-expect-error
-		vi.mocked(kit.useOpenConnectModal).mockReturnValue({
-			setOpenConnectModal,
+		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+			wallet: {
+				...createMockWallet(),
+				// @ts-expect-error - address is undefined for testing
+				address: undefined,
+			},
+			isLoading: false,
+			isError: false,
 		});
-
 		render(<ActionButtonBody {...defaultProps} />);
 
-		fireEvent.click(screen.getByText('Buy now'));
+		const button = screen.getByRole('button', { name: defaultProps.label });
+		fireEvent.click(button);
 
+		expect(mockOnClick).not.toHaveBeenCalled();
 		expect(setPendingAction).toHaveBeenCalledWith(
-			CollectibleCardAction.BUY,
+			defaultProps.action,
 			defaultProps.onClick,
 			defaultProps.tokenId,
 		);
-		expect(setOpenConnectModal).toHaveBeenCalledWith(true);
-		expect(defaultProps.onClick).not.toHaveBeenCalled();
-	});
-
-	it('prevents event propagation on click', () => {
-		const preventDefault = vi.fn();
-		const stopPropagation = vi.fn();
-
-		render(<ActionButtonBody {...defaultProps} />);
-
-		const button = screen.getByRole('button');
-		const mockEvent = new MouseEvent('click', {
-			bubbles: true,
-			cancelable: true,
-		});
-		Object.defineProperties(mockEvent, {
-			preventDefault: { value: preventDefault },
-			stopPropagation: { value: stopPropagation },
-		});
-
-		fireEvent(button, mockEvent);
-
-		expect(preventDefault).toHaveBeenCalled();
-		expect(stopPropagation).toHaveBeenCalled();
-	});
-
-	it('renders with custom icon when provided', () => {
-		const TestIcon = () => <span data-testid="test-icon">Icon</span>;
-		render(<ActionButtonBody {...defaultProps} icon={TestIcon} />);
-		expect(screen.getByTestId('test-icon')).toBeInTheDocument();
-	});
-
-	it('renders with different labels', () => {
-		const labels = [
-			'Sell',
-			'Make an offer',
-			'Create listing',
-			'Transfer',
-		] as const;
-
-		for (const label of labels) {
-			render(<ActionButtonBody {...defaultProps} label={label} />);
-			expect(screen.getByText(label)).toBeInTheDocument();
-		}
-	});
-
-	it('calls onClick when clicked and not disabled', () => {
-		// @ts-expect-error
-		vi.mocked(wagmi.useAccount).mockReturnValue({ address: '0x123' });
-		render(<ActionButtonBody {...defaultProps} />);
-		fireEvent.click(screen.getByRole('button'));
-		expect(defaultProps.onClick).toHaveBeenCalled();
 	});
 });

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

@@ -0,0 +1,59 @@
+'use client';
+
+import { render, screen } from '@test';
+import { createMockWallet } from '@test/mocks/wallet';
+import { zeroAddress } from 'viem';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { OrderSide } from '../../../../../_internal';
+import { mockOrder } from '../../../../../_internal/api/__mocks__/marketplace.msw';
+import * as walletModule from '../../../../../_internal/wallet/useWallet';
+import { NonOwnerActions } from '../components/NonOwnerActions';
+import { CollectibleCardAction } from '../types';
+
+describe('NonOwnerActions', () => {
+	const defaultProps = {
+		action: CollectibleCardAction.BUY,
+		tokenId: '1',
+		collectionAddress: zeroAddress,
+		chainId: 1,
+		lowestListing: { ...mockOrder, side: OrderSide.listing },
+	};
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+		vi.resetAllMocks();
+		vi.restoreAllMocks();
+
+		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+			wallet: createMockWallet(),
+			isLoading: false,
+			isError: false,
+		});
+	});
+
+	it('renders Buy now button for BUY action', () => {
+		render(<NonOwnerActions {...defaultProps} />);
+	});
+
+	it('renders Make an offer button for OFFER action', () => {
+		render(
+			<NonOwnerActions
+				{...defaultProps}
+				action={CollectibleCardAction.OFFER}
+			/>,
+		);
+		expect(screen.getByText('Make an offer')).toBeInTheDocument();
+	});
+
+	it('returns null for unsupported actions', () => {
+		const props = {
+			...defaultProps,
+			action: CollectibleCardAction.LIST,
+		};
+
+		const { container } = render(
+			<NonOwnerActions {...(props as Parameters<typeof NonOwnerActions>[0])} />,
+		);
+		expect(container).toBeEmptyDOMElement();
+	});
+});

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

@@ -0,0 +1,73 @@
+'use client';
+
+import { render, screen } from '@test';
+import { createMockWallet } from '@test/mocks/wallet';
+import { zeroAddress } from 'viem';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { OrderSide } from '../../../../../_internal';
+import { mockOrder } from '../../../../../_internal/api/__mocks__/marketplace.msw';
+import * as walletModule from '../../../../../_internal/wallet/useWallet';
+import { OwnerActions } from '../components/OwnerActions';
+import { CollectibleCardAction } from '../types';
+
+describe('OwnerActions', () => {
+	const defaultProps = {
+		action: CollectibleCardAction.BUY,
+		tokenId: '1',
+		collectionAddress: zeroAddress,
+		chainId: 1,
+		lowestListing: { ...mockOrder, side: OrderSide.listing },
+		highestOffer: { ...mockOrder, side: OrderSide.offer },
+	};
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+		vi.resetAllMocks();
+		vi.restoreAllMocks();
+
+		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+			wallet: createMockWallet(),
+			isLoading: false,
+			isError: false,
+		});
+	});
+
+	it('renders Create listing button for LIST action', () => {
+		render(
+			<OwnerActions {...defaultProps} action={CollectibleCardAction.LIST} />,
+		);
+
+		expect(screen.getByText('Create listing')).toBeInTheDocument();
+	});
+
+	it('renders Transfer button for TRANSFER action', () => {
+		render(
+			<OwnerActions
+				{...defaultProps}
+				action={CollectibleCardAction.TRANSFER}
+			/>,
+		);
+
+		expect(screen.getByText('Transfer')).toBeInTheDocument();
+	});
+
+	it('renders Sell button for SELL action', () => {
+		render(
+			<OwnerActions {...defaultProps} action={CollectibleCardAction.SELL} />,
+		);
+
+		expect(screen.getByText('Sell')).toBeInTheDocument();
+	});
+
+	it('returns null for unsupported actions', () => {
+		const props = {
+			...defaultProps,
+			action: CollectibleCardAction.BUY,
+		};
+
+		const { container } = render(
+			<OwnerActions {...(props as Parameters<typeof OwnerActions>[0])} />,
+		);
+		expect(container).toBeEmptyDOMElement();
+	});
+});