@0xsequence/marketplace-sdk 0.5.1 → 0.5.3

package/src/react/_internal/api/__mocks__/metadata.msw.ts

@@ -0,0 +1,162 @@
+import {
+	ResourceStatus,
+	type ContractInfo,
+	PropertyType,
+} from '@0xsequence/metadata';
+import { http, HttpResponse } from 'msw';
+import type { TokenMetadata, PropertyFilter } from '../marketplace.gen';
+import { zeroAddress } from 'viem';
+
+// Debug configuration
+export let isDebugEnabled = false;
+export const enableDebug = () => {
+	isDebugEnabled = true;
+};
+export const disableDebug = () => {
+	isDebugEnabled = false;
+};
+
+// Debug logger function
+const debugLog = (endpoint: string, request: unknown, response: unknown) => {
+	if (isDebugEnabled) {
+		console.log(`[MSW Debug] ${endpoint}:`, {
+			request,
+			response,
+		});
+	}
+};
+
+// Mock data
+export const mockContractInfo: ContractInfo = {
+	address: zeroAddress,
+	chainId: 1,
+	name: 'Mock Collection',
+	symbol: 'MOCK',
+	source: 'https://example.com/source',
+	notFound: false,
+	status: ResourceStatus.AVAILABLE,
+	type: 'ERC721',
+	deployed: true,
+	updatedAt: new Date().toISOString(),
+	bytecodeHash: '0x1234567890',
+	extensions: {
+		description: 'A mock collection for testing',
+		link: 'https://example.com',
+		ogImage: 'https://example.com/image.png',
+		ogName: 'Mock Collection',
+		originAddress: '0x0000000000000000000000000000000000000000',
+		originChainId: 1,
+		verified: true,
+		categories: ['Mock'],
+		blacklist: false,
+		verifiedBy: '0x',
+		featured: true,
+	},
+	logoURI: 'https://example.com/logo.png',
+};
+
+export const mockTokenMetadata: TokenMetadata = {
+	tokenId: '1',
+	name: 'Mock NFT #1',
+	description: 'A mock NFT for testing purposes',
+	image: 'https://example.com/nft.png',
+	video: 'https://example.com/nft.mp4',
+	audio: 'https://example.com/nft.mp3',
+	properties: {
+		series: 'Mock Series',
+		edition: 1,
+	},
+	attributes: [
+		{ trait_type: 'Type', value: 'Mock' },
+		{ trait_type: 'Rarity', value: 'Common' },
+	],
+	image_data: 'data:image/svg+xml;base64,...',
+	external_url: 'https://example.com/nft/1',
+	background_color: '#ffffff',
+	animation_url: 'https://example.com/nft/1/animation',
+	decimals: 0,
+	updatedAt: new Date().toISOString(),
+	assets: [
+		{
+			id: 1,
+			collectionId: 1,
+			tokenId: '1',
+			url: 'https://example.com/nft.png',
+			metadataField: 'image',
+			name: 'Main Image',
+			filesize: 1024,
+			mimeType: 'image/png',
+			width: 1000,
+			height: 1000,
+			updatedAt: new Date().toISOString(),
+		},
+	],
+};
+
+export const mockPropertyFilters: PropertyFilter[] = [
+	{
+		name: 'Type',
+		type: PropertyType.STRING,
+		values: ['Mock', 'Test', 'Sample'],
+	},
+	{
+		name: 'Rarity',
+		type: PropertyType.STRING,
+		values: ['Common', 'Uncommon', 'Rare', 'Epic', 'Legendary'],
+	},
+];
+
+// The transformed format that the hook returns when not using showAllFilters
+export const mockFilters = [
+	{
+		id: 'type',
+		name: 'Type',
+		values: ['Mock', 'Test', 'Sample'],
+	},
+	{
+		id: 'rarity',
+		name: 'Rarity',
+		values: ['Common', 'Uncommon', 'Rare', 'Epic', 'Legendary'],
+	},
+];
+
+type Endpoint =
+	| 'GetContractInfo'
+	| 'GetTokenMetadata'
+	| 'TokenCollectionFilters'
+	| 'GetContractInfoBatch';
+
+export const mockMetadataEndpoint = (endpoint: Endpoint) =>
+	`*/rpc/Metadata/${endpoint}`;
+
+// Add JsonValue type constraint to ensure response is JSON-serializable
+export const mockMetadataHandler = <T extends Record<string, unknown>>(
+	endpoint: Endpoint,
+	response: T,
+) => {
+	return http.post(mockMetadataEndpoint(endpoint), (request) => {
+		debugLog(endpoint, request, response);
+		return HttpResponse.json(response);
+	});
+};
+
+// MSW handlers
+export const handlers = [
+	mockMetadataHandler('GetContractInfo', {
+		contractInfo: mockContractInfo,
+	}),
+
+	mockMetadataHandler('GetTokenMetadata', {
+		tokenMetadata: [mockTokenMetadata],
+	}),
+
+	mockMetadataHandler('TokenCollectionFilters', {
+		filters: mockPropertyFilters,
+	}),
+
+	mockMetadataHandler('GetContractInfoBatch', {
+		contractInfoMap: {
+			[mockContractInfo.address]: mockContractInfo,
+		},
+	}),
+];

