@0xsequence/marketplace-sdk 0.8.10 → 0.8.12

package/src/react/hooks/useListMarketCardData.tsx

@@ -0,0 +1,157 @@
+import { useMemo } from 'react';
+
+import type { Address } from 'viem';
+import { useAccount } from 'wagmi';
+import { OrderSide } from '../../types';
+import type {
+	CollectibleCardAction,
+	CollectibleOrder,
+	ContractType,
+	Order,
+	OrderbookKind,
+	PropertyFilter,
+} from '../../types';
+import type { MarketCollectibleCardProps } from '../ui/components/marketplace-collectible-card/types';
+import { useSellModal } from '../ui/modals/SellModal';
+import { useCollectionBalanceDetails } from './useCollectionBalanceDetails';
+import { useListCollectibles } from './useListCollectibles';
+
+interface UseListMarketCardDataProps {
+	collectionAddress: Address;
+	chainId: number;
+	orderbookKind: OrderbookKind;
+	collectionType: ContractType;
+	filterOptions?: PropertyFilter[];
+	searchText?: string;
+	showListedOnly?: boolean;
+	onCollectibleClick?: (tokenId: string) => void;
+	onCannotPerformAction?: (action: CollectibleCardAction) => void;
+	prioritizeOwnerActions?: boolean;
+	assetSrcPrefixUrl?: string;
+}
+
+export function useListMarketCardData({
+	collectionAddress,
+	chainId,
+	orderbookKind,
+	collectionType,
+	filterOptions,
+	searchText,
+	showListedOnly = false,
+	onCollectibleClick,
+	onCannotPerformAction,
+	prioritizeOwnerActions,
+	assetSrcPrefixUrl,
+}: UseListMarketCardDataProps) {
+	const { address: accountAddress } = useAccount();
+	const { show: showSellModal } = useSellModal();
+
+	// Get collectibles with listings
+	const {
+		data: collectiblesList,
+		isLoading: collectiblesListIsLoading,
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+		error: collectiblesListError,
+	} = useListCollectibles({
+		collectionAddress,
+		chainId,
+		side: OrderSide.listing,
+		filter: {
+			includeEmpty: !showListedOnly,
+			searchText,
+			properties: filterOptions,
+		},
+		query: {
+			enabled: !!collectionAddress && !!chainId,
+		},
+	});
+
+	// Get user balances for this collection
+	const { data: collectionBalance, isLoading: balanceLoading } =
+		useCollectionBalanceDetails({
+			chainId,
+			filter: {
+				accountAddresses: accountAddress ? [accountAddress] : [],
+				omitNativeBalances: true,
+				contractWhitelist: [collectionAddress],
+			},
+			query: {
+				enabled: !!accountAddress,
+			},
+		});
+
+	// Flatten all collectibles from all pages
+	const allCollectibles = useMemo(() => {
+		if (!collectiblesList?.pages) return [];
+		return collectiblesList.pages.flatMap((page) => page.collectibles);
+	}, [collectiblesList?.pages]);
+
+	// 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;
+
+			const cardProps: MarketCollectibleCardProps = {
+				collectibleId: collectible.metadata.tokenId,
+				chainId,
+				collectionAddress,
+				collectionType,
+				cardLoading: collectiblesListIsLoading || balanceLoading,
+				marketplaceType: 'market',
+				orderbookKind,
+				collectible,
+				onCollectibleClick,
+				balance,
+				balanceIsLoading: balanceLoading,
+				onCannotPerformAction,
+				prioritizeOwnerActions,
+				assetSrcPrefixUrl,
+				onOfferClick: ({ order }) => {
+					if (!accountAddress) return;
+
+					if (balance) {
+						showSellModal({
+							chainId,
+							collectionAddress,
+							tokenId: collectible.metadata.tokenId,
+							order: order as Order,
+						});
+						return;
+					}
+				},
+			};
+
+			return cardProps;
+		});
+	}, [
+		allCollectibles,
+		chainId,
+		collectionAddress,
+		collectionType,
+		collectiblesListIsLoading,
+		balanceLoading,
+		orderbookKind,
+		onCollectibleClick,
+		collectionBalance?.balances,
+		onCannotPerformAction,
+		prioritizeOwnerActions,
+		assetSrcPrefixUrl,
+		accountAddress,
+		showSellModal,
+	]);
+
+	return {
+		collectibleCards,
+		isLoading: collectiblesListIsLoading || balanceLoading,
+		error: collectiblesListError,
+
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage,
+		allCollectibles,
+	};
+}

