@0xsequence/marketplace-sdk 0.5.3 → 0.5.5

package/src/react/hooks/__tests__/useListCollectiblesPaginated.test.tsx

@@ -0,0 +1,217 @@
+import { waitFor } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { zeroAddress } from 'viem';
+import { describe, expect, it } from 'vitest';
+import {
+	mockCollectibleOrder,
+	mockMarketplaceEndpoint,
+} from '../../_internal/api/__mocks__/marketplace.msw';
+import { OrderSide } from '../../_internal/api/marketplace.gen';
+import { renderHook } from '../../_internal/test-utils';
+import { server } from '../../_internal/test/setup';
+import { useListCollectiblesPaginated } from '../useListCollectiblesPaginated';
+import type { UseListCollectiblesPaginatedArgs } from '../useListCollectiblesPaginated';
+
+describe('useListCollectiblesPaginated', () => {
+	const defaultArgs: UseListCollectiblesPaginatedArgs = {
+		chainId: '1',
+		collectionAddress: zeroAddress,
+		side: OrderSide.listing,
+		query: {
+			enabled: true,
+			page: 1,
+			pageSize: 30,
+		},
+	};
+
+	it('should fetch collectibles successfully', async () => {
+		// Set up mock response
+		server.use(
+			http.post(mockMarketplaceEndpoint('ListCollectibles'), () => {
+				return HttpResponse.json({
+					collectibles: [mockCollectibleOrder],
+					page: { page: 1, pageSize: 30, more: false },
+				});
+			}),
+		);
+
+		const { result } = renderHook(() =>
+			useListCollectiblesPaginated(defaultArgs),
+		);
+
+		// Wait for the query to complete
+		await waitFor(() => {
+			expect(result.current.isSuccess).toBe(true);
+		});
+
+		// Verify the data
+		expect(result.current.data?.collectibles).toEqual([mockCollectibleOrder]);
+		expect(result.current.data?.page).toEqual({
+			page: 1,
+			pageSize: 30,
+			more: false,
+		});
+	});
+
+	it('should handle error states', async () => {
+		// Override the handler to return an error
+		server.use(
+			http.post(mockMarketplaceEndpoint('ListCollectibles'), () => {
+				return HttpResponse.json(
+					{ error: { message: 'Failed to fetch collectibles' } },
+					{ status: 500 },
+				);
+			}),
+		);
+
+		const { result } = renderHook(() =>
+			useListCollectiblesPaginated(defaultArgs),
+		);
+
+		// Wait for the error state
+		await waitFor(() => {
+			expect(result.current.isError).toBe(true);
+		});
+
+		expect(result.current.error).toBeDefined();
+		expect(result.current.data).toBeUndefined();
+	});
+
+	it('should handle pagination correctly', async () => {
+		// Set up mock response for page 2
+		const modifiedCollectibleOrder = {
+			...mockCollectibleOrder,
+			metadata: {
+				...mockCollectibleOrder.metadata,
+				tokenId: '2',
+			},
+		};
+
+		server.use(
+			http.post(mockMarketplaceEndpoint('ListCollectibles'), () => {
+				return HttpResponse.json({
+					collectibles: [modifiedCollectibleOrder],
+					page: { page: 2, pageSize: 20, more: false },
+				});
+			}),
+		);
+
+		const paginatedArgs: UseListCollectiblesPaginatedArgs = {
+			...defaultArgs,
+			query: {
+				enabled: true,
+				page: 2,
+				pageSize: 20,
+			},
+		};
+
+		const { result } = renderHook(() =>
+			useListCollectiblesPaginated(paginatedArgs),
+		);
+
+		// Wait for the query to complete
+		await waitFor(() => {
+			expect(result.current.isSuccess).toBe(true);
+		});
+
+		// Verify the data for page 2
+		expect(result.current.data?.collectibles[0].metadata.tokenId).toBe('2');
+		expect(result.current.data?.page).toEqual({
+			page: 2,
+			pageSize: 20,
+			more: false,
+		});
+	});
+
+	it('should refetch when args change', async () => {
+		// Set up initial mock response
+		server.use(
+			http.post(mockMarketplaceEndpoint('ListCollectibles'), () => {
+				return HttpResponse.json({
+					collectibles: [mockCollectibleOrder],
+					page: { page: 1, pageSize: 30, more: true },
+				});
+			}),
+		);
+
+		let currentArgs = defaultArgs;
+		const { result, rerender } = renderHook(() =>
+			useListCollectiblesPaginated(currentArgs),
+		);
+
+		// Wait for initial data
+		await waitFor(() => {
+			expect(result.current.isSuccess).toBe(true);
+		});
+
+		// Change args and rerender
+		currentArgs = {
+			...defaultArgs,
+			query: {
+				...defaultArgs.query,
+				page: 2,
+			},
+		};
+
+		// Set up mock response for page 2
+		const modifiedCollectibleOrder = {
+			...mockCollectibleOrder,
+			metadata: {
+				...mockCollectibleOrder.metadata,
+				tokenId: '2',
+			},
+		};
+
+		server.use(
+			http.post(mockMarketplaceEndpoint('ListCollectibles'), () => {
+				return HttpResponse.json({
+					collectibles: [modifiedCollectibleOrder],
+					page: { page: 2, pageSize: 30, more: false },
+				});
+			}),
+		);
+
+		rerender();
+
+		// Wait for new data
+		await waitFor(() => {
+			expect(result.current.data?.page?.page).toBe(2);
+		});
+
+		// Verify new data
+		expect(result.current.data?.collectibles[0].metadata.tokenId).toBe('2');
+	});
+
+	it('should not fetch when enabled is false', async () => {
+		// Set up a mock handler to ensure no requests are made
+		let requestMade = false;
+		server.use(
+			http.post(mockMarketplaceEndpoint('ListCollectibles'), () => {
+				requestMade = true;
+				return HttpResponse.json({
+					collectibles: [mockCollectibleOrder],
+					page: { page: 1, pageSize: 30, more: false },
+				});
+			}),
+		);
+
+		const disabledArgs: UseListCollectiblesPaginatedArgs = {
+			...defaultArgs,
+			query: {
+				enabled: false,
+				page: 1,
+				pageSize: 30,
+			},
+		};
+
+		const { result } = renderHook(() =>
+			useListCollectiblesPaginated(disabledArgs),
+		);
+
+		// For disabled queries, we expect no loading state and no data
+		expect(result.current.isLoading).toBe(false);
+		expect(result.current.data).toBeUndefined();
+		expect(result.current.error).toBeNull();
+		expect(requestMade).toBe(false);
+	});
+});

