@0xsequence/marketplace-sdk 0.10.0 → 1.1.0

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

@@ -0,0 +1,43 @@
+import { SequenceCheckoutProvider } from '@0xsequence/checkout';
+import { observer } from '@legendapp/state/react';
+import type { ReactNode } from 'react';
+import { useConfig } from '../hooks';
+import SwitchChainErrorModal from '../ui/modals/_internal/components/switchChainErrorModal';
+import TransactionStatusModal from '../ui/modals/_internal/components/transactionStatusModal';
+import { BuyModal } from '../ui/modals/BuyModal/components/Modal';
+import { CreateListingModal } from '../ui/modals/CreateListingModal/Modal';
+import { MakeOfferModal } from '../ui/modals/MakeOfferModal/Modal';
+import { SellModal } from '../ui/modals/SellModal/Modal';
+import SuccessfulPurchaseModal from '../ui/modals/SuccessfulPurchaseModal';
+import { TransferModal } from '../ui/modals/TransferModal';
+import { ShadowRoot } from './shadow-root';
+
+interface ModalProviderProps {
+	children?: ReactNode;
+}
+
+export const ModalProvider = observer(({ children }: ModalProviderProps) => {
+	const { shadowDom, experimentalShadowDomCssOverride } = useConfig();
+
+	return (
+		<>
+			{children}
+			<SequenceCheckoutProvider>
+				<ShadowRoot
+					enabled={shadowDom ?? true}
+					customCSS={experimentalShadowDomCssOverride}
+				>
+					<CreateListingModal />
+					<MakeOfferModal />
+					<TransferModal />
+					<SellModal />
+					<BuyModal />
+					<SuccessfulPurchaseModal />
+					{/* Helper modals */}
+					<SwitchChainErrorModal />
+					<TransactionStatusModal />
+				</ShadowRoot>
+			</SequenceCheckoutProvider>
+		</>
+	);
+});

package/src/react/{__tests__ → providers}/provider.test.tsx

@@ -7,7 +7,7 @@ import { beforeEach, describe, expect, it } from 'vitest';
 import { render } from '../../../test/test-utils';
 import type { SdkConfig } from '../../types';
 import { InvalidProjectAccessKeyError } from '../../utils/_internal/error/config';
-import { MarketplaceProvider, MarketplaceSdkContext } from '../provider';
+import { MarketplaceProvider, MarketplaceSdkContext } from '.';
 
 expect.extend(matchers);
 

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/__tests__/balanceOfCollectible.laos.test.ts

