@0xsequence/marketplace-sdk 0.7.0 → 0.8.1

package/src/react/hooks/useGenerateOfferTransaction.tsx

@@ -2,7 +2,6 @@ import { useMutation } from '@tanstack/react-query';
 import type { SdkConfig } from '../../types';
 import { dateToUnixTime } from '../../utils/date';
 import {
-	type ChainId,
 	type CreateReq,
 	type GenerateOfferTransactionArgs,
 	type Step,
@@ -11,7 +10,7 @@ import {
 import { useConfig } from './useConfig';
 
 export type UseGenerateOfferTransactionArgs = {
-	chainId: ChainId;
+	chainId: number;
 	onSuccess?: (data?: Step[]) => void;
 };
 
@@ -29,7 +28,7 @@ export type GenerateOfferTransactionProps = Omit<
 export const generateOfferTransaction = async (
 	params: GenerateOfferTransactionProps,
 	config: SdkConfig,
-	chainId: ChainId,
+	chainId: number,
 ) => {
 	const args = {
 		...params,

package/src/react/hooks/useGenerateSellTransaction.tsx

@@ -2,8 +2,6 @@ import { useMutation } from '@tanstack/react-query';
 import { z } from 'zod';
 import type { SdkConfig } from '../../types';
 import {
-	type ChainId,
-	ChainIdSchema,
 	type GenerateSellTransactionArgs,
 	getMarketplaceClient,
 } from '../_internal';
@@ -11,7 +9,7 @@ import { stepSchema } from '../_internal/api/zod-schema';
 import { useConfig } from './useConfig';
 
 const UserGeneratSellTransactionArgsSchema = z.object({
-	chainId: ChainIdSchema.pipe(z.coerce.string()),
+	chainId: z.number(),
 	onSuccess: z.function().args(stepSchema.array().optional()).optional(),
 });
 
@@ -22,10 +20,9 @@ type UseGenerateSellTransactionArgs = z.infer<
 export const generateSellTransaction = async (
 	args: GenerateSellTransactionArgs,
 	config: SdkConfig,
-	chainId: ChainId,
+	chainId: number,
 ) => {
-	const parsedChainId = ChainIdSchema.pipe(z.coerce.string()).parse(chainId);
-	const marketplaceClient = getMarketplaceClient(parsedChainId, config);
+	const marketplaceClient = getMarketplaceClient(chainId, config);
 	return marketplaceClient
 		.generateSellTransaction(args)
 		.then((data) => data.steps);

package/src/react/hooks/useHighestOffer.tsx

@@ -32,7 +32,7 @@ export type UseHighestOfferArgs = {
  * const { data, isLoading, error } = useHighestOffer({
  *   collectionAddress: '0x123...',
  *   tokenId: '1',
- *   chainId: '1',
+ *   chainId: 1,
  *   query: {
  *     enabled: true,
  *     refetchInterval: 10000,

package/src/react/hooks/useListCollectibles.tsx

@@ -1,67 +1,39 @@
-import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
-import { z } from 'zod';
-import type { Page, SdkConfig } from '../../types';
-import {
-	AddressSchema,
-	ChainIdSchema,
-	type ListCollectiblesArgs,
-	QueryArgSchema,
-	collectableKeys,
-	getMarketplaceClient,
-} from '../_internal';
-import { listCollectiblesArgsSchema } from '../_internal/api/zod-schema';
+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';
 
-const UseListCollectiblesArgsSchema = listCollectiblesArgsSchema
-	.omit({
-		contractAddress: true,
-	})
-	.extend({
-		collectionAddress: AddressSchema,
-		chainId: ChainIdSchema.pipe(z.coerce.string()),
-		query: QueryArgSchema,
-	});
-
-export type UseListCollectiblesArgs = z.infer<
-	typeof UseListCollectiblesArgsSchema
->;
-
-export type UseListCollectiblesReturn = Awaited<
-	ReturnType<typeof fetchCollectibles>
->;
-
-const fetchCollectibles = async (
-	args: UseListCollectiblesArgs,
-	marketplaceClient: Awaited<ReturnType<typeof getMarketplaceClient>>,
-	page: Page,
-) => {
-	const parsedArgs = UseListCollectiblesArgsSchema.parse(args);
-	const arg = {
-		...parsedArgs,
-		contractAddress: parsedArgs.collectionAddress,
-		page: page,
-	} satisfies ListCollectiblesArgs;
+/**
+ * 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();
 
-	return marketplaceClient.listCollectibles(arg);
-};
+	const isLaos721 = marketplaceConfig?.collections.find(
+		(collection) => collection.address === args.collectionAddress,
+	)?.isLAOSERC721;
 
-export const listCollectiblesOptions = (
-	args: UseListCollectiblesArgs,
-	config: SdkConfig,
-) => {
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
-	return infiniteQueryOptions({
-		queryKey: [...collectableKeys.lists, args],
-		queryFn: ({ pageParam }) =>
-			fetchCollectibles(args, marketplaceClient, pageParam),
-		initialPageParam: { page: 1, pageSize: 30 },
-		getNextPageParam: (lastPage) =>
-			lastPage.page?.more ? lastPage.page : undefined,
-		enabled: args.query?.enabled ?? true,
-	});
-};
+	if (isLaos721) {
+		args.isLaos721 = true;
+	}
 
-export const useListCollectibles = (args: UseListCollectiblesArgs) => {
-	const config = useConfig();
 	return useInfiniteQuery(listCollectiblesOptions(args, config));
-};
+}

package/src/react/hooks/useListCollectiblesPaginated.tsx

@@ -3,7 +3,6 @@ import { z } from 'zod';
 import type { Page, SdkConfig } from '../../types';
 import {
 	AddressSchema,
-	ChainIdSchema,
 	type ListCollectiblesArgs,
 	collectableKeys,
 	getMarketplaceClient,
@@ -17,7 +16,7 @@ const UseListCollectiblesPaginatedArgsSchema = listCollectiblesArgsSchema
 	})
 	.extend({
 		collectionAddress: AddressSchema,
-		chainId: ChainIdSchema.pipe(z.coerce.string()),
+		chainId: z.number(),
 		query: z
 			.object({
 				enabled: z.boolean().optional(),
@@ -59,10 +58,7 @@ export const listCollectiblesPaginatedOptions = (
 	args: UseListCollectiblesPaginatedArgs,
 	config: SdkConfig,
 ) => {
-	const marketplaceClient = getMarketplaceClient(
-		args.chainId as string,
-		config,
-	);
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
 	return queryOptions({
 		queryKey: [...collectableKeys.lists, 'paginated', args],
 		queryFn: () => fetchCollectiblesPaginated(args, marketplaceClient),

package/src/react/hooks/useListListingsForCollectible.tsx

@@ -2,7 +2,6 @@ import { queryOptions, useQuery } from '@tanstack/react-query';
 import { z } from 'zod';
 import type { SdkConfig } from '../../types';
 import {
-	ChainIdSchema,
 	type ListListingsForCollectibleArgs,
 	collectableKeys,
 	getMarketplaceClient,
@@ -13,7 +12,7 @@ import { useConfig } from './useConfig';
 const UseListListingsForCollectibleArgsSchema =
 	listListingsForCollectibleArgsSchema
 		.extend({
-			chainId: ChainIdSchema.pipe(z.coerce.string()),
+			chainId: z.number(),
 			collectionAddress: z.string(),
 			collectibleId: z.string(),
 		})

package/src/react/hooks/useListOffersForCollectible.tsx

@@ -2,7 +2,6 @@ import { queryOptions, useQuery } from '@tanstack/react-query';
 import { z } from 'zod';
 import type { SdkConfig } from '../../types';
 import {
-	ChainIdSchema,
 	type ListOffersForCollectibleArgs,
 	collectableKeys,
 	getMarketplaceClient,
@@ -12,7 +11,7 @@ import { useConfig } from './useConfig';
 
 const UseListOffersForCollectibleArgsSchema = listOffersForCollectibleArgsSchema
 	.extend({
-		chainId: ChainIdSchema.pipe(z.coerce.string()),
+		chainId: z.number(),
 		collectionAddress: z.string(),
 		collectibleId: z.string(),
 	})

package/src/react/hooks/useLowestListing.tsx

@@ -3,7 +3,6 @@ import { z } from 'zod';
 import type { SdkConfig } from '../../types';
 import {
 	AddressSchema,
-	ChainIdSchema,
 	QueryArgSchema,
 	collectableKeys,
 	getMarketplaceClient,
@@ -17,7 +16,7 @@ const UseLowestListingSchema = getCollectibleLowestListingArgsSchema
 	})
 	.extend({
 		collectionAddress: AddressSchema,
-		chainId: ChainIdSchema.pipe(z.coerce.string()),
+		chainId: z.number(),
 		query: QueryArgSchema,
 	});
 

package/src/react/hooks/useRoyalty.tsx

@@ -1,15 +1,10 @@
 import { useReadContract } from 'wagmi';
 import { z } from 'zod';
 import { EIP2981_ABI } from '../../utils';
-import {
-	AddressSchema,
-	ChainIdSchema,
-	QueryArgSchema,
-	collectableKeys,
-} from '../_internal';
+import { AddressSchema, QueryArgSchema, collectableKeys } from '../_internal';
 
 const UseRoyaltySchema = z.object({
-	chainId: ChainIdSchema.pipe(z.coerce.string()),
+	chainId: z.number(),
 	collectionAddress: AddressSchema,
 	collectibleId: z.string(),
 	query: QueryArgSchema.optional(),
@@ -27,7 +22,7 @@ export const useRoyalty = (args: UseRoyaltyArgs) => {
 		address: collectionAddress,
 		functionName: 'royaltyInfo',
 		args: [BigInt(collectibleId), BigInt(100)],
-		chainId: Number(chainId),
+		chainId,
 		query: query,
 	});
 

package/src/react/hooks/useTransferTokens.tsx

@@ -2,10 +2,10 @@ 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 { ChainId, ContractType } from '../_internal';
+import type { ContractType } from '../_internal';
 
 interface BaseTransferParams {
-	chainId: ChainId;
+	chainId: number;
 	collectionAddress: Hex;
 	tokenId: string;
 	receiverAddress: Address;

package/src/react/queries/balanceOfCollectible.ts

@@ -1,9 +1,8 @@
-import type { GetTokenBalancesReturn } from '@0xsequence/indexer';
 import { queryOptions, skipToken } from '@tanstack/react-query';
 import type { Hex } from 'viem';
 import type { UseQueryParameters } from 'wagmi/query';
 import type { SdkConfig } from '../../types';
-import { collectableKeys, getIndexerClient } from '../_internal';
+import { LaosAPI, collectableKeys, getIndexerClient } from '../_internal';
 
 export type UseBalanceOfCollectibleArgs = {
 	collectionAddress: Hex;
@@ -22,40 +21,18 @@ export type UseBalanceOfCollectibleArgs = {
  * @returns The balance data
  */
 export async function fetchBalanceOfCollectible(
-	args: UseBalanceOfCollectibleArgs,
+	args: Omit<UseBalanceOfCollectibleArgs, 'userAddress'> & { userAddress: Hex },
 	config: SdkConfig,
 ) {
 	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.userAddress,
-					includeMetadata: true,
-					page: {
-						sort: [
-							{
-								column: 'CREATED_AT',
-								order: 'DESC',
-							},
-						],
-					},
-				}),
-			},
-		);
-
-		if (!response.ok) {
-			throw new Error(`Laos API request failed with status ${response.status}`);
-		}
+		const laosApi = new LaosAPI();
+		const response = await laosApi.getTokenBalances({
+			chainId: args.chainId.toString(),
+			accountAddress: args.userAddress,
+			includeMetadata: true,
+		});
 
-		// TODO: This is pritty unsafe, we should validate the response
-		const data = (await response.json()) as GetTokenBalancesReturn;
-		return data.balances[0] || null;
+		return response.balances[0] || null;
 	}
 
 	const indexerClient = getIndexerClient(args.chainId, config);

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/index.ts

@@ -0,0 +1,5 @@
+export * from './balanceOfCollectible';
+export * from './getTokenSupplies';
+export * from './listCollectibles';
+export * from './highestOffer';
+export * from './listBalances';

package/src/react/queries/listCollectibles.ts

@@ -0,0 +1,96 @@
+import { infiniteQueryOptions } from '@tanstack/react-query';
+import type { Hex } from 'viem';
+import type { Page, SdkConfig } from '../../types';
+import type {
+	CollectibleOrder,
+	CollectiblesFilter,
+	ListCollectiblesArgs,
+	ListCollectiblesReturn,
+} from '../_internal';
+import { OrderSide, collectableKeys, getMarketplaceClient } from '../_internal';
+import { fetchBalances } from './listBalances';
+export type UseListCollectiblesArgs = {
+	collectionAddress: Hex;
+	chainId: number;
+	side: OrderSide;
+	filter?: CollectiblesFilter;
+	isLaos721?: boolean;
+	query?: {
+		enabled?: boolean;
+	};
+};
+
+/**
+ * Fetches a list of collectibles with pagination support
+ *
+ * @param args - Arguments for the API call
+ * @param config - SDK configuration
+ * @param page - Page parameters for pagination
+ * @returns The collectibles data
+ */
+export async function fetchCollectibles(
+	args: UseListCollectiblesArgs,
+	config: SdkConfig,
+	page: Page,
+): Promise<ListCollectiblesReturn> {
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	const parsedArgs = {
+		...args,
+		contractAddress: args.collectionAddress,
+		page: page,
+		side: args.side,
+	} satisfies ListCollectiblesArgs;
+
+	if (args.isLaos721 && args.side === OrderSide.listing) {
+		try {
+			const balances = await fetchBalances(args, config, page);
+			const collectibles: CollectibleOrder[] = balances.balances.map(
+				(balance) => {
+					if (!balance.tokenMetadata)
+						throw new Error('Token metadata not found');
+					return {
+						metadata: {
+							tokenId: balance.tokenID ?? '',
+							attributes: balance.tokenMetadata.attributes,
+							image: balance.tokenMetadata.image,
+							name: balance.tokenMetadata.name,
+							description: balance.tokenMetadata.description,
+							video: balance.tokenMetadata.video,
+							audio: balance.tokenMetadata.audio,
+						},
+					};
+				},
+			);
+			return {
+				collectibles: collectibles,
+				//@ts-expect-error
+				page: balances.page,
+			};
+		} catch (error) {
+			// If the request fails, ignore the error and return the collectibles from our indexer
+			console.error(error);
+		}
+	}
+	return await marketplaceClient.listCollectibles(parsedArgs);
+}
+
+/**
+ * Creates a tanstack infinite query options object for the collectibles query
+ *
+ * @param args - The query arguments
+ * @param config - SDK configuration
+ * @returns Query options configuration
+ */
+export function listCollectiblesOptions(
+	args: UseListCollectiblesArgs,
+	config: SdkConfig,
+) {
+	return infiniteQueryOptions({
+		...args.query,
+		queryKey: [...collectableKeys.lists, args, config],
+		queryFn: ({ pageParam }) => fetchCollectibles(args, config, pageParam),
+		initialPageParam: { page: 1, pageSize: 30 } as Page,
+		getNextPageParam: (lastPage) =>
+			lastPage.page?.more ? lastPage.page : undefined,
+	});
+}

package/src/react/ui/components/_internals/action-button/ActionButton.tsx

@@ -9,7 +9,7 @@ import { useActionButtonLogic } from './hooks/useActionButtonLogic';
 import type { CollectibleCardAction } from './types';
 
 type ActionButtonProps = {
-	chainId: string;
+	chainId: number;
 	collectionAddress: Hex;
 	tokenId: string;
 	orderbookKind?: OrderbookKind;

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

@@ -12,7 +12,7 @@ import { CollectibleCardAction } from '../types';
 
 describe.skip('ActionButton', () => {
 	const defaultProps = {
-		chainId: '1',
+		chainId: 1,
 		collectionAddress: '0x123' as Hex,
 		tokenId: '1',
 		action: CollectibleCardAction.BUY,

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

@@ -13,7 +13,7 @@ type NonOwnerActionsProps = {
 	action: CollectibleCardAction;
 	tokenId: string;
 	collectionAddress: Hex;
-	chainId: string;
+	chainId: number;
 	orderbookKind?: OrderbookKind;
 	lowestListing?: Order;
 };
@@ -43,8 +43,9 @@ export function NonOwnerActions({
 					showBuyModal({
 						collectionAddress,
 						chainId,
-						tokenId,
-						order: lowestListing,
+						collectibleId: tokenId,
+						orderId: lowestListing.orderId,
+						marketplace: lowestListing.marketplace,
 					})
 				}
 				icon={SvgCartIcon}

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

@@ -12,7 +12,7 @@ type OwnerActionsProps = {
 	action: CollectibleCardAction;
 	tokenId: string;
 	collectionAddress: Hex;
-	chainId: string;
+	chainId: number;
 	orderbookKind?: OrderbookKind;
 	highestOffer?: Order;
 };

package/src/react/ui/components/collectible-card/CollectibleCard.tsx

@@ -3,7 +3,6 @@
 import { Skeleton } from '@0xsequence/design-system';
 import type { Hex } from 'viem';
 import type {
-	ChainId,
 	CollectibleOrder,
 	ContractType,
 	Order,
@@ -37,7 +36,7 @@ function CollectibleSkeleton() {
 
 type CollectibleCardProps = {
 	collectibleId: string;
-	chainId: ChainId;
+	chainId: number;
 	collectionAddress: Hex;
 	orderbookKind?: OrderbookKind;
 	collectionType?: ContractType;
@@ -142,7 +141,7 @@ export function CollectibleCard({
 					{(highestOffer || lowestListing) && (
 						<div className="-bottom-action-offset absolute flex w-full items-center justify-center bg-overlay-light p-2 backdrop-blur transition-transform duration-200 ease-in-out group-hover:translate-y-[-44px]">
 							<ActionButton
-								chainId={String(chainId)}
+								chainId={chainId}
 								collectionAddress={collectionAddress}
 								tokenId={collectibleId}
 								orderbookKind={orderbookKind}

package/src/react/ui/components/collectible-card/__tests__/CollectibleCard.test.tsx

@@ -37,7 +37,7 @@ describe.skip('CollectibleCard', () => {
 	// };
 	// const defaultProps = {
 	// 	collectibleId: '123',
-	// 	chainId: '1',
+	// 	chainId: 1,
 	// 	collectionAddress:
 	// 		'0x1234567890123456789012345678901234567890' as `0x${string}`,
 	// 	lowestListing: {