package/src/react/hooks/index.ts

@@ -4,7 +4,9 @@ export * from './useCountOfCollectables';
 export * from './useCollectible';
 export * from './useCollection';
 export * from './useCollectionBalanceDetails';
+export * from './useComparePrices';
 export * from './useConfig';
+export * from './useConvertPriceToUSD';
 export * from './useCurrencies';
 export * from './useCurrency';
 export * from './useFilters';
@@ -13,6 +15,7 @@ export * from './useHighestOffer';
 export * from './useListBalances';
 export * from './useListCollectibleActivities';
 export * from './useListCollectibles';
+export * from './useListCollectiblesPaginated';
 export * from './useListCollectionActivities';
 export * from './useListOffersForCollectible';
 export * from './useCountOffersForCollectible';

package/src/react/hooks/useComparePrices.tsx

@@ -0,0 +1,106 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
+import {
+	AddressSchema,
+	ChainIdSchema,
+	QueryArgSchema,
+	currencyKeys,
+} from '../_internal';
+import { useConfig } from './useConfig';
+import { convertPriceToUSD } from './useConvertPriceToUSD';
+
+const ChainIdCoerce = ChainIdSchema.transform((val) => val.toString());
+
+const UseComparePricesArgsSchema = z.object({
+	chainId: ChainIdCoerce,
+	// First price details
+	priceAmountRaw: z.string(),
+	priceCurrencyAddress: AddressSchema,
+	// Second price details (to compare against)
+	compareToPriceAmountRaw: z.string(),
+	compareToPriceCurrencyAddress: AddressSchema,
+	query: QueryArgSchema,
+});
+
+type UseComparePricesArgs = z.input<typeof UseComparePricesArgsSchema>;
+
+export type UseComparePricesReturn = {
+	percentageDifference: number;
+	percentageDifferenceFormatted: string;
+	status: 'above' | 'same' | 'below';
+};
+
+const comparePrices = async (
+	args: UseComparePricesArgs,
+	config: SdkConfig,
+): Promise<UseComparePricesReturn> => {
+	const parsedArgs = UseComparePricesArgsSchema.parse(args);
+	const [priceUSD, compareToPriceUSD] = await Promise.all([
+		convertPriceToUSD(
+			{
+				chainId: parsedArgs.chainId,
+				currencyAddress: parsedArgs.priceCurrencyAddress,
+				amountRaw: parsedArgs.priceAmountRaw,
+				query: {},
+			},
+			config,
+		),
+		convertPriceToUSD(
+			{
+				chainId: parsedArgs.chainId,
+				currencyAddress: parsedArgs.compareToPriceCurrencyAddress,
+				amountRaw: parsedArgs.compareToPriceAmountRaw,
+				query: {},
+			},
+			config,
+		),
+	]);
+	const difference = priceUSD.usdAmount - compareToPriceUSD.usdAmount;
+
+	if (compareToPriceUSD.usdAmount === 0) {
+		throw new Error('Cannot compare to zero price');
+	}
+
+	const percentageDifference = (difference / compareToPriceUSD.usdAmount) * 100;
+	const isAbove = percentageDifference > 0;
+	const isSame = percentageDifference === 0;
+
+	return {
+		percentageDifference,
+		percentageDifferenceFormatted: Math.abs(percentageDifference).toFixed(2),
+		status: isAbove ? 'above' : isSame ? 'same' : 'below',
+	};
+};
+
+export const comparePricesOptions = (
+	args: UseComparePricesArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		...args.query,
+		queryKey: [...currencyKeys.conversion, 'compare', args],
+		queryFn: () => comparePrices(args, config),
+	});
+};
+
+/**
+ * Hook to compare prices between different currencies by converting both to USD
+ * @param args - The arguments for the hook
+ * @returns The percentage difference between the two prices
+ * @example
+ * ```ts
+ * const { data } = useComparePrices({
+ *   chainId: 1,
+ *   priceAmountRaw: "1000000000000000000",
+ *   priceCurrencyAddress: "0x0000000000000000000000000000000000000000",
+ * });
+ *
+ * console.log(data);
+ * // { percentageDifference: 10, percentageDifferenceFormatted: "10.00", isAbove: true, isSame: false, isBelow: false }
+ * ```
+ */
+export const useComparePrices = (args: UseComparePricesArgs) => {
+	const config = useConfig();
+	return useQuery(comparePricesOptions(args, config));
+};