package/src/react/_internal/test/mocks/publicClient.ts

@@ -0,0 +1,39 @@
+import { vi } from 'vitest';
+import type { PublicClient } from 'viem';
+
+export type MockPublicClient = PublicClient;
+
+/**
+ * Common mock implementations for public client functions
+ */
+export const commonPublicClientMocks = {
+	getBalance: vi.fn().mockResolvedValue(BigInt('1000000000000000000')), // 1 ETH
+	readContract: vi.fn().mockImplementation(async ({ functionName }) => {
+		if (functionName === 'balanceOf') {
+			return BigInt('1000000000000000000'); // 1 Token
+		}
+		if (functionName === 'decimals') {
+			return 18;
+		}
+		return BigInt(0);
+	}),
+};
+
+/**
+ * Creates a mock public client with pre-configured mock functions for testing
+ * @param overrides - Optional overrides for the default mock implementations
+ * @returns A mock public client instance with vitest mock functions
+ */
+export function createMockPublicClient(
+	overrides?: Partial<MockPublicClient>,
+): MockPublicClient {
+	const defaultMockPublicClient = {
+		getBalance: commonPublicClientMocks.getBalance,
+		readContract: commonPublicClientMocks.readContract,
+	} as unknown as PublicClient;
+
+	return {
+		...defaultMockPublicClient,
+		...overrides,
+	};
+}

package/src/react/_internal/test/mocks/wagmi.ts

@@ -0,0 +1,61 @@
+import { vi } from 'vitest';
+import type { Config } from 'wagmi';
+import type { ReactNode } from 'react';
+import { zeroAddress } from 'viem';
+
+export type MockWagmiConfig = Config;
+
+/**
+ * Common mock implementations for wagmi hooks and functions
+ */
+export const commonWagmiMocks = {
+	useAccount: vi.fn().mockReturnValue({
+		address: zeroAddress,
+		isConnecting: false,
+		isDisconnected: false,
+		isReconnecting: false,
+		status: 'connected',
+	}),
+	createConfig: vi.fn().mockReturnValue({
+		chains: [],
+		connectors: [],
+		transports: {},
+	}),
+	http: vi.fn().mockReturnValue({}),
+	WagmiProvider: vi
+		.fn()
+		.mockImplementation(({ children }: { children: ReactNode }) => children),
+};
+
+/**
+ * Creates mock wagmi hooks and functions with pre-configured implementations for testing
+ * @param overrides - Optional overrides for the default mock implementations
+ * @returns Mock wagmi hooks and functions with vitest mock functions
+ */
+export function createMockWagmi(overrides?: Partial<typeof commonWagmiMocks>) {
+	return {
+		...commonWagmiMocks,
+		...overrides,
+	};
+}
+
+/**
+ * Mock chain data for testing
+ */
+export const mockChains = {
+	mainnet: { id: 1, name: 'Ethereum', network: 'mainnet' },
+	sepolia: { id: 11155111, name: 'Sepolia', network: 'sepolia' },
+};
+
+/**
+ * Mock connector data for testing
+ */
+export const mockConnectors = {
+	mock: () => ({
+		accounts: [
+			'0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+			'0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
+			'0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC',
+		],
+	}),
+};

package/src/react/_internal/test/mocks/wallet.ts

