@0xsequence/marketplace-sdk 0.0.0-20250513233135

package/src/react/hooks/useList1155shopCardData.ts

@@ -0,0 +1,115 @@
+import type { Address } from 'viem';
+import { useReadContract } from 'wagmi';
+import {
+	ContractType,
+	ERC1155_SALES_CONTRACT_ABI,
+	type TokenMetadata,
+} from '../../../../sdk/src';
+import type { ShopCollectibleCardProps } from '../ui/components/marketplace-collectible-card';
+import { useTokenSaleDetailsBatch } from './use1155SaleDetailsBatch';
+import { useCollectionDetails } from './useCollectionDetails';
+import { useListTokenMetadata } from './useListTokenMetadata';
+
+interface UseList1155ShopCardDataProps {
+	tokenIds: string[];
+	chainId: number;
+	contractAddress: Address;
+	salesContractAddress: Address;
+}
+
+export function useList1155ShopCardData({
+	tokenIds,
+	chainId,
+	contractAddress,
+	salesContractAddress,
+}: UseList1155ShopCardDataProps) {
+	const {
+		data: tokenMetadata,
+		isLoading: tokenMetadataLoading,
+		error: tokenMetadataError,
+	} = useListTokenMetadata({
+		chainId,
+		contractAddress,
+		tokenIds,
+	});
+
+	const {
+		data: collectionDetails,
+		error: collectionDetailsError,
+		isLoading: collectionDetailsLoading,
+	} = useCollectionDetails({
+		chainId,
+		collectionAddress: contractAddress,
+	});
+
+	const {
+		extendedSupplyData,
+		getInitialSupply,
+		getRemainingSupply,
+		loading: tokenSaleDetailsLoading,
+		error: tokenSaleDetailsError,
+	} = useTokenSaleDetailsBatch({
+		collectionAddress: contractAddress,
+		tokenIds,
+		salesContractAddress,
+		chainId,
+	});
+
+	const { data: paymentToken } = useReadContract({
+		chainId,
+		address: salesContractAddress,
+		abi: ERC1155_SALES_CONTRACT_ABI,
+		functionName: 'paymentToken',
+	});
+
+	const collectibleCards = tokenIds.map((tokenId) => {
+		const token = tokenMetadata?.find((token) => token.tokenId === tokenId);
+
+		const saleData = extendedSupplyData?.find(
+			(data) => data.tokenId === tokenId,
+		);
+
+		const cost =
+			saleData && typeof saleData.result === 'object'
+				? saleData.result.cost?.toString() || ''
+				: '';
+		const saleStartsAt =
+			saleData && typeof saleData.result === 'object'
+				? saleData.result.startTime?.toString()
+				: undefined;
+		const saleEndsAt =
+			saleData && typeof saleData.result === 'object'
+				? saleData.result.endTime?.toString()
+				: undefined;
+
+		return {
+			collectibleId: tokenId,
+			chainId,
+			collectionAddress: contractAddress,
+			collectionType: ContractType.ERC1155,
+			tokenMetadata: token as TokenMetadata,
+			cardLoading:
+				tokenSaleDetailsLoading ||
+				tokenMetadataLoading ||
+				collectionDetailsLoading,
+			salesContractAddress,
+			salePrice: {
+				amount: cost,
+				currencyAddress: paymentToken ?? '0x',
+			},
+			quantityInitial: getInitialSupply(tokenId) ?? undefined,
+			quantityDecimals: collectionDetails?.tokenQuantityDecimals,
+			quantityRemaining: getRemainingSupply(tokenId)?.toString(),
+			saleStartsAt,
+			saleEndsAt,
+			marketplaceType: 'shop',
+		} satisfies ShopCollectibleCardProps;
+	});
+
+	return {
+		collectibleCards,
+		tokenMetadataError,
+		tokenSaleDetailsError,
+		collectionDetailsError,
+	};
+}

package/src/react/hooks/useListBalances.tsx

