@0xsequence/marketplace-sdk 0.4.6 → 0.4.7

package/src/react/hooks/options/__tests__/marketplaceConfigOptions.test.tsx

@@ -0,0 +1,144 @@
+import { describe, it, expect, beforeAll, afterAll, afterEach } from 'vitest';
+import { setupServer } from 'msw/node';
+import { marketplaceConfigOptions } from '../marketplaceConfigOptions';
+import { renderHook, waitFor } from '../../../_internal/test-utils';
+import type { QueryFunctionContext } from '@tanstack/react-query';
+import {
+	handlers,
+	createErrorHandler,
+	createStylesErrorHandler,
+	mockConfig,
+	mockStyles,
+} from '../__mocks__/marketplaceConfig.msw';
+
+type MarketplaceConfigQueryKey = ['configs', 'marketplace', string, string];
+type MarketplaceConfigContext = QueryFunctionContext<MarketplaceConfigQueryKey>;
+
+// Create MSW server with default handlers
+const server = setupServer(...handlers);
+
+// Setup test environment
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+describe('marketplaceConfigOptions', () => {
+	it('should fetch marketplace config and styles successfully', async () => {
+		const { result } = renderHook(() =>
+			marketplaceConfigOptions({
+				projectId: 'test-project',
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.queryKey).toEqual([
+				'configs',
+				'marketplace',
+				'production',
+				'test-project',
+			]);
+			expect(result.current.queryFn).toBeDefined();
+		});
+
+		const data = await result.current.queryFn?.({
+			queryKey: ['configs', 'marketplace', 'production', 'test-project'],
+		} as MarketplaceConfigContext);
+		expect(data).toEqual({
+			...mockConfig,
+			cssString: mockStyles.replaceAll(/['"]/g, ''),
+			manifestUrl: expect.stringContaining('/manifest.json'),
+		});
+	});
+
+	it('should use custom environment and dev access key when provided', async () => {
+		const { result } = renderHook(() =>
+			marketplaceConfigOptions({
+				projectId: 'test-project',
+				_internal: {
+					builderEnv: 'development',
+					devAccessKey: 'test-dev-access-key',
+				},
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.queryKey).toEqual([
+				'configs',
+				'marketplace',
+				'development',
+				'test-project',
+			]);
+			expect(result.current.queryFn).toBeDefined();
+		});
+
+		const data = await result.current.queryFn?.({
+			queryKey: ['configs', 'marketplace', 'development', 'test-project'],
+		} as MarketplaceConfigContext);
+		expect(data).toEqual({
+			...mockConfig,
+			cssString: mockStyles.replaceAll(/['"]/g, ''),
+			manifestUrl: expect.stringContaining('/manifest.json'),
+		});
+	});
+
+	it('should handle error responses', async () => {
+		// Override handler to return an error
+		server.use(createErrorHandler());
+
+		const { result } = renderHook(() =>
+			marketplaceConfigOptions({
+				projectId: 'non-existent-project',
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.queryKey).toEqual([
+				'configs',
+				'marketplace',
+				'production',
+				'non-existent-project',
+			]);
+			expect(result.current.queryFn).toBeDefined();
+		});
+
+		await expect(
+			result.current.queryFn?.({
+				queryKey: [
+					'configs',
+					'marketplace',
+					'production',
+					'non-existent-project',
+				],
+			} as MarketplaceConfigContext),
+		).rejects.toThrow('Project not found');
+	});
+
+	it('should handle network errors when fetching styles', async () => {
+		server.use(createStylesErrorHandler());
+
+		const { result } = renderHook(() =>
+			marketplaceConfigOptions({
+				projectId: 'test-project',
+			}),
+		);
+
+		await waitFor(() => {
+			expect(result.current.queryKey).toEqual([
+				'configs',
+				'marketplace',
+				'production',
+				'test-project',
+			]);
+			expect(result.current.queryFn).toBeDefined();
+		});
+
+		const data = await result.current.queryFn?.({
+			queryKey: ['configs', 'marketplace', 'production', 'test-project'],
+		} as MarketplaceConfigContext);
+		expect(data).toEqual({
+			...mockConfig,
+			cssString: '',
+			manifestUrl: expect.stringContaining('/manifest.json'),
+		});
+	});
+});

package/src/react/hooks/useCancelOrder.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useCancelTransactionSteps } from './useCancelTransactionSteps';
-import { MarketplaceKind } from '../../types';
+import type { MarketplaceKind } from '../../types';
 
 interface UseCancelOrderArgs {
 	collectionAddress: string;

package/src/react/hooks/useCancelTransactionSteps.tsx

@@ -2,17 +2,17 @@ import {
 	ExecuteType,
 	getMarketplaceClient,
 	getQueryClient,
-	MarketplaceKind,
-	Step,
+	type MarketplaceKind,
+	type Step,
 	StepType,
 } from '../_internal';
 import { useWallet } from '../_internal/wallet/useWallet';
-import { ModalCallbacks } from '../ui/modals/_internal/types';
+import type { ModalCallbacks } from '../ui/modals/_internal/types';
 import { useConfig } from './useConfig';
 import { useGenerateCancelTransaction } from './useGenerateCancelTransaction';
-import { TransactionStep } from './useCancelOrder';
-import { SignatureStep } from '../_internal/utils';
-import { Hex } from 'viem';
+import type { TransactionStep } from './useCancelOrder';
+import type { SignatureStep } from '../_internal/utils';
+import type { Hex } from 'viem';
 import { useSwitchChainModal } from '../ui/modals/_internal/components/switchChainModal';
 import {
 	ChainSwitchUserRejectedError,

package/src/react/hooks/useCurrencies.tsx

@@ -52,11 +52,8 @@ const selectCurrencies = (data: Currency[], args: UseCurrenciesArgs) => {
 			option.toLowerCase(),
 		);
 
-		filteredData = filteredData.filter(
-			(currency) =>
-				lowerCaseCurrencyOptions.includes(
-					currency.contractAddress.toLowerCase(),
-				)
+		filteredData = filteredData.filter((currency) =>
+			lowerCaseCurrencyOptions.includes(currency.contractAddress.toLowerCase()),
 		);
 	}
 	return filteredData;

package/src/react/hooks/useCurrency.tsx

@@ -44,10 +44,19 @@ const fetchCurrency = async (
 			.then((resp) => resp.currencies);
 	}
 
-	return currencies?.find(
+	if (!currencies?.length) {
+		throw new Error('No currencies returned');
+	}
+	const currency = currencies.find(
 		(currency) =>
 			currency.contractAddress.toLowerCase() === currencyAddress.toLowerCase(),
 	);
+
+	if (!currency) {
+		throw new Error('Currency not found');
+	}
+
+	return currency;
 };
 
 export const currencyOptions = (args: UseCurrencyArgs, config: SdkConfig) => {

package/src/react/hooks/useCurrencyBalance.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { skipToken, useQuery } from '@tanstack/react-query';
 import { type Address, erc20Abi, formatUnits, zeroAddress } from 'viem';
 import { getPublicRpcClient } from '../../utils';
 
@@ -7,46 +7,48 @@ export function useCurrencyBalance({
 	chainId,
 	userAddress,
 }: {
-	currencyAddress: Address;
-	chainId: number;
-	userAddress: Address;
+	currencyAddress: Address | undefined;
+	chainId: number | undefined;
+	userAddress: Address | undefined;
 }) {
-	const publicClient = getPublicRpcClient(chainId);
-
 	return useQuery({
 		queryKey: ['balance', currencyAddress, chainId, userAddress],
-		queryFn: async () => {
-			if (!userAddress) return null;
+		queryFn:
+			!!userAddress && !!chainId && !!currencyAddress
+				? async () => {
+						if (!userAddress) return null;
+
+						const publicClient = getPublicRpcClient(chainId);
 
-			if (currencyAddress === zeroAddress) {
-				const balance = await publicClient.getBalance({
-					address: userAddress,
-				});
-				return {
-					value: balance,
-					formatted: formatUnits(balance, 18),
-				};
-			}
+						if (currencyAddress === zeroAddress) {
+							const balance = await publicClient.getBalance({
+								address: userAddress,
+							});
+							return {
+								value: balance,
+								formatted: formatUnits(balance, 18),
+							};
+						}
 
-			const [balance, decimals] = await Promise.all([
-				publicClient.readContract({
-					address: currencyAddress,
-					abi: erc20Abi,
-					functionName: 'balanceOf',
-					args: [userAddress],
-				}),
-				publicClient.readContract({
-					address: currencyAddress,
-					abi: erc20Abi,
-					functionName: 'decimals',
-				}),
-			]);
+						const [balance, decimals] = await Promise.all([
+							publicClient.readContract({
+								address: currencyAddress,
+								abi: erc20Abi,
+								functionName: 'balanceOf',
+								args: [userAddress],
+							}),
+							publicClient.readContract({
+								address: currencyAddress,
+								abi: erc20Abi,
+								functionName: 'decimals',
+							}),
+						]);
 
-			return {
-				value: balance,
-				formatted: formatUnits(balance, decimals),
-			};
-		},
-		enabled: !!userAddress && !!chainId && !!currencyAddress,
+						return {
+							value: balance,
+							formatted: formatUnits(balance, decimals),
+						};
+					}
+				: skipToken,
 	});
 }

package/src/react/hooks/useGetReceiptFromHash.tsx

@@ -1,4 +1,4 @@
-import { Hex } from 'viem';
+import type { Hex } from 'viem';
 import { usePublicClient } from 'wagmi';
 import { useCallback } from 'react';
 

package/src/react/hooks/useListCollectibleActivities.tsx

@@ -0,0 +1,57 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { z } from 'zod';
+import type { SdkConfig } from '../../types';
+import { collectableKeys, getMarketplaceClient } from '../_internal';
+import { useConfig } from './useConfig';
+import type {
+	getListCollectibleActivitiesArgsSchema,
+	getListCollectibleActivitiesReturnSchema,
+} from '../_internal/api/zod-schema';
+
+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),
+	});
+};
+
+export const useListCollectibleActivities = (
+	args: UseListCollectibleActivitiesArgs,
+) => {
+	const config = useConfig();
+	return useQuery(listCollectibleActivitiesOptions(args, config));
+};

package/src/react/hooks/useListCollectionActivities.tsx

@@ -0,0 +1,57 @@
+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 { useConfig } from './useConfig';
+import type {
+	getListCollectionActivitiesArgsSchema,
+	getListCollectionActivitiesReturnSchema,
+} from '../_internal/api/zod-schema';
+
+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),
+	});
+};
+
+export const useListCollectionActivities = (
+	args: UseListCollectionActivitiesArgs,
+) => {
+	const config = useConfig();
+	return useQuery(listCollectionActivitiesOptions(args, config));
+};

