@0xsequence/marketplace-sdk 0.5.6 → 0.6.0

package/src/react/hooks/useRoyaltyPercentage.tsx

@@ -1,9 +1,9 @@
-import { queryOptions, useQuery } from '@tanstack/react-query';
-import type { Hex } from 'viem';
+import { queryOptions, skipToken, useQuery } from '@tanstack/react-query';
+import type { Hex, PublicClient } from 'viem';
 import { getContract } from 'viem';
+import { usePublicClient } from 'wagmi';
 import { z } from 'zod';
 import { EIP2981_ABI } from '../../utils';
-import { getPublicRpcClient } from '../../utils/get-public-rpc-client';
 import {
 	AddressSchema,
 	ChainIdSchema,
@@ -20,9 +20,11 @@ const UseRoyaletyPercentageSchema = z.object({
 
 type UseRoyaletyPercentageArgs = z.infer<typeof UseRoyaletyPercentageSchema>;
 
-const fetchRoyaletyPercentage = async (args: UseRoyaletyPercentageArgs) => {
+const fetchRoyaletyPercentage = async (
+	args: UseRoyaletyPercentageArgs,
+	publicClient: PublicClient,
+) => {
 	const parsedArgs = UseRoyaletyPercentageSchema.parse(args);
-	const publicClient = getPublicRpcClient(parsedArgs.chainId);
 
 	const contract = getContract({
 		address: parsedArgs.collectionAddress as Hex,
@@ -43,13 +45,19 @@ const fetchRoyaletyPercentage = async (args: UseRoyaletyPercentageArgs) => {
 	}
 };
 
-export const royaletyPercentageOptions = (args: UseRoyaletyPercentageArgs) =>
+export const royaletyPercentageOptions = (
+	args: UseRoyaletyPercentageArgs,
+	publicClient?: PublicClient,
+) =>
 	queryOptions({
 		...args.query,
 		queryKey: [...collectableKeys.royaltyPercentage, args],
-		queryFn: () => fetchRoyaletyPercentage(args),
+		queryFn: publicClient
+			? () => fetchRoyaletyPercentage(args, publicClient)
+			: skipToken,
 	});
 
 export const useRoyaltyPercentage = (args: UseRoyaletyPercentageArgs) => {
-	return useQuery(royaletyPercentageOptions(args));
+	const publicClient = usePublicClient({ chainId: Number(args.chainId) });
+	return useQuery(royaletyPercentageOptions(args, publicClient));
 };

package/src/react/index.ts

@@ -1,5 +1,6 @@
 export * from './provider';
 export * from './hooks';
+export * from './hooks/options';
 export * from './_internal/api/get-query-client';
 export * from './_internal/wagmi/create-config';
 export * from './ui/index';

package/src/react/provider.tsx

@@ -4,9 +4,9 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { createContext } from 'react';
 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';
+import { getQueryClient } from './_internal/api/get-query-client';
+import { PROVIDER_ID } from './_internal/get-provider';
 
 export const MarketplaceSdkContext = createContext({} as SdkConfig);
 

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

@@ -0,0 +1,97 @@
+import { QueryClient } from '@tanstack/react-query';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { SdkConfig } from '../../../types';
+import { mockConfig } from '../../hooks/options/__mocks__/marketplaceConfig.msw';
+import { createSSRClient } from '../create-ssr-client';
+
+vi.mock('wagmi', () => ({
+	cookieToInitialState: vi.fn().mockReturnValue({
+		data: { account: { address: '0x123' } },
+	}),
+}));
+
+describe('createSSRClient', () => {
+	let queryClient: QueryClient;
+	let config: SdkConfig;
+
+	beforeEach(() => {
+		// Reset QueryClient
+		queryClient = new QueryClient({
+			defaultOptions: {
+				queries: {
+					retry: false,
+				},
+			},
+		});
+
+		// Setup basic config
+		config = {
+			projectId: 'test-project',
+			projectAccessKey: 'test-key',
+			_internal: {
+				builderEnv: 'production',
+			},
+		};
+	});
+
+	it('should create SSR client with proper methods', () => {
+		const client = createSSRClient({
+			cookie: 'test-cookie',
+			config,
+			queryClient,
+		});
+
+		expect(client).toHaveProperty('getInitialState');
+		expect(client).toHaveProperty('getMarketplaceConfig');
+		expect(client).toHaveProperty('config');
+		expect(typeof client.getInitialState).toBe('function');
+		expect(typeof client.getMarketplaceConfig).toBe('function');
+	});
+
+	it('should fetch marketplace config successfully', async () => {
+		const client = createSSRClient({
+			cookie: 'test-cookie',
+			config,
+			queryClient,
+		});
+
+		const marketplaceConfig = await client.getMarketplaceConfig();
+
+		expect(marketplaceConfig).toBeDefined();
+		expect(marketplaceConfig).toMatchObject({
+			publisherId: mockConfig.publisherId,
+			title: mockConfig.title,
+			collections: expect.arrayContaining([
+				expect.objectContaining({
+					address: expect.any(String),
+					chainId: expect.any(Number),
+				}),
+			]),
+		});
+	});
+
+	it('should get initial state with wagmi configuration', async () => {
+		const client = createSSRClient({
+			cookie: 'test-cookie',
+			config,
+			queryClient,
+		});
+
+		const state = await client.getInitialState();
+
+		expect(state).toHaveProperty('wagmi');
+		expect(state.wagmi).toEqual({
+			data: { account: { address: '0x123' } },
+		});
+	});
+
+	it('should preserve provided config in the client', () => {
+		const client = createSSRClient({
+			cookie: 'test-cookie',
+			config,
+			queryClient,
+		});
+
+		expect(client.config).toEqual(config);
+	});
+});

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

@@ -1,8 +1,8 @@
+import type { QueryClient } from '@tanstack/react-query';
 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 type { QueryClient } from '@tanstack/react-query';
 
 type InitSSRClientArgs = {
 	cookie: string;

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

@@ -3,10 +3,10 @@
 import { observer } from '@legendapp/state/react';
 import type { Hex } from 'viem';
 import type { Order, OrderbookKind } from '../../../../_internal';
-import type { CollectibleCardAction } from './types';
-import { useActionButtonLogic } from './hooks/useActionButtonLogic';
-import { OwnerActions } from './components/OwnerActions';
 import { NonOwnerActions } from './components/NonOwnerActions';
+import { OwnerActions } from './components/OwnerActions';
+import { useActionButtonLogic } from './hooks/useActionButtonLogic';
+import type { CollectibleCardAction } from './types';
 
 type ActionButtonProps = {
 	chainId: string;

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

@@ -1,9 +1,9 @@
 import { Button } from '@0xsequence/design-system';
-import { useAccount } from 'wagmi';
 import { useOpenConnectModal } from '@0xsequence/kit';
-import type { CollectibleCardAction } from '../types';
+import { useAccount } from 'wagmi';
 import { setPendingAction } from '../store';
 import { actionButton } from '../styles.css';
+import type { CollectibleCardAction } from '../types';
 
 type ActionButtonBodyProps = {
 	label: 'Buy now' | 'Sell' | 'Make an offer' | 'Create listing' | 'Transfer';

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

@@ -1,11 +1,11 @@
 import type { Hex } from 'viem';
+import { InvalidStepError } from '../../../../../../utils/_internal/error/transaction';
 import type { Order, OrderbookKind } from '../../../../../_internal';
-import { CollectibleCardAction } from '../types';
-import { ActionButtonBody } from './ActionButtonBody';
+import SvgCartIcon from '../../../../icons/CartIcon';
 import { useBuyModal } from '../../../../modals/BuyModal';
 import { useMakeOfferModal } from '../../../../modals/MakeOfferModal';
-import { InvalidStepError } from '../../../../../../utils/_internal/error/transaction';
-import SvgCartIcon from '../../../../icons/CartIcon';
+import { CollectibleCardAction } from '../types';
+import { ActionButtonBody } from './ActionButtonBody';
 
 type NonOwnerActionsProps = {
 	action: CollectibleCardAction;

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

@@ -1,10 +1,10 @@
 import type { Hex } from 'viem';
 import type { Order, OrderbookKind } from '../../../../../_internal';
-import { CollectibleCardAction } from '../types';
-import { ActionButtonBody } from './ActionButtonBody';
 import { useCreateListingModal } from '../../../../modals/CreateListingModal';
 import { useSellModal } from '../../../../modals/SellModal';
 import { useTransferModal } from '../../../../modals/TransferModal';
+import { CollectibleCardAction } from '../types';
+import { ActionButtonBody } from './ActionButtonBody';
 
 type OwnerActionsProps = {
 	action: CollectibleCardAction;

package/src/react/ui/components/_internals/action-button/hooks/useActionButtonLogic.ts

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { useAccount } from 'wagmi';
-import { CollectibleCardAction } from '../types';
 import {
 	actionButtonStore,
 	clearPendingAction,
 	executePendingActionIfExists,
 } from '../store';
+import { CollectibleCardAction } from '../types';
 
 type UseActionButtonLogicProps = {
 	tokenId: string;

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

@@ -1,11 +1,6 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@test';
+import { beforeEach, describe, expect, it, vi } 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

@@ -10,8 +10,8 @@ import type {
 	OrderbookKind,
 } from '../../../_internal';
 import { useCurrency } from '../../../hooks';
-import SvgDiamondEyeIcon from '../../icons/DiamondEye';
 import ChessTileImage from '../../images/chess-tile.png';
+import SvgDiamondEyeIcon from '../../images/marketplaces/LooksRare';
 import { ActionButton } from '../_internals/action-button/ActionButton';
 import { CollectibleCardAction } from '../_internals/action-button/types';
 import { Footer } from './Footer';
@@ -60,6 +60,7 @@ type CollectibleCardProps = {
 	lowestListing: CollectibleOrder | undefined;
 	onCollectibleClick?: (tokenId: string) => void;
 	onOfferClick?: ({ order }: { order?: Order }) => void;
+	imageSrcPrefixUrl?: string;
 	balance?: string;
 	cardLoading?: boolean;
 	/**
@@ -93,10 +94,12 @@ export function CollectibleCard({
 	balance,
 	cardLoading,
 	onCannotPerformAction,
+	imageSrcPrefixUrl,
 }: CollectibleCardProps) {
 	const collectibleMetadata = lowestListing?.metadata;
 	const highestOffer = lowestListing?.offer;
 	const [imageLoadingError, setImageLoadingError] = useState(false);
+	const [imageLoading, setImageLoading] = useState(true);
 
 	const { data: lowestListingCurrency } = useCurrency({
 		chainId,
@@ -122,6 +125,7 @@ export function CollectibleCard({
 	const name = collectibleMetadata?.name;
 	const image = collectibleMetadata?.image;
 	const externalUrl = collectibleMetadata?.external_url;
+	const proxiedImage = `${imageSrcPrefixUrl}/${image}`;
 
 	return (
 		<Box
@@ -169,12 +173,34 @@ export function CollectibleCard({
 						/>
 					)}
 
-					<img
-						src={imageLoadingError ? ChessTileImage : image || ChessTileImage}
-						alt={name}
-						className={collectibleImage}
-						onError={() => setImageLoadingError(true)}
-					/>
+					<Box position="relative">
+						{imageLoading && (
+							<Skeleton
+								position="absolute"
+								top="0"
+								left="0"
+								width="full"
+								height="full"
+								zIndex="10"
+								style={{ borderRadius: 0 }}
+							/>
+						)}
+						<img
+							src={
+								imageLoadingError
+									? ChessTileImage
+									: (imageSrcPrefixUrl ? proxiedImage : image) || ChessTileImage
+							}
+							alt={name}
+							className={
+								imageLoading
+									? collectibleImage.loading
+									: collectibleImage.loaded
+							}
+							onError={() => setImageLoadingError(true)}
+							onLoad={() => setImageLoading(false)}
+						/>
+					</Box>
 
 					<Footer
 						name={name || ''}

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

@@ -1,15 +1,41 @@
-import { Box, IconButton, Image, Text } from '@0xsequence/design-system';
+import {
+	Box,
+	ChevronLeftIcon,
+	ChevronRightIcon,
+	IconButton,
+	Image,
+	Text,
+} from '@0xsequence/design-system';
 import { formatUnits } from 'viem';
 import { ContractType, type Currency, type Order } from '../../../_internal';
-import SvgBellIcon from '../../icons/Bell';
-import { footer, offerBellButton } from './styles.css';
+import SvgBellIcon from '../../icons/BellIcon';
+import { footer, footerPriceChevron, offerBellButton } from './styles.css';
 
-const formatPrice = (amount: string, currency: Currency): string => {
+const OVERFLOW_PRICE = 100000000;
+const UNDERFLOW_PRICE = 0.0001;
+
+const formatPrice = (amount: string, currency: Currency): React.ReactNode => {
 	const formattedPrice = formatUnits(BigInt(amount), currency.decimals);
 	const numericPrice = Number.parseFloat(formattedPrice);
 
-	if (numericPrice < 0.0001) {
-		return `< 0.0001 ${currency.symbol}`;
+	if (numericPrice < UNDERFLOW_PRICE) {
+		return (
+			<Box display="flex" alignItems="center">
+				<ChevronLeftIcon className={footerPriceChevron} />
+				<Text>{`${UNDERFLOW_PRICE} ${currency.symbol}`}</Text>
+			</Box>
+		);
+	}
+
+	if (numericPrice > OVERFLOW_PRICE) {
+		return (
+			<Box display="flex" alignItems="center">
+				<ChevronRightIcon className={footerPriceChevron} />
+				<Text>{`${OVERFLOW_PRICE.toLocaleString('en-US', {
+					maximumFractionDigits: 2,
+				})} ${currency.symbol}`}</Text>
+			</Box>
+		);
 	}
 
 	const maxDecimals = numericPrice < 0.01 ? 6 : 4;
@@ -19,7 +45,13 @@ const formatPrice = (amount: string, currency: Currency): string => {
 		maximumFractionDigits: maxDecimals,
 	});
 
-	return `${formattedNumber} ${currency.symbol}`;
+	return (
+		<Box display="flex" alignItems="center" gap="1">
+			<Text>
+				{formattedNumber} {currency.symbol}
+			</Text>
+		</Box>
+	);
 };
 
 type FooterProps = {
@@ -100,7 +132,14 @@ export const Footer = ({
 
 			<Box display="flex" alignItems="center" gap="1">
 				{listed && lowestListingCurrency.imageUrl && (
-					<Image src={lowestListingCurrency.imageUrl} width="3" height="3" />
+					<Image
+						src={lowestListingCurrency.imageUrl}
+						width="3"
+						height="3"
+						onError={(e) => {
+							e.currentTarget.style.display = 'none';
+						}}
+					/>
 				)}
 
 				<Text

package/src/react/ui/components/collectible-card/styles.css.ts

@@ -1,5 +1,5 @@
 import { atoms } from '@0xsequence/design-system';
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
 export const collectibleCard = style([
 	{
@@ -37,7 +37,7 @@ export const collectibleTileWrapper = style({
 	},
 });
 
-export const collectibleImage = style({
+const collectibleImageBase = style({
 	width: '175px',
 	height: '175px',
 	objectFit: 'cover',
@@ -49,6 +49,22 @@ export const collectibleImage = style({
 	},
 });
 
+export const collectibleImage = styleVariants({
+	default: [collectibleImageBase],
+	loading: [
+		collectibleImageBase,
+		{
+			visibility: 'hidden',
+		},
+	],
+	loaded: [
+		collectibleImageBase,
+		{
+			visibility: 'visible',
+		},
+	],
+});
+
 export const offerBellButton = style({
 	width: '22px',
 	height: '22px',
@@ -56,6 +72,14 @@ export const offerBellButton = style({
 
 export const footer = style([atoms({ background: 'backgroundPrimary' })]);
 
+export const footerPriceChevron = style([
+	atoms({
+		width: '3',
+		height: '3',
+		color: 'text100',
+	}),
+]);
+
 export const actionWrapper = style([
 	atoms({
 		backdropFilter: 'blur',

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

@@ -1,5 +1,5 @@
-import { type ComponentProps, lazy, Suspense } from 'react';
 import { Image } from '@0xsequence/design-system';
+import { type ComponentProps, Suspense, lazy } from 'react';
 
 /* @__PURE__ */
 const createMarketplaceLogo = (

package/src/react/ui/icons/index.ts

@@ -1,7 +1,4 @@
+export * from './BellIcon';
 export * from './CalendarIcon';
-export * from './InventoryIcon';
-export * from './MinusIcon';
-export * from './PlusIcon';
-export * from './ArrowUp';
+export * from './CartIcon';
 export * from './InfoIcon';
-export * from './PositiveCircleIcon';

package/src/react/ui/{icons/DiamondEye.tsx → images/marketplaces/LooksRare.tsx}

@@ -1,5 +1,5 @@
 import { Box, type IconProps } from '@0xsequence/design-system';
-import { iconVariants } from './styles.css';
+import { iconVariants } from '../../icons/styles.css';
 
 const Svg = () => (
 	<svg

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

@@ -1,18 +1,13 @@
-import {
-	render,
-	screen,
-	cleanup,
-	waitFor,
-} from '../../../../_internal/test-utils';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { BuyModal } from '../Modal';
-import { buyModal$ } from '../store';
-import { useLoadData } from '../hooks/useLoadData';
-import { useBuyCollectable } from '../hooks/useBuyCollectable';
+import { cleanup, render, screen, waitFor } from '@test';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { Mock } from 'vitest';
 import type { Order } from '../../../../_internal';
 import { MarketplaceKind } from '../../../../_internal';
 import { ContractType } from '../../../../_internal';
+import { BuyModal } from '../Modal';
+import { useBuyCollectable } from '../hooks/useBuyCollectable';
+import { useLoadData } from '../hooks/useLoadData';
+import { buyModal$ } from '../store';
 
 const mockOrder = {
 	orderId: '1',
@@ -31,6 +26,10 @@ vi.mock('../hooks/useBuyCollectable', () => ({
 	useBuyCollectable: vi.fn(),
 }));
 
+vi.mock('@0xsequence/kit', () => ({
+	useWaasFeeOptions: vi.fn().mockReturnValue([]),
+}));
+
 describe('BuyModal', () => {
 	beforeEach(() => {
 		vi.clearAllMocks();