@0xsequence/marketplace-sdk 0.8.11 → 0.8.12

package/src/react/queries/lowestListing.ts

@@ -9,7 +9,7 @@ import {
 } from '../_internal';
 
 export interface UseLowestListingArgs
-	extends Omit<GetCollectibleLowestListingArgs, 'contractAddress'> {
+	extends Omit<GetCollectibleLowestListingArgs, 'contractAddress' | 'chainId'> {
 	collectionAddress: Address;
 	chainId: number;
 	query?: {
@@ -21,11 +21,13 @@ export async function fetchLowestListing(
 	args: UseLowestListingArgs,
 	config: SdkConfig,
 ): Promise<GetCollectibleLowestListingReturn['order'] | null> {
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 
+	const { chainId, collectionAddress, tokenId } = args;
 	const data = await marketplaceClient.getCollectibleLowestListing({
-		contractAddress: args.collectionAddress,
-		...args,
+		chainId: String(chainId),
+		contractAddress: collectionAddress,
+		tokenId,
 	});
 
 	// let order: Order | undefined;

package/src/react/queries/marketCurrencies.ts

@@ -25,14 +25,18 @@ const fetchMarketCurrencies = async (
 	config: SdkConfig,
 ) => {
 	const includeNativeCurrency = args.includeNativeCurrency ?? true;
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	const marketplaceClient = getMarketplaceClient(config);
 
-	let currencies = await marketplaceClient.listCurrencies().then((resp) =>
-		resp.currencies.map((currency) => ({
-			...currency,
-			contractAddress: currency.contractAddress || zeroAddress,
-		})),
-	);
+	let currencies = await marketplaceClient
+		.listCurrencies({
+			chainId: String(args.chainId),
+		})
+		.then((resp) =>
+			resp.currencies.map((currency) => ({
+				...currency,
+				contractAddress: currency.contractAddress || zeroAddress,
+			})),
+		);
 
 	if (args.collectionAddress) {
 		const queryClient = getQueryClient();

package/src/react/queries/marketplaceConfig.ts

@@ -1,129 +1,104 @@
 import { queryOptions } from '@tanstack/react-query';
-import type { ContractType, Env, SdkConfig, ShopConfig } from '../../types';
-import {
-	type MarketCollection,
-	type MarketPage,
-	type MarketplaceConfig,
-	MarketplaceType,
-	type NewMarketplaceSettings,
-	type ShopCollection,
-	type ShopPage,
+import type { ContractType, SdkConfig } from '../../types';
+import type {
+	MarketCollection,
+	MarketPage,
+	MarketplaceConfig,
+	ShopCollection,
+	ShopPage,
 } from '../../types/new-marketplace-types';
-import { builderRpcApi, configKeys } from '../_internal';
-import { BuilderAPI } from '../_internal/api/builder-api';
+import { configKeys, getBuilderClient } from '../_internal';
 import type { LookupMarketplaceReturn } from '../_internal/api/builder.gen';
 
 export const fetchMarketplaceConfig = async ({
-	projectId,
-	projectAccessKey,
-	env,
+	config,
 	prefetchedMarketplaceSettings,
-	tmpShopConfig,
 }: {
-	projectId: string;
-	projectAccessKey: string;
-	env: Env;
-	tmpShopConfig?: ShopConfig;
+	config: SdkConfig;
 	prefetchedMarketplaceSettings?: LookupMarketplaceReturn; //TODO: Is this the right approach?
 }): Promise<MarketplaceConfig> => {
 	let builderMarketplaceConfig = prefetchedMarketplaceSettings;
+
 	if (!builderMarketplaceConfig) {
-		const baseUrl = builderRpcApi(env);
-		const builderApi = new BuilderAPI(baseUrl, projectAccessKey);
+		const builderApi = getBuilderClient(config);
 		const response = await builderApi.lookupMarketplace({
-			projectId: Number(projectId),
+			projectId: Number(config.projectId),
 		});
 
 		builderMarketplaceConfig = response;
 	}
-	const settings = {
-		publisherId: builderMarketplaceConfig.marketplace.settings.publisherId,
-		title: builderMarketplaceConfig.marketplace.settings.title,
-		socials: builderMarketplaceConfig.marketplace.settings.socials,
-		faviconUrl: builderMarketplaceConfig.marketplace.settings.faviconUrl,
-		walletOptions: builderMarketplaceConfig.marketplace.settings.walletOptions,
-		logoUrl: builderMarketplaceConfig.marketplace.settings.logoUrl,
-		fontUrl: builderMarketplaceConfig.marketplace.settings.fontUrl,
-		accessKey: builderMarketplaceConfig.marketplace.settings.accessKey,
-	} satisfies NewMarketplaceSettings;
 
 	const marketCollections = (
 		builderMarketplaceConfig.marketCollections ?? []
 	).map((collection) => {
 		return {
-			chainId: collection.chainId,
-			bannerUrl: collection.bannerUrl,
+			...collection,
 			contractType: collection.contractType as ContractType,
-			marketplaceType: MarketplaceType.MARKET,
-			itemsAddress: collection.itemsAddress,
-			feePercentage: collection.feePercentage,
-			currencyOptions: collection.currencyOptions,
-			filterSettings: collection.filterSettings,
-			destinationMarketplace: collection.destinationMarketplace,
+			marketplaceType: 'market',
 		} satisfies MarketCollection;
 	});
 
-	const shopCollections = tmpShopConfig?.collections.map((collection) => {
-		return {
-			chainId: collection.chainId,
-			bannerUrl: collection.bannerUrl,
-			contractType: collection.contractType,
-			marketplaceType: MarketplaceType.SHOP,
-			itemsAddress: collection.address,
-			filterSettings: undefined,
-			saleAddress: collection.primarySalesContractAddress,
-		} satisfies ShopCollection;
-	});
+	const shopCollections = builderMarketplaceConfig.shopCollections.map(
+		(collection) => {
+			return {
+				...collection,
+				marketplaceType: 'shop',
+			} satisfies ShopCollection;
+		},
+	);
 
 	const market = {
-		enabled: true,
-		bannerUrl: builderMarketplaceConfig.marketplace.market.bannerUrl,
-		ogImage: builderMarketplaceConfig.marketplace.market.ogImage,
+		...builderMarketplaceConfig.marketplace.market,
 		collections: marketCollections,
 	} satisfies MarketPage;
 
 	const shop = {
-		enabled: tmpShopConfig !== undefined,
-		bannerUrl: tmpShopConfig?.bannerUrl ?? '',
-		ogImage: tmpShopConfig?.ogImage,
+		...builderMarketplaceConfig.marketplace.shop,
 		collections: shopCollections ?? [],
 	} satisfies ShopPage;
 
-	return {
-		projectId: Number(projectId),
-		settings,
+	let marketplaceConfig = {
+		projectId: Number(config.projectId),
+		settings: builderMarketplaceConfig.marketplace.settings,
 		market,
 		shop,
 	} satisfies MarketplaceConfig;
-};
 
-export const marketplaceConfigOptions = (config: SdkConfig) => {
-	let env: Env = 'production';
-	if ('_internal' in config && config._internal !== undefined) {
-		env = config._internal.builderEnv ?? env;
+	if (config._internal?.overrides?.marketplaceConfig) {
+		const overrides = config._internal.overrides.marketplaceConfig;
+		marketplaceConfig = {
+			...marketplaceConfig,
+			...overrides,
+			market: {
+				...marketplaceConfig.market,
+				...overrides.market,
+				//@ts-expect-error - TODO: Fix this partial type
+				collections:
+					overrides.market?.collections ?? marketplaceConfig.market.collections,
+			},
+			shop: {
+				...marketplaceConfig.shop,
+				...overrides.shop,
+				//@ts-expect-error - TODO: Fix this partial type
+				collections:
+					overrides.shop?.collections ?? marketplaceConfig.shop.collections,
+			},
+		};
 	}
 
-	let prefetchedMarketplaceSettings: LookupMarketplaceReturn | undefined;
-	if (
-		'_internal' in config &&
-		config._internal?.prefetchedMarketplaceSettings
-	) {
-		prefetchedMarketplaceSettings =
-			config._internal.prefetchedMarketplaceSettings;
-	}
+	return marketplaceConfig;
+};
 
-	const projectId = config.projectId;
-	const projectAccessKey = config.projectAccessKey;
+export const marketplaceConfigOptions = (config: SdkConfig) => {
+	const prefetchedMarketplaceSettings =
+		config._internal?.prefetchedMarketplaceSettings;
 
 	return queryOptions({
-		queryKey: [...configKeys.marketplace, env, projectId],
+		queryKey: [...configKeys.marketplace],
 		queryFn: () =>
 			fetchMarketplaceConfig({
-				env,
-				projectId,
-				projectAccessKey,
+				config,
 				prefetchedMarketplaceSettings,
-				tmpShopConfig: config.tmpShopConfig,
 			}),
 	});
 };

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",
+    "title": "Mock Market Page",
   },
   "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,38 @@ 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",
+        "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",
+        "updatedAt": "2025-03-16T13:04:16.098Z",
+      },
+    ],
+    "enabled": true,
+    "ogImage": "https://example.com/shop-og-image.png",
+    "title": "Mock Shop Page",
   },
 }
 `;

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 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/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';
 
 describe('useActionButtonLogic', () => {
 	const onCannotPerformActionMock = vi.fn();

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';