package/src/react/hooks/useListOffersForCollectible.tsx

@@ -30,13 +30,14 @@ const fetchListOffersForCollectible = async (
 	args: UseListOffersForCollectibleArgs,
 ) => {
 	const arg = {
+		chainId: String(args.chainId),
 		contractAddress: args.collectionAddress,
 		tokenId: args.collectibleId,
 		filter: args.filter,
 		page: args.page,
 	} satisfies ListOffersForCollectibleArgs;
 
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 	return marketplaceClient.listCollectibleOffers(arg);
 };
 

package/src/react/hooks/useListPrimarySaleItems.ts

@@ -0,0 +1,42 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { SdkConfig } from '../../types';
+import {
+	type ListPrimarySaleItemsArgs,
+	getMarketplaceClient,
+} from '../_internal';
+import { useConfig } from './useConfig';
+
+type UseListPrimarySaleItemsArgs = Omit<ListPrimarySaleItemsArgs, 'chainId'> & {
+	chainId: number;
+};
+
+const fetchListPrimarySaleItems = async (
+	config: SdkConfig,
+	args: UseListPrimarySaleItemsArgs,
+) => {
+	const arg = {
+		chainId: String(args.chainId),
+		primarySaleContractAddress: args.primarySaleContractAddress,
+		filter: args.filter,
+		page: args.page,
+	} satisfies ListPrimarySaleItemsArgs;
+
+	const marketplaceClient = getMarketplaceClient(config);
+	return marketplaceClient.listPrimarySaleItems(arg);
+};
+
+export const listPrimarySaleItemsOptions = (
+	args: UseListPrimarySaleItemsArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		queryKey: ['primarySaleItems', args, config],
+		queryFn: () => fetchListPrimarySaleItems(config, args),
+	});
+};
+
+export const useListPrimarySaleItems = (args: UseListPrimarySaleItemsArgs) => {
+	const config = useConfig();
+
+	return useQuery(listPrimarySaleItemsOptions(args, config));
+};

package/src/react/hooks/useMarketCurrencies.tsx

@@ -0,0 +1,8 @@
+import { useQuery } from '@tanstack/react-query';
+import { type UseMarketCurrenciesArgs, currenciesOptions } from '../queries';
+import { useConfig } from './useConfig';
+
+export const useMarketCurrencies = (args: UseMarketCurrenciesArgs) => {
+	const config = useConfig();
+	return useQuery(currenciesOptions(args, config));
+};

package/src/react/hooks/useMarketplaceConfig.tsx

@@ -2,8 +2,6 @@ import { useQuery } from '@tanstack/react-query';
 import { marketplaceConfigOptions } from '../queries/marketplaceConfig';
 import { useConfig } from './useConfig';
 
