@0xsequence/marketplace-sdk 0.10.0 → 1.0.0

package/src/react/providers/shadow-root.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { type Theme, ThemeProvider } from '@0xsequence/design-system';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { styles } from '../../styles/styles';
+
+let sheet: CSSStyleSheet;
+const getCSSStyleSheet = (customCSS?: string) => {
+	if (!sheet) {
+		sheet = new CSSStyleSheet();
+		sheet.replaceSync(styles + (customCSS ? `\n\n${customCSS}` : ''));
+	}
+
+	return sheet;
+};
+
+interface ShadowRootProps {
+	theme?: Theme;
+	children: ReactNode;
+	customCSS?: string;
+	enabled: boolean;
+}
+
+export const ShadowRoot = (props: ShadowRootProps) => {
+	const { theme, children, customCSS, enabled } = props;
+	const hostRef = useRef<HTMLDivElement>(null);
+	const [container, setContainer] = useState<HTMLDivElement | null>(null);
+	const [windowDocument, setWindowDocument] = useState<Document | null>(null);
+
+	useEffect(() => {
+		setWindowDocument(document);
+	}, []);
+
+	useEffect(() => {
+		if (hostRef.current && !hostRef.current.shadowRoot) {
+			const shadowRoot = hostRef.current.attachShadow({ mode: 'open' });
+			shadowRoot.adoptedStyleSheets = [getCSSStyleSheet(customCSS)];
+			const container = document.createElement('div');
+			container.id = 'marketplace-sdk-shadow-root';
+			shadowRoot.appendChild(container);
+
+			setContainer(container);
+		}
+	}, [windowDocument]);
+
+	if (!enabled) {
+		return children;
+	}
+
+	return windowDocument
+		? createPortal(
+				<div data-shadow-host ref={hostRef}>
+					{container && (
+						<ThemeProvider theme={theme} root={container}>
+							{children}
+						</ThemeProvider>
+					)}
+				</div>,
+				document.body,
+			)
+		: null;
+};

package/src/react/providers/theme-provider.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import {
+	ThemeProvider as SequenceThemeProvider,
+	type Theme,
+} from '@0xsequence/design-system';
+import { useConfig } from '../hooks';
+
+export const ThemeProvider = ({
+	children,
+	theme,
+	root,
+}: {
+	children: React.ReactNode;
+	theme?: Theme;
+	root?: HTMLElement;
+}) => {
+	const { shadowDom } = useConfig();
+
+	if (!shadowDom) {
+		return (
+			<SequenceThemeProvider theme={theme} root={root}>
+				{children}
+			</SequenceThemeProvider>
+		);
+	}
+
+	return children;
+};

package/src/react/queries/index.ts

@@ -1,15 +1,34 @@
 export * from './balanceOfCollectible';
+export * from './checkoutOptions';
+export * from './checkoutOptionsSalesContract';
 export * from './collectible';
+export * from './collection';
+export * from './collectionBalanceDetails';
 export * from './collectionDetails';
+export * from './comparePrices';
+export * from './convertPriceToUSD';
+export * from './countListingsForCollectible';
+export * from './countOfCollectables';
+export * from './countOffersForCollectible';
 export * from './countOfPrimarySaleItems';
 export * from './currency';
+export * from './filters';
 export * from './floorOrder';
+export * from './getTokenRanges';
 export * from './highestOffer';
 export * from './inventory';
 export * from './listBalances';
+export * from './listCollectibleActivities';
 export * from './listCollectibles';
+export * from './listCollectiblesPaginated';
+export * from './listCollectionActivities';
 export * from './listCollections';
+export * from './listListingsForCollectible';
 export * from './listTokenMetadata';
 export * from './lowestListing';
 export * from './marketCurrencies';
+export * from './marketplaceConfig';
+export * from './primarySaleItems';
+export * from './primarySaleItemsCount';
+export * from './searchTokenMetadata';
 export * from './tokenSupplies';

package/src/react/queries/marketplaceConfig.ts

@@ -1,5 +1,5 @@
 import { queryOptions } from '@tanstack/react-query';
