@0xsequence/marketplace-sdk 0.8.12 → 0.10.0

package/src/react/hooks/useTokenSupplies.ts

@@ -0,0 +1,81 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import type { Optional } from '../_internal';
+import {
+	type FetchTokenSuppliesParams,
+	type TokenSuppliesQueryOptions,
+	tokenSuppliesQueryOptions,
+} from '../queries/tokenSupplies';
+import { useConfig } from './useConfig';
+
+export type UseTokenSuppliesParams = Optional<
+	TokenSuppliesQueryOptions,
+	'config'
+>;
+
+/**
+ * Hook to fetch token supplies from the indexer or LAOS API
+ *
+ * Retrieves supply information for tokens from a specific collection.
+ * Automatically chooses between indexer and LAOS APIs based on the isLaos721 flag.
+ *
+ * @param params - Configuration parameters
+ * @param params.chainId - The chain ID (must be number, e.g., 1 for Ethereum, 137 for Polygon)
+ * @param params.collectionAddress - The collection contract address
+ * @param params.isLaos721 - Whether to use LAOS API instead of indexer
+ * @param params.includeMetadata - Whether to include token metadata
+ * @param params.page - Pagination options
+ * @param params.query - Optional React Query configuration
+ *
+ * @returns Query result containing token supplies
+ *
+ * @example
+ * Basic usage:
+ * ```typescript
+ * const { data, isLoading } = useTokenSupplies({
+ *   chainId: 137,
+ *   collectionAddress: '0x...'
+ * })
+ * ```
+ *
+ * @example
+ * With LAOS API:
+ * ```typescript
+ * const { data, isLoading } = useTokenSupplies({
+ *   chainId: 1,
+ *   collectionAddress: '0x...',
+ *   isLaos721: true
+ * })
+ * ```
+ *
+ * @example
+ * With conditional fetching:
+ * ```typescript
+ * const { data, isLoading } = useTokenSupplies({
+ *   chainId: 1,
+ *   collectionAddress: selectedCollection,
+ *   query: {
+ *     enabled: !!selectedCollection
+ *   }
+ * })
+ * ```
+ */
+export function useTokenSupplies(params: UseTokenSuppliesParams) {
+	const defaultConfig = useConfig();
+
+	const { config = defaultConfig, ...rest } = params;
+
+	const queryOptions = tokenSuppliesQueryOptions({
+		config,
+		...rest,
+	});
+
+	return useQuery({
+		...queryOptions,
+	});
+}
+
+export { tokenSuppliesQueryOptions };
+
+export type { FetchTokenSuppliesParams, TokenSuppliesQueryOptions };

package/src/react/hooks/useTransferTokens.tsx

@@ -1,4 +1,4 @@
-import { type Abi, type Address, type Hex, erc721Abi } from 'viem';
+import { type Abi, type Address, erc721Abi } from 'viem';
 import { useAccount, useWriteContract } from 'wagmi';
 import { ERC1155_ABI } from '../../utils';
 import { NoWalletConnectedError } from '../../utils/_internal/error/transaction';
@@ -6,7 +6,7 @@ import type { ContractType } from '../_internal';
 
 interface BaseTransferParams {
 	chainId: number;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	tokenId: string;
 	receiverAddress: Address;
 }

package/src/react/hooks/util/optimisticCancelUpdates.ts

@@ -1,10 +1,10 @@
 import type { QueryClient } from '@tanstack/react-query';
 import {
+	collectableKeys,
 	type GetCountOfListingsForCollectibleReturn,
 	type GetCountOfOffersForCollectibleReturn,
 	type ListListingsForCollectibleReturn,
 	type ListOffersForCollectibleReturn,
-	collectableKeys,
 } from '../../_internal';
 
 const SECOND = 1000;