@@ -0,0 +1,39 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { listBalancesOptions } from '../queries/listBalances';
+import type { UseListBalancesArgs } from '../queries/listBalances';
+import { useConfig } from './useConfig';
+import { useMarketplaceConfig } from './useMarketplaceConfig';
+
+/**
+ * Hook to fetch a list of token balances with pagination support
+ *
+ * @param args - The arguments for fetching the balances
+ * @returns Infinite query result containing the balances data
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading, error, fetchNextPage } = useListBalances({
+ *   chainId: 1,
+ *   accountAddress: '0x123...',
+ *   includeMetadata: true,
+ *   query: {
+ *     enabled: true,
+ *     refetchInterval: 10000,
+ *   }
+ * });
+ * ```
+ */
+export function useListBalances(args: UseListBalancesArgs) {
+	const config = useConfig();
+	const { data: marketplaceConfig } = useMarketplaceConfig();
+
+	const isLaos721 = marketplaceConfig?.collections.find(
+		(collection) => collection.address === args.contractAddress,
+	)?.isLAOSERC721;
+
+	if (isLaos721) {
+		args.isLaos721 = true;
+	}
+
+	return useInfiniteQuery(listBalancesOptions(args, config));
+}

package/src/react/hooks/useListCollectibleActivities.tsx

@@ -0,0 +1,58 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { z } from 'zod';
+import type { SdkConfig } from '../../types';
+import { collectableKeys, getMarketplaceClient } from '../_internal';
+import type {
+	getListCollectibleActivitiesArgsSchema,
+	getListCollectibleActivitiesReturnSchema,
+} from '../_internal/api/zod-schema';
+import { useConfig } from './useConfig';
+
+export type UseListCollectibleActivitiesArgs = z.infer<
+	typeof getListCollectibleActivitiesArgsSchema
+>;
+
+export type UseListCollectibleActivitiesReturn = z.infer<
+	typeof getListCollectibleActivitiesReturnSchema
+>;
+
+const fetchCollectibleActivities = async (
+	args: UseListCollectibleActivitiesArgs,
+	config: SdkConfig,
+) => {
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	return marketplaceClient
+		.listCollectibleActivities({
+			contractAddress: args.collectionAddress,
+			tokenId: args.tokenId,
+			page: args.query?.enabled
+				? {
+						page: args.query.page ?? 1,
+						pageSize: args.query.pageSize ?? 10,
+						sort: args.query.sort,
+					}
+				: undefined,
+		})
+		.then((data) => ({
+			activities: data.activities,
+			page: data.page,
+		}));
+};
+
+export const listCollectibleActivitiesOptions = (
+	args: UseListCollectibleActivitiesArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		queryKey: [...collectableKeys.collectibleActivities, args, config],
+		queryFn: () => fetchCollectibleActivities(args, config),
+		enabled: args.query?.enabled ?? true,
+	});
+};
+
+export const useListCollectibleActivities = (
+	args: UseListCollectibleActivitiesArgs,
+) => {
+	const config = useConfig();
+	return useQuery(listCollectibleActivitiesOptions(args, config));
+};

package/src/react/hooks/useListCollectibles.tsx

@@ -0,0 +1,39 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { listCollectiblesOptions } from '../queries/listCollectibles';
+import type { UseListCollectiblesArgs } from '../queries/listCollectibles';
+import { useConfig } from './useConfig';
+import { useMarketplaceConfig } from './useMarketplaceConfig';
+
+/**
+ * Hook to fetch a list of collectibles with pagination support
+ *
+ * @param args - The arguments for fetching the collectibles
+ * @returns Infinite query result containing the collectibles data including orders
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading, error, fetchNextPage } = useListCollectibles({
+ *   chainId: 1,
+ *   collectionAddress: '0x123...',
+ *   includeMetadata: true,
+ *   query: {
+ *     enabled: true,
+ *     refetchInterval: 10000,
+ *   }
+ * });
+ * ```
+ */
+export function useListCollectibles(args: UseListCollectiblesArgs) {
+	const config = useConfig();
+	const { data: marketplaceConfig } = useMarketplaceConfig();
+
+	const isLaos721 = marketplaceConfig?.collections.find(
+		(collection) => collection.address === args.collectionAddress,
+	)?.isLAOSERC721;
+
+	if (isLaos721) {
+		args.isLaos721 = true;
+	}
+
+	return useInfiniteQuery(listCollectiblesOptions(args, config));
+}