-import type { ContractType, SdkConfig } from '../../types';
+import type { ContractType, OrderbookKind, SdkConfig } from '../../types';
 import type {
 	MarketCollection,
 	MarketPage,
@@ -9,6 +9,7 @@ import type {
 } from '../../types/new-marketplace-types';
 import { configKeys, getBuilderClient } from '../_internal';
 import type { LookupMarketplaceReturn } from '../_internal/api/builder.gen';
+import { persistentQueryMeta } from '../_internal/query-meta';
 
 export const fetchMarketplaceConfig = async ({
 	config,
@@ -34,6 +35,8 @@ export const fetchMarketplaceConfig = async ({
 		return {
 			...collection,
 			contractType: collection.contractType as ContractType,
+			destinationMarketplace:
+				collection.destinationMarketplace as OrderbookKind,
 			marketplaceType: 'market',
 		} satisfies MarketCollection;
 	});
@@ -100,5 +103,11 @@ export const marketplaceConfigOptions = (config: SdkConfig) => {
 				config,
 				prefetchedMarketplaceSettings,
 			}),
+		gcTime: Number.POSITIVE_INFINITY,
+		staleTime: Number.POSITIVE_INFINITY,
+		refetchOnMount: false,
+		refetchOnReconnect: false,
+		refetchOnWindowFocus: false,
+		meta: persistentQueryMeta,
 	});
 };

package/src/react/queries/primarySaleItems.ts

@@ -53,7 +53,7 @@ export const listPrimarySaleItemsQueryOptions = (
 	);
 
 	type PageParam = { page: number; pageSize: number };
-	const initialPage: PageParam = { page: 1, pageSize: 30 };
+	const initialPage: PageParam = params.page || { page: 1, pageSize: 30 };
 
 	return infiniteQueryOptions({
 		queryKey: ['listPrimarySaleItems', params],
@@ -71,12 +71,7 @@ export const listPrimarySaleItemsQueryOptions = (
 		},
 		initialPageParam: initialPage,
 		getNextPageParam: (lastPage) =>
-			lastPage.page?.more
-				? {
-						page: (lastPage.page?.page || 1) + 1,
-						pageSize: lastPage.page?.pageSize || 30,
-					}
-				: undefined,
+			lastPage.page?.more ? lastPage.page : undefined,
 		...params.query,
 		enabled,
 	});

package/src/react/queries/searchTokenMetadata.ts

@@ -0,0 +1,87 @@
+import type {
+	Filter,
+	Page,
+	SearchTokenMetadataReturn,
+} from '@0xsequence/metadata';
+import { infiniteQueryOptions } from '@tanstack/react-query';
+import type { SdkConfig } from '../../types';
+import {
+	getMetadataClient,
+	tokenKeys,
+	type ValuesOptional,
+} from '../_internal';
+import type { StandardQueryOptions } from '../types/query';
+
+export interface FetchSearchTokenMetadataParams {
+	chainId: number;
+	collectionAddress: string;
+	filter?: Filter;
+	page?: Page;
+	config: SdkConfig;
+}
+
+/**
+ * Fetches token metadata from the metadata API using search filters
+ */
+export async function fetchSearchTokenMetadata(
+	params: FetchSearchTokenMetadataParams,
+): Promise<SearchTokenMetadataReturn> {
+	const { chainId, collectionAddress, filter, page, config } = params;
+	const metadataClient = getMetadataClient(config);
+
+	const response = await metadataClient.searchTokenMetadata({
+		chainID: chainId.toString(),
+		contractAddress: collectionAddress,
+		filter: filter ?? {},
+		page,
+	});
+
+	return {
+		tokenMetadata: response.tokenMetadata,
+		page: response.page,
+	};
+}
+
+export type SearchTokenMetadataQueryOptions =
+	ValuesOptional<FetchSearchTokenMetadataParams> & {
+		query?: StandardQueryOptions;
+	};
+
+export function searchTokenMetadataQueryOptions(
+	params: SearchTokenMetadataQueryOptions,
+) {
+	const enabled = Boolean(
+		params.chainId &&
+			params.collectionAddress &&
+			params.config &&
+			(params.query?.enabled ?? true),
+	);
+
+	const initialPageParam = { page: 1, pageSize: 30 };
+
+	return infiniteQueryOptions({
+		queryKey: [...tokenKeys.metadata, 'search', params],
+		queryFn: ({ pageParam = initialPageParam }) =>
+			fetchSearchTokenMetadata({
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				chainId: params.chainId!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				collectionAddress: params.collectionAddress!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				filter: params.filter!,
+				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+				config: params.config!,
+				page: pageParam,
+			}),
+		initialPageParam,
+		getNextPageParam: (lastPage) => {
+			if (!lastPage.page?.more) return undefined;
+			return {
+				page: (lastPage.page.page || 1) + 1,
+				pageSize: lastPage.page.pageSize || 20,
+			};
+		},
+		...params.query,
+		enabled,
+	});
+}

