@0xsequence/marketplace-sdk 0.0.0-20250513233135

package/src/react/hooks/useListOffersForCollectible.tsx

@@ -0,0 +1,59 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
+import {
+	type ListOffersForCollectibleArgs,
+	collectableKeys,
+	getMarketplaceClient,
+} from '../_internal';
+import { listOffersForCollectibleArgsSchema } from '../_internal/api/zod-schema';
+import { useConfig } from './useConfig';
+
+const UseListOffersForCollectibleArgsSchema = listOffersForCollectibleArgsSchema
+	.extend({
+		chainId: z.number(),
+		collectionAddress: z.string(),
+		collectibleId: z.string(),
+	})
+	.omit({ contractAddress: true, tokenId: true });
+
+type UseListOffersForCollectibleArgs = z.infer<
+	typeof UseListOffersForCollectibleArgsSchema
+>;
+
+export type UseListOffersForCollectibleReturn = Awaited<
+	ReturnType<typeof fetchListOffersForCollectible>
+>;
+
+const fetchListOffersForCollectible = async (
+	config: SdkConfig,
+	args: UseListOffersForCollectibleArgs,
+) => {
+	const arg = {
+		contractAddress: args.collectionAddress,
+		tokenId: args.collectibleId,
+		filter: args.filter,
+		page: args.page,
+	} satisfies ListOffersForCollectibleArgs;
+
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	return marketplaceClient.listCollectibleOffers(arg);
+};
+
+export const listOffersForCollectibleOptions = (
+	args: UseListOffersForCollectibleArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		queryKey: [...collectableKeys.offers, args, config],
+		queryFn: () => fetchListOffersForCollectible(config, args),
+	});
+};
+
+export const useListOffersForCollectible = (
+	args: UseListOffersForCollectibleArgs,
+) => {
+	const config = useConfig();
+
+	return useQuery(listOffersForCollectibleOptions(args, config));
+};

package/src/react/hooks/useListTokenMetadata.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { useConfig } from './useConfig';
+
+import {
+	type FetchTokenMetadataArgs,
+	tokenMetadataOptions,
+} from '../queries/listTokenMetadata';
+
+export const useListTokenMetadata = (args: FetchTokenMetadataArgs) => {
+	const config = useConfig();
+	const { chainId, contractAddress, tokenIds, query } = args;
+
+	return useQuery({
+		...tokenMetadataOptions(
+			{ chainId, contractAddress, tokenIds, query },
+			config,
+		),
+	});
+};

package/src/react/hooks/useLowestListing.tsx

@@ -0,0 +1,8 @@
+import { useQuery } from '@tanstack/react-query';
+import { type UseLowestListingArgs, lowestListingOptions } from '../queries';
+import { useConfig } from './useConfig';
+
+export function useLowestListing(args: UseLowestListingArgs) {
+	const config = useConfig();
+	return useQuery(lowestListingOptions(args, config));
+}

package/src/react/hooks/useMarketplaceConfig.tsx

@@ -0,0 +1,10 @@
+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/useRoyalty.tsx

@@ -0,0 +1,42 @@
+import { useReadContract } from 'wagmi';
+import { z } from 'zod';
+import { EIP2981_ABI } from '../../utils';
+import { AddressSchema, QueryArgSchema, collectableKeys } from '../_internal';
+
+const UseRoyaltySchema = z.object({
+	chainId: z.number(),
+	collectionAddress: AddressSchema,
+	collectibleId: z.string(),
+	query: QueryArgSchema.optional(),
+});
+
+type UseRoyaltyArgs = z.infer<typeof UseRoyaltySchema>;
+
+export const useRoyalty = (args: UseRoyaltyArgs) => {
+	const { chainId, collectionAddress, collectibleId, query } = args;
+	const scopeKey = `${collectableKeys.royaltyPercentage.join('.')}-${chainId}-${collectionAddress}-${collectibleId}`;
+
+	const contractResult = useReadContract({
+		scopeKey: scopeKey,
+		abi: EIP2981_ABI,
+		address: collectionAddress,
+		functionName: 'royaltyInfo',
+		args: [BigInt(collectibleId), BigInt(100)],
+		chainId,
+		query: query,
+	});
+
+	const [recipient, percentage] = contractResult.data ?? [];
+	const formattedData =
+		recipient && percentage
+			? {
+					percentage,
+					recipient,
+				}
+			: null;
+
+	return {
+		...contractResult,
+		data: formattedData,
+	};
+};

package/src/react/hooks/useTransferTokens.tsx

