@0xsequence/marketplace-sdk 0.4.6 → 0.4.8

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/provider.tsx

@@ -6,6 +6,7 @@ import '@0xsequence/design-system/styles.css';
 import type { SdkConfig } from '../types';
 import { PROVIDER_ID } from './_internal/get-provider';
 import { getQueryClient } from './_internal/api/get-query-client';
+import { InvalidProjectAccessKeyError } from '../utils/_internal/error/config';
 
 export const MarketplaceSdkContext = createContext({} as SdkConfig);
 
@@ -29,6 +30,10 @@ export function MarketplaceProvider({
 	config,
 	children,
 }: MarketplaceSdkProviderProps) {
+	if (config.projectAccessKey === '' || !config.projectAccessKey) {
+		throw new InvalidProjectAccessKeyError(config.projectAccessKey);
+	}
+
 	return (
 		<MarketplaceQueryClientProvider>
 			<MarketplaceSdkContext.Provider value={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/CollectibleCard.tsx

@@ -10,8 +10,7 @@ import type {
 	Order,
 	OrderbookKind,
 } from '../../../_internal';
-import { useCurrencies, useHighestOffer } from '../../../hooks';
-import { useCurrencyOptions } from '../../../hooks/useCurrencyOptions';
+import { useCurrency, useHighestOffer } from '../../../hooks';
 import SvgDiamondEyeIcon from '../../icons/DiamondEye';
 import ChessTileImage from '../../images/chess-tile.png';
 import { ActionButton } from '../_internals/action-button/ActionButton';
@@ -88,12 +87,14 @@ export function CollectibleCard({
 			tokenId: collectibleId,
 		});
 
-	const currencyOptions = useCurrencyOptions({ collectionAddress });
-	const { data: currencies } = useCurrencies({ chainId, currencyOptions });
-	const lowestListingCurrency = currencies?.find(
-		(currency) =>
-			currency.contractAddress === lowestListing?.order?.priceCurrencyAddress,
-	);
+	const { data: lowestListingCurrency } = useCurrency({
+		chainId,
+		// biome-ignore lint/style/noNonNullAssertion: <explanation>
+		currencyAddress: lowestListing?.order?.priceCurrencyAddress!,
+		query: {
+			enabled: !!lowestListing?.order?.priceCurrencyAddress,
+		},
+	});
 	if (highestOfferLoading || cardLoading) {
 		return <CollectibleSkeleton />;
 	}

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

@@ -111,7 +111,10 @@ export const Footer = ({
 const TokenTypeBalancePill = ({
 	balance,
 	type,
-}: { balance?: string; type: ContractType }) => {
+}: {
+	balance?: string;
+	type: ContractType;
+}) => {
 	const displayText =
 		type === ContractType.ERC1155
 			? balance

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',
+);

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

@@ -1,9 +1,10 @@
 import { use$ } from '@legendapp/state/react';
 import type { Hex } from 'viem';
-import { ContractType, TokenMetadata } from '../../../_internal';
+import { ContractType, type TokenMetadata } from '../../../_internal';
 import { buyModal$ } from './store';
 import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
 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';
@@ -27,6 +28,7 @@ const BuyModalContent = () => {
 	const callbacks = use$(buyModal$.callbacks);
 	const order = use$(buyModal$.state.order);
 	const isOpen = use$(buyModal$.isOpen);
+	const checkoutModalIsLoading = use$(buyModal$.state.checkoutModalIsLoading);
 	const setCheckoutModalIsLoading = use$(buyModal$.setCheckoutModalIsLoading);
 	const setCheckoutModalLoaded = use$(buyModal$.setCheckoutModalLoaded);
 
@@ -53,8 +55,17 @@ const BuyModalContent = () => {
 		setCheckoutModalLoaded,
 	});
 
+	const buyAction = (input: BuyInput) => {
+		if (buy && checkoutOptions) {
+			buy({ ...input, checkoutOptions });
+		} else {
+			console.error('buy is null or undefined');
+		}
+	};
+
 	if (
 		isLoading ||
+		checkoutModalIsLoading ||
 		!collection ||
 		!collectable ||
 		!checkoutOptions ||
@@ -84,13 +95,13 @@ const BuyModalContent = () => {
 	return collection.type === ContractType.ERC721 ? (
 		<CheckoutModal
 			key={modalId}
-			buy={(input) => buy({ ...input, checkoutOptions })}
+			buy={buyAction}
 			collectable={collectable as TokenMetadata}
 			order={order}
 		/>
 	) : (
 		<ERC1155QuantityModal
-			buy={(input) => buy({ ...input, checkoutOptions })}
+			buy={buyAction}
 			collectable={collectable as TokenMetadata}
 			order={order}
 			chainId={chainId}

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

@@ -77,6 +77,7 @@ export const useBuyCollectable = ({
 		isLoading,
 		isError,
 		buy: async (input) => {
+			setCheckoutModalIsLoading(true);
 			const { steps } = await marketplaceClient.generateBuyTransaction({
 				collectionAddress,
 				buyer: await wallet.address(),

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

@@ -5,6 +5,7 @@ import type {
 	MarketplaceKind,
 	TokenMetadata,
 } from '../../../../_internal/api/marketplace.gen';
+import { buyModal$ } from '../store';
 
 export interface BuyInput {
 	orderId: string;
@@ -22,6 +23,12 @@ export interface CheckoutModalProps {
 export function CheckoutModal({ buy, collectable, order }: CheckoutModalProps) {
 	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
+		if (
+			buyModal$.state.checkoutModalIsLoading.get() ||
+			buyModal$.state.checkoutModalLoaded.get()
+		)
+			return;
+
 		const executeBuy = () => {
 			buy({
 				orderId: order.orderId,

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

@@ -2,7 +2,7 @@ import { Box } from '@0xsequence/design-system';
 import { Show, observer } from '@legendapp/state/react';
 import { parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
-import { type ContractType } from '../../../_internal';
+import type { ContractType } from '../../../_internal';
 import {
 	useBalanceOfCollectible,
 	useCollectible,
@@ -131,6 +131,7 @@ const Modal = observer(() => {
 			label: 'List item for sale',
 			onClick: () => createListing(),
 			pending: steps$?.transaction.isExecuting.get(),
+			testid: 'create-listing-submit-button',
 			disabled:
 				steps$.approval.exist.get() ||
 				tokenApprovalIsLoading ||