package/src/react/hooks/useListCollectiblesPaginated.tsx

@@ -0,0 +1,74 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { Page, SdkConfig } from '../../types';
+import {
+	AddressSchema,
+	type ListCollectiblesArgs,
+	collectableKeys,
+	getMarketplaceClient,
+} from '../_internal';
+import { listCollectiblesArgsSchema } from '../_internal/api/zod-schema';
+import { useConfig } from './useConfig';
+
+const UseListCollectiblesPaginatedArgsSchema = listCollectiblesArgsSchema
+	.omit({
+		contractAddress: true,
+	})
+	.extend({
+		collectionAddress: AddressSchema,
+		chainId: z.number(),
+		query: z
+			.object({
+				enabled: z.boolean().optional(),
+				page: z.number().optional().default(1),
+				pageSize: z.number().optional().default(30),
+			})
+			.optional()
+			.default({}),
+	});
+
+export type UseListCollectiblesPaginatedArgs = z.infer<
+	typeof UseListCollectiblesPaginatedArgsSchema
+>;
+
+export type UseListCollectiblesPaginatedReturn = Awaited<
+	ReturnType<typeof fetchCollectiblesPaginated>
+>;
+
+const fetchCollectiblesPaginated = async (
+	args: UseListCollectiblesPaginatedArgs,
+	marketplaceClient: Awaited<ReturnType<typeof getMarketplaceClient>>,
+) => {
+	const parsedArgs = UseListCollectiblesPaginatedArgsSchema.parse(args);
+	const page: Page = {
+		page: parsedArgs.query?.page ?? 1,
+		pageSize: parsedArgs.query?.pageSize ?? 30,
+	};
+
+	const arg = {
+		...parsedArgs,
+		contractAddress: parsedArgs.collectionAddress,
+		page,
+	} as ListCollectiblesArgs;
+
+	return marketplaceClient.listCollectibles(arg);
+};
+
+export const listCollectiblesPaginatedOptions = (
+	args: UseListCollectiblesPaginatedArgs,
+	config: SdkConfig,
+) => {
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	return queryOptions({
+		queryKey: [...collectableKeys.lists, 'paginated', args],
+		queryFn: () => fetchCollectiblesPaginated(args, marketplaceClient),
+		enabled: args.query?.enabled ?? true,
+	});
+};
+
+export const useListCollectiblesPaginated = (
+	args: UseListCollectiblesPaginatedArgs,
+) => {
+	const config = useConfig();
+	return useQuery(listCollectiblesPaginatedOptions(args, config));
+};

package/src/react/hooks/useListCollectionActivities.tsx

@@ -0,0 +1,58 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { z } from 'zod';
+import type { SdkConfig } from '../../types';
+import { getMarketplaceClient } from '../_internal';
+import { collectionKeys } from '../_internal/api';
+import type {
+	getListCollectionActivitiesArgsSchema,
+	getListCollectionActivitiesReturnSchema,
+} from '../_internal/api/zod-schema';
+import { useConfig } from './useConfig';
+
+export type UseListCollectionActivitiesArgs = z.infer<
+	typeof getListCollectionActivitiesArgsSchema
+>;
+
+export type UseListCollectionActivitiesReturn = z.infer<
+	typeof getListCollectionActivitiesReturnSchema
+>;
+
+const fetchListCollectionActivities = async (
+	args: UseListCollectionActivitiesArgs,
+	config: SdkConfig,
+) => {
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	return marketplaceClient
+		.listCollectionActivities({
+			contractAddress: args.collectionAddress,
+			page: args.query?.enabled
+				? {
+						page: args.query.page ?? 1,
+						pageSize: args.query.pageSize ?? 10,
+						sort: args.query.sort,
+					}
+				: undefined,
+		})
+		.then((data) => ({
+			activities: data.activities,
+			page: data.page,
+		}));
+};
+
+export const listCollectionActivitiesOptions = (
+	args: UseListCollectionActivitiesArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		queryKey: [...collectionKeys.collectionActivities, args, config],
+		queryFn: () => fetchListCollectionActivities(args, config),
+		enabled: args.query?.enabled ?? true,
+	});
+};
+
+export const useListCollectionActivities = (
+	args: UseListCollectionActivitiesArgs,
+) => {
+	const config = useConfig();
+	return useQuery(listCollectionActivitiesOptions(args, config));
+};