@@ -0,0 +1,82 @@
+import { type Abi, type Address, type Hex, erc721Abi } from 'viem';
+import { useAccount, useWriteContract } from 'wagmi';
+import { ERC1155_ABI } from '../../utils';
+import { NoWalletConnectedError } from '../../utils/_internal/error/transaction';
+import type { ContractType } from '../_internal';
+
+interface BaseTransferParams {
+	chainId: number;
+	collectionAddress: Hex;
+	tokenId: string;
+	receiverAddress: Address;
+}
+
+interface ERC721TransferParams extends BaseTransferParams {
+	contractType: ContractType.ERC721;
+}
+
+interface ERC1155TransferParams extends BaseTransferParams {
+	contractType: ContractType.ERC1155;
+	quantity: string;
+}
+
+export type TransferTokensParams = ERC721TransferParams | ERC1155TransferParams;
+
+const prepareTransferConfig = (
+	params: TransferTokensParams,
+	accountAddress: Address,
+) => {
+	if (params.contractType === 'ERC721') {
+		return {
+			abi: erc721Abi as Abi,
+			address: params.collectionAddress,
+			functionName: 'safeTransferFrom',
+			args: [
+				accountAddress,
+				params.receiverAddress,
+				BigInt(params.tokenId),
+			] as const,
+		} as const;
+	}
+
+	return {
+		abi: ERC1155_ABI as Abi,
+		address: params.collectionAddress,
+		functionName: 'safeTransferFrom',
+		args: [
+			accountAddress,
+			params.receiverAddress,
+			BigInt(params.tokenId),
+			params.quantity,
+			'0x', // data
+		] as const,
+	};
+};
+
+export const useTransferTokens = () => {
+	const { address: accountAddress } = useAccount();
+	const {
+		writeContractAsync,
+		data: hash,
+		isPending,
+		isError,
+		isSuccess,
+	} = useWriteContract();
+
+	const transferTokensAsync = async (params: TransferTokensParams) => {
+		if (!accountAddress) {
+			throw new NoWalletConnectedError();
+		}
+
+		const config = prepareTransferConfig(params, accountAddress);
+		return await writeContractAsync(config);
+	};
+
+	return {
+		transferTokensAsync,
+		hash,
+		transferring: isPending,
+		transferFailed: isError,
+		transferSuccess: isSuccess,
+	};
+};

package/src/react/hooks/util/optimisticCancelUpdates.ts

@@ -0,0 +1,115 @@
+import type { QueryClient } from '@tanstack/react-query';
+import {
+	type GetCountOfListingsForCollectibleReturn,
+	type GetCountOfOffersForCollectibleReturn,
+	type ListListingsForCollectibleReturn,
+	type ListOffersForCollectibleReturn,
+	collectableKeys,
+} from '../../_internal';
+
+const SECOND = 1000;
+
+interface OptimisticCancelUpdatesParams {
+	orderId: string;
+	queryClient: QueryClient;
+}
+
+export const updateQueriesOnCancel = ({
+	orderId,
+	queryClient,
+}: OptimisticCancelUpdatesParams) => {
+	queryClient.setQueriesData(
+		{ queryKey: collectableKeys.offersCount, exact: false },
+		(oldData: GetCountOfOffersForCollectibleReturn | undefined) => {
+			if (!oldData) return { count: 0 };
+			return { count: Math.max(0, oldData.count - 1) };
+		},
+	);
+
+	console.log('query client ', queryClient, 'orderId', orderId);
+
+	// remove the offer with matching orderId
+	queryClient.setQueriesData(
+		{ queryKey: collectableKeys.offers, exact: false },
+		(oldData: ListOffersForCollectibleReturn | undefined) => {
+			if (!oldData || !oldData.offers) return oldData;
+			return {
+				...oldData,
+				offers: oldData.offers.filter((offer) => offer.orderId !== orderId),
+			};
+		},
+	);
+
+	// 2 seconds is enough time for new data to be fetched
+	setTimeout(() => {
+		queryClient.invalidateQueries({
+			queryKey: collectableKeys.highestOffers,
+			exact: false,
+		});
+	}, 2 * SECOND);
+
+	queryClient.setQueriesData(
+		{ queryKey: collectableKeys.listingsCount, exact: false },
+		(oldData: GetCountOfListingsForCollectibleReturn | undefined) => {
+			if (!oldData) return { count: 0 };
+			return { count: Math.max(0, oldData.count - 1) };
+		},
+	);
+
+	queryClient.setQueriesData(
+		{ queryKey: collectableKeys.listings, exact: false },
+		(oldData: ListListingsForCollectibleReturn | undefined) => {
+			if (!oldData || !oldData.listings) return oldData;
+			return {
+				...oldData,
+				listings: oldData.listings.filter(
+					(listing) => listing.orderId !== orderId,
+				),
+			};
+		},
+	);
+
+	// 2 seconds is enough time for new data to be fetched
+	setTimeout(() => {
+		queryClient.invalidateQueries({
+			queryKey: collectableKeys.lowestListings,
+			exact: false,
+		});
+	}, 2 * SECOND);
+};
+
+export const invalidateQueriesOnCancel = ({
+	queryClient,
+}: {
+	queryClient: QueryClient;
+}) => {
+	queryClient.invalidateQueries({
+		queryKey: collectableKeys.offers,
+		exact: false,
+	});
+
+	queryClient.invalidateQueries({
+		queryKey: collectableKeys.offersCount,
+		exact: false,
+	});
+
+	queryClient.invalidateQueries({
+		queryKey: collectableKeys.listings,
+		exact: false,
+	});
+
+	queryClient.invalidateQueries({
+		queryKey: collectableKeys.listingsCount,
+		exact: false,
+	});
+
+	queryClient.invalidateQueries({
+		queryKey: collectableKeys.highestOffers,
+		exact: false,
+	});
+
+	queryClient.invalidateQueries({
+		queryKey: collectableKeys.lowestListings,
+		exact: false,
+	});
+};

