@0xsequence/marketplace-sdk 0.8.3 → 0.8.4

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/modals/CreateListingModal/__tests__/Modal.test.tsx

@@ -1,137 +1,107 @@
-import { useWaasFeeOptions } from '@0xsequence/connect';
-import { cleanup, fireEvent, render, screen, waitFor } from '@test';
-import { zeroAddress } from 'viem';
+import { cleanup, render, renderHook, screen, waitFor } from '@test';
+import { TEST_COLLECTIBLE } from '@test/const';
+import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import * as hooks from '../../../../hooks';
+import { useCreateListingModal } from '..';
+import { StepType, WalletKind } from '../../../../_internal';
+import { createMockStep } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import * as walletModule from '../../../../_internal/wallet/useWallet';
 import { CreateListingModal } from '../Modal';
-import { createListingModal$ } from '../store';
-
-vi.mock(import('../../../../hooks'), async (importOriginal) => {
-	const actual = await importOriginal();
-	return {
-		...actual,
-		useCollectible: vi.fn(actual.useCollectible),
-		useCollection: vi.fn(actual.useCollection),
-		useCurrencies: vi.fn(actual.useCurrencies),
-		useMarketplaceConfig: vi.fn(actual.useMarketplaceConfig),
-		useLowestListing: vi.fn(actual.useLowestListing),
-	};
-});
-
-vi.mock('@0xsequence/kit', () => ({
-	useWaasFeeOptions: vi.fn(),
-}));
+import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
 
 const defaultArgs = {
-	collectionAddress: zeroAddress,
-	chainId: 1,
-	collectibleId: '1',
+	collectionAddress: TEST_COLLECTIBLE.collectionAddress,
+	chainId: TEST_COLLECTIBLE.chainId,
+	collectibleId: TEST_COLLECTIBLE.collectibleId,
 };
 
-describe.skip('CreateListingModal', () => {
+describe('MakeOfferModal', () => {
+	const mockWallet = createMockWallet();
+
 	beforeEach(() => {
 		cleanup();
 		// Reset all mocks
 		vi.clearAllMocks();
 		vi.resetAllMocks();
-		vi.mocked(useWaasFeeOptions).mockReturnValue([undefined, vi.fn(), vi.fn()]);
+		vi.restoreAllMocks();
 	});
 
-	it('should not render when modal is closed', () => {
-		render(<CreateListingModal />);
-		expect(screen.queryByText('List item for sale')).toBeNull();
-	});
-
-	it('should show error modal when there is an error fetching data', async () => {
-		// @ts-expect-error - TODO: Add a common mock object with the correct shape
-		vi.mocked(hooks.useCollection).mockReturnValue({
-			data: undefined,
+	it('should show main button if there is no approval step', async () => {
+		// Mock sequence wallet
+		const sequenceWallet = {
+			...mockWallet,
+			walletKind: WalletKind.sequence,
+		};
+		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+			wallet: sequenceWallet,
 			isLoading: false,
-			isError: true,
+			isError: false,
 		});
-
-		createListingModal$.open(defaultArgs);
-
-		render(<CreateListingModal />);
-
-		expect(
-			await screen.findByText('Error loading item details'),
-		).toBeInTheDocument();
-	});
-
-	it('should render main form when data is loaded', async () => {
-		createListingModal$.open(defaultArgs);
-		render(<CreateListingModal />);
-
-		// Check for the collection name in the token preview
-		expect(await screen.findByText('Mock Collection')).toBeInTheDocument();
-	});
-
-	it('should reset store values when modal is closed and reopened', () => {
-		// Open modal first time
-		createListingModal$.open(defaultArgs);
-
-		// Set some values in the store
-		createListingModal$.listingPrice.amountRaw.set('1000000000000000000');
-		createListingModal$.quantity.set('5');
-
-		// Close modal
-		createListingModal$.close();
-
-		// Verify store is reset
-		expect(createListingModal$.listingPrice.amountRaw.get()).toBe('0');
-		expect(createListingModal$.quantity.get()).toBe('1');
-
-		// Reopen modal
-		createListingModal$.open({
-			collectionAddress: '0x456',
-			chainId: 1,
-			collectibleId: '2',
+		vi.spyOn(
+			useGetTokenApprovalDataModule,
+			'useGetTokenApprovalData',
+		).mockReturnValue({
+			data: {
+				step: null,
+			},
+			isLoading: false,
+			isSuccess: true,
 		});
 
-		// Verify store has default values
-		expect(createListingModal$.listingPrice.amountRaw.get()).toBe('0');
-		expect(createListingModal$.quantity.get()).toBe('1');
-	});
-
-	it('should update state based on price input', async () => {
-		createListingModal$.open(defaultArgs);
+		// Render the modal
+		const { result } = renderHook(() => useCreateListingModal());
+		result.current.show(defaultArgs);
 
 		render(<CreateListingModal />);
 
-		// Initial price should be 0
-		expect(createListingModal$.listingPrice.amountRaw.get()).toBe('0');
-
-		// Find and interact with price input using id
-		const priceInput = await screen.findByRole('textbox', {
-			name: /enter price/i,
-		});
-		expect(priceInput).toBeInTheDocument();
-
-		fireEvent.change(priceInput, { target: { value: '1.5' } });
-
-		// Wait for the state to update and verify it's not 0 anymore
+		// Wait for the component to update
 		await waitFor(() => {
-			expect(createListingModal$.listingPrice.amountRaw.get()).not.toBe('0');
+			// The Approve TOKEN button should not exist
+			expect(screen.queryByText('Approve TOKEN')).toBeNull();
+
+			// The List item for sale button should exist
+			expect(
+				screen.getByRole('button', { name: 'List item for sale' }),
+			).toBeDefined();
 		});
 	});
 
-	it('should show no currencies configured modal when currencies array is empty', async () => {
-		// @ts-expect-error - Improve this mock
-		vi.mocked(hooks.useCurrencies).mockReturnValue({
-			data: [],
+	it('(non-sequence wallets) should show approve token button if there is an approval step, disable main button', async () => {
+		const nonSequenceWallet = {
+			...mockWallet,
+			walletKind: 'unknown' as WalletKind,
+		};
+		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
+			wallet: nonSequenceWallet,
 			isLoading: false,
 			isError: false,
 		});
+		vi.spyOn(
+			useGetTokenApprovalDataModule,
+			'useGetTokenApprovalData',
+		).mockReturnValue({
+			data: {
+				step: createMockStep(StepType.tokenApproval),
+			},
+			isLoading: false,
+			isSuccess: true,
+		});
 
-		createListingModal$.open(defaultArgs);
+		// Render the modal
+		const { result } = renderHook(() => useCreateListingModal());
+		result.current.show(defaultArgs);
 
 		render(<CreateListingModal />);
 
-		expect(
-			await screen.findByText(
-				'No currencies are configured for the marketplace, contact the marketplace owners',
-			),
-		).toBeInTheDocument();
+		await waitFor(() => {
+			expect(screen.getByText('Approve TOKEN')).toBeDefined();
+
+			expect(
+				screen.getByRole('button', { name: 'List item for sale' }),
+			).toBeDefined();
+			expect(
+				screen.getByRole('button', { name: 'List item for sale' }),
+			).toBeDisabled();
+		});
 	});
 });