@0xsequence/marketplace-sdk 0.10.0 → 1.1.0

package/src/react/queries/marketplaceConfig.ts

@@ -1,5 +1,6 @@
 import { queryOptions } from '@tanstack/react-query';
-import type { ContractType, SdkConfig } from '../../types';
+import type { Address } from 'viem';
+import type { ContractType, OrderbookKind, SdkConfig } from '../../types';
 import type {
 	MarketCollection,
 	MarketPage,
@@ -9,6 +10,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,7 +36,10 @@ export const fetchMarketplaceConfig = async ({
 		return {
 			...collection,
 			contractType: collection.contractType as ContractType,
-			marketplaceType: 'market',
+			destinationMarketplace:
+				collection.destinationMarketplace as OrderbookKind,
+			itemsAddress: collection.itemsAddress as Address,
+			cardType: 'market',
 		} satisfies MarketCollection;
 	});
 
@@ -42,7 +47,9 @@ export const fetchMarketplaceConfig = async ({
 		(collection) => {
 			return {
 				...collection,
-				marketplaceType: 'shop',
+				itemsAddress: collection.itemsAddress as Address,
+				saleAddress: collection.saleAddress as Address,
+				cardType: 'shop',
 			} satisfies ShopCollection;
 		},
 	);
@@ -100,5 +107,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/tokenBalances.ts

@@ -0,0 +1,85 @@
+import { queryOptions, skipToken } from '@tanstack/react-query';
+import type { Address } from 'viem';
+import type { UseQueryParameters } from 'wagmi/query';
+import type { SdkConfig } from '../../types';
+import { collectableKeys, getIndexerClient, LaosAPI } from '../_internal';
+
+export type UseTokenBalancesArgs = {
+	collectionAddress: Address;
+	userAddress: Address | undefined;
+	chainId: number;
+	isLaos721?: boolean;
+	includeMetadata?: boolean;
+	query?: UseQueryParameters;
+};
+
+/**
+ * Fetches the token balances for a user
+ *
+ * @param args - Arguments for the API call
+ * @param config - SDK configuration
+ * @returns The balance data
+ */
+export async function fetchTokenBalances(
+	args: Omit<UseTokenBalancesArgs, 'userAddress'> & {
+		userAddress: Address;
+	},
+	config: SdkConfig,
+) {
+	if (args.isLaos721) {
+		const laosApi = new LaosAPI();
+		const response = await laosApi.getTokenBalances({
+			chainId: args.chainId.toString(),
+			contractAddress: args.collectionAddress,
+			accountAddress: args.userAddress,
+			includeMetadata: true,
+		});
+
+		return response.balances || [];
+	}
+
+	const indexerClient = getIndexerClient(args.chainId, config);
+	return indexerClient
+		.getTokenBalances({
+			accountAddress: args.userAddress,
+			contractAddress: args.collectionAddress,
+			includeMetadata: args.includeMetadata ?? false,
+			metadataOptions: {
+				verifiedOnly: true,
+				includeContracts: [args.collectionAddress],
+			},
+		})
+		.then((res) => res.balances || []);
+}
+
+/**
+ * Creates a tanstack query options object for the token balances query
+ *
+ * @param args - The query arguments
+ * @param config - SDK configuration
+ * @returns Query options configuration
+ */
+export function tokenBalancesOptions(
+	args: UseTokenBalancesArgs,
+	config: SdkConfig,
+) {
+	const enabled =
+		!!args.userAddress &&
+		!!args.collectionAddress &&
+		(args.query?.enabled ?? true);
+
+	return queryOptions({
+		queryKey: [...collectableKeys.userBalances, args],
+		queryFn: enabled
+			? () =>
+					fetchTokenBalances(
+						{
+							...args,
+							// biome-ignore lint/style/noNonNullAssertion: this is guaranteed by the userAddress check above
+							userAddress: args.userAddress!,
+						},
+						config,
+					)
+			: skipToken,
+	});
+}

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

@@ -7,6 +7,7 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
     "collections": [
       {
         "bannerUrl": "https://example.com/market-banner.png",
+        "cardType": "market",
         "chainId": 1,
         "contractType": "ERC721",
         "createdAt": "2025-03-16T13:04:16.098Z",
@@ -31,12 +32,13 @@ 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",
       },
       {
         "bannerUrl": "https://example.com/collection-banner.png",
+        "cardType": "market",
         "chainId": 137,
         "contractType": "ERC1155",
         "createdAt": "2025-03-16T13:04:16.098Z",
@@ -65,7 +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",
       },
@@ -103,12 +105,14 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
     "collections": [
       {
         "bannerUrl": "https://example.com/shop-banner.png",
+        "cardType": "shop",
         "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",
@@ -121,12 +125,14 @@ exports[`createSSRClient > should fetch marketplace config successfully 1`] = `
       },
       {
         "bannerUrl": "https://example.com/polygon-shop-banner.png",
+        "cardType": "shop",
         "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',
+		},
+		cardType: {
+			control: 'select',
+			options: ['market', 'shop', 'inventory-non-tradable'],
+			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,
+		cardType: '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,
+		cardType: '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,
+		cardType: '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,
+		cardType: '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,
+		cardType: '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,
+		cardType: '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();
+	},
+};