@0xsequence/marketplace-sdk 0.8.11 → 0.9.0

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

@@ -9,6 +9,7 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
         "bannerUrl": "https://example.com/market-banner.png",
         "chainId": 1,
         "contractType": "ERC721",
+        "createdAt": "2025-03-16T13:04:16.098Z",
         "currencyOptions": [
           "0x0000000000000000000000000000000000000000",
           "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
@@ -28,13 +29,17 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
             "Rarity",
           ],
         },
+        "id": 1,
         "itemsAddress": "0x0000000000000000000000000000000000000000",
-        "marketplaceType": "MARKET",
+        "marketplaceType": "market",
+        "projectId": 1,
+        "updatedAt": "2025-03-16T13:04:16.098Z",
       },
       {
         "bannerUrl": "https://example.com/collection-banner.png",
         "chainId": 137,
         "contractType": "ERC1155",
+        "createdAt": "2025-03-16T13:04:16.098Z",
         "currencyOptions": [
           "0x0000000000000000000000000000000000000000",
         ],
@@ -58,12 +63,16 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
             "Element",
           ],
         },
+        "id": 2,
         "itemsAddress": "0x1234567890123456789012345678901234567890",
-        "marketplaceType": "MARKET",
+        "marketplaceType": "market",
+        "projectId": 1,
+        "updatedAt": "2025-03-16T13:04:16.098Z",
       },
     ],
     "enabled": true,
     "ogImage": "https://example.com/og-image.png",
+    "private": false,
   },
   "projectId": NaN,
   "settings": {
@@ -80,6 +89,7 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
       "website": "https://mock.com",
       "youtube": "https://youtube.com/mock",
     },