@@ -33,7 +33,7 @@ describe('fetchBalanceOfCollectible with LAOS', () => {
 			mockConfig,
 		);
 
-		// Should return first balance from LAOS API response
+		// Should return array of balances from LAOS API response
 		expect(result).toEqual(mockTokenBalancesResponse.balances[0]);
 		expect(result?.balance).toBe('5');
 		expect(result?.contractInfo?.type).toBe('LAOS-ERC-721');
@@ -71,7 +71,7 @@ describe('fetchBalanceOfCollectible with LAOS', () => {
 			mockConfig,
 		);
 
-		expect(result).toBeNull();
+		expect(result).toEqual(null);
 	});
 
 	it('should include metadata in LAOS response', async () => {
@@ -116,7 +116,7 @@ describe('fetchBalanceOfCollectible with LAOS', () => {
 			mockConfig,
 		);
 
-		// Should return first balance regardless of sort order
+		// Should return array of balances regardless of sort order
 		expect(result).toBeDefined();
 		expect(result?.balance).toBeDefined();
 	});

package/src/react/queries/__tests__/inventory.laos.test.ts

@@ -5,7 +5,7 @@ import { ContractType } from '../../_internal';
 import { mockIndexerEndpoint } from '../../_internal/api/__mocks__/indexer.msw';
 import { laosHandlers } from '../../_internal/api/__mocks__/laos.msw';
 import { mockMarketplaceEndpoint } from '../../_internal/api/__mocks__/marketplace.msw';
-import { clearInventoryState, fetchInventory } from '../inventory';
+import { fetchInventory } from '../inventory';
 
 describe('fetchInventory with LAOS', () => {
 	const mockConfig = {
@@ -27,7 +27,6 @@ describe('fetchInventory with LAOS', () => {
 
 	afterEach(() => {
 		server.resetHandlers();
-		clearInventoryState();
 	});
 
 	it('should fetch LAOS inventory using LAOS API', async () => {
@@ -270,7 +269,11 @@ describe('fetchInventory with LAOS', () => {
 
 		expect(result).toBeDefined();
 		expect(result.collectibles).toEqual([]);
-		expect(result.page.more).toBe(false);
+		// Page structure has changed, no more 'more' property
+		expect(result.page).toEqual({
+			page: 1,
+			pageSize: 10,
+		});
 	});
 
 	it('should include LAOS metadata in inventory items', async () => {

package/src/react/queries/__tests__/tokenBalances.laos.test.ts

@@ -0,0 +1,123 @@
+import { server } from '@test';
+import { afterEach, describe, expect, it } from 'vitest';
+import {
+	laosHandlers,
+	mockTokenBalancesResponse,
+} from '../../_internal/api/__mocks__/laos.msw';
+import { fetchTokenBalances } from '../tokenBalances';
+
+describe('fetchTokenBalances with LAOS', () => {
+	const mockConfig = {
+		projectAccessKey: 'test-key',
+		projectId: '1',
+		chainId: 11155111,
+		apiUrl: 'https://marketplace-api.sequence.app',
+		isDev: false,
+	};
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('should use LAOS API when isLaos721=true', async () => {
+		server.use(...laosHandlers);
+
+		const result = await fetchTokenBalances(
+			{
+				collectionAddress: '0x1234567890123456789012345678901234567890',
+				userAddress: '0xuser1234567890123456789012345678901234567890',
+				chainId: 11155111,
+				isLaos721: true,
+			},
+			mockConfig,
+		);
+
+		// Should return array of balances from LAOS API response
+		expect(result).toEqual(mockTokenBalancesResponse.balances);
+		expect(result[0]?.balance).toBe('5');
+		expect(result[0]?.contractInfo?.type).toBe('LAOS-ERC-721');
+		expect(result[0]?.tokenMetadata?.name).toBe('Test Token 1');
+	});
+
+	it('should handle LAOS API errors', async () => {
+		server.use(...laosHandlers);
+
+		await expect(
+			fetchTokenBalances(
+				{
+					collectionAddress: '0x1234567890123456789012345678901234567890',
+					userAddress: '0x0000000000000000000000000000000000000001', // Special address for 500 error
+					chainId: 11155111,
+					isLaos721: true,
+				},
+				mockConfig,
+			),
+		).rejects.toThrow('Failed to get token balances: Internal Server Error');
+	});
+
+	it('should return empty array when LAOS API returns empty balances', async () => {
+		server.use(...laosHandlers);
+
+		const result = await fetchTokenBalances(
+			{
+				collectionAddress: '0x1234567890123456789012345678901234567890',
+				userAddress: '0x0000000000000000000000000000000000000003', // Special address for empty response
+				chainId: 11155111,
+				isLaos721: true,
+			},
+			mockConfig,
+		);
+
+		expect(result).toEqual([]);
+	});
+
+	it('should include metadata in LAOS response', async () => {
+		server.use(...laosHandlers);
+
+		const result = await fetchTokenBalances(
+			{
+				collectionAddress: '0x1234567890123456789012345678901234567890',
+				userAddress: '0xuser1234567890123456789012345678901234567890',
+				chainId: 11155111,
+				isLaos721: true,
+			},
+			mockConfig,
+		);
+
+		expect(result[0]?.tokenMetadata).toBeDefined();
+		expect(result[0]?.tokenMetadata?.name).toBe('Test Token 1');
+		expect(result[0]?.tokenMetadata?.description).toBe(
+			'A test token for LAOS testing',
+		);
+		expect(result[0]?.tokenMetadata?.image).toBe(
+			'https://example.com/token1.png',
+		);
+		expect(result[0]?.tokenMetadata?.attributes).toEqual([
+			{
+				trait_type: 'Rarity',
+				value: 'Common',
+			},
+		]);
+	});
+
+	it('should handle different pagination orders', async () => {
+		server.use(...laosHandlers);
+
+		const result = await fetchTokenBalances(
+			{
+				collectionAddress: '0x1234567890123456789012345678901234567890',
+				userAddress: '0xuser1234567890123456789012345678901234567890',
+				chainId: 11155111,
+				isLaos721: true,
+			},
+			mockConfig,
+		);
+
+		// Should return array of balances regardless of sort order
+		expect(result).toBeDefined();
+		expect(Array.isArray(result)).toBe(true);
+		expect(result.every((balance) => typeof balance.balance === 'string')).toBe(
+			true,
+		);
+	});
+});

package/src/react/queries/balanceOfCollectible.ts

@@ -10,6 +10,7 @@ export type UseBalanceOfCollectibleArgs = {
 	userAddress: Address | undefined;
 	chainId: number;
 	isLaos721?: boolean;
+	includeMetadata?: boolean;
 	query?: UseQueryParameters;
 };
 
@@ -44,7 +45,7 @@ export async function fetchBalanceOfCollectible(
 			accountAddress: args.userAddress,
 			contractAddress: args.collectionAddress,
 			tokenID: args.collectableId,
-			includeMetadata: false,
+			includeMetadata: args.includeMetadata ?? false,
 			metadataOptions: {
 				verifiedOnly: true,
 				includeContracts: [args.collectionAddress],

package/src/react/queries/filters.ts

@@ -53,30 +53,26 @@ export async function fetchFilters(
 		compareAddress(c.itemsAddress, collectionAddress),
 	)?.filterSettings;
 
-	if (
-		!collectionFilters?.exclusions ||
-		collectionFilters.exclusions.length === 0 ||
-		!collectionFilters.filterOrder ||
-		collectionFilters.filterOrder.length === 0
-	)
-		return filters;
-
-	const { filterOrder, exclusions } = collectionFilters;
-
-	const sortedFilters = filters.toSorted((a, b) => {
-		const aIndex =
-			filterOrder.indexOf(a.name) > -1
-				? filterOrder.indexOf(a.name)
-				: filterOrder.length;
-		const bIndex =
-			filterOrder.indexOf(b.name) > -1
-				? filterOrder.indexOf(b.name)
-				: filterOrder.length;
-		return aIndex - bIndex;
-	});
-
-	const filteredResults = sortedFilters.reduce<PropertyFilter[]>(
-		(acc, filter) => {
+	const filterOrder = collectionFilters?.filterOrder;
+	const exclusions = collectionFilters?.exclusions;
+	let sortedFilters = filters;
+
+	if (filterOrder) {
+		sortedFilters = filters.toSorted((a, b) => {
+			const aIndex =
+				filterOrder.indexOf(a.name) > -1
+					? filterOrder.indexOf(a.name)
+					: filterOrder.length;
+			const bIndex =
+				filterOrder.indexOf(b.name) > -1
+					? filterOrder.indexOf(b.name)
+					: filterOrder.length;
+			return aIndex - bIndex;
+		});
+	}
+
+	if (exclusions) {
+		sortedFilters = sortedFilters.reduce<PropertyFilter[]>((acc, filter) => {
 			const exclusionRule = exclusions.find((rule) => rule.key === filter.name);
 
 			if (!exclusionRule) {
@@ -100,11 +96,10 @@ export async function fetchFilters(
 			}
 
 			return acc;
-		},
-		[],
-	);
+		}, []);
+	}
 
-	return filteredResults;
+	return sortedFilters;
 }
 
 export type FiltersQueryOptions = ValuesOptional<FetchFiltersParams> & {

package/src/react/queries/index.ts

@@ -1,15 +1,35 @@
 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 './listOffersForCollectible';
 export * from './listTokenMetadata';
 export * from './lowestListing';
 export * from './marketCurrencies';
+export * from './marketplaceConfig';
+export * from './primarySaleItems';
+export * from './primarySaleItemsCount';
+export * from './searchTokenMetadata';
 export * from './tokenSupplies';