@0xsequence/marketplace-sdk 0.10.0 → 1.1.0

package/.storybook/ConnectionStatus.tsx

@@ -0,0 +1,289 @@
+'use client';
+
+import type React from 'react';
+import { useEffect, useState } from 'react';
+import { useAccount, useConnect, useDisconnect } from 'wagmi';
+import { useConnectorMetadata } from '../src/react/hooks/config/useConnectorMetadata';
+import { TEST_ACCOUNTS } from '../test/const';
+
+type ConnectorType = 'mock' | 'waas' | 'sequence' | 'auto';
+
+export const ConnectionStatus: React.FC = () => {
+	const {
+		connect,
+		connectors,
+		error: connectError,
+		isPending: isConnecting,
+	} = useConnect();
+	const { disconnect } = useDisconnect();
+	const {
+		isConnected: wagmiConnected,
+		address: walletAddress,
+		chainId: walletChainId,
+		isConnecting: isReconnecting,
+	} = useAccount();
+	const { isWaaS, walletKind } = useConnectorMetadata();
+	const [debugInfo, setDebugInfo] = useState<string>('');
+	const [preferredConnector, setPreferredConnector] =
+		useState<ConnectorType>('auto');
+	const [manuallyDisconnected, setManuallyDisconnected] =
+		useState<boolean>(false);
+
+	const walletLoading = isConnecting || isReconnecting;
+	const walletError = false; // wagmi handles errors differently
+
+	useEffect(() => {
+		const storedConnector = localStorage.getItem(
+			'storybook-connector',
+		) as ConnectorType;
+		const defaultConnector = storedConnector || 'auto';
+		setPreferredConnector(defaultConnector);
+	}, []);
+
+	useEffect(() => {
+		if (preferredConnector !== 'auto') {
+			localStorage.setItem('storybook-connector', preferredConnector);
+		}
+	}, [preferredConnector]);
+
+	useEffect(() => {
+		if (wagmiConnected) {
+			setManuallyDisconnected(false);
+		}
+	}, [wagmiConnected]);
+
+	useEffect(() => {
+		if (connectors.length > 0) {
+			const connectorInfo = connectors
+				.map((c) => `${c.name || 'unnamed'} (${c.id || 'no-id'})`)
+				.join(', ');
+			setDebugInfo(`Available: ${connectorInfo}`);
+		}
+
+		// Only try to connect if not connected and not connecting and not manually disconnected
+		if (
+			!wagmiConnected &&
+			!isConnecting &&
+			!manuallyDisconnected &&
+			connectors.length > 0
+		) {
+			let targetConnector: (typeof connectors)[0] | undefined;
+
+			if (preferredConnector === 'auto') {
+				targetConnector = connectors[0];
+			} else {
+				targetConnector = connectors.find((c) => c.id === preferredConnector);
+
+				// Fallback to any connector with the preferred type in name
+				if (!targetConnector) {
+					targetConnector = connectors.find(
+						(c) =>
+							c.name?.toLowerCase().includes(preferredConnector) ||
+							c.id?.toLowerCase().includes(preferredConnector),
+					);
+				}
+			}
+
+			// Final fallback to first available connector
+			if (!targetConnector && connectors.length > 0) {
+				targetConnector = connectors[0];
+			}
+
+			if (targetConnector) {
+				console.log(
+					`Auto-connecting to ${preferredConnector} connector:`,
+					targetConnector.name || 'unnamed',
+					targetConnector.id || 'no-id',
+				);
+				try {
+					connect({ connector: targetConnector });
+				} catch (error) {
+					console.error('Failed to connect to connector:', error);
+					setDebugInfo(
+						`Connection failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
+					);
+				}
+			}
+		}
+	}, [
+		wagmiConnected,
+		isConnecting,
+		manuallyDisconnected,
+		connectors,
+		connect,
+		preferredConnector,
+	]);
+
+	const getConnectionStatus = () => {
+		if (isConnecting || walletLoading) {
+			return { status: 'Connecting to Anvil...', color: '#f59e0b' };
+		}
+
+		if (walletAddress && wagmiConnected) {
+			const accountIndex = TEST_ACCOUNTS.findIndex(
+				(acc) => acc.toLowerCase() === walletAddress.toLowerCase(),
+			);
+			const accountLabel =
+				accountIndex >= 0 ? `Account ${accountIndex}` : 'Custom';
+
+			return {
+				status: `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)} (${accountLabel})`,
+				color: '#10b981',
+			};
+		}
+
+		if (walletError || connectError) {
+			return {
+				status: `Error: ${connectError?.message || 'Connection failed'}`,
+				color: '#ef4444',
+			};
+		}
+
+		return { status: 'Disconnected from Anvil', color: '#ef4444' };
+	};
+
+	const { status, color } = getConnectionStatus();
+
+	const getWalletInfo = () => {
+		if (!wagmiConnected) return null;
+
+		const walletType = isWaaS ? 'WaaS' : 'External';
+		const kind = walletKind || 'Unknown';
+		return `${walletType} (${kind})`;
+	};
+
+	const getAnvilInfo = () => {
+		if (!walletChainId && !wagmiConnected) return null;
+
+		const displayChainId = walletChainId || 'Unknown';
+		return `Anvil Chain: ${displayChainId}`;
+	};
+
+	const handleConnectorChange = (newConnector: ConnectorType) => {
+		setPreferredConnector(newConnector);
+		setManuallyDisconnected(false);
+		if (wagmiConnected) {
+			disconnect();
+		}
+	};
+
+	const handleDisconnect = () => {
+		setManuallyDisconnected(true);
+		disconnect();
+	};
+
+	return (
+		<div
+			style={{
+				position: 'fixed',
+				top: '16px',
+				right: '16px',
+				zIndex: 9999,
+				backgroundColor: '#1f2937',
+				color: 'white',
+				padding: '8px 12px',
+				borderRadius: '8px',
+				fontSize: '12px',
+				fontFamily: 'monospace',
+				border: `2px solid ${color}`,
+				boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'flex-start',
+				gap: '4px',
+				maxWidth: '320px',
+			}}
+		>
+			<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+				<div
+					style={{
+						width: '8px',
+						height: '8px',
+						borderRadius: '50%',
+						backgroundColor: color,
+					}}
+				/>
+				<span>{status}</span>
+			</div>
+
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					gap: '8px',
+					width: '100%',
+				}}
+			>
+				<span style={{ fontSize: '10px', color: '#9ca3af' }}>Connector:</span>
+				<select
+					value={preferredConnector}
+					onChange={(e) =>
+						handleConnectorChange(e.target.value as ConnectorType)
+					}
+					style={{
+						background: '#374151',
+						color: 'white',
+						border: '1px solid #4b5563',
+						borderRadius: '4px',
+						fontSize: '10px',
+						padding: '2px 4px',
+						flex: 1,
+					}}
+				>
+					<option value="auto">Auto</option>
+					<option value="mock">Mock</option>
+					<option value="waas">WaaS</option>
+					<option value="sequence">Sequence</option>
+				</select>
+			</div>
+
+			{wagmiConnected && (
+				<button
+					type="button"
+					onClick={handleDisconnect}
+					style={{
+						background: '#dc2626',
+						color: 'white',
+						border: 'none',
+						borderRadius: '4px',
+						fontSize: '10px',
+						padding: '4px 8px',
+						cursor: 'pointer',
+						width: '100%',
+						marginTop: '4px',
+					}}
+				>
+					Disconnect
+				</button>
+			)}
+
+			{getWalletInfo() && (
+				<div style={{ fontSize: '10px', color: '#9ca3af' }}>
+					Type: {getWalletInfo()}
+				</div>
+			)}
+
+			{getAnvilInfo() && (
+				<div style={{ fontSize: '10px', color: '#9ca3af' }}>
+					{getAnvilInfo()}
+				</div>
+			)}
+
+			{debugInfo && (
+				<div style={{ fontSize: '10px', color: '#9ca3af' }}>{debugInfo}</div>
+			)}
+
+			{(walletError || connectError) && (
+				<div
+					style={{
+						fontSize: '10px',
+						color: '#ef4444',
+						wordBreak: 'break-word',
+					}}
+				>
+					{connectError?.message || 'Wallet connection failed'}
+				</div>
+			)}
+		</div>
+	);
+};

package/.storybook/main.ts

@@ -1,13 +1,19 @@
+import path from 'node:path';
 import type { StorybookConfig } from '@storybook/react-vite';
 import tailwindcssPostcss from '@tailwindcss/postcss';
 
 const config: StorybookConfig = {
 	stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-	addons: ['@storybook/addon-docs', '@storybook/addon-vitest'],
+	addons: [
+		'@storybook/addon-docs',
+		'@storybook/addon-vitest',
+		'msw-storybook-addon',
+	],
 	framework: {
 		name: '@storybook/react-vite',
 		options: {},
 	},
+	staticDirs: ['../public'],
 	typescript: {
 		reactDocgen: 'react-docgen-typescript',
 		reactDocgenTypescriptOptions: {
@@ -33,6 +39,19 @@ const config: StorybookConfig = {
 			plugins: [tailwindcssPostcss()],
 		};
 
+		// Set unique cache directory to prevent conflicts
+		config.cacheDir = path.join(
+			__dirname,
+			'../node_modules/.vite-storybook-sdk',
+		);
+
+		// Configure path aliases to match tsconfig.json
+		config.resolve = config.resolve || {};
+		config.resolve.alias = {
+			...config.resolve.alias,
+			'@test': path.resolve(__dirname, '../test'),
+		};
+
 		// Exclude generated files from react-docgen processing
 		if (config.plugins) {
 			for (const plugin of config.plugins) {

package/.storybook/preview.tsx

@@ -0,0 +1,105 @@
+import { SequenceConnectProvider } from '@0xsequence/connect';
+import type { Preview } from '@storybook/react-vite';
+import { QueryClientProvider } from '@tanstack/react-query';
+
+import { WagmiProvider } from 'wagmi';
+import { MarketplaceProvider } from '../src/react/provider';
+import { ModalProvider } from '../src/react/ui/modals/modal-provider';
+import '../src/index.css';
+import { initialize, mswLoader } from 'msw-storybook-addon';
+import {
+	createTestQueryClient,
+	sequenceConnectConfig,
+	wagmiConfig,
+	wagmiConfigEmbedded,
+	wagmiConfigSequence,
+} from '../test/test-utils';
+import { ConnectionStatus } from './ConnectionStatus';
+
+const testQueryClient = createTestQueryClient();
+
+// Initialize MSW
+initialize({
+	onUnhandledRequest: ({ url, method }) => {
+		// Only warn about unhandled requests to our specific API paths
+		const pathname = new URL(url).pathname;
+		if (pathname.startsWith('/rpc/')) {
+			console.warn(`Unhandled ${method} request to ${url}.`);
+		}
+		// Bypass all other requests (fonts, static assets, etc.)
+	},
+});
+
+// Mock marketplace SDK config for Storybook
+const mockSdkConfig = {
+	projectAccessKey: 'storybook-test-key',
+	projectId: '1',
+};
+
+// Get wagmi config based on localStorage
+const getWagmiConfig = () => {
+	if (typeof window === 'undefined') {
+		return wagmiConfig; // Default for SSR
+	}
+
+	const storedConnector = localStorage.getItem('storybook-connector');
+	const connectorType = storedConnector || 'auto';
+
+	switch (connectorType) {
+		case 'waas':
+			console.log('Using WaaS connector configuration');
+			return wagmiConfigEmbedded;
+		case 'sequence':
+			console.log('Using Sequence connector configuration');
+			return wagmiConfigSequence;
+		default:
+			console.log('Using standard mock connector configuration');
+			return wagmiConfig;
+	}
+};
+
+const preview: Preview = {
+	parameters: {
+		backgrounds: {
+			options: {
+				dark: { name: 'Dark', value: '#333' },
+				light: { name: 'Light', value: '#F7F9F2' },
+			},
+		},
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
+	initialGlobals: {
+		backgrounds: { value: 'dark' },
+	},
+	loaders: [mswLoader],
+	decorators: [
+		(Story) => {
+			const currentWagmiConfig = getWagmiConfig();
+
+			return (
+				<WagmiProvider config={currentWagmiConfig}>
+					<QueryClientProvider client={testQueryClient}>
+						<SequenceConnectProvider
+							config={sequenceConnectConfig.connectConfig}
+						>
+							<MarketplaceProvider config={mockSdkConfig}>
+								<ConnectionStatus />
+								<div style={{ padding: '1rem', minHeight: '100vh' }}>
+									<Story />
+								</div>
+								<ModalProvider />
+							</MarketplaceProvider>
+						</SequenceConnectProvider>
+					</QueryClientProvider>
+				</WagmiProvider>
+			);
+		},
+	],
+};
+
+export default preview;

package/CHANGELOG.md

@@ -1,41 +1,144 @@
 # @0xsequence/marketplace-sdk
 
+## 1.1.0
+
+
+### ✨ Improvements
+
+- Enhanced FooterName component with improved offer acceptance logic and balance-based behavior ([#533](https://github.com/0xsequence/marketplace-sdk/pull/533))
+- Improved PriceInput component styling and user experience ([#532](https://github.com/0xsequence/marketplace-sdk/pull/532))
+- Better event handling in collectible card components ([#528](https://github.com/0xsequence/marketplace-sdk/pull/528))
+- Enhanced loading states and visual feedback across UI components
+- Always import all available networks, even if not used in a collection, to improve swap options from chains not used in the marketplace ([#526](https://github.com/0xsequence/marketplace-sdk/pull/526))
+- Improved chain switching logic with optimistic chain switching ([#521](https://github.com/0xsequence/marketplace-sdk/pull/521))
+- Moved sort parameter outside page object in `useListOffersForCollectible` hook while maintaining backward compatibility ([#531](https://github.com/0xsequence/marketplace-sdk/pull/531))
+- Better TypeScript support and type safety improvements
+- Enhanced documentation and JSDoc comments
+- Enhanced query invalidation in ERC1155 checkout flow
+- Improved cache management for user balances with inactive refetch types
+- Better synchronization between different data sources
+- Enhanced switch chain error modal with current chain detection
+- Improved modal state management and error handling
+- Optimized data fetching patterns in shop card components ([#527](https://github.com/0xsequence/marketplace-sdk/pull/527))
+- Reduced unnecessary re-renders in collectible card variants
+- Improved loading states and skeleton components
+
+### 🐛 Bug Fixes
+
+- Fixed ERC1155 shop pagination where items beyond the first page were missing metadata and sale information
+- Fixed bug in useSearchTokenMetadata to ensure collectionAddress is defined before doing checks for minted tokens
+- Fixed window error when initializing analytics provider in server-side rendering ([#509](https://github.com/0xsequence/marketplace-sdk/pull/509))
+
+
+### 🔧 Internal Improvements
+
+- Updated all workspace dependencies to latest versions ([#530](https://github.com/0xsequence/marketplace-sdk/pull/530))
+
+- Added complexity rules to Biome configuration for better code quality ([#535](https://github.com/0xsequence/marketplace-sdk/pull/535))
+
+- Enhanced formatting and style consistency across the codebase
+- Improved test coverage for critical components
+- Enhanced test utilities and mocking capabilities
+- Dynamic network configuration in tests for better reliability
+- Better error handling in test scenarios
+
+## 1.0.0
+
+🎉 **Production Release** - Sequence Marketplace SDK 1.0! 🎉
+
+#### Complete Marketplace Solution
+
+- **Primary Sales (Shop)**: Full support for Sequence sales contracts (ERC721 v0 and ERC1155 v0 and v1)
+- **Secondary Sales (Market)**: Comprehensive listing and offer management
+
+### 🚀 New features
+
+- Support for Sequence sales contracts (ERC721 v0 and ERC1155 v0 and v1)
+- **New `useProcessStep` hook**: For transaction marketplace api transaction step handling
+- **New buy checkout flow UI**: New checkout flow for buying collectibles, from @0xsequence/checkout
+- Custom wallet class replaced with wagmi hooks and new hooks for wallet operations (useEnsureCorrectChain, useConnectorMetadata, useProcessStep), see breaking changes below
+- All fetching hooks now have a separated query function that can be used with other data fetching libraries or SSR/SSG frameworks
+- All fetching hooks only fetch data when all required parameters are provided
+- Modal style isolation with shadow DOM, preventing global styles from leaking into the document body
+- useSearchTokenMetadata now have an option to only return token metadata for minted tokens `onlyMinted: true`
+- MarketplaceConfig is by now by default never invalidated, allow fetching only serverside
+
+- **UI/UX Improvements**:
+  - Added optional action buttons to buy flow success modal
+  - Fixed ERC1155 quantity modal decimal precision handling
+  - Fixed collectible card image opacity issues
+  - Improved media display with object-contain for collectible cards
+
+### ⚠️ Breaking Changes
+
+By default, the SDK now uses shadow DOM for all modals. To disable this, you can set the `useShadowDOM` flag to `false` in the `SdkConfig`. Other components (media, collectible card etc) are rendered to the document body and requires Tailwind.
+`useShopCollectibleSaleData` hook has been removed. Instead, use `useErc721SaleDetails` and `useErc1155SaleDetails` hooks leveraging marketplace-api
+
+- **Wallet**: Complete removal of custom wallet client in favor of wagmi hooks
+  - Replace `wallet.address` with `useAccount()` hook from wagmi
+  - Replace `wallet.isWaaS` with `useConnectorMetadata().isWaaS`
+  - Replace `wallet.kind` with `useConnectorMetadata().walletKind`
+  - Replace `wallet.switchChain` with `useEnsureCorrectChain` hook
+  - Replace `wallet.signTransactionStep` and `wallet.transferStep` with `useProcessStep` hook
+
+### 🐛 Bug Fixes
+
+- Fixed ERC1155 quantity modal decimal handling with proper min/max calculations
+- Fixed pagination issues with minted ERC721 sale tokens
+- Resolved potential state management race conditions in action modals
+- Fixed decimal handling in quantity inputs
+- Fixed collectible card image opacity issues
+- Fixed ERC721 sale contract quantity tracking for V1 contracts
+- Fixed negative remaining supply display in shop cards
+- Improved error handling when quantity values are 0
+- Fixed token approval reset when transaction steps don't exist
+- Auto fee selection for embedded wallets bug fix, now only applies for cancelling orders
+
+### 🔧 Internal Improvements
+
+#### Code Organization
+
+- Reorganized hooks into logical subdirectories (data, transactions, ui, config)
+- Removed duplicate hooks and consolidated functionality
+- Increased test coverage
+- Some internal hooks have been renamed for consistency
+
 ## 0.10.0
 
 ### New Features
 
 **Alternative Wallet integration Support**
+
 - Added support for using any wallet connection library (e.g., Privy, Rainbowkit, Dynamic Labs etc.) instead of Sequence Connect
 - You can now provide a custom `openConnectModal` function to the `MarketplaceProvider` to integrate with your preferred wallet connection flow.
 
-
 Example with any wallet provider:
+
 ```tsx
-import { MarketplaceProvider } from '@0xsequence/marketplace-sdk/react';
-import { useConnectModal } from '@my-wallet-provider/connect-modal';
+import { MarketplaceProvider } from "@0xsequence/marketplace-sdk/react";
+import { useConnectModal } from "@my-wallet-provider/connect-modal";
 
 function App() {
   const { openConnectModal } = useConnectModal();
-  
+
   return (
-    <MarketplaceProvider 
-      config={sdkConfig} 
-      openConnectModal={openConnectModal}
-    >
+    <MarketplaceProvider config={sdkConfig} openConnectModal={openConnectModal}>
       {/* Your marketplace app */}
     </MarketplaceProvider>
   );
 }
 ```
 
-See the [Alternative Wallet Integration Playground](https://github.com/0xsequence/marketplace-sdk/tree/master/playgrounds/alternative-wallets) for a complete example with Dynamic Labs 
+See the [Alternative Wallet Integration Playground](https://github.com/0xsequence/marketplace-sdk/tree/master/playgrounds/alternative-wallets) for a complete example with Dynamic Labs
 
 **Enhanced Media Component**
+
 - Added `shouldListenForLoad` prop for controlling asset load event handling
 - Introduced `mediaClassName` prop for controlling the inner media element
 - Improved asset loading behavior with conditional handling
 
 **Shop & Market Improvements**
+
 - Added `ShopActions` component for handling collectible purchase interactions
 - Enhanced `CollectibleDetails` to conditionally display information based on marketplace type
 - Improved ERC1155 sale item handling - buy button now hidden when out of stock
@@ -44,19 +147,23 @@ See the [Alternative Wallet Integration Playground](https://github.com/0xsequenc
 ### API Updates
 
 **New Hooks & Queries**
+
 - `useGetCountOfPrimarySaleItems` - Now uses `useQuery` instead of `useInfiniteQuery`
 - Added `contractAddress` parameter to `TokenBalancesParams` for more precise balance queries
 
 **Analytics & Tracking**
+
 - Enhanced buy modal tracking to track cart abandonment
 
 ### Developer Experience
 
 **Testing & Documentation**
+
 - Expanded test coverage for critical components
 - Added JSDoc documentation improvements
 
 **Build & Configuration**
+
 - Fixed SSR issues with React Day Picker in React-Router V7
 
 ### Bug Fixes

package/compile-tailwind.js

@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+import fs from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import postcss from 'postcss';
+import postcssConfig from './postcss.config.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+/**
+ * @param {Object} options
+ * @param {boolean} options.copyCSS - Whether to copy CSS to dist
+ */
+export async function generateStyles(options = {}) {
+	const copyCSS = options.copyCSS ?? false;
+
+	const sdkPath = join(__dirname, './');
+	const inputCSSRelative = 'src/styles/index.css';
+	const outputTSPath = join(sdkPath, 'src/styles/styles.ts');
+	const outputCSSDir = join(sdkPath, 'dist/styles');
+	const outputCSSPath = join(outputCSSDir, 'index.css');
+
+	try {
+		const inputCSSPath = join(sdkPath, inputCSSRelative);
+		const cssContent = await fs.readFile(inputCSSPath, 'utf-8');
+
+		const result = await postcss(postcssConfig.plugins).process(cssContent, {
+			from: inputCSSPath,
+		});
+
+		const css = `/* Modified Tailwind CSS, to avoid issues with shadow DOM, see Marketplace SDK - compile-tailwind.js and postcss.config.mjs */
+${result.css}`;
+
+		const tsContent = `export const styles = String.raw\`${css}\`;`;
+
+		await fs.writeFile(outputTSPath, tsContent);
+
+		if (copyCSS) {
+			await fs.mkdir(outputCSSDir, { recursive: true });
+			await fs.writeFile(outputCSSPath, css);
+		}
+
+		console.log('✅ Styles compiled successfully');
+		return { css, tsContent };
+	} catch (error) {
+		console.error('❌ Failed to compile styles:', error.message);
+		throw error;
+	}
+}
+
+// Execute, if run as standalone script
+if (import.meta.url === `file://${process.argv[1]}`) {
+	generateStyles();
+}