package/src/react/queries/tokenSupplies.ts

@@ -1,5 +1,5 @@
-import type { GetTokenSuppliesArgs } from '@0xsequence/indexer';
-import { queryOptions } from '@tanstack/react-query';
+import type { GetTokenSuppliesArgs, Page } from '@0xsequence/indexer';
+import { infiniteQueryOptions } from '@tanstack/react-query';
 import type { SdkConfig } from '../../types';
 import {
 	getIndexerClient,
@@ -7,7 +7,7 @@ import {
 	tokenKeys,
 	type ValuesOptional,
 } from '../_internal';
-import type { StandardQueryOptions } from '../types/query';
+import type { StandardInfiniteQueryOptions } from '../types/query';
 
 export interface FetchTokenSuppliesParams
 	extends Omit<GetTokenSuppliesArgs, 'contractAddress'> {
@@ -15,6 +15,7 @@ export interface FetchTokenSuppliesParams
 	collectionAddress: string;
 	config: SdkConfig;
 	isLaos721?: boolean;
+	page?: Page;
 }
 
 /**
@@ -61,7 +62,7 @@ export async function fetchTokenSupplies(params: FetchTokenSuppliesParams) {
 
 export type TokenSuppliesQueryOptions =
 	ValuesOptional<FetchTokenSuppliesParams> & {
-		query?: StandardQueryOptions;
+		query?: StandardInfiniteQueryOptions;
 	};
 
 export function tokenSuppliesQueryOptions(params: TokenSuppliesQueryOptions) {
@@ -72,21 +73,28 @@ export function tokenSuppliesQueryOptions(params: TokenSuppliesQueryOptions) {
 			(params.query?.enabled ?? true),
 	);
 
-	return queryOptions({
+	const initialPageParam = { page: 1, pageSize: 30 } as Page;
+
+	const queryFn = async ({ pageParam = initialPageParam }) =>
+		fetchTokenSupplies({
+			// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+			chainId: params.chainId!,
+			// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+			collectionAddress: params.collectionAddress!,
+			// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
+			config: params.config!,
+			isLaos721: params.isLaos721,
+			includeMetadata: params.includeMetadata,
+			metadataOptions: params.metadataOptions,
+			page: pageParam,
+		});
+
+	return infiniteQueryOptions({
 		queryKey: [...tokenKeys.supplies, params],
-		queryFn: () =>
-			fetchTokenSupplies({
-				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
-				chainId: params.chainId!,
-				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
-				collectionAddress: params.collectionAddress!,
-				// biome-ignore lint/style/noNonNullAssertion: The enabled check above ensures these are not undefined
-				config: params.config!,
-				isLaos721: params.isLaos721,
-				includeMetadata: params.includeMetadata,
-				metadataOptions: params.metadataOptions,
-				page: params.page,
-			}),
+		queryFn,
+		initialPageParam,
+		getNextPageParam: (lastPage) =>
+			lastPage.page?.more ? lastPage.page : undefined,
 		...params.query,
 		enabled,
 	});

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

@@ -32,6 +32,7 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
         "id": 1,
         "itemsAddress": "0x0000000000000000000000000000000000000000",
         "marketplaceType": "market",
+        "private": false,
         "projectId": 1,
         "updatedAt": "2025-03-16T13:04:16.098Z",
       },
@@ -66,6 +67,7 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
         "id": 2,
         "itemsAddress": "0x1234567890123456789012345678901234567890",
         "marketplaceType": "market",
+        "private": false,
         "projectId": 1,
         "updatedAt": "2025-03-16T13:04:16.098Z",
       },
@@ -105,10 +107,12 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
         "bannerUrl": "https://example.com/shop-banner.png",
         "chainId": 1,
         "createdAt": "2025-03-16T13:04:16.098Z",
+        "customTokenIds": [],
         "id": 1,
         "itemsAddress": "0x0000000000000000000000000000000000000000",
         "marketplaceType": "shop",
         "name": "Mock Shop Collection",
+        "private": false,
         "projectId": 1,
         "saleAddress": "0x0000000000000000000000000000000000000000",
         "saleBannerUrl": "https://example.com/shop-sale-banner.png",
@@ -123,10 +127,12 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
         "bannerUrl": "https://example.com/polygon-shop-banner.png",
         "chainId": 137,
         "createdAt": "2025-03-16T13:04:16.098Z",
+        "customTokenIds": [],
         "id": 2,
         "itemsAddress": "0x1234567890123456789012345678901234567890",
         "marketplaceType": "shop",
         "name": "Polygon Shop Collection",
+        "private": false,
         "projectId": 1,
         "saleAddress": "0x1234567890123456789012345678901234567890",
         "saleBannerUrl": "https://example.com/polygon-shop-sale-banner.png",

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

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import type { SdkConfig } from '../../../types';
+import type { SdkConfig } from '../../../types/index';
 import { createSSRClient } from '../create-ssr-client';
 
 const wagmiCookie =

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

@@ -0,0 +1,296 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { defaultHandlers } from '../../../../../../test/handlers';
+import {
+	CollectibleCardAction,
+	MarketplaceKind,
+	OrderbookKind,
+	OrderSide,
+	OrderStatus,
+} from '../../../../../types';
+import { ActionButton } from './ActionButton';
+
+const meta: Meta<typeof ActionButton> = {
+	title: 'Internals/Action Button',
+	component: ActionButton,
+	parameters: {
+		layout: 'centered',
+		docs: {
+			description: {
+				component: `
+The ActionButton component handles different actions for collectibles in both marketplace and shop contexts. It automatically determines whether to show owner or non-owner actions based on ownership and other conditions.
+
+## Manual Testing
+
+**Test the modals by clicking the action buttons:**
+
+1. **Buy Action** - Opens buy modal for marketplace listings
+2. **Make Offer** - Opens offer modal for making offers on collectibles
+3. **Sell (Accept Offer)** - Opens sell modal to accept existing offers
+4. **Create Listing** - Opens listing modal to create new listings
+5. **Transfer** - Opens transfer modal to transfer collectibles
+6. **Shop Buy** - Opens buy modal for shop-based purchases
+
+Each button click should open the corresponding modal. The modals are fully functional with all providers configured.
+
+## MSW Integration
+
+All stories now use Mock Service Worker (MSW) to mock API requests, ensuring the components work with realistic data without requiring a backend server.
+				`,
+			},
+		},
+		// Use the pre-composed success handlers for all stories by default
+		msw: {
+			handlers: defaultHandlers.success,
+		},
+	},
+	argTypes: {
+		chainId: {
+			control: 'number',
+			description: 'Blockchain chain ID',
+		},
+		collectionAddress: {
+			control: 'text',
+			description: 'Collection contract address',
+		},
+		tokenId: {
+			control: 'text',
+			description: 'Token ID of the collectible',
+		},
+		action: {
+			control: 'select',
+			options: Object.values(CollectibleCardAction),
+			description: 'The action to display',
+		},
+		owned: {
+			control: 'boolean',
+			description: 'Whether the user owns this collectible',
+		},
+		marketplaceType: {
+			control: 'select',
+			options: ['market', 'shop'],
+			description: 'Type of marketplace (market or shop)',
+		},
+		onCannotPerformAction: {
+			action: 'cannot perform action',
+			description: 'Callback when user cannot perform the action',
+		},
+	},
+	decorators: [
+		(Story) => (
+			<div style={{ padding: '1rem', width: '300px' }}>
+				<Story />
+			</div>
+		),
+	],
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionButton>;
+
+// Mock data
+const MOCK_ADDRESS = '0x1234567890123456789012345678901234567890' as const;
+const MOCK_ORDER = {
+	orderId: 'order-123',
+	marketplace: MarketplaceKind.sequence_marketplace_v1,
+	side: OrderSide.listing,
+	status: OrderStatus.active,
+	chainId: 1,
+	originName: 'Mock Origin',
+	collectionContractAddress: MOCK_ADDRESS,
+	tokenId: '123',
+	createdBy: MOCK_ADDRESS,
+	priceAmount: '1000000000000000000',
+	priceAmountFormatted: '1.0',
+	priceAmountNet: '950000000000000000',
+	priceAmountNetFormatted: '0.95',
+	priceCurrencyAddress: '0x0000000000000000000000000000000000000000',
+	priceDecimals: 18,
+	priceUSD: 1000,
+	priceUSDFormatted: '$1,000.00',
+	quantityInitial: '1',
+	quantityInitialFormatted: '1',
+	quantityRemaining: '1',
+	quantityRemainingFormatted: '1',
+	quantityAvailable: '1',
+	quantityAvailableFormatted: '1',
+	quantityDecimals: 0,
+	feeBps: 500,
+	feeBreakdown: [],
+	validFrom: '2024-01-01T00:00:00Z',
+	validUntil: '2024-12-31T23:59:59Z',
+	blockNumber: 12345678,
+	orderCreatedAt: '2024-01-01T00:00:00Z',
+	orderUpdatedAt: '2024-01-01T00:00:00Z',
+	createdAt: '2024-01-01T00:00:00Z',
+	updatedAt: '2024-01-01T00:00:00Z',
+};
+
+export const OfferAction: Story = {
+	args: {
+		chainId: 1,
+		collectionAddress: MOCK_ADDRESS,
+		tokenId: '123',
+		action: CollectibleCardAction.OFFER,
+		owned: false,
+		marketplaceType: 'market',
+		orderbookKind: OrderbookKind.sequence_marketplace_v1,
+		onCannotPerformAction: fn(),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const body = within(document.body);
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const button = canvas.getByText('Make an offer');
+		await userEvent.click(button);
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const modal = body.getByText('Enter price');
+		await expect(modal).toBeInTheDocument();
+	},
+};
+
+export const SellAction: Story = {
+	args: {
+		chainId: 1,
+		collectionAddress: MOCK_ADDRESS,
+		tokenId: '123',
+		action: CollectibleCardAction.SELL,
+		owned: true,
+		marketplaceType: 'market',
+		highestOffer: {
+			...MOCK_ORDER,
+			side: OrderSide.offer,
+			status: OrderStatus.active,
+		},
+		orderbookKind: OrderbookKind.sequence_marketplace_v1,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const body = within(document.body);
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const button = canvas.getByText('Sell');
+		await userEvent.click(button);
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const modal = body.getByText('Offer received');
+		await expect(modal).toBeInTheDocument();
+	},
+};
+
+export const ListAction: Story = {
+	args: {
+		chainId: 1,
+		collectionAddress: MOCK_ADDRESS,
+		tokenId: '123',
+		action: CollectibleCardAction.LIST,
+		owned: true,
+		marketplaceType: 'market',
+		orderbookKind: OrderbookKind.sequence_marketplace_v1,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const body = within(document.body);
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const button = canvas.getByText('Create listing');
+		await userEvent.click(button);
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const modal = body.getByText('Enter price');
+		await expect(modal).toBeInTheDocument();
+	},
+};
+
+export const TransferAction: Story = {
+	args: {
+		chainId: 1,
+		collectionAddress: MOCK_ADDRESS,
+		tokenId: '123',
+		action: CollectibleCardAction.TRANSFER,
+		owned: true,
+		marketplaceType: 'market',
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const body = within(document.body);
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const button = canvas.getByText('Transfer');
+		await userEvent.click(button);
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const modal = body.getByText('Wallet address');
+		await expect(modal).toBeInTheDocument();
+	},
+};
+
+export const ShopBuyAction: Story = {
+	args: {
+		chainId: 1,
+		collectionAddress: MOCK_ADDRESS,
+		tokenId: '123',
+		action: CollectibleCardAction.BUY,
+		owned: false,
+		marketplaceType: 'shop',
+		salesContractAddress: MOCK_ADDRESS,
+		salePrice: {
+			amount: '1000000000000000000',
+			currencyAddress: '0x0000000000000000000000000000000000000000',
+		},
+		quantityDecimals: 0,
+		quantityRemaining: 100,
+		unlimitedSupply: false,
+		onCannotPerformAction: fn(),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const body = within(document.body);
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const button = canvas.getByText('Buy now');
+		await userEvent.click(button);
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const modal = body.getByText('Select Quantity');
+		await expect(modal).toBeInTheDocument();
+	},
+};
+
+export const MarketBuyAction: Story = {
+	args: {
+		chainId: 1,
+		collectionAddress: MOCK_ADDRESS,
+		tokenId: '123',
+		action: CollectibleCardAction.BUY,
+		owned: false,
+		marketplaceType: 'market',
+		lowestListing: {
+			...MOCK_ORDER,
+			side: OrderSide.listing,
+			status: OrderStatus.active,
+		},
+		orderbookKind: OrderbookKind.sequence_marketplace_v1,
+		onCannotPerformAction: fn(),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const body = within(document.body);
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const button = canvas.getByText('Buy now');
+		await userEvent.click(button);
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		const modal = body.getByText('Select Quantity');
+		await expect(modal).toBeInTheDocument();
+	},
+};