@0xsequence/marketplace-sdk 0.5.2 → 0.5.3

package/src/react/hooks/useCurrencies.tsx

@@ -4,21 +4,21 @@ import { z } from 'zod';
 import type { SdkConfig } from '../../types';
 import {
 	AddressSchema,
-	type ChainId,
 	ChainIdSchema,
-	type Currency,
-	QueryArgSchema,
 	currencyKeys,
 	getMarketplaceClient,
+	getQueryClient,
+	QueryArgSchema,
 } from '../_internal';
 import { useConfig } from './useConfig';
+import { marketplaceConfigOptions } from './useMarketplaceConfig';
 
 const ChainIdCoerce = ChainIdSchema.transform((val) => val.toString());
 
 const UseCurrenciesArgsSchema = z.object({
 	chainId: ChainIdCoerce,
 	includeNativeCurrency: z.boolean().optional().default(true),
-	currencyOptions: z.array(AddressSchema).optional(),
+	collectionAddress: AddressSchema.optional(),
 	query: QueryArgSchema,
 });
 
@@ -26,37 +26,40 @@ type UseCurrenciesArgs = z.input<typeof UseCurrenciesArgsSchema>;
 
 export type UseCurrenciesReturn = Awaited<ReturnType<typeof fetchCurrencies>>;
 