package/src/react/hooks/useConvertPriceToUSD.tsx

@@ -0,0 +1,102 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { formatUnits } from 'viem';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
+import {
+	AddressSchema,
+	ChainIdSchema,
+	QueryArgSchema,
+	currencyKeys,
+	getQueryClient,
+} from '../_internal';
+import { useConfig } from './useConfig';
+import { currenciesOptions } from './useCurrencies';
+
+const ChainIdCoerce = ChainIdSchema.transform((val) => val.toString());
+
+const UseConvertPriceToUSDArgsSchema = z.object({
+	chainId: ChainIdCoerce,
+	currencyAddress: AddressSchema,
+	amountRaw: z.string(),
+	query: QueryArgSchema,
+});
+
+export type UseConvertPriceToUSDArgs = z.input<
+	typeof UseConvertPriceToUSDArgsSchema
+>;
+
+export type UseConvertPriceToUSDReturn = {
+	usdAmount: number;
+	usdAmountFormatted: string;
+};
+
+export const convertPriceToUSD = async (
+	args: UseConvertPriceToUSDArgs,
+	config: SdkConfig,
+): Promise<UseConvertPriceToUSDReturn> => {
+	const parsedArgs = UseConvertPriceToUSDArgsSchema.parse(args);
+	const queryClient = getQueryClient();
+	const currencies = await queryClient.fetchQuery(
+		currenciesOptions(
+			{
+				chainId: parsedArgs.chainId,
+			},
+			config,
+		),
+	);
+	const currencyDetails = currencies.find(
+		(c) =>
+			c.contractAddress.toLowerCase() ===
+			parsedArgs.currencyAddress.toLowerCase(),
+	);
+
+	if (!currencyDetails) {
+		throw new Error('Currency not found');
+	}
+
+	const amountDecimal = Number(
+		formatUnits(BigInt(parsedArgs.amountRaw), currencyDetails.decimals),
+	);
+	const usdAmount = amountDecimal * currencyDetails.exchangeRate;
+
+	return {
+		usdAmount,
+		usdAmountFormatted: usdAmount.toFixed(2),
+	};
+};
+
+export const convertPriceToUSDOptions = (
+	args: UseConvertPriceToUSDArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		...args.query,
+		queryKey: [
+			...currencyKeys.conversion,
+			args.chainId,
+			args.currencyAddress,
+			args.amountRaw,
+		],
+		queryFn: () => convertPriceToUSD(args, config),
+	});
+};
+
+/**
+ * Hook to convert a price amount from a specific currency to USD
+ * @returns The price amount in USD and formatted USD amount
+ * @example
+ * ```ts
+ * const { data } = useConvertPriceToUSD({
+ *   chainId: 1,
+ *   currencyAddress: "0x0000000000000000000000000000000000000000",
+ *   amountRaw: "1000000000000000000",
+ * });
+ *
+ * console.log(data);
+ * // { usdAmount: 1000, usdAmountFormatted: "1000.00" }
+ * ```
+ */
+export const useConvertPriceToUSD = (args: UseConvertPriceToUSDArgs) => {
+	const config = useConfig();
+	return useQuery(convertPriceToUSDOptions(args, config));
+};

