@0xsequence/marketplace-sdk 0.5.5 → 0.5.7

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

@@ -0,0 +1,118 @@
+import { QueryClient } from '@tanstack/react-query';
+import { setupServer } from 'msw/node';
+import {
+	afterAll,
+	beforeAll,
+	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';
+
+const server = setupServer();
+
+vi.mock('wagmi', () => ({
+	cookieToInitialState: vi.fn().mockReturnValue({
+		data: { account: { address: '0x123' } },
+	}),
+}));
+
+describe('createSSRClient', () => {
+	let queryClient: QueryClient;
+	let config: SdkConfig;
+
+	beforeAll(() => {
+		// Start MSW server once before all tests
+		server.listen({ onUnhandledRequest: 'error' });
+	});
+
+	afterAll(() => {
+		// Clean up after all tests are done
+		server.close();
+	});
+
+	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/ui/components/collectible-card/CollectibleCard.tsx

@@ -97,6 +97,7 @@ export function CollectibleCard({
 	const collectibleMetadata = lowestListing?.metadata;
 	const highestOffer = lowestListing?.offer;
 	const [imageLoadingError, setImageLoadingError] = useState(false);
+	const [imageLoading, setImageLoading] = useState(true);
 
 	const { data: lowestListingCurrency } = useCurrency({
 		chainId,
@@ -169,12 +170,30 @@ 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 : 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,57 @@
-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 { 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);
-	return numericPrice < 0.0001
-		? `< 0.0001 ${currency.symbol}`
-		: `${formattedPrice} ${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;
+
+	const formattedNumber = numericPrice.toLocaleString('en-US', {
+		minimumFractionDigits: 0,
+		maximumFractionDigits: maxDecimals,
+	});
+
+	return (
+		<Box display="flex" alignItems="center" gap="1">
+			<Text>
+				{formattedNumber} {currency.symbol}
+			</Text>
+		</Box>
+	);
 };
 
 type FooterProps = {
@@ -90,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/modals/BuyModal/hooks/__tests__/useCheckoutOptions.test.tsx

@@ -1,19 +1,19 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { useCheckoutOptions } from '../useCheckoutOptions';
-import { useWallet } from '../../../../../_internal/wallet/useWallet';
-import { useFees } from '../useFees';
+import { http, HttpResponse } from 'msw';
+import { zeroAddress } from 'viem';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { MarketplaceKind } from '../../../../../_internal';
+import { mockMarketplaceEndpoint } from '../../../../../_internal/api/__mocks__/marketplace.msw';
+import { TransactionCrypto } from '../../../../../_internal/api/marketplace.gen';
 import {
+	type RenderHookOptions,
 	renderHook,
 	waitFor,
-	type RenderHookOptions,
 } from '../../../../../_internal/test-utils';
-import { http, HttpResponse } from 'msw';
-import { server } from '../../../../../_internal/test/setup';
 import { createMockWallet } from '../../../../../_internal/test/mocks/wallet';
-import { mockMarketplaceEndpoint } from '../../../../../_internal/api/__mocks__/marketplace.msw';
-import { zeroAddress } from 'viem';
-import { TransactionCrypto } from '../../../../../_internal/api/marketplace.gen';
+import { server } from '../../../../../_internal/test/setup';
+import { useWallet } from '../../../../../_internal/wallet/useWallet';
+import { useCheckoutOptions } from '../useCheckoutOptions';
+import { useFees } from '../useFees';
 
 // Mock dependencies
 vi.mock('../../../../../_internal/wallet/useWallet');
@@ -47,24 +47,6 @@ describe('useCheckoutOptions', () => {
 			amount: '100000000000000000',
 			receiver: zeroAddress,
 		});
-
-		// Set up default API response
-		server.use(
-			http.post(mockMarketplaceEndpoint('CheckoutOptionsMarketplace'), () => {
-				return HttpResponse.json({
-					options: {
-						crypto: TransactionCrypto.all,
-						swap: [],
-						nftCheckout: [],
-						onRamp: [],
-					},
-				});
-			}),
-		);
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
 	});
 
 	it('should fetch checkout options successfully', async () => {

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

@@ -1,11 +1,9 @@
-import { renderHook } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { useLoadData } from '../useLoadData';
-import { useCollection, useCollectible } from '../../../../../hooks';
-import { useCheckoutOptions } from '../useCheckoutOptions';
+import { describe, expect, it, vi } from 'vitest';
 import { MarketplaceKind } from '../../../../../_internal';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import type { ReactNode } from 'react';
+import { renderHook } from '../../../../../_internal/test-utils';
+import { useCollectible, useCollection } from '../../../../../hooks';
+import { useCheckoutOptions } from '../useCheckoutOptions';
+import { useLoadData } from '../useLoadData';
 
 // Mock dependencies
 vi.mock('../../../../../hooks', () => ({
@@ -17,19 +15,6 @@ vi.mock('../useCheckoutOptions', () => ({
 	useCheckoutOptions: vi.fn(),
 }));
 
-const createWrapper = () => {
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: {
-				retry: false,
-			},
-		},
-	});
-	return ({ children }: { children: ReactNode }) => (
-		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-	);
-};
-
 describe('useLoadData', () => {
 	const defaultProps = {
 		chainId: 1,
@@ -39,10 +24,6 @@ describe('useLoadData', () => {
 		marketplace: MarketplaceKind.sequence_marketplace_v2,
 	};
 
-	beforeEach(() => {
-		vi.clearAllMocks();
-	});
-
 	it('should return loading state when any data is loading', () => {
 		// Mock one hook to be loading
 		(useCollection as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
@@ -65,9 +46,7 @@ describe('useLoadData', () => {
 			},
 		);
 
-		const { result } = renderHook(() => useLoadData(defaultProps), {
-			wrapper: createWrapper(),
-		});
+		const { result } = renderHook(() => useLoadData(defaultProps));
 
 		expect(result.current.isLoading).toBe(true);
 		expect(result.current.isError).toBe(false);
@@ -98,9 +77,7 @@ describe('useLoadData', () => {
 			},
 		);
 
-		const { result } = renderHook(() => useLoadData(defaultProps), {
-			wrapper: createWrapper(),
-		});
+		const { result } = renderHook(() => useLoadData(defaultProps));
 
 		expect(result.current.isError).toBe(true);
 		expect(result.current.isLoading).toBe(false);
@@ -136,9 +113,7 @@ describe('useLoadData', () => {
 			},
 		);
 
-		const { result } = renderHook(() => useLoadData(defaultProps), {
-			wrapper: createWrapper(),
-		});
+		const { result } = renderHook(() => useLoadData(defaultProps));
 
 		expect(result.current.isLoading).toBe(false);
 		expect(result.current.isError).toBe(false);
@@ -174,9 +149,7 @@ describe('useLoadData', () => {
 			},
 		);
 
-		const { result } = renderHook(() => useLoadData(defaultProps), {
-			wrapper: createWrapper(),
-		});
+		const { result } = renderHook(() => useLoadData(defaultProps));
 
 		// Should be loading if any data is loading
 		expect(result.current.isLoading).toBe(true);

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

@@ -1,6 +1,6 @@
 import { useSelectPaymentModal } from '@0xsequence/kit-checkout';
 import type { QueryKey } from '@tanstack/react-query';
-import { type Hash, type Hex, zeroAddress } from 'viem';
+import type { Hash, Hex } from 'viem';
 import {
 	type CheckoutOptions,
 	type MarketplaceKind,
@@ -93,16 +93,6 @@ 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);
@@ -113,18 +103,6 @@ export const useBuyCollectable = ({
 				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,
 				collectibles: [
@@ -135,7 +113,7 @@ export const useBuyCollectable = ({
 					},
 				],
 				currencyAddress: priceCurrencyAddress,
-				price,
+				price: step.price,
 				targetContractAddress: step.to,
 				txData: step.data as Hex,
 				collectionAddress,

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

@@ -1,8 +1,13 @@
 import { Box, Text, TokenImage } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
 import type { Hex } from 'viem';
-import { formatUnits, parseUnits } from 'viem';
-import { useCurrency } from '../../../../hooks';
+import { parseUnits } from 'viem';
+import {
+	DEFAULT_MARKETPLACE_FEE_PERCENTAGE,
+	compareAddress,
+	formatPrice,
+} from '../../../../..';
+import { useCurrency, useMarketplaceConfig } from '../../../../hooks';
 import { ActionModal } from '../../_internal/components/actionModal';
 import QuantityInput from '../../_internal/components/quantityInput';
 import { buyModal$ } from '../store';
@@ -16,14 +21,20 @@ interface ERC1155QuantityModalProps extends CheckoutModalProps {
 
 export const ERC1155QuantityModal = observer(
 	({ buy, collectable, order }: ERC1155QuantityModalProps) => {
+		const { data: marketplaceConfig } = useMarketplaceConfig();
 		const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
 			chainId: order.chainId,
 			currencyAddress: order.priceCurrencyAddress,
 		});
-
 		const quantity = Number(buyModal$.state.quantity.get());
 		const pricePerToken = order.priceAmount;
-		const totalPrice = (BigInt(quantity) * BigInt(pricePerToken)).toString();
+		const marketplaceFeePercentage =
+			marketplaceConfig?.collections.find((collection) =>
+				compareAddress(collection.address, order.collectionContractAddress),
+			)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+		const price = Number(quantity) * Number(pricePerToken);
+		const totalPrice =
+			price + (price * Number(marketplaceFeePercentage || 0)) / 100;
 
 		if (
 			buyModal$.state.checkoutModalLoaded.get() &&
@@ -92,7 +103,7 @@ export const ERC1155QuantityModal = observer(
 										fontWeight="bold"
 										fontFamily="body"
 									>
-										{formatUnits(BigInt(totalPrice), currency.decimals || 0)}
+										{formatPrice(totalPrice, currency.decimals)}
 									</Text>
 
 									<Text color="text80" fontSize="small" fontFamily="body">

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

@@ -2,6 +2,7 @@ import { Box } from '@0xsequence/design-system';
 import { Show, observer } from '@legendapp/state/react';
 import { parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
+import { dateToUnixTime } from '../../../../utils/date';
 import type { ContractType } from '../../../_internal';
 import {
 	useBalanceOfCollectible,
@@ -21,9 +22,8 @@ import PriceInput from '../_internal/components/priceInput';
 import QuantityInput from '../_internal/components/quantityInput';
 import TokenPreview from '../_internal/components/tokenPreview';
 import TransactionDetails from '../_internal/components/transactionDetails';
-import { createListingModal$ } from './store';
-import { dateToUnixTime } from '../../../../utils/date';
 import { useCreateListing } from './hooks/useCreateListing';
+import { createListingModal$ } from './store';
 
 export const CreateListingModal = () => {
 	return <Show if={createListingModal$.isOpen}>{() => <Modal />}</Show>;
@@ -211,6 +211,7 @@ const Modal = observer(() => {
 				chainId={chainId}
 				price={createListingModal$.listingPrice.get()}
 				currencyImageUrl={listingPrice.currency.imageUrl}
+				includeMarketplaceFee={false}
 			/>
 		</ActionModal>
 	);

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

@@ -133,6 +133,7 @@ const Modal = observer(() => {
 				collectibleId={tokenId}
 				collectionAddress={collectionAddress}
 				chainId={chainId}
+				includeMarketplaceFee={true}
 				price={
 					currency
 						? {

package/src/react/ui/modals/_internal/components/transactionDetails/index.tsx

@@ -1,5 +1,6 @@
 import { Box, Image, Skeleton, Text } from '@0xsequence/design-system';
 import { type Hex, formatUnits } from 'viem';
+import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../../consts';
 import type { Price } from '../../../../../../types';
 import {
 	useMarketplaceConfig,
@@ -12,27 +13,27 @@ type TransactionDetailsProps = {
 	chainId: string;
 	price?: Price;
 	currencyImageUrl?: string;
+	includeMarketplaceFee: boolean;
 	// We use a placeholder price for create listing modal
 	showPlaceholderPrice?: boolean;
 };
 
-//TODO: Move this
-const DEFAULT_MARKETPLACE_FEE_PERCENTAGE = 2.5;
-
 export default function TransactionDetails({
 	collectibleId,
 	collectionAddress,
 	chainId,
+	includeMarketplaceFee,
 	price,
 	showPlaceholderPrice,
 	currencyImageUrl,
 }: TransactionDetailsProps) {
 	const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
 
-	const marketplaceFeePercentage =
-		data?.collections.find(
-			(collection) => collection.address === collectionAddress,
-		)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+	const marketplaceFeePercentage = includeMarketplaceFee
+		? data?.collections.find(
+				(collection) => collection.address === collectionAddress,
+			)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE
+		: 0;
 	const { data: royaltyPercentage, isLoading: royaltyPercentageLoading } =
 		useRoyaltyPercentage({
 			chainId,

package/src/types/sdk-config.ts

@@ -17,6 +17,7 @@ export type SdkConfig = {
 		nextAccessKey?: string;
 		builderEnv?: Env;
 		marketplaceEnv?: Env;
+		nodeGatewayEnv?: Env;
 		metadataEnv?: Env;
 		indexerEnv?: Env;
 	};

package/src/utils/index.ts

@@ -1,6 +1,5 @@
 export * from './abi';
 export * from './address';
-export * from './get-public-rpc-client';
 export * from './network';
 export * from './price';
 export * from './getMarketplaceDetails';

package/src/utils/price.ts

@@ -18,3 +18,14 @@ export const calculatePriceDifferencePercentage = ({
 
 	return percentageDifference.toFixed(2);
 };
+
+export const formatPrice = (
+	amount: string | number | bigint,
+	decimals: number,
+): string => {
+	const formattedUnits = Number(formatUnits(BigInt(amount), decimals));
+	return formattedUnits.toLocaleString('en-US', {
+		minimumFractionDigits: 0,
+		maximumFractionDigits: decimals,
+	});
+};