-const fetchCurrencies = async (chainId: ChainId, config: SdkConfig) => {
-	const parsedChainId = ChainIdCoerce.parse(chainId);
-	const marketplaceClient = getMarketplaceClient(parsedChainId, config);
-	return marketplaceClient.listCurrencies().then((resp) =>
+const fetchCurrencies = async (args: UseCurrenciesArgs, config: SdkConfig) => {
+	const parsedArgs = UseCurrenciesArgsSchema.parse(args);
+	const marketplaceClient = getMarketplaceClient(parsedArgs.chainId, config);
+
+	let currencies = await marketplaceClient.listCurrencies().then((resp) =>
 		resp.currencies.map((currency) => ({
 			...currency,
-			// TODO: remove this, when we are sure of the schema
 			contractAddress: currency.contractAddress || zeroAddress,
 		})),
 	);
-};
 
-const selectCurrencies = (data: Currency[], args: UseCurrenciesArgs) => {
-	const argsParsed = UseCurrenciesArgsSchema.parse(args);
+	if (parsedArgs.collectionAddress) {
+		const queryClient = getQueryClient();
+		const marketplaceConfig = await queryClient.fetchQuery(
+			marketplaceConfigOptions(config),
+		);
 
-	let filteredData = data;
+		const currenciesOptions = marketplaceConfig.collections.find(
+			(collection) => collection.address === args.collectionAddress,
+		)?.currencyOptions;
 
-	if (!argsParsed.includeNativeCurrency) {
-		filteredData = filteredData.filter((currency) => !currency.nativeCurrency);
+		// Filter currencies based on collection currency options
+		if (currenciesOptions) {
+			currencies = currencies.filter((currency) =>
+				currenciesOptions.includes(currency.contractAddress),
+			);
+		}
 	}
 
-	if (argsParsed.currencyOptions) {
-		const lowerCaseCurrencyOptions = argsParsed.currencyOptions.map((option) =>
-			option.toLowerCase(),
-		);
-
-		filteredData = filteredData.filter((currency) =>
-			lowerCaseCurrencyOptions.includes(currency.contractAddress.toLowerCase()),
-		);
+	if (!parsedArgs.includeNativeCurrency) {
+		currencies = currencies.filter((currency) => !currency.nativeCurrency);
 	}
-	return filteredData;
+
+	return currencies;
 };
 
 export const currenciesOptions = (
@@ -65,15 +68,13 @@ export const currenciesOptions = (
 ) => {
 	return queryOptions({
 		...args.query,
-		queryKey: [...currencyKeys.lists, args.chainId],
-		queryFn: () => fetchCurrencies(args.chainId, config),
-		select: (data) => selectCurrencies(data, args),
+		queryKey: [...currencyKeys.lists, args],
+		queryFn: () => fetchCurrencies(args, config),
 		enabled: args.query?.enabled,
 	});
 };
 
 export const useCurrencies = (args: UseCurrenciesArgs) => {
 	const config = useConfig();
-
 	return useQuery(currenciesOptions(args, config));
 };

package/src/react/hooks/useFilters.tsx

@@ -1,18 +1,23 @@
 import { queryOptions, useQuery } from '@tanstack/react-query';
 import { z } from 'zod';
-import type { SdkConfig } from '../../types';
+import { FilterCondition, type SdkConfig } from '../../types';
 import {
 	AddressSchema,
 	ChainIdSchema,
 	QueryArgSchema,
 	collectableKeys,
 	getMetadataClient,
+	getQueryClient,
 } 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()),
 	collectionAddress: AddressSchema,
+	showAllFilters: z.boolean().default(false).optional(),
 	query: QueryArgSchema,
 });
 
@@ -23,12 +28,74 @@ export type UseFilterReturn = Awaited<ReturnType<typeof fetchFilters>>;
 export const fetchFilters = async (args: UseFiltersArgs, config: SdkConfig) => {
 	const parsedArgs = UseFiltersSchema.parse(args);
 	const metadataClient = getMetadataClient(config);
-	return metadataClient
+	const filters = await metadataClient
 		.tokenCollectionFilters({
 			chainID: parsedArgs.chainId,
 			contractAddress: parsedArgs.collectionAddress,
 		})
 		.then((resp) => resp.filters);
+
+	if (args.showAllFilters) return filters;
+
+	const queryClient = getQueryClient();
+	const marketplaceConfig = await queryClient.fetchQuery(
+		marketplaceConfigOptions(config),
+	);
+	const collectionFilters = marketplaceConfig.collections.find((c) =>
+		compareAddress(c.address, parsedArgs.collectionAddress),
+	)?.filterSettings;
+
+	if (!collectionFilters) return filters;
+
+	const { filterOrder, exclusions } = collectionFilters;
+
+	// Sort the filters based on the filterOrder, the filters that are not in the filterOrder are at the end
+	const sortedFilters = filters.toSorted((a, b) => {
+		const aIndex =
+			filterOrder.indexOf(a.name) > -1
+				? filterOrder.indexOf(a.name)
+				: filterOrder.length;
+		const bIndex =
+			filterOrder.indexOf(b.name) > -1
+				? filterOrder.indexOf(b.name)
+				: filterOrder.length;
+		return aIndex - bIndex;
+	});
+
+	const filteredResults = sortedFilters.reduce<PropertyFilter[]>(
+		(acc, filter) => {
+			// Check if this filter should be excluded
+			const exclusionRule = exclusions.find((rule) => rule.key === filter.name);
+
+			if (!exclusionRule) {
+				// No exclusion rule, include the filter
+				acc.push(filter);
+				return acc;
+			}
+
+			if (exclusionRule.condition === FilterCondition.ENTIRE_KEY) {
+				// Skip this filter entirely
+				return acc;
+			}
+
+			if (
+				exclusionRule.condition === FilterCondition.SPECIFIC_VALUE &&
+				exclusionRule.value
+			) {
+				// Filter out specific values while keeping the filter
+				const filteredValues =
+					filter.values?.filter((value) => value !== exclusionRule.value) || [];
+				if (filteredValues.length > 0) {
+					acc.push({ ...filter, values: filteredValues });
+				}
+			}
+
+			return acc;
+		},
+		[],
+	);
+
+	return filteredResults;
 };
 
 export const filtersOptions = (args: UseFiltersArgs, config: SdkConfig) => {

package/src/react/hooks/useGenerateBuyTransaction.tsx

@@ -1,4 +1,4 @@
-import { queryOptions, useQuery } from '@tanstack/react-query';
+import { queryOptions, skipToken, useQuery } from '@tanstack/react-query';
 import type { Hex } from 'viem';
 import { useAccount } from 'wagmi';
 import { z } from 'zod';
@@ -64,8 +64,16 @@ export const useGenerateBuyTransaction = (
 ) => {
 	const { address } = useAccount();
 	const config = useConfig();
-	return useQuery(
-		// biome-ignore lint/style/noNonNullAssertion: <explanation>
-		generateBuyTransactionOptions({ buyer: address!, ...args }, config),
-	);
+
+	return useQuery({
+		queryKey: ['generateBuyTransaction', args],
+		queryFn: address
+			? () => {
+					return fetchGenerateBuyTransaction(
+						{ buyer: address, ...args },
+						config,
+					);
+				}
+			: skipToken,
+	});
 };

package/src/react/hooks/useListCollectibleActivities.tsx

@@ -46,6 +46,7 @@ export const listCollectibleActivitiesOptions = (
 	return queryOptions({
 		queryKey: [...collectableKeys.collectibleActivities, args, config],
 		queryFn: () => fetchCollectibleActivities(args, config),
+		enabled: args.query?.enabled ?? true,
 	});
 };
 

package/src/react/hooks/useListCollectibles.tsx

@@ -57,6 +57,7 @@ export const listCollectiblesOptions = (
 		initialPageParam: { page: 1, pageSize: 30 },
 		getNextPageParam: (lastPage) =>
 			lastPage.page?.more ? lastPage.page : undefined,
+		enabled: args.query?.enabled ?? true,
 	});
 };
 

package/src/react/hooks/useListCollectionActivities.tsx

@@ -46,6 +46,7 @@ export const listCollectionActivitiesOptions = (
 	return queryOptions({
 		queryKey: [...collectionKeys.collectionActivities, args, config],
 		queryFn: () => fetchListCollectionActivities(args, config),
+		enabled: args.query?.enabled ?? true,
 	});
 };
 

package/src/react/hooks/useListCollections.tsx

@@ -38,11 +38,11 @@ const fetchListCollections = async (
 	const collectionsByChain = marketplaceConfig.collections.reduce<
 		Record<string, string[]>
 	>((acc, curr) => {
-		const { chainId, collectionAddress } = curr;
+		const { chainId, address } = curr;
 		if (!acc[chainId]) {
 			acc[chainId] = [];
 		}
-		acc[chainId].push(collectionAddress);
+		acc[chainId].push(address);
 		return acc;
 	}, {});
 

package/src/react/ui/components/_internals/custom-select/__tests__/CustomSelect.test.tsx

@@ -1,7 +1,11 @@
-import '@testing-library/jest-dom/vitest';
-import { render, screen, cleanup, fireEvent } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { CustomSelect, type SelectItem } from '../CustomSelect';
+import {
+	cleanup,
+	render,
+	screen,
+	fireEvent,
+} from '../../../../../_internal/test-utils';
 
 describe('CustomSelect', () => {
 	const mockItems: SelectItem[] = [

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

@@ -95,7 +95,7 @@ export function CollectibleCard({
 	onCannotPerformAction,
 }: CollectibleCardProps) {
 	const collectibleMetadata = lowestListing?.metadata;
-	const highestOffer = lowestListing?.offer
+	const highestOffer = lowestListing?.offer;
 	const [imageLoadingError, setImageLoadingError] = useState(false);
 
 	const { data: lowestListingCurrency } = useCurrency({

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

@@ -4,6 +4,14 @@ import { ContractType, type Currency, type Order } from '../../../_internal';
 import SvgBellIcon from '../../icons/Bell';
 import { footer, offerBellButton } from './styles.css';
 
+const formatPrice = (amount: string, currency: Currency): string => {
+	const formattedPrice = formatUnits(BigInt(amount), currency.decimals);
+	const numericPrice = Number.parseFloat(formattedPrice);
+	return numericPrice < 0.0001
+		? `< 0.0001 ${currency.symbol}`
+		: `${formattedPrice} ${currency.symbol}`;
+};
+
 type FooterProps = {
 	name: string;
 	type?: ContractType;
@@ -91,11 +99,7 @@ export const Footer = ({
 					fontFamily="body"
 				>
 					{listed &&
-						`${formatUnits(
-							BigInt(lowestListingPriceAmount),
-							lowestListingCurrency.decimals,
-						)} ${lowestListingCurrency.symbol}`}
-
+						formatPrice(lowestListingPriceAmount, lowestListingCurrency)}
 					{!listed && 'Not listed yet'}
 				</Text>
 			</Box>

package/src/react/ui/modals/BuyModal/Modal.tsx

@@ -1,14 +1,14 @@
 import { use$ } from '@legendapp/state/react';
 import type { Hex } from 'viem';
 import { ContractType, type TokenMetadata } from '../../../_internal';
-import { buyModal$ } from './store';
+import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
 import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
+import { useBuyCollectable } from './hooks/useBuyCollectable';
+import { useLoadData } from './hooks/useLoadData';
 import { CheckoutModal } from './modals/CheckoutModal';
 import type { BuyInput } from './modals/CheckoutModal';
 import { ERC1155QuantityModal } from './modals/Modal1155';
-import { useLoadData } from './hooks/useLoadData';
-import { useBuyCollectable } from './hooks/useBuyCollectable';
-import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
+import { buyModal$ } from './store';
 
 export const BuyModal = () => {
 	const isOpen = use$(buyModal$.isOpen);
@@ -57,6 +57,7 @@ const BuyModalContent = () => {
 	const buyAction = (input: BuyInput) => {
 		if (buy && checkoutOptions) {
 			buy({ ...input, checkoutOptions });
+			buyModal$.state.purchaseProcessing.set(true);
 		} else {
 			console.error('buy is null or undefined');
 		}
@@ -91,6 +92,10 @@ const BuyModalContent = () => {
 		);
 	}
 
+	if (buyModal$.state.purchaseProcessing.get()) {
+		return null;
+	}
+
 	return collection.type === ContractType.ERC721 ? (
 		<CheckoutModal
 			buy={buyAction}

package/src/react/ui/modals/BuyModal/__tests__/Modal.test.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom/vitest';
 import {
 	render,
 	screen,

package/src/react/ui/modals/BuyModal/__tests__/store.test.ts

@@ -1,6 +1,6 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { buyModal$, initialState } from '../store';
+import { beforeEach, describe, expect, it } from 'vitest';
 import type { Order } from '../../../../_internal';
+import { buyModal$, initialState } from '../store';
 
 describe('BuyModal Store', () => {
 	beforeEach(() => {
@@ -15,6 +15,7 @@ describe('BuyModal Store', () => {
 			invalidQuantity: false,
 			checkoutModalIsLoading: false,
 			checkoutModalLoaded: false,
+			purchaseProcessing: false,
 		});
 		expect(buyModal$.callbacks.get()).toBeUndefined();
 	});
@@ -44,6 +45,7 @@ describe('BuyModal Store', () => {
 			invalidQuantity: false,
 			checkoutModalIsLoading: false,
 			checkoutModalLoaded: false,
+			purchaseProcessing: false,
 		});
 		expect(buyModal$.callbacks.get()).toBe(mockCallbacks);
 	});

package/src/react/ui/modals/BuyModal/hooks/__tests__/useBuyCollectable.test.tsx

@@ -10,7 +10,6 @@ import {
 	TransactionCrypto,
 	WalletKind,
 	getMarketplaceClient,
-	collectableKeys,
 } from '../../../../../_internal';
 
 // Mock dependencies
@@ -38,18 +37,6 @@ vi.mock('../store', () => ({
 	},
 }));
 
-// Mock react-query
-const mockInvalidateQueries = vi.fn();
-vi.mock('@tanstack/react-query', async () => {
-	const actual = await vi.importActual('@tanstack/react-query');
-	return {
-		...actual,
-		getQueryClient: () => ({
-			invalidateQueries: mockInvalidateQueries,
-		}),
-	};
-});
-
 vi.mock('../../../../../_internal', async () => {
 	const actual = (await vi.importActual('../../../../../_internal')) as Record<
 		string,
@@ -78,9 +65,6 @@ vi.mock('../../../../../_internal', async () => {
 		balanceQueries: {
 			all: ['balances'],
 		},
-		getQueryClient: () => ({
-			invalidateQueries: mockInvalidateQueries,
-		}),
 	};
 });
 
@@ -270,7 +254,7 @@ describe('useBuyCollectable', () => {
 		expect(defaultProps.setCheckoutModalLoaded).toHaveBeenCalledWith(true);
 	});
 
-	it('should handle success callback and invalidate queries', async () => {
+	it('should handle success callback', async () => {
 		(useWallet as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
 			wallet: {
 				kind: WalletKind.sequence,
@@ -338,13 +322,6 @@ describe('useBuyCollectable', () => {
 		const txHash = '0x789';
 		await onSuccessCallback(txHash);
 
-		expect(mockInvalidateQueries).toHaveBeenCalledWith({
-			queryKey: collectableKeys.listings,
-		});
-		expect(mockInvalidateQueries).toHaveBeenCalledWith({
-			queryKey: collectableKeys.listingsCount,
-		});
-
 		expect(onSuccessMock).toHaveBeenCalledWith({ hash: txHash });
 	});