package/src/react/hooks/useListCollections.tsx

@@ -0,0 +1,88 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { MarketplaceConfig, SdkConfig } from '../../types';
+import {
+	QueryArgSchema,
+	collectionKeys,
+	getMetadataClient,
+} from '../_internal';
+import { useConfig } from './useConfig';
+import { useMarketplaceConfig } from './useMarketplaceConfig';
+
+const UseListCollectionsSchema = z.object({
+	query: QueryArgSchema.optional().default({}),
+});
+
+export type UseListCollectionsArgs = z.input<typeof UseListCollectionsSchema>;
+
+export type UseListCollectionsReturn = Awaited<
+	ReturnType<typeof fetchListCollections>
+>;
+
+type FetchListCollectionsArgs = {
+	marketplaceConfig: MarketplaceConfig;
+	query?: z.infer<typeof QueryArgSchema>;
+};
+
+const fetchListCollections = async (
+	{ marketplaceConfig }: FetchListCollectionsArgs,
+	config: SdkConfig,
+) => {
+	const metadataClient = getMetadataClient(config);
+
+	if (!marketplaceConfig?.collections?.length) {
+		return [];
+	}
+
+	// Group collections by chainId
+	const collectionsByChain = marketplaceConfig.collections.reduce<
+		Record<string, string[]>
+	>((acc, curr) => {
+		const { chainId, address } = curr;
+		if (!acc[chainId]) {
+			acc[chainId] = [];
+		}
+		acc[chainId].push(address);
+		return acc;
+	}, {});
+
+	// Fetch collections for each chain
+	const promises = Object.entries(collectionsByChain).map(
+		([chainId, addresses]) =>
+			metadataClient
+				.getContractInfoBatch({
+					chainID: chainId,
+					contractAddresses: addresses,
+				})
+				.then((resp) => Object.values(resp.contractInfoMap)),
+	);
+
+	const results = await Promise.all(promises);
+	return results.flat();
+};
+
+export const listCollectionsOptions = (
+	args: FetchListCollectionsArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		...args.query,
+		queryKey: [...collectionKeys.list],
+		queryFn: () => fetchListCollections(args, config),
+	});
+};
+
+export const useListCollections = (args: UseListCollectionsArgs = {}) => {
+	const config = useConfig();
+	const { data: marketplaceConfig, isLoading: isLoadingConfig } =
+		useMarketplaceConfig();
+
+	return useQuery({
+		...listCollectionsOptions(
+			// biome-ignore lint/style/noNonNullAssertion: <explanation>
+			{ marketplaceConfig: marketplaceConfig!, query: args.query },
+			config,
+		),
+		enabled: !isLoadingConfig && !!marketplaceConfig,
+	});
+};

package/src/react/hooks/useListListingsForCollectible.tsx