package/src/react/index.ts

@@ -0,0 +1,6 @@
+export * from './provider';
+export * from './hooks';
+export * from './hooks/options';
+export * from './_internal/api/get-query-client';
+export * from './_internal/wagmi/create-config';
+export * from './ui/index';

package/src/react/provider.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { QueryClientProvider } from '@tanstack/react-query';
+import { createContext } from 'react';
+import type { SdkConfig } from '../types';
+import { InvalidProjectAccessKeyError } from '../utils/_internal/error/config';
+import { getQueryClient } from './_internal/api/get-query-client';
+import { PROVIDER_ID } from './_internal/get-provider';
+
+export const MarketplaceSdkContext = createContext({} as SdkConfig);
+
+export type MarketplaceSdkProviderProps = {
+	config: SdkConfig;
+	children: React.ReactNode;
+};
+
+export function MarketplaceQueryClientProvider({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	const queryClient = getQueryClient();
+	return (
+		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+	);
+}
+
+export function MarketplaceProvider({
+	config,
+	children,
+}: MarketplaceSdkProviderProps) {
+	if (config.projectAccessKey === '' || !config.projectAccessKey) {
+		throw new InvalidProjectAccessKeyError(config.projectAccessKey);
+	}
+
+	return (
+		<MarketplaceQueryClientProvider>
+			<MarketplaceSdkContext.Provider value={config}>
+				<div id={PROVIDER_ID}>{children}</div>
+			</MarketplaceSdkContext.Provider>
+		</MarketplaceQueryClientProvider>
+	);
+}

package/src/react/queries/balanceOfCollectible.ts

@@ -0,0 +1,79 @@
+import { queryOptions, skipToken } from '@tanstack/react-query';
+import type { Hex } from 'viem';
+import type { UseQueryParameters } from 'wagmi/query';
+import type { SdkConfig } from '../../types';
+import { LaosAPI, collectableKeys, getIndexerClient } from '../_internal';
+
+export type UseBalanceOfCollectibleArgs = {
+	collectionAddress: Hex;
+	collectableId: string;
+	userAddress: Hex | undefined;
+	chainId: number;
+	isLaos721?: boolean;
+	query?: UseQueryParameters;
+};
+
+/**
+ * Fetches the balance of a specific collectible for a user
+ *
+ * @param args - Arguments for the API call
+ * @param config - SDK configuration
+ * @returns The balance data
+ */
+export async function fetchBalanceOfCollectible(
+	args: Omit<UseBalanceOfCollectibleArgs, 'userAddress'> & { userAddress: Hex },
+	config: SdkConfig,
+) {
+	if (args.isLaos721) {
+		const laosApi = new LaosAPI();
+		const response = await laosApi.getTokenBalances({
+			chainId: args.chainId.toString(),
+			accountAddress: args.userAddress,
+			includeMetadata: true,
+		});
+
+		return response.balances[0] || null;
+	}
+
+	const indexerClient = getIndexerClient(args.chainId, config);
+	return indexerClient
+		.getTokenBalances({
+			accountAddress: args.userAddress,
+			contractAddress: args.collectionAddress,
+			tokenID: args.collectableId,
+			includeMetadata: false,
+			metadataOptions: {
+				verifiedOnly: true,
+				includeContracts: [args.collectionAddress],
+			},
+		})
+		.then((res) => res.balances[0] || null);
+}
+
+/**
+ * Creates a tanstack query options object for the balance query
+ *
+ * @param args - The query arguments
+ * @param config - SDK configuration
+ * @returns Query options configuration
+ */
+export function balanceOfCollectibleOptions(
+	args: UseBalanceOfCollectibleArgs,
+	config: SdkConfig,
+) {
+	const enabled = !!args.userAddress && (args.query?.enabled ?? true);
+	return queryOptions({
+		queryKey: [...collectableKeys.userBalances, args],
+		queryFn: enabled
+			? () =>
+					fetchBalanceOfCollectible(
+						{
+							...args,
+							// biome-ignore lint/style/noNonNullAssertion: this is guaranteed by the userAddress check above
+							userAddress: args.userAddress!,
+						},
+						config,
+					)
+			: skipToken,
+	});
+}

package/src/react/queries/getTokenSupplies.ts

@@ -0,0 +1,38 @@
+import { queryOptions } from '@tanstack/react-query';
+import type { SdkConfig } from '../../types';
+//TODO: This is not complete, there is no hook for this,
+// add it if we need it in the future
+import { LaosAPI, getIndexerClient } from '../_internal';
+
+export type UseGetTokenSuppliesArgs = {
+	chainId: number;
+	contractAddress: string;
+	tokenId: string;
+	isLaos721?: boolean;
+};
+
+export async function getTokenSupplies(
+	args: UseGetTokenSuppliesArgs,
+	config: SdkConfig,
+) {
+	if (args.isLaos721) {
+		const laosApi = new LaosAPI();
+		return laosApi.getTokenSupplies({
+			chainId: args.chainId.toString(),
+			contractAddress: args.contractAddress,
+		});
+	}
+
+	const indexerClient = getIndexerClient(args.chainId, config);
+	return await indexerClient.getTokenSupplies(args);
+}
+
+export function getTokenSuppliesOptions(
+	args: UseGetTokenSuppliesArgs,
+	config: SdkConfig,
+) {
+	return queryOptions({
+		queryKey: ['getTokenSupplies', args],
+		queryFn: () => getTokenSupplies(args, config),
+	});
+}

package/src/react/queries/highestOffer.ts

@@ -0,0 +1,58 @@
+import { queryOptions } from '@tanstack/react-query';
+import type { Address } from 'viem';
+import type { SdkConfig } from '../../types';
+import {
+	type GetCollectibleHighestOfferArgs,
+	collectableKeys,
+	getMarketplaceClient,
+} from '../_internal';
+
+export interface UseHighestOfferArgs
+	extends Omit<GetCollectibleHighestOfferArgs, 'contractAddress'> {
+	collectionAddress: Address;
+	chainId: number;
+	query?: {
+		enabled?: boolean;
+	};
+}
+
+export async function fetchHighestOffer(
+	args: UseHighestOfferArgs,
+	config: SdkConfig,
+) {
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+
+	const data = await marketplaceClient.getCollectibleHighestOffer({
+		contractAddress: args.collectionAddress,
+		...args,
+	});
+
+	// let order: Order | undefined;
+	// if (data.order) {
+	// 	order = {
+	// 		...data.order,
+	// 		priceAmount: BigInt(data.order.priceAmount),
+	// 		priceAmountNet: BigInt(data.order.priceAmountNet),
+	// 	};
+	// }
+
+	return data.order ?? null;
+}
+
+/**
+ * Creates a tanstack query options object for the highest offer query
+ *
+ * @param args - The query arguments
+ * @param config - SDK configuration
+ * @returns Query options configuration
+ */
+export function highestOfferOptions(
+	args: UseHighestOfferArgs,
+	config: SdkConfig,
+) {
+	return queryOptions({
+		enabled: args.query?.enabled ?? true,
+		queryKey: [...collectableKeys.highestOffers, args],
+		queryFn: () => fetchHighestOffer(args, config),
+	});
+}

package/src/react/queries/index.ts

@@ -0,0 +1,8 @@
+export * from './balanceOfCollectible';
+export * from './getTokenSupplies';
+export * from './inventory';
+export * from './listCollectibles';
+export * from './highestOffer';
+export * from './listBalances';
+export * from './lowestListing';
+export * from './listTokenMetadata';