package/src/react/hooks/useFilters.tsx

@@ -1,6 +1,8 @@
+import type { PropertyFilter } from '@0xsequence/metadata';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 import { z } from 'zod';
 import { FilterCondition, type SdkConfig } from '../../types';
+import { compareAddress } from '../../utils';
 import {
 	AddressSchema,
 	ChainIdSchema,
@@ -11,8 +13,6 @@ import {
 } from '../_internal';
 import { useConfig } from './useConfig';
 import { marketplaceConfigOptions } from './useMarketplaceConfig';
-import { compareAddress } from '../../utils';
-import type { PropertyFilter } from '@0xsequence/metadata';
 
 const UseFiltersSchema = z.object({
 	chainId: ChainIdSchema.pipe(z.coerce.string()),
@@ -45,7 +45,13 @@ export const fetchFilters = async (args: UseFiltersArgs, config: SdkConfig) => {
 		compareAddress(c.address, parsedArgs.collectionAddress),
 	)?.filterSettings;
 
-	if (!collectionFilters) return filters;
+	if (
+		!collectionFilters?.exclusions ||
+		collectionFilters.exclusions.length === 0 ||
+		!collectionFilters.filterOrder ||
+		collectionFilters.filterOrder.length === 0
+	)
+		return filters;
 
 	const { filterOrder, exclusions } = collectionFilters;
 

package/src/react/hooks/useListCollectiblesPaginated.tsx

@@ -0,0 +1,78 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { Page, SdkConfig } from '../../types';
+import {
+	AddressSchema,
+	ChainIdSchema,
+	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: ChainIdSchema.pipe(z.coerce.string()),
+		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 as string,
+		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/ui/components/collectible-card/CollectibleCard.tsx

@@ -184,6 +184,7 @@ export function CollectibleCard({
 						lowestListingPriceAmount={lowestListing?.order?.priceAmount}
 						lowestListingCurrency={lowestListingCurrency}
 						balance={balance}
+						decimals={collectibleMetadata?.decimals}
 					/>
 
 					{(highestOffer || lowestListing) && (

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

@@ -15,6 +15,7 @@ const formatPrice = (amount: string, currency: Currency): string => {
 type FooterProps = {
 	name: string;
 	type?: ContractType;
+	decimals?: number;
 	onOfferClick?: () => void;
 	highestOffer?: Order;
 	lowestListingPriceAmount?: string;
@@ -25,6 +26,7 @@ type FooterProps = {
 export const Footer = ({
 	name,
 	type,
+	decimals,
 	onOfferClick,
 	highestOffer,
 	lowestListingPriceAmount,
@@ -104,7 +106,11 @@ export const Footer = ({
 				</Text>
 			</Box>
 
-			<TokenTypeBalancePill balance={balance} type={type as ContractType} />
+			<TokenTypeBalancePill
+				balance={balance}
+				type={type as ContractType}
+				decimals={decimals}
+			/>
 		</Box>
 	);
 };
@@ -112,14 +118,16 @@ export const Footer = ({
 const TokenTypeBalancePill = ({
 	balance,
 	type,
+	decimals,
 }: {
 	balance?: string;
 	type: ContractType;
+	decimals?: number;
 }) => {
 	const displayText =
 		type === ContractType.ERC1155
 			? balance
-				? `Owned: ${balance}`
+				? `Owned: ${formatUnits(BigInt(balance), decimals ?? 0)}`
 				: 'ERC-1155'
 			: 'ERC-721';
 

package/src/react/ui/modals/BuyModal/hooks/useBuyCollectable.ts

@@ -1,9 +1,10 @@
 import { useSelectPaymentModal } from '@0xsequence/kit-checkout';
 import type { QueryKey } from '@tanstack/react-query';
-import type { Hash, Hex } from 'viem';
+import { type Hash, type Hex, zeroAddress } from 'viem';
 import {
 	type CheckoutOptions,
 	type MarketplaceKind,
+	StepType,
 	WalletKind,
 	balanceQueries,
 	collectableKeys,
@@ -92,11 +93,37 @@ export const useBuyCollectable = ({
 				walletType: WalletKind.unknown,
 			});
 
+			const order = await marketplaceClient.getOrders({
+				input: [
+					{
+						orderId: input.orderId,
+						contractAddress: collectionAddress,
+						marketplace: input.marketplace,
+					},
+				],
+			});
+
 			// these states are necessary to manage appearance of the quantity modal
 			setCheckoutModalLoaded(true);
 			setCheckoutModalIsLoading(false);
 
-			const step = steps[0];
+			const step = steps.find((step) => step.id === StepType.buy);
+
+			if (!step) {
+				throw new Error('Buy step not found');
+			}
+
+			const feesBps = BigInt(fees.amount);
+			let price = String(
+				(BigInt(order.orders[0].priceAmount) *
+					BigInt(input.quantity) *
+					(10000n + feesBps)) /
+					10000n,
+			);
+
+			if (order.orders[0].priceCurrencyAddress !== zeroAddress) {
+				price = '0';
+			}
 
 			openSelectPaymentModal({
 				chain: chainId,
@@ -108,7 +135,7 @@ export const useBuyCollectable = ({
 					},
 				],
 				currencyAddress: priceCurrencyAddress,
-				price: step.value,
+				price,
 				targetContractAddress: step.to,
 				txData: step.data as Hex,
 				collectionAddress,