@@ -21,13 +21,11 @@ export const updateQueriesOnCancel = ({
 	queryClient.setQueriesData(
 		{ queryKey: collectableKeys.offersCount, exact: false },
 		(oldData: GetCountOfOffersForCollectibleReturn | undefined) => {
-			if (!oldData) return { count: 0 };
-			return { count: Math.max(0, oldData.count - 1) };
+			if (!oldData) return 0;
+			return Math.max(0, oldData.count - 1);
 		},
 	);
 
-	console.log('query client ', queryClient, 'orderId', orderId);
-
 	// remove the offer with matching orderId
 	queryClient.setQueriesData(
 		{ queryKey: collectableKeys.offers, exact: false },
@@ -51,8 +49,8 @@ export const updateQueriesOnCancel = ({
 	queryClient.setQueriesData(
 		{ queryKey: collectableKeys.listingsCount, exact: false },
 		(oldData: GetCountOfListingsForCollectibleReturn | undefined) => {
-			if (!oldData) return { count: 0 };
-			return { count: Math.max(0, oldData.count - 1) };
+			if (!oldData) return 0;
+			return Math.max(0, oldData.count - 1);
 		},
 	);
 

package/src/react/index.ts

@@ -1,6 +1,8 @@
-export * from './provider';
-export * from './hooks';
-export * from './hooks/options';
 export * from './_internal/api/get-query-client';
 export * from './_internal/wagmi/create-config';
+export * from './hooks';
+export * from './hooks/options';
+export * from './provider';
+export * from './queries';
+export * from './types/query';
 export * from './ui/index';

package/src/react/provider.tsx

@@ -1,19 +1,78 @@
 'use client';
 
+import { useOpenConnectModal } from '@0xsequence/connect';
+import type { Auth } from '@databeat/tracker';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { createContext } from 'react';
-import type { SdkConfig } from '../types';
+import { createContext, useMemo } from 'react';
+import type {
+	MarketplaceSdkContext as MarketplaceSdkContextType,
+	SdkConfig,
+} from '../types';
 import { InvalidProjectAccessKeyError } from '../utils/_internal/error/config';
 import { getQueryClient } from './_internal/api/get-query-client';
+import { DatabeatAnalytics } from './_internal/databeat';
 import { PROVIDER_ID } from './_internal/get-provider';
 
-export const MarketplaceSdkContext = createContext({} as SdkConfig);
+export const MarketplaceSdkContext = createContext(
+	{} as MarketplaceSdkContextType,
+);
 
 export type MarketplaceSdkProviderProps = {
 	config: SdkConfig;
 	children: React.ReactNode;
+	openConnectModal?: () => void;
 };
 
+export function MarketplaceProvider({
+	config,
+	children,
+	openConnectModal,
+}: MarketplaceSdkProviderProps) {
+	if (config.projectAccessKey === '' || !config.projectAccessKey) {
+		throw new InvalidProjectAccessKeyError(config.projectAccessKey);
+	}
+
+	const analytics = useMemo(() => {
+		const server = 'https://nodes.sequence.app';
+		const auth: Auth = {};
+		auth.headers = { 'X-Access-Key': config.projectAccessKey };
+
+		return new DatabeatAnalytics(server, auth, {
+			defaultEnabled: true,
+			initProps: () => {
+				return {
+					origin: typeof window !== 'undefined' ? window.location.origin : '',
+				};
+			},
+		});
+	}, [config.projectAccessKey, window]);
+
+	if (openConnectModal) {
+		const context: MarketplaceSdkContextType = {
+			...config,
+			openConnectModal,
+			analytics,
+		};
+
+		return (
+			<MarketplaceQueryClientProvider>
+				<MarketplaceSdkContext.Provider value={context}>
+					<div id={PROVIDER_ID}>{children}</div>
+				</MarketplaceSdkContext.Provider>
+			</MarketplaceQueryClientProvider>
+		);
+	}
+
+	return (
+		<MarketplaceProviderWithSequenceConnect
+			config={config}
+			analytics={analytics}
+		>
+			{children}
+		</MarketplaceProviderWithSequenceConnect>
+	);
+}
+
 export function MarketplaceQueryClientProvider({
 	children,
 }: {
@@ -25,17 +84,22 @@ export function MarketplaceQueryClientProvider({
 	);
 }
 
-export function MarketplaceProvider({
+function MarketplaceProviderWithSequenceConnect({
 	config,
 	children,
-}: MarketplaceSdkProviderProps) {
-	if (config.projectAccessKey === '' || !config.projectAccessKey) {
-		throw new InvalidProjectAccessKeyError(config.projectAccessKey);
-	}
+	analytics,
+}: MarketplaceSdkProviderProps & { analytics: DatabeatAnalytics }) {
+	const { setOpenConnectModal } = useOpenConnectModal();
+
+	const context: MarketplaceSdkContextType = {
+		...config,
+		openConnectModal: () => setOpenConnectModal(true),
+		analytics,
+	};
 
 	return (
 		<MarketplaceQueryClientProvider>
-			<MarketplaceSdkContext.Provider value={config}>
+			<MarketplaceSdkContext.Provider value={context}>
 				<div id={PROVIDER_ID}>{children}</div>
 			</MarketplaceSdkContext.Provider>
 		</MarketplaceQueryClientProvider>

package/src/react/queries/__tests__/balanceOfCollectible.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 { fetchBalanceOfCollectible } from '../balanceOfCollectible';
+
+describe('fetchBalanceOfCollectible 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 fetchBalanceOfCollectible(
+			{
+				collectionAddress: '0x1234567890123456789012345678901234567890',
+				collectableId: '1',
+				userAddress: '0xuser1234567890123456789012345678901234567890',
+				chainId: 11155111,
+				isLaos721: true,
+			},
+			mockConfig,
+		);
+
+		// Should return first balance from LAOS API response
+		expect(result).toEqual(mockTokenBalancesResponse.balances[0]);
+		expect(result?.balance).toBe('5');
+		expect(result?.contractInfo?.type).toBe('LAOS-ERC-721');
+		expect(result?.tokenMetadata?.name).toBe('Test Token 1');
+	});
+
+	it('should handle LAOS API errors', async () => {
+		server.use(...laosHandlers);
+
+		await expect(
+			fetchBalanceOfCollectible(
+				{
+					collectionAddress: '0x1234567890123456789012345678901234567890',
+					collectableId: '1',
+					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 null when LAOS API returns empty balances', async () => {
+		server.use(...laosHandlers);
+
+		const result = await fetchBalanceOfCollectible(
+			{
+				collectionAddress: '0x1234567890123456789012345678901234567890',
+				collectableId: '1',
+				userAddress: '0x0000000000000000000000000000000000000003', // Special address for empty response
+				chainId: 11155111,
+				isLaos721: true,
+			},
+			mockConfig,
+		);
+
+		expect(result).toBeNull();
+	});
+
+	it('should include metadata in LAOS response', async () => {
+		server.use(...laosHandlers);
+
+		const result = await fetchBalanceOfCollectible(
+			{
+				collectionAddress: '0x1234567890123456789012345678901234567890',
+				collectableId: '1',
+				userAddress: '0xuser1234567890123456789012345678901234567890',
+				chainId: 11155111,
+				isLaos721: true,
+			},
+			mockConfig,
+		);
+
+		expect(result?.tokenMetadata).toBeDefined();
+		expect(result?.tokenMetadata?.name).toBe('Test Token 1');
+		expect(result?.tokenMetadata?.description).toBe(
+			'A test token for LAOS testing',
+		);
+		expect(result?.tokenMetadata?.image).toBe('https://example.com/token1.png');
+		expect(result?.tokenMetadata?.attributes).toEqual([
+			{
+				trait_type: 'Rarity',
+				value: 'Common',
+			},
+		]);
+	});
+
+	it('should handle different pagination orders', async () => {
+		server.use(...laosHandlers);
+
+		const result = await fetchBalanceOfCollectible(
+			{
+				collectionAddress: '0x1234567890123456789012345678901234567890',
+				collectableId: '1',
+				userAddress: '0xuser1234567890123456789012345678901234567890',
+				chainId: 11155111,
+				isLaos721: true,
+			},
+			mockConfig,
+		);
+
+		// Should return first balance regardless of sort order
+		expect(result).toBeDefined();
+		expect(result?.balance).toBeDefined();
+	});
+});