@@ -0,0 +1,61 @@
+import { vi } from 'vitest';
+import { custom, type Hex } from 'viem';
+import { WalletKind } from '../../api/marketplace.gen';
+import type { WalletInstance } from '../../wallet/wallet';
+import type { TransactionReceipt } from '@0xsequence/indexer';
+import { ChainSwitchUserRejectedError } from '../../../../utils/_internal/error/transaction';
+
+export type MockWallet = WalletInstance;
+
+/**
+ * Creates a mock wallet with pre-configured mock functions for testing
+ * @param overrides - Optional overrides for the default mock implementations
+ * @returns A mock wallet instance with vitest mock functions
+ */
+export function createMockWallet(overrides?: Partial<MockWallet>): MockWallet {
+	const defaultMockWallet: MockWallet = {
+		getChainId: vi.fn().mockResolvedValue(1),
+		switchChain: vi.fn().mockResolvedValue(undefined),
+		address: vi
+			.fn()
+			.mockResolvedValue('0x0000000000000000000000000000000000000000' as Hex),
+		handleSendTransactionStep: vi.fn().mockResolvedValue('0x123' as Hex),
+		handleSignMessageStep: vi.fn().mockResolvedValue('0xsignature' as Hex),
+		handleConfirmTransactionStep: vi
+			.fn()
+			.mockResolvedValue({} as TransactionReceipt),
+		isWaaS: false,
+		transport: custom({
+			request: vi.fn(),
+		}),
+		walletKind: WalletKind.unknown,
+		hasTokenApproval: vi.fn().mockResolvedValue(true),
+	};
+
+	return {
+		...defaultMockWallet,
+		...overrides,
+	};
+}
+
+/**
+ * Common mock implementations for wallet functions
+ * These are the actual mock functions that can be used directly or as overrides
+ */
+export const commonWalletMocks = {
+	successfulChainId: vi.fn().mockResolvedValue(1),
+	successfulAddress: vi
+		.fn()
+		.mockResolvedValue('0x0000000000000000000000000000000000000000' as Hex),
+	successfulTransaction: vi.fn().mockResolvedValue('0x123' as Hex),
+	successfulSignature: vi.fn().mockResolvedValue('0xsignature' as Hex),
+	successfulConfirmation: vi.fn().mockResolvedValue({} as TransactionReceipt),
+	successfulTokenApproval: vi.fn().mockResolvedValue(true),
+	chainSwitchRejection: vi
+		.fn()
+		.mockRejectedValue(new ChainSwitchUserRejectedError()),
+	transactionFailure: vi
+		.fn()
+		.mockRejectedValue(new Error('Transaction failed')),
+	signatureFailure: vi.fn().mockRejectedValue(new Error('Signature failed')),
+};

package/src/react/_internal/test/setup.ts

@@ -0,0 +1,28 @@
+import { afterAll, afterEach, beforeAll } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { setupServer } from 'msw/node';
+import { handlers as marketplaceHandlers } from '../api/__mocks__/marketplace.msw';
+import { handlers as metadataHandlers } from '../api/__mocks__/metadata.msw';
+import { handlers as indexerHandlers } from '../api/__mocks__/indexer.msw';
+import { handlers as marketplaceConfigHandlers } from '../../hooks/options/__mocks__/marketplaceConfig.msw';
+
+export const server = setupServer(
+	...marketplaceHandlers,
+	...metadataHandlers,
+	...indexerHandlers,
+	...marketplaceConfigHandlers,
+);
+
+beforeAll(() => {
+	server.listen();
+});
+
+afterEach(() => {
+	cleanup();
+	server.resetHandlers();
+});
+
+afterAll(() => {
+	server.close();
+});

package/src/react/_internal/test-utils.tsx

@@ -1,11 +1,14 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render as rtlRender } from '@testing-library/react';
+import { renderHook, render as rtlRender } from '@testing-library/react';
 import type { RenderOptions } from '@testing-library/react';
 import type { ReactElement } from 'react';
-import { createConfig, http, WagmiProvider } from 'wagmi';
+import { type Config, createConfig, http, WagmiProvider } from 'wagmi';
 import { mainnet, sepolia } from 'wagmi/chains';
 import { mock } from 'wagmi/connectors';
 