+    "style": {},
     "title": "Mock Marketplace",
     "walletOptions": {
       "connectors": [],
@@ -89,10 +99,48 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
     },
   },
   "shop": {
-    "bannerUrl": "",
-    "collections": [],
-    "enabled": false,
-    "ogImage": undefined,
+    "bannerUrl": "https://example.com/shop-banner.png",
+    "collections": [
+      {
+        "bannerUrl": "https://example.com/shop-banner.png",
+        "chainId": 1,
+        "createdAt": "2025-03-16T13:04:16.098Z",
+        "id": 1,
+        "itemsAddress": "0x0000000000000000000000000000000000000000",
+        "marketplaceType": "shop",
+        "name": "Mock Shop Collection",
+        "projectId": 1,
+        "saleAddress": "0x0000000000000000000000000000000000000000",
+        "saleBannerUrl": "https://example.com/shop-sale-banner.png",
+        "tokenIds": [
+          "1",
+          "2",
+          "3",
+        ],
+        "updatedAt": "2025-03-16T13:04:16.098Z",
+      },
+      {
+        "bannerUrl": "https://example.com/polygon-shop-banner.png",
+        "chainId": 137,
+        "createdAt": "2025-03-16T13:04:16.098Z",
+        "id": 2,
+        "itemsAddress": "0x1234567890123456789012345678901234567890",
+        "marketplaceType": "shop",
+        "name": "Polygon Shop Collection",
+        "projectId": 1,
+        "saleAddress": "0x1234567890123456789012345678901234567890",
+        "saleBannerUrl": "https://example.com/polygon-shop-sale-banner.png",
+        "tokenIds": [
+          "4",
+          "5",
+          "6",
+        ],
+        "updatedAt": "2025-03-16T13:04:16.098Z",
+      },
+    ],
+    "enabled": true,
+    "ogImage": "https://example.com/shop-og-image.png",
+    "private": false,
   },
 }
 `;

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

@@ -1,9 +1,7 @@
-import { QueryClient } from '@tanstack/react-query';
 import { describe, expect, it } from 'vitest';
 import type { SdkConfig } from '../../../types';
 import { createSSRClient } from '../create-ssr-client';
 
-const queryClient = new QueryClient();
 const wagmiCookie =
 	'wagmi.store={"state":{"connections":{"__type":"Map","value":[]},"chainId":1,"current":null},"version":2}; ';
 
@@ -15,7 +13,6 @@ const config = {
 const client = createSSRClient({
 	cookie: wagmiCookie,
 	config,
-	queryClient,
 });
 
 describe('createSSRClient', () => {

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

@@ -1,34 +1,29 @@
-import type { QueryClient } from '@tanstack/react-query';
-import { type State, cookieToInitialState } from 'wagmi';
+import { cookieToInitialState, type State } from 'wagmi';
 import type { SdkConfig } from '../../types/sdk-config';
+import { getQueryClient } from '../_internal/api/get-query-client';
 import { createWagmiConfig } from '../_internal/wagmi/create-config';
 import { marketplaceConfigOptions } from '../queries/marketplaceConfig';
 
 type InitSSRClientArgs = {
 	cookie: string;
 	config: SdkConfig;
-	queryClient: QueryClient;
 };
 
 type InitialState = { wagmi?: State };
 
-const marketplaceConfig = async (
-	config: SdkConfig,
-	queryClient: QueryClient,
-) => {
+const marketplaceConfig = async (config: SdkConfig) => {
 	const configOptions = marketplaceConfigOptions(config);
-	return queryClient.fetchQuery(configOptions);
+	return getQueryClient().fetchQuery(configOptions);
 };
 
 const initialState = async (args: InitSSRClientArgs): Promise<InitialState> => {
-	const marketConfig = await marketplaceConfig(args.config, args.queryClient);
+	const marketConfig = await marketplaceConfig(args.config);
 	const wagmiConfig = createWagmiConfig(marketConfig, args.config, true);
 	return { wagmi: cookieToInitialState(wagmiConfig, args.cookie) };
 };
 
 export const createSSRClient = (args: InitSSRClientArgs) => {
-	const getMarketplaceConfig = async () =>
-		marketplaceConfig(args.config, args.queryClient);
+	const getMarketplaceConfig = async () => marketplaceConfig(args.config);
 	const getInitialState = async () => initialState(args);
 	const config = args.config;
 	return { getInitialState, getMarketplaceConfig, config };

package/src/react/types/query.ts

@@ -0,0 +1,34 @@
+/**
+ * Standard query options that can be used across all marketplace SDK hooks
+ *
+ * Based on TanStack Query v5 UseQueryOptions, but simplified, the type from TanStack is hard to modify
+ */
+export interface StandardQueryOptions<TError = Error> {
+	/** Whether the query should be enabled/disabled */
+	enabled?: boolean;
+	/** Time in milliseconds that  data is considered fresh */
+	staleTime?: number;
+	gcTime?: number;
+	// biome-ignore lint/suspicious/noExplicitAny: TanStack Query requires any type for query parameter
+	refetchInterval?: number | false | ((query: any) => number | false);
+	refetchOnWindowFocus?: boolean;
+	refetchOnMount?: boolean;
+	refetchOnReconnect?: boolean;
+	retry?: boolean | number | ((failureCount: number, error: TError) => boolean);
+	retryDelay?: number | ((retryAttempt: number, error: TError) => number);
+	// select is not supported for now
+	// select?: <TSelected = TData>(data: TData) => TSelected;
+	suspense?: boolean;
+	/** Placeholder data is not supported for now */
+	// placeholderData?: TData | (() => TData);
+}
+
+/**
+ * Standard infinite query options that can be used across all marketplace SDK hooks
+ * that support infinite pagination
+ */
+export interface StandardInfiniteQueryOptions<TError = Error>
+	extends StandardQueryOptions<TError> {
+	/** Maximum number of pages to fetch */
+	maxPages?: number;
+}

package/src/react/ui/components/ModelViewer.tsx

@@ -1,5 +1,5 @@
 import { Skeleton } from '@0xsequence/design-system';
-import { Suspense, lazy } from 'react';
+import { lazy, Suspense } from 'react';
 
 const ModelViewerComponent = lazy(() =>
 	import('@google/model-viewer').then(() => ({

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

@@ -1,12 +1,15 @@
 'use client';
 
 import { observer } from '@legendapp/state/react';
-import type { Hex } from 'viem';
+import type { Address, Hex } from 'viem';
+import type {
+	CollectibleCardAction,
+	MarketplaceType,
+} from '../../../../../types';
 import type { Order, OrderbookKind } from '../../../../_internal';
 import { NonOwnerActions } from './components/NonOwnerActions';
 import { OwnerActions } from './components/OwnerActions';
 import { useActionButtonLogic } from './hooks/useActionButtonLogic';
-import type { CollectibleCardAction } from './types';
 
 type ActionButtonProps = {
 	chainId: number;
@@ -21,6 +24,15 @@ type ActionButtonProps = {
 	onCannotPerformAction?: (
 		action: CollectibleCardAction.BUY | CollectibleCardAction.OFFER,
 	) => void;
+	marketplaceType: MarketplaceType;
+	salesContractAddress?: Address;
+	prioritizeOwnerActions?: boolean;
+	salePrice?: {
+		amount: string;
+		currencyAddress: Address;
+	};
+	quantityDecimals?: number;
+	quantityRemaining?: number;
 };
 
 export const ActionButton = observer(
@@ -34,6 +46,12 @@ export const ActionButton = observer(
 		highestOffer,
 		lowestListing,
 		onCannotPerformAction,
+		marketplaceType,
+		salesContractAddress,
+		prioritizeOwnerActions,
+		salePrice,
+		quantityDecimals,
+		quantityRemaining,
 	}: ActionButtonProps) => {
 		const { shouldShowAction, isOwnerAction } = useActionButtonLogic({
 			tokenId,
@@ -46,7 +64,7 @@ export const ActionButton = observer(
 			return null;
 		}
 
-		if (isOwnerAction) {
+		if (isOwnerAction || prioritizeOwnerActions) {
 			return (
 				<OwnerActions
 					action={action}
@@ -59,15 +77,31 @@ export const ActionButton = observer(
 			);
 		}
 
-		return (
-			<NonOwnerActions
-				action={action}
-				tokenId={tokenId}
-				collectionAddress={collectionAddress}
-				chainId={chainId}
-				orderbookKind={orderbookKind}
-				lowestListing={lowestListing}
-			/>
-		);
+		const nonOwnerProps =
+			marketplaceType === 'shop' && salesContractAddress && salePrice
+				? {
+						marketplaceType: 'shop' as const,
+						salesContractAddress,
+						salePrice,
+						action,
+						tokenId,
+						collectionAddress,
+						chainId,
+						quantityDecimals,
+						quantityRemaining,
+					}
+				: {
+						marketplaceType: 'market' as const,
+						orderbookKind,
+						lowestListing,
+						action,
+						tokenId,
+						collectionAddress,
+						chainId,
+						quantityDecimals,
+						quantityRemaining,
+					};
+
+		return <NonOwnerActions {...nonOwnerProps} />;
 	},
 );

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

@@ -3,10 +3,10 @@
 import { fireEvent, render, screen } from '@test';
 import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CollectibleCardAction } from '../../../../../../types';
 import * as walletModule from '../../../../../_internal/wallet/useWallet';
 import { ActionButtonBody } from '../components/ActionButtonBody';
 import { setPendingAction } from '../store';
-import { CollectibleCardAction } from '../types';
 
 vi.mock('../store', () => ({
 	setPendingAction: vi.fn(),

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

@@ -4,18 +4,23 @@ import { render, screen } from '@test';
 import { createMockWallet } from '@test/mocks/wallet';
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CollectibleCardAction } from '../../../../../../types';
 import { OrderSide } from '../../../../../_internal';
 import { mockOrder } from '../../../../../_internal/api/__mocks__/marketplace.msw';
 import * as walletModule from '../../../../../_internal/wallet/useWallet';
 import { NonOwnerActions } from '../components/NonOwnerActions';
-import { CollectibleCardAction } from '../types';
 
 describe('NonOwnerActions', () => {
-	const defaultProps = {
+	const baseProps = {
 		action: CollectibleCardAction.BUY,
 		tokenId: '1',
 		collectionAddress: zeroAddress,
 		chainId: 1,
+	};
+
+	const marketProps = {
+		...baseProps,
+		marketplaceType: 'market' as const,
 		lowestListing: { ...mockOrder, side: OrderSide.listing },
 	};
 
@@ -32,28 +37,36 @@ describe('NonOwnerActions', () => {
 	});
 
 	it('renders Buy now button for BUY action', () => {
-		render(<NonOwnerActions {...defaultProps} />);
+		render(<NonOwnerActions {...marketProps} />);
+		expect(screen.getByText('Buy now')).toBeInTheDocument();
 	});
 
-	it('renders Make an offer button for OFFER action', () => {
+	it('renders Buy now button for SHOP marketplace type', () => {
 		render(
 			<NonOwnerActions
-				{...defaultProps}
-				action={CollectibleCardAction.OFFER}
+				{...baseProps}
+				marketplaceType="shop"
+				salesContractAddress="0x123"
+				salePrice={{ amount: '0.1', currencyAddress: zeroAddress }}
 			/>,
 		);
-		expect(screen.getByText('Make an offer')).toBeInTheDocument();
+		expect(screen.getByText('Buy now')).toBeInTheDocument();
 	});
 
-	it('returns null for unsupported actions', () => {
-		const props = {
-			...defaultProps,
-			action: CollectibleCardAction.LIST,
-		};
+	it('throws error when lowestListing is missing for BUY action in MARKET marketplace type', () => {
+		expect(() => {
+			render(<NonOwnerActions {...baseProps} marketplaceType="market" />);
+		}).toThrow('lowestListing is required for BUY action and MARKET card type');
+	});
 
-		const { container } = render(
-			<NonOwnerActions {...(props as Parameters<typeof NonOwnerActions>[0])} />,
+	it('renders Make an offer button for OFFER action', () => {
+		render(
+			<NonOwnerActions
+				{...baseProps}
+				marketplaceType="market"
+				action={CollectibleCardAction.OFFER}
+			/>,
 		);
-		expect(container).toBeEmptyDOMElement();
+		expect(screen.getByText('Make an offer')).toBeInTheDocument();
 	});
 });

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

@@ -4,11 +4,11 @@ import { render, screen } from '@test';
 import { createMockWallet } from '@test/mocks/wallet';
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CollectibleCardAction } from '../../../../../../types';
 import { OrderSide } from '../../../../../_internal';
 import { mockOrder } from '../../../../../_internal/api/__mocks__/marketplace.msw';
 import * as walletModule from '../../../../../_internal/wallet/useWallet';
 import { OwnerActions } from '../components/OwnerActions';
-import { CollectibleCardAction } from '../types';
 
 describe('OwnerActions', () => {
 	const defaultProps = {

package/src/react/ui/components/_internals/action-button/__tests__/useActionButtonLogic.test.tsx

@@ -3,10 +3,10 @@
 import { renderHook, waitFor } from '@test';
 import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CollectibleCardAction } from '../../../../../../types';
 import * as walletModule from '../../../../../_internal/wallet/useWallet';
 import { useActionButtonLogic } from '../hooks/useActionButtonLogic';
-import { actionButtonStore, setPendingAction } from '../store';
-import { CollectibleCardAction } from '../types';
+import { actionButtonStore } from '../store';
 
 describe('useActionButtonLogic', () => {
 	const onCannotPerformActionMock = vi.fn();
@@ -23,7 +23,7 @@ describe('useActionButtonLogic', () => {
 		vi.clearAllMocks();
 		vi.clearAllMocks();
 		vi.restoreAllMocks();
-		actionButtonStore.pendingAction.set(null);
+		actionButtonStore.send({ type: 'clearPendingAction' });
 
 		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
 			wallet: createMockWallet(),
@@ -33,7 +33,12 @@ describe('useActionButtonLogic', () => {
 	});
 
 	it('restricts owners from performing buy/offer actions', async () => {
-		setPendingAction(defaultProps.action, vi.fn(), '123');
+		actionButtonStore.send({
+			type: 'setPendingAction',
+			action: defaultProps.action,
+			onPendingActionExecuted: vi.fn(),
+			tokenId: '123',
+		});
 
 		const { result } = renderHook(() =>
 			useActionButtonLogic({
@@ -52,11 +57,12 @@ describe('useActionButtonLogic', () => {
 	it('executes pending action when user becomes connected', async () => {
 		const executePendingActionMock = vi.fn();
 
-		setPendingAction(
-			CollectibleCardAction.BUY,
-			executePendingActionMock,
-			defaultProps.tokenId,
-		);
+		actionButtonStore.send({
+			type: 'setPendingAction',
+			action: CollectibleCardAction.BUY,
+			onPendingActionExecuted: executePendingActionMock,
+			tokenId: defaultProps.tokenId,
+		});
 
 		renderHook(() =>
 			useActionButtonLogic({

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

@@ -3,9 +3,9 @@
 import { useOpenConnectModal } from '@0xsequence/connect';
 import { Button, type IconProps } from '@0xsequence/design-system';
 import type { ComponentType } from 'react';
+import type { CollectibleCardAction } from '../../../../../../types';
 import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import { setPendingAction } from '../store';
-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,37 +1,98 @@
 'use client';
 
-import type { Hex } from 'viem';
-import { InvalidStepError } from '../../../../../../utils/_internal/error/transaction';
+import type { Address } from 'viem';
+import { CollectibleCardAction } from '../../../../../../types';
 import type { Order, OrderbookKind } from '../../../../../_internal';
 import SvgCartIcon from '../../../../icons/CartIcon';
 import { useBuyModal } from '../../../../modals/BuyModal';
 import { useMakeOfferModal } from '../../../../modals/MakeOfferModal';
-import { CollectibleCardAction } from '../types';
 import { ActionButtonBody } from './ActionButtonBody';
 
-type NonOwnerActionsProps = {
+type NonOwnerActionsBaseProps = {
 	action: CollectibleCardAction;
 	tokenId: string;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
-	orderbookKind?: OrderbookKind;
+	quantityDecimals?: number;
+	quantityRemaining?: number;
+};
+
+type ShopNonOwnerActionsProps = NonOwnerActionsBaseProps & {
+	marketplaceType: 'shop';
+	salesContractAddress: Address;
+	salePrice: {
+		amount: string;
+		currencyAddress: Address;
+	};
+	lowestListing?: never;
+	orderbookKind?: never;
+};
+
+type MarketNonOwnerActionsProps = NonOwnerActionsBaseProps & {
+	marketplaceType: 'market';
 	lowestListing?: Order;
+	orderbookKind?: OrderbookKind;
+	salesContractAddress?: never;
+	salePrice?: never;
 };
 
-export function NonOwnerActions({
-	action,
-	tokenId,
-	collectionAddress,
-	chainId,
-	orderbookKind,
-	lowestListing,
-}: NonOwnerActionsProps) {
+type NonOwnerActionsProps =
+	| ShopNonOwnerActionsProps
+	| MarketNonOwnerActionsProps;
+
+export function NonOwnerActions(props: NonOwnerActionsProps) {
+	const {
+		action,
+		tokenId,
+		collectionAddress,
+		chainId,
+		quantityDecimals,
+		quantityRemaining,
+		marketplaceType,
+	} = props;
+
 	const { show: showBuyModal } = useBuyModal();
 	const { show: showMakeOfferModal } = useMakeOfferModal();
 
+	if (marketplaceType === 'shop') {
+		const { salesContractAddress, salePrice } = props;
+
+		return (
+			<ActionButtonBody
+				action={CollectibleCardAction.BUY}
+				tokenId={tokenId}
+				label="Buy now"
+				onClick={() =>
+					showBuyModal({
+						chainId,
+						collectionAddress,
+						salesContractAddress,
+						items: [
+							{
+								tokenId,
+								quantity: '1',
+							},
+						],
+						marketplaceType: 'shop',
+						salePrice: {
+							amount: salePrice.amount,
+							currencyAddress: salePrice.currencyAddress,
+						},
+						quantityDecimals: quantityDecimals ?? 0,
+						quantityRemaining: quantityRemaining ?? 0,
+					})
+				}
+				icon={SvgCartIcon}
+			/>
+		);
+	}
+
 	if (action === CollectibleCardAction.BUY) {
+		const { lowestListing } = props;
 		if (!lowestListing) {
-			throw new InvalidStepError('BUY', 'lowestListing is required');
+			throw new Error(
+				'lowestListing is required for BUY action and MARKET card type',
+			);
 		}
 
 		return (
@@ -46,6 +107,7 @@ export function NonOwnerActions({
 						collectibleId: tokenId,
 						orderId: lowestListing.orderId,
 						marketplace: lowestListing.marketplace,
+						marketplaceType: 'market',
 					})
 				}
 				icon={SvgCartIcon}
@@ -54,6 +116,7 @@ export function NonOwnerActions({
 	}
 
 	if (action === CollectibleCardAction.OFFER) {
+		const { orderbookKind } = props;
 		return (
 			<ActionButtonBody
 				action={CollectibleCardAction.OFFER}

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

@@ -1,11 +1,11 @@
 'use client';
 
 import type { Hex } from 'viem';
+import { CollectibleCardAction } from '../../../../../../types';
 import type { Order, OrderbookKind } from '../../../../../_internal';
 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 = {