-export * from '../queries/marketplaceConfig';
-
 export const useMarketplaceConfig = () => {
 	const config = useConfig();
 	return useQuery(marketplaceConfigOptions(config));

package/src/react/hooks/useTokenSaleDetailsBatch.tsx

@@ -0,0 +1,134 @@
+import { useQuery } from '@tanstack/react-query';
+import { getUnixTime } from 'date-fns';
+import type { Address } from 'viem';
+import { useReadContracts } from 'wagmi';
+import { ERC1155_SALES_CONTRACT_ABI } from '../..';
+import { getIndexerClient } from '../_internal';
+import { useConfig } from './useConfig';
+
+interface useTokenSaleDetailsBatch {
+	tokenIds: string[];
+	salesContractAddress: Address;
+	collectionAddress: Address;
+	chainId: number;
+	query?: {
+		enabled?: boolean;
+	};
+}
+
+export function useTokenSaleDetailsBatch({
+	tokenIds,
+	salesContractAddress,
+	chainId,
+	collectionAddress,
+	query,
+}: useTokenSaleDetailsBatch) {
+	const config = useConfig();
+	const indexerClient = getIndexerClient(chainId, config);
+
+	const getReadContractsArgs = (tokenIds: string[]) =>
+		tokenIds.map((tokenId) => ({
+			address: salesContractAddress,
+			abi: ERC1155_SALES_CONTRACT_ABI,
+			functionName: 'tokenSaleDetails',
+			args: [tokenId],
+			chainId,
+		}));
+
+	const {
+		data: tokenSaleDetails,
+		isLoading: tokenSaleDetailsLoading,
+		error: tokenSaleDetailsError,
+	} = useReadContracts({
+		batchSize: 500_000, // Node gateway limit has a limit of 512kB, setting it to 500kB to be safe
+		contracts: getReadContractsArgs(tokenIds),
+		query: {
+			enabled: query?.enabled,
+		},
+	});
+
+	// Query token supplies individually using the indexer client:
+	/*
+	This way, if token 4 isn't minted, we can still get the supply information for tokens 0-3, and just treat token 4's supply as 0 (unminted). 
+	The problem is essentially that one unminted token was poisoning the entire response when querying all tokens at once.
+	*/
+	const {
+		data: tokenSupplies,
+		isLoading: tokenSuppliesLoading,
+		error: tokenSuppliesError,
+	} = useQuery({
+		queryKey: ['token-supplies-batch', chainId, collectionAddress, tokenIds],
+		queryFn: async () => {
+			const supplies = await Promise.all(
+				tokenIds.map(async (tokenId) => {
+					try {
+						const result = await indexerClient.getTokenSuppliesMap({
+							tokenMap: {
+								[collectionAddress]: [tokenId],
+							},
+							includeMetadata: false,
+						});
+						const supply = result.supplies?.[collectionAddress]?.find(
+							(s) => s.tokenID === tokenId,
+						);
+						return {
+							tokenId,
+							supply: supply ? Number(supply.supply) : 0,
+							error: null,
+						};
+					} catch (error) {
+						return {
+							tokenId,
+							supply: 0,
+							error,
+						};
+					}
+				}),
+			);
+			return supplies;
+		},
+		enabled: query?.enabled,
+	});
+
+	const extendedSupplyData = (tokenSaleDetails || [])
+		.map((data, index) => ({
+			...data,
+			tokenId: tokenIds[index],
+		}))
+		.filter((data) => data.status === 'success')
+		.filter((data) => {
+			if (typeof data.result !== 'object') return false;
+			const now = BigInt(getUnixTime(new Date()));
+			return data.result.endTime > now && data.result.startTime < now;
+		});
+
+	const getInitialSupply = (tokenId: string): number | undefined => {
+		const found = extendedSupplyData.find((data) => data.tokenId === tokenId);
+		if (!found || typeof found.result !== 'object' || found.result === null)
+			return undefined;
+		const supply = found.result.supplyCap;
+		if (supply === undefined) return undefined;
+		// https://github.com/0xsequence/contracts-library/blob/ead1baf34270c76260d01cfc130bb7cc9d57518e/src/tokens/ERC1155/utility/sale/IERC1155Sale.sol#L8
+		// 0 means infinite
+		if (supply === 0n) return Number.POSITIVE_INFINITY;
+		return Number(supply);
+	};
+
+	const getRemainingSupply = (tokenId: string): number | undefined => {
+		const initialSupply = getInitialSupply(tokenId);
+		if (!initialSupply) return undefined;
+
+		const supplyData = tokenSupplies?.find((s) => s.tokenId === tokenId);
+		if (!supplyData || supplyData.error) return initialSupply; // If no supply data or error, assume nothing is minted
+
+		return initialSupply - supplyData.supply;
+	};
+
+	return {
+		extendedSupplyData,
+		getInitialSupply,
+		getRemainingSupply,
+		loading: tokenSuppliesLoading || tokenSaleDetailsLoading,
+		error: tokenSuppliesError || tokenSaleDetailsError,
+	};
+}

package/src/react/queries/highestOffer.ts

@@ -8,7 +8,7 @@ import {
 } from '../_internal';
 
 export interface UseHighestOfferArgs
-	extends Omit<GetCollectibleHighestOfferArgs, 'contractAddress'> {
+	extends Omit<GetCollectibleHighestOfferArgs, 'contractAddress' | 'chainId'> {
 	collectionAddress: Address;
 	chainId: number;
 	query?: {
@@ -20,11 +20,13 @@ export async function fetchHighestOffer(
 	args: UseHighestOfferArgs,
 	config: SdkConfig,
 ) {
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 
+	const { chainId, collectionAddress, tokenId } = args;
 	const data = await marketplaceClient.getCollectibleHighestOffer({
-		contractAddress: args.collectionAddress,
-		...args,
+		chainId: String(chainId),
+		contractAddress: collectionAddress,
+		tokenId,
 	});
 
 	// let order: Order | undefined;

package/src/react/queries/index.ts

@@ -6,3 +6,4 @@ export * from './highestOffer';
 export * from './listBalances';
 export * from './lowestListing';
 export * from './listTokenMetadata';
+export * from './marketCurrencies';

package/src/react/queries/inventory.ts

@@ -9,9 +9,11 @@ import { OrderSide, type Page, type SdkConfig } from '../../types';
 import {
 	type CollectibleOrder,
 	type ContractType,
+	LaosAPI,
 	getIndexerClient,
 } from '../_internal';
 import { fetchCollectibles } from './listCollectibles';
+import { fetchMarketplaceConfig } from './marketplaceConfig';
 
 export interface UseInventoryArgs {
 	accountAddress: Address;
@@ -82,7 +84,7 @@ function collectibleFromTokenBalance(
 			audio: token.tokenMetadata?.audio,
 		},
 		contractInfo: token.contractInfo,
-		contractType: token.contractType as
+		contractType: token.contractType as unknown as
 			| ContractType.ERC1155
 			| ContractType.ERC721,
 		balance: token.balance,
@@ -95,7 +97,37 @@ async function fetchAllIndexerTokens(
 	collectionAddress: Address,
 	config: SdkConfig,
 	state: InventoryState,
+	isLaos721: boolean,
 ): Promise<void> {
+	if (isLaos721) {
+		const laosClient = new LaosAPI();
+		const { balances } = await laosClient.getTokenBalances({
+			chainId: chainId.toString(),
+			accountAddress,
+			includeMetadata: true,
+			page: {
+				sort: [
+					{
+						column: 'CREATED_AT',
+						order: 'DESC',
+					},
+				],
+			},
+		});
+
+		for (const balance of balances) {
+			if (balance.tokenID) {
+				state.indexerTokenBalances.set(
+					balance.tokenID,
+					collectibleFromTokenBalance(balance),
+				);
+			}
+		}
+
+		state.indexerTokensFetched = true;
+		return;
+	}
+
 	const indexerClient = getIndexerClient(chainId, config);
 
 	let page: IndexerPage = {
@@ -216,6 +248,7 @@ export async function fetchInventory(
 			collectionAddress,
 			config,
 			state,
+			isLaos721,
 		);
 	}
 
@@ -225,6 +258,7 @@ export async function fetchInventory(
 	}
 
 	// Fetch collectibles from marketplace API
+	const marketplaceConfig = await fetchMarketplaceConfig({ config });
 	const collectibles = await fetchCollectibles(
 		{
 			chainId,
@@ -234,9 +268,9 @@ export async function fetchInventory(
 				includeEmpty: true,
 			},
 			side: OrderSide.listing,
-			isLaos721,
 		},
 		config,
+		marketplaceConfig,
 		page,
 	);
 

package/src/react/queries/listBalances.ts

@@ -2,7 +2,7 @@ import type { GetTokenBalancesReturn, Page } from '@0xsequence/indexer';
 import { infiniteQueryOptions } from '@tanstack/react-query';
 import type { Hex } from 'viem';
 import type { SdkConfig } from '../../types';
-import { balanceQueries, getIndexerClient } from '../_internal';
+import { LaosAPI, balanceQueries, getIndexerClient } from '../_internal';
 
 export type UseListBalancesArgs = {
 	chainId: number;
@@ -29,37 +29,21 @@ export async function fetchBalances(
 	config: SdkConfig,
 	page: Page,
 ): Promise<GetTokenBalancesReturn> {
-	if (args.isLaos721) {
-		const response = await fetch(
-			'https://extensions.api.laosnetwork.io/token/GetTokenBalances',
-			{
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-				},
-				body: JSON.stringify({
-					chainId: args.chainId.toString(),
-					accountAddress: args.accountAddress,
-					contractAddress: args.contractAddress,
-					includeMetadata: args.includeMetadata ?? true,
-					page: {
-						sort: [
-							{
-								column: 'CREATED_AT',
-								order: 'DESC',
-							},
-						],
+	if (args.isLaos721 && args.accountAddress) {
+		const laosClient = new LaosAPI();
+		return laosClient.getTokenBalances({
+			chainId: args.chainId.toString(),
+			accountAddress: args.accountAddress,
+			includeMetadata: args.includeMetadata,
+			page: {
+				sort: [
+					{
+						column: 'CREATED_AT',
+						order: 'DESC',
 					},
-				}),
+				],
 			},
-		);
-
-		if (!response.ok) {
-			throw new Error(`Laos API request failed with status ${response.status}`);
-		}
-
-		// TODO: This is pretty unsafe, we should validate the response
-		return response.json() as Promise<GetTokenBalancesReturn>;
+		});
 	}
 
 	const indexerClient = getIndexerClient(args.chainId, config);

package/src/react/queries/listCollectibles.ts

@@ -1,20 +1,29 @@
 import { infiniteQueryOptions } from '@tanstack/react-query';
 import type { Address, Hex } from 'viem';
-import type { Page, SdkConfig } from '../../types';
+import type { MarketplaceConfig, Page, SdkConfig } from '../../types';
+import type { MarketplaceType } from '../../types/types';
+import { compareAddress } from '../../utils';
 import type {
-	CollectibleOrder,
 	CollectiblesFilter,
 	ListCollectiblesArgs,
 	ListCollectiblesReturn,
 } from '../_internal';
-import { OrderSide, collectableKeys, getMarketplaceClient } from '../_internal';
+import {
+	type CollectibleOrder,
+	OrderSide,
+	collectableKeys,
+	getMarketplaceClient,
+} from '../_internal';
+import { fetchMarketplaceConfig } from '../queries/marketplaceConfig';
 import { type UseListBalancesArgs, fetchBalances } from './listBalances';
+
 export type UseListCollectiblesArgs = {
 	collectionAddress: Hex;
 	chainId: number;
 	side: OrderSide;
 	filter?: CollectiblesFilter;
 	isLaos721?: boolean;
+	marketplaceType?: MarketplaceType;
 	query?: {
 		enabled?: boolean;
 	};
@@ -31,16 +40,56 @@ export type UseListCollectiblesArgs = {
 export async function fetchCollectibles(
 	args: UseListCollectiblesArgs,
 	config: SdkConfig,
+	marketplaceConfig: MarketplaceConfig,
 	page: Page,
 ): Promise<ListCollectiblesReturn> {
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
+	const { chainId, collectionAddress, ...restArgs } = args;
 	const parsedArgs = {
-		...args,
-		contractAddress: args.collectionAddress,
+		...restArgs,
+		chainId: String(chainId),
+		contractAddress: collectionAddress,
 		page: page,
 		side: args.side,
 	} satisfies ListCollectiblesArgs;
 
+	if (args.marketplaceType === 'shop') {
+		const shopCollection = marketplaceConfig.shop.collections.find(
+			(collection) =>
+				compareAddress(collection.itemsAddress, args.collectionAddress),
+		);
+
+		if (!shopCollection) {
+			return { collectibles: [] };
+		}
+
+		const primarySaleItemsList = await marketplaceClient.listPrimarySaleItems(
+			{
+				chainId: args.chainId.toString(),
+				primarySaleContractAddress: shopCollection.saleAddress as Address,
+			},
+			marketplaceConfig,
+		);
+
+		return {
+			collectibles: primarySaleItemsList.primarySaleItems.map((item) => ({
+				metadata: item.metadata,
+				primarySale: {
+					price: {
+						amount: item.primarySaleItem.priceAmount,
+						formatted: item.primarySaleItem.priceAmountFormatted,
+						decimals: item.primarySaleItem.priceDecimals,
+						currencyAddress: item.primarySaleItem.currencyAddress,
+					},
+					startDate: item.primarySaleItem.startDate,
+					endDate: item.primarySaleItem.endDate,
+					supplyCap: item.primarySaleItem.supplyCap,
+					itemType: item.primarySaleItem.itemType,
+				},
+			})),
+		};
+	}
+
 	if (args.isLaos721 && args.side === OrderSide.listing) {
 		try {
 			const fetchBalancesArgs = {
@@ -80,6 +129,7 @@ export async function fetchCollectibles(
 			console.error(error);
 		}
 	}
+
 	return await marketplaceClient.listCollectibles(parsedArgs);
 }
 
@@ -97,7 +147,10 @@ export function listCollectiblesOptions(
 	return infiniteQueryOptions({
 		...args.query,
 		queryKey: [...collectableKeys.lists, args, config],
-		queryFn: ({ pageParam }) => fetchCollectibles(args, config, pageParam),
+		queryFn: async ({ pageParam }) => {
+			const marketplaceConfig = await fetchMarketplaceConfig({ config });
+			return fetchCollectibles(args, config, marketplaceConfig, pageParam);
+		},
 		initialPageParam: { page: 1, pageSize: 30 } as Page,
 		getNextPageParam: (lastPage) =>
 			lastPage.page?.more ? lastPage.page : undefined,