@@ -0,0 +1,60 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
+import {
+	type ListListingsForCollectibleArgs,
+	collectableKeys,
+	getMarketplaceClient,
+} from '../_internal';
+import { listListingsForCollectibleArgsSchema } from '../_internal/api/zod-schema';
+import { useConfig } from './useConfig';
+
+const UseListListingsForCollectibleArgsSchema =
+	listListingsForCollectibleArgsSchema
+		.extend({
+			chainId: z.number(),
+			collectionAddress: z.string(),
+			collectibleId: z.string(),
+		})
+		.omit({ contractAddress: true, tokenId: true });
+
+type UseListListingsForCollectibleArgs = z.infer<
+	typeof UseListListingsForCollectibleArgsSchema
+>;
+
+export type UseListListingsForCollectibleReturn = Awaited<
+	ReturnType<typeof fetchListListingsForCollectible>
+>;
+
+const fetchListListingsForCollectible = async (
+	config: SdkConfig,
+	args: UseListListingsForCollectibleArgs,
+) => {
+	const arg = {
+		contractAddress: args.collectionAddress,
+		tokenId: args.collectibleId,
+		filter: args.filter,
+		page: args.page,
+	} satisfies ListListingsForCollectibleArgs;
+
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	return marketplaceClient.listCollectibleListings(arg);
+};
+
+export const listListingsForCollectibleOptions = (
+	args: UseListListingsForCollectibleArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		queryKey: [...collectableKeys.listings, args, config],
+		queryFn: () => fetchListListingsForCollectible(config, args),
+	});
+};
+
+export const useListListingsForCollectible = (
+	args: UseListListingsForCollectibleArgs,
+) => {
+	const config = useConfig();
+
+	return useQuery(listListingsForCollectibleOptions(args, config));
+};

package/src/react/hooks/useListMarketCardData.ts

@@ -0,0 +1,152 @@
+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[];
+	onCollectibleClick?: (tokenId: string) => void;
+	onCannotPerformAction?: (action: CollectibleCardAction) => void;
+	prioritizeOwnerActions?: boolean;
+	assetSrcPrefixUrl?: string;
+}
+
+export function useListMarketCardData({
+	collectionAddress,
+	chainId,
+	orderbookKind,
+	collectionType,
+	filterOptions,
+	onCollectibleClick,
+	onCannotPerformAction,
+	prioritizeOwnerActions,
+	assetSrcPrefixUrl,
+}: UseListMarketCardDataProps) {
+	const { address: accountAddress } = useAccount();
+	const { show: showSellModal } = useSellModal();
+
+	// Get collectibles with listings
+	const {
+		data: collectiblesWithListings,
+		isLoading: collectiblesLoading,
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+	} = useListCollectibles({
+		collectionAddress,
+		chainId,
+		side: OrderSide.listing,
+		filter: {
+			includeEmpty: true,
+			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 (!collectiblesWithListings?.pages) return [];
+		return collectiblesWithListings.pages.flatMap((page) => page.collectibles);
+	}, [collectiblesWithListings?.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: collectiblesLoading || balanceLoading,
+				marketplaceType: 'market',
+				orderbookKind,
+				collectible,
+				onCollectibleClick,
+				balance,
+				balanceIsLoading: balanceLoading,
+				onCannotPerformAction,
+				prioritizeOwnerActions,
+				assetSrcPrefixUrl,
+				onOfferClick: ({ order }) => {
+					if (!accountAddress) return;
+
+					// Handle owner actions like selling
+					if (balance) {
+						showSellModal({
+							chainId,
+							collectionAddress,
+							tokenId: collectible.metadata.tokenId,
+							order: order as Order,
+						});
+						return;
+					}
+
+					// Handle offer action for non-owners
+					// This could be extended with more specific logic if needed
+				},
+			};
+
+			return cardProps;
+		});
+	}, [
+		allCollectibles,
+		chainId,
+		collectionAddress,
+		collectionType,
+		collectiblesLoading,
+		balanceLoading,
+		orderbookKind,
+		onCollectibleClick,
+		collectionBalance?.balances,
+		onCannotPerformAction,
+		prioritizeOwnerActions,
+		assetSrcPrefixUrl,
+		accountAddress,
+		showSellModal,
+	]);
+
+	return {
+		collectibleCards,
+		isLoading: collectiblesLoading || balanceLoading,
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage,
+		allCollectibles,
+	};
+}