package/src/react/ssr/create-ssr-client.ts

@@ -2,7 +2,7 @@ import { type State, cookieToInitialState } from 'wagmi';
 import type { SdkConfig } from '../../types/sdk-config';
 import { createWagmiConfig } from '../_internal/wagmi/create-config';
 import { marketplaceConfigOptions } from '../hooks/options/marketplaceConfigOptions';
-import { QueryClient } from '@tanstack/react-query';
+import type { QueryClient } from '@tanstack/react-query';
 
 type InitSSRClientArgs = {
 	cookie: string;

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

@@ -0,0 +1,89 @@
+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';
+
+describe('CustomSelect', () => {
+	const mockItems: SelectItem[] = [
+		{ value: 'item1', content: 'Item 1' },
+		{ value: 'item2', content: 'Item 2' },
+		{ value: 'item3', content: 'Item 3', disabled: true },
+	];
+
+	const defaultValue = mockItems[0];
+
+	beforeEach(() => {
+		cleanup();
+	});
+
+	it('should render with default value', () => {
+		render(<CustomSelect items={mockItems} defaultValue={defaultValue} />);
+
+		expect(screen.getByText('Item 1')).toBeInTheDocument();
+	});
+
+	it('should open dropdown when clicked', () => {
+		render(<CustomSelect items={mockItems} defaultValue={defaultValue} />);
+
+		const trigger = screen.getByRole('combobox');
+		fireEvent.click(trigger);
+
+		expect(screen.getByText('Item 2')).toBeInTheDocument();
+		expect(screen.getByText('Item 3')).toBeInTheDocument();
+	});
+
+	it('should call onValueChange when selecting an item', () => {
+		const onValueChange = vi.fn();
+		render(
+			<CustomSelect
+				items={mockItems}
+				onValueChange={onValueChange}
+				defaultValue={defaultValue}
+			/>,
+		);
+
+		const trigger = screen.getByRole('combobox');
+		fireEvent.click(trigger);
+
+		const option = screen.getByText('Item 2');
+		fireEvent.click(option);
+
+		expect(onValueChange).toHaveBeenCalledWith('item2');
+	});
+
+	it('should not allow selection of disabled items', () => {
+		const onValueChange = vi.fn();
+		render(
+			<CustomSelect
+				items={mockItems}
+				onValueChange={onValueChange}
+				defaultValue={defaultValue}
+			/>,
+		);
+
+		const trigger = screen.getByRole('combobox');
+		fireEvent.click(trigger);
+
+		const disabledOption = screen.getByText('Item 3');
+		expect(disabledOption.parentElement).toHaveAttribute(
+			'aria-disabled',
+			'true',
+		);
+
+		fireEvent.click(disabledOption);
+		expect(onValueChange).not.toHaveBeenCalled();
+	});
+
+	it('should render custom content in items', () => {
+		const customItems: SelectItem[] = [
+			{
+				value: 'custom1',
+				content: <div data-testid="custom-content">Custom Content</div>,
+			},
+		];
+
+		render(<CustomSelect items={customItems} defaultValue={customItems[0]} />);
+
+		expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+	});
+});

package/src/react/ui/components/collectible-card/index.ts

@@ -0,0 +1 @@
+export * from './CollectibleCard';

package/src/react/ui/components/marketplace-logos/index.ts

@@ -0,0 +1,23 @@
+// Marketplace Logos
+export {
+	AlienSwapLogo,
+	AquaXyzLogo,
+	AuraLogo,
+	BlurLogo,
+	CoinbaseLogo,
+	ElementLogo,
+	FoundationLogo,
+	LooksRareLogo,
+	MagicEdenLogo,
+	ManifoldLogo,
+	MintifyLogo,
+	NftxLogo,
+	OkxLogo,
+	OpenSeaLogo,
+	RaribleLogo,
+	SequenceLogo,
+	SudoSwapLogo,
+	SuperRareLogo,
+	X2y2Logo,
+	ZoraLogo,
+} from './marketplace-logos';

package/src/react/ui/components/marketplace-logos/marketplace-logos.tsx

@@ -0,0 +1,111 @@
+import { type ComponentProps, lazy, Suspense } from 'react';
+import { Image } from '@0xsequence/design-system';
+
+/* @__PURE__ */
+const createMarketplaceLogo = (
+	importFn: () => Promise<{ default: string }>,
+	alt: string,
+) => {
+	const LazyLogo = lazy(async () => {
+		const src = await importFn();
+		return {
+			default: function MarketplaceLogo({
+				alt: altProp,
+				...props
+			}: ComponentProps<typeof Image>) {
+				return <Image src={src.default} alt={altProp || alt} {...props} />;
+			},
+		};
+	});
+
+	return function MarketplaceLogo(props: ComponentProps<typeof Image>) {
+		return (
+			<Suspense
+				fallback={<div style={{ width: props.width, height: props.height }} />}
+			>
+				<LazyLogo {...props} />
+			</Suspense>
+		);
+	};
+};
+
+export const AlienSwapLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/alien_swap.png'),
+	'AlienSwap Logo',
+);
+export const AquaXyzLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/aqua-xyz.png'),
+	'AquaXyz Logo',
+);
+export const AuraLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/aura.png'),
+	'Aura Logo',
+);
+export const BlurLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/blur.png'),
+	'Blur Logo',
+);
+export const CoinbaseLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/coinbase.png'),
+	'Coinbase Logo',
+);
+export const ElementLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/element.png'),
+	'Element Logo',
+);
+export const FoundationLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/foundation.png'),
+	'Foundation Logo',
+);
+export const LooksRareLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/looks-rare.png'),
+	'LooksRare Logo',
+);
+export const MagicEdenLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/magic-eden.png'),
+	'MagicEden Logo',
+);
+export const ManifoldLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/manifold.png'),
+	'Manifold Logo',
+);
+export const MintifyLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/mintify.png'),
+	'Mintify Logo',
+);
+export const NftxLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/nftx.png'),
+	'NFTX Logo',
+);
+export const OkxLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/okx.png'),
+	'OKX Logo',
+);
+export const OpenSeaLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/open-sea.png'),
+	'OpenSea Logo',
+);
+export const RaribleLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/rarible.png'),
+	'Rarible Logo',
+);
+export const SequenceLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/sequence.png'),
+	'Sequence Logo',
+);
+export const SudoSwapLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/sudo-swap.png'),
+	'SudoSwap Logo',
+);
+export const SuperRareLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/super-rare.png'),
+	'SuperRare Logo',
+);
+export const X2y2Logo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/x2y2.png'),
+	'X2Y2 Logo',
+);
+export const ZoraLogo = createMarketplaceLogo(
+	() => import('../../images/marketplaces/zora.png'),
+	'Zora Logo',
+);