+// https://github.com/jsdom/jsdom/issues/1695
+window.HTMLElement.prototype.scrollIntoView = () => {};
+
 const createTestQueryClient = () =>
 	new QueryClient({
 		defaultOptions: {
@@ -25,6 +28,10 @@ const config = createConfig({
 				'0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
 				'0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC',
 			],
+			// TODO: Enable this once it works, so we won't have to manually connect the wallet in the tests.
+			// features: {
+			// 	defaultConnected: true,
+			// },
 		}),
 	],
 	transports: {
@@ -63,6 +70,28 @@ export function renderWithClient(
 	};
 }
 
+export function renderHookWithClient<P, R>(
+	callback: (props: P) => R,
+	options?: Omit<RenderOptions, 'queries'>,
+	wagmiConfig?: Config,
+) {
+	const testQueryClient = createTestQueryClient();
+
+	return renderHook(callback, {
+		wrapper: ({ children }) => {
+			return (
+				<WagmiProvider config={wagmiConfig ?? config}>
+					<QueryClientProvider client={testQueryClient}>
+						{children}
+					</QueryClientProvider>
+				</WagmiProvider>
+			);
+		},
+		...options,
+	});
+}
+
 export * from '@testing-library/react';
 
 export { renderWithClient as render };
+export { renderHookWithClient as renderHook };

package/src/react/_internal/wagmi/__tests__/create-config.test.ts

@@ -1,8 +1,13 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { createWagmiConfig } from '../create-config';
 import { getWaasConnectors } from '../embedded';
-import type { MarketplaceConfig, SdkConfig } from '../../../../types';
-import { WalletOptions } from '../../../../types';
+import {
+	MarketplaceType,
+	MarketplaceWallet,
+	OrderbookKind,
+	type MarketplaceConfig,
+	type SdkConfig,
+} from '../../../../types';
 import { polygon } from 'viem/chains';
 import { MissingConfigError } from '../../../../utils/_internal/error/transaction';
 import { cookieStorage, type Config } from 'wagmi';
@@ -13,25 +18,48 @@ describe('createWagmiConfig', () => {
 
 	beforeEach(() => {
 		baseMarketplaceConfig = {
-			projectId: 1,
+			cssString: '',
+			manifestUrl: '',
 			publisherId: 'test-publisher',
 			title: 'Test Marketplace',
 			shortDescription: 'Test Description',
+			socials: {
+				twitter: '',
+				discord: '',
+				website: '',
+				tiktok: '',
+				instagram: '',
+				youtube: '',
+			},
 			faviconUrl: 'https://test.com/favicon.ico',
 			landingBannerUrl: 'https://test.com/banner.jpg',
-			titleTemplate: '%s | Test',
-			walletOptions: [WalletOptions.Sequence],
+			walletOptions: {
+				walletType: MarketplaceWallet.UNIVERSAL,
+				oidcIssuers: {},
+				connectors: [],
+				includeEIP6963Wallets: false,
+			},
 			collections: [
 				{
-					collectionAddress: '0x1234567890123456789012345678901234567890',
+					address: '0x1234567890123456789012345678901234567890',
 					chainId: polygon.id,
-					marketplaceFeePercentage: 2.5,
-					marketplaceType: 'orderbook',
+					marketplaceType: MarketplaceType.ORDERBOOK,
+					currencyOptions: [],
+					destinationMarketplace: OrderbookKind.sequence_marketplace_v2,
+					filterSettings: {
+						filterOrder: [],
+						exclusions: [],
+					},
+					exchanges: [],
+					bannerUrl: '',
+					feePercentage: 0,
 				},
 			],
 			landingPageLayout: 'default',
-			cssString: '',
-			manifestUrl: 'https://test.com/manifest.json',
+			logoUrl: '',
+			bannerUrl: '',
+			fontUrl: '',
+			ogImage: '',
 		};
 
 		baseSdkConfig = {
@@ -59,10 +87,11 @@ describe('createWagmiConfig', () => {
 		it('should create config with universal wallet setup', () => {
 			const marketplaceConfig: MarketplaceConfig = {
 				...baseMarketplaceConfig,
-				walletOptionsNew: {
+				walletOptions: {
 					connectors: ['walletconnect', 'coinbase'],
 					includeEIP6963Wallets: true,
-					walletType: 'universal',
+					walletType: MarketplaceWallet.UNIVERSAL,
+					oidcIssuers: {},
 				},
 			};
 
@@ -81,10 +110,11 @@ describe('createWagmiConfig', () => {
 		it('should create config with embedded wallet setup', () => {
 			const marketplaceConfig: MarketplaceConfig = {
 				...baseMarketplaceConfig,
-				walletOptionsNew: {
+				walletOptions: {
 					connectors: ['walletconnect'],
 					includeEIP6963Wallets: false,
-					walletType: 'embedded',
+					walletType: MarketplaceWallet.EMBEDDED,
+					oidcIssuers: {},
 				},
 			};
 
@@ -109,10 +139,11 @@ describe('createWagmiConfig', () => {
 		it('should respect EIP6963 wallet inclusion setting', () => {
 			const marketplaceConfig: MarketplaceConfig = {
 				...baseMarketplaceConfig,
-				walletOptionsNew: {
+				walletOptions: {
 					connectors: ['walletconnect'],
 					includeEIP6963Wallets: false,
-					walletType: 'universal',
+					walletType: MarketplaceWallet.UNIVERSAL,
+					oidcIssuers: {},
 				},
 			};
 
@@ -145,10 +176,11 @@ describe('createWagmiConfig', () => {
 		it('should throw error when trying to use embedded wallet without waasConfigKey', () => {
 			const marketplaceConfig: MarketplaceConfig = {
 				...baseMarketplaceConfig,
-				walletOptionsNew: {
+				walletOptions: {
 					connectors: ['walletconnect'],
 					includeEIP6963Wallets: false,
-					walletType: 'embedded',
+					walletType: MarketplaceWallet.EMBEDDED,
+					oidcIssuers: {},
 				},
 			};
 
@@ -181,10 +213,11 @@ describe('createWagmiConfig', () => {
 		it('should still create config when walletConnectProjectId is missing', () => {
 			const marketplaceConfig: MarketplaceConfig = {
 				...baseMarketplaceConfig,
-				walletOptionsNew: {
+				walletOptions: {
 					connectors: ['walletconnect'],
 					includeEIP6963Wallets: true,
-					walletType: 'universal',
+					walletType: MarketplaceWallet.UNIVERSAL,
+					oidcIssuers: {},
 				},
 			};
 

package/src/react/_internal/wagmi/create-config.ts

@@ -24,15 +24,14 @@ export const createWagmiConfig = (
 			? getUniversalConnectors(marketplaceConfig, sdkConfig)
 			: getWaasConnectors(marketplaceConfig, sdkConfig);
 
-	// The old config did not support disabling EIP-6963 wallets
-	const includeEIP6963Wallets =
-		marketplaceConfig.walletOptionsNew?.includeEIP6963Wallets ?? true;
+	const multiInjectedProviderDiscovery =
+		marketplaceConfig.walletOptions.includeEIP6963Wallets;
 
 	return createConfig({
 		connectors,
 		chains,
 		ssr,
-		multiInjectedProviderDiscovery: includeEIP6963Wallets,
+		multiInjectedProviderDiscovery,
 		storage: ssr
 			? createStorage({
 					storage: cookieStorage,

package/src/react/_internal/wagmi/embedded.ts

@@ -28,10 +28,7 @@ export function getWaasConnectors(
 
 	const { title: appName } = marketplaceConfig;
 
-	// Normalizing the wallet options, TODO: remove this after the marketplaceConfig is updated
-	const walletOptions = marketplaceConfig.walletOptionsNew || {
-		connectors: ['coinbase', 'walletconnect'],
-	};
+	const walletOptions = marketplaceConfig.walletOptions;
 
 	const wallets: Wallet[] = [
 		emailWaas({

package/src/react/_internal/wagmi/universal.ts

@@ -48,10 +48,7 @@ function getWalletConfigs(
 ): Wallet[] {
 	const wallets: Wallet[] = [];
 
-	// Normalizing the wallet options, TODO: remove this after the marketplaceConfig is updated
-	const walletOptions = marketplaceConfig.walletOptionsNew || {
-		connectors: ['coinbase', 'walletconnect'],
-	};
+	const walletOptions = marketplaceConfig.walletOptions;
 
 	wallets.push(sequence(sequenceWalletOptions));
 

package/src/react/_internal/wallet/wallet.ts

@@ -130,6 +130,7 @@ export const wallet = ({
 					});
 					return await wallet.signTypedData({
 						account: wallet.account,
+						// biome-ignore lint/style/noNonNullAssertion: <explanation>
 						domain: stepItem.signature!.domain as TypedDataDomain,
 						// biome-ignore lint/style/noNonNullAssertion: <explanation>
 						